T-K-O-T

tasarim networked

Networked Tasarımı

Designer: Ömer Faruk Nemutlu | 20 Ocak 2014

Networked tasarımı ticari amaçla yapılmış bir tasarımdır.Kişisel blog olarak'ta kullanılabilir.Karar size kalmış ama güzel bir tasarım onu söyliyim.Tüm Hakları Açıktır.

NOT: Tasarımı doğru çalışması için alttaki linkten resimleri indiriniz.

Tasarımın Üstündeki Kod

Tasarımın Altındaki Kod

CSS Kodu

body {
	margin: 0;
	padding: 0;
	background: #273555 url(images/wrapper-bg.png) repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #0082B4;
}

a:hover {
}

img.border {
	border: 6px solid #E1F1F6;
}

img.alignleft {
	float: left;
	margin-right: 25px;
}

img.alignright {
	float: right;
}

img.aligncenter {
	margin: 0px auto;
}

#wrapper {
	overflow: hidden;
	margin: 0px auto;
	background: url(images/wrapper-img.png) no-repeat left top;
}

/* Header */

#header {
	overflow: hidden;
	width: 900px;
	height: 100px;
	margin: 0 auto;
}

/* Logo */

#logo {
	float: left;
	height: 60px;
	margin: 0;
	padding: 0px 0px 0px 0px;
	color: #FFFFFF;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
}

#logo h1 {
	float: left;
	padding-left: 30px;
	letter-spacing: -3px;
	text-transform: lowercase;
	font-family: 'Oswald', sans-serif;
	font-size: 64px;
}

#logo span {
	letter-spacing: normal;
	font-size: 22px;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #FFFFFF;
}

/* Search */

#search {
	float: right;
	width: 280px;
	padding: 0;
}

#search form {
	float: right;
	height: 41px;
	margin: 0;
	padding: 40px 40px 0 0px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 220px;
	height: 35px;
	padding: 0px 10px;
	border: none;
	background: #636900;
	line-height: 35px;
	letter-spacing: 1px;
	text-transform: lowercase;
	font-family: 'Abel', sans-serif;
	font-size: 16px;
	color: #FFFFFF;
}

#search-submit {
	display: none;
}

/* Menu */

#menu {
	width: 820px;
	height: 60px;
	margin: 0 auto;
	padding: 0px 40px;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	height: 40px;
	margin-right: 1px;
	padding: 20px 20px 0px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Abel', sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}

#menu .current_page_item a {
	background: url(images/page-content-bg.png) repeat;
}

#menu a:hover {
	background: url(images/page-content-bg.png) repeat;
}

#splash {
	width: 1000px;
	height: 260px;
	margin: 0px auto;
	background: url(images/img05.jpg) no-repeat left top;
}

/* Page */

#page {
	overflow: hidden;
	width: 900px;
	margin: 0px auto;
	padding: 50px 40px;
	background: url(images/page-content-bg.png) repeat; 
}

/* Content */

#content {
	float: left;
	width: 520px;
	padding: 0px 20px;
}

.post {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #0E2754;
}

.post .title {
	padding-bottom: 20px;
	letter-spacing: -1px;
	text-transform: lowercase;
	color: #FFFFFF;
}

.post .title a {
	border: none;
	color: #FFFFFF;
}

.post .meta {
	padding-bottom: 5px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}

.post .meta a {
}

.post .entry {
	text-align: justify;
	margin-bottom: 25px;
	padding: 10px 0px 0px 0px;
}

.links {
	display: block;
	width: 96px;
	padding: 2px 0px 2px 0px;
	background: #A53602;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #FFFFFF;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 330px;
	padding: 0px 0px 0px 0px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 15px;
	padding-bottom: 30px;
}

#sidebar li li {
	padding-left: 15px;
	line-height: 35px;
	background: url(images/img07.jpg) no-repeat left 14px;
	border-bottom: 1px solid #EFF4F5;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 38px;
	padding: 12px 0 0 15px;
	letter-spacing: -1px;
	color: #95C500;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 20px 20px 20px;
	text-align: justify;
}

#sidebar a {
	border: none;
	color: #7F7F81;
}

#sidebar a:hover {
	text-decoration: underline;
	color: #95C500;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	width: 900px;
	height: 140px;
	margin: 0px auto;
	background: url(images/footer-shadow-bg.png) no-repeat left top;
}

#footer p {
	margin: 0;
	padding-top: 30px;
	line-height: normal;
	text-transform: lowercase;
	text-align: center;
	font-size: 12px;
	color: #889CB1;
}

#footer a {
	text-decoration: underline;
	color: #889CB1;
}

#about {
	overflow: hidden;
	width: 820px;
	margin: 0px auto;
	padding: 40px 40px;
}

#about .title {
	padding-bottom: 10px;
	letter-spacing: -1px;
	text-transform: lowercase;
	color: #A26500;
}

#two-column {
	padding-top: 30px;
}

#two-column h2 {
	padding-bottom: 20px;
	letter-spacing: -1px;
	text-transform: lowercase;
	font-size: 30px;
	color: #A26500;
}

#two-column #column1 {
	float: left;
	width: 390px;
}

#two-column #column2 {
	float: right;
	width: 390px;
}

.list-style1 {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.list-style1 li {
	padding: 5px 0px;
	border-top: 1px solid #EEEEEE;
}

.list-style1 a:hover {
	text-decoration: underline;
}

.list-style1 .first {
	border-top: none;
}

Ana Sayfa'ya Eklenecek Kod

<div class="post">
			<h2 class="title">Praesent scelerisque scelerisque</h2>
			<p>This is <strong>Networked</strong>, a free, fully standards-compliant CSS template by <a href="http://tkot.tr.gg/" rel="nofollow">Bilişim Teknolojileri</a>. The picture in this template is from <a href="http://kisiselyazi.tr.gg/">Foto Cihan</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Licens Home</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it <img src="//theme.webme.com/smiles/smiley.gif" border="0" width="15" height="15" alt="" /> </p>
		</div>
		<div class="post">
			<h2 class="title">Eget at eu aliquet eleifend</h2>
			<p> <img src="images/pics01.jpg" alt="" width="250" height="250" class="alignleft" />Placerat cras ultrices tristique. Parturient ut ultrices viverra fusce ultricies curae. Phasellus ultrices semper metus facilisis. Tristique quisque ante neque morbi. Luctus aenean risus etiam sodales lobortis lacinia. Hendrerit arcu interdum eu vivamus in nunc. Mollis tincidunt natoque libero posuere auctor quam aliquam. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. </p>
			<p>Placerat cras ultrices tristique. Parturient ut ultrices viverra fusce ultricies curae. Phasellus ultrices semper metus facilisis. Tristique quisque ante neque morbi. Luctus aenean risus etiam sodales lobortis lacinia. Hendrerit arcu interdum eu vivamus in nunc. Mollis tincidunt natoque libero posuere auctor quam aliquam. Pellentesque viverra vulputate enim. <br />
			</p>
			<ul class="list">
				<li class="first"><a href="#">Sapien malesuada dui fringilla dis phasellus iaculis</a></li>
				<li><a href="#">Lacus iaculis varius ridiculus lacus fringilla amet ipsum</a></li>
				<li><a href="#">Pharetra euismod eleifend morbi suspendisse placerat elementum urna</a></li>
				<li><a href="#">Iaculis amet arcu sodales enim ipsum aenean</a></li>
				<li class="last"><a href="#">Quis volutpat tempor varius lacinia egestas tincidunt diam</a></li>
			</ul>
		</div>
		<div class="post">
			<h2 class="title">Egestas lorem praesent feugiat</h2>
			<p> <img src="images/pics01.jpg" alt="" width="250" height="250" class="alignleft" />Placerat cras ultrices tristique. Parturient ut ultrices viverra fusce ultricies curae. Phasellus ultrices semper metus facilisis. Tristique quisque ante neque morbi. Luctus aenean risus etiam sodales lobortis lacinia. Hendrerit arcu interdum eu vivamus in nunc. Mollis tincidunt natoque libero posuere auctor quam aliquam. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. </p>
			<p>Duis aliquam ultrices tincidunt feugiat. Laoreet dignissim sociis penatibus. Elit ut lorem euismod. Facilisis mus interdum fringilla magna cubilia fermentum gravida. Pulvinar nec venenatis tristique. Diam consectetur elit augue volutpat. Eleifend lacus quisque arcu auctor tellus. </p>
			<ul class="list">
				<li class="first"><a href="#">Fermentum non vulputate nunc curabitur integer</a></li>
				<li><a href="#">Odio molestie est vestibulum non volutpat montes nascetur</a></li>
				<li><a href="#">Quis proin vulputate vulputate sed volutpat nec aliquam</a></li>
				<li><a href="#">Feugiat condimentum magna dignissim justo magnis mauris</a></li>
				<li class="last"><a href="#">Magna convallis curabitur suspendisse auctor risus in fusce</a></li>
			</ul>
		</div>

Tasarım Resimlerini İndir!

tasarim networked

Networked Tasarımı

Tasarımın Üstündeki Kod

Tasarımın Altındaki Kod

CSS Kodu

Ana Sayfa'ya Eklenecek Kod

Sinemalar'da

Site Settings Duyuru

Kategoriler

Download Bölümü

Oyunlar [Games]

Filmler [Movies]

Oyunlar(Games) Hack

Resim Galerisi

Link Listesi

Sosyal Medya'da Biz!