ET-Tasarım | Tasarım Dünyası

Mavi City v1

Tasarım Üstü:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 3.0 License

Name       : Reinstated
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20120326
-->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<title>Reinstated by nodethirtythree + Free CSS Templates</title>
		<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="jquery.dropotron-1.0.js"></script>
		<script type="text/javascript" src="init.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="splash">
				<img src="https://img.webme.com/pic/e/et-tasarim/pic1.jpg" alt="" />
			</div>
			<div id="menu">
				<ul>
					<li><a href="#">Homepage</a></li>
					<li>
						Services <span class="arrow"></span>
						<ul>
							<li class="first"><a href="#">Sed imperdiet</a></li>
							<li><a href="#">Libero felis dolor</a></li>
							<li>
								Pulvinar duis <span class="arrow"></span>
								<ul>
									<li class="first"><a href="#">Consequat et magna amet</a></li>
									<li><a href="#">Nullam aliquam ridiculus</a></li>
									<li><a href="#">Sed imperdiet adipiscing lorem</a></li>
									<li><a href="#">Feugiat sed imperdiet</a></li>
									<li class="last"><a href="#">Libero etiam felis dolor</a></li>
								</ul>
							</li>
							<li><a href="#">Cras nulla ridiculus</a></li>
							<li><a href="#">Feugiat imperdiet</a></li>
							<li class="last"><a href="#">Libero felis dolor</a></li>
						</ul>
					</li>
					<li><a href="#">About</a></li>
					<li>
						Clients <span class="arrow"></span>
						<ul>
							<li class="first"><a href="#">Sed imperdiet</a></li>
							<li><a href="#">Libero felis dolor</a></li>
							<li>
								Pulvinar duis <span class="arrow"></span>
								<ul>
									<li class="first"><a href="#">Consequat et magna amet</a></li>
									<li><a href="#">Nullam aliquam ridiculus</a></li>
									<li><a href="#">Sed imperdiet adipiscing lorem</a></li>
									<li><a href="#">Feugiat sed imperdiet</a></li>
									<li class="last"><a href="#">Libero etiam felis dolor</a></li>
								</ul>
							</li>
							<li><a href="#">Cras nulla ridiculus</a></li>
							<li><a href="#">Feugiat imperdiet</a></li>
							<li class="last"><a href="#">Libero felis dolor</a></li>
						</ul>
					</li>
					<li><a href="#">Photos</a></li>
					<li><a href="#">Links</a></li>
					<li class="last"><a href="#">Contact</a></li>
				</ul>
				<br class="clearfix" />
			</div>
			<div id="header">
				<div id="logo">
					<h1><a href="#">Reinstated</a></h1>
				</div>
				<div id="search">
					<form action="" method="post">
						<div>
							<input class="form-text" name="search" size="32" maxlength="64" />
						</div>
					</form>
				</div>
			</div>

Tasarım Altı:

<div id="page">
				<div id="content">
					<div class="box">
						<h2>Welcome to Reinstated</h2>
						<p>
							This is <strong>Reinstated</strong>, a free standards-compliant CSS template by <a href="http://nodethirtythree.com/">nodethirtythree</a> and <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The dropdowns are powered by <a href="http://nodethirtythree.com/jquery/dropotron">Dropotron</a>, and the banner/background images are from <a href="http://pdphoto.org">PDPhoto.org</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 3.0</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 id="col1">
						<h3>Integer consequat</h3>
						<ul class="section-list">
							<li class="first"><h4>Nunc dictum proin</h4><span>Ridiculus nulla viverra aliquam donec ridiculus fringilla consectetur elit suscipit erat vestibulum.</span></li>
							<li><h4>Magnis viverra lacinia</h4><span>Lectus pellentesque adipiscing tincidunt pulvinar penatibus elementum orci curae suspendisse sed faucibus.</span></li>
							<li><h4>Accumsan auctor dictum</h4><span>Congue in ridiculus libero massa ac eu quis vitae eget egestas venenatis.</span></li>
							<li class="last"><h4>Purus interdum rhoncus</h4><span>Lacus mauris ornare neque id ligula tempus ut lorem vel consectetur lorem.</span></li>
						</ul>
					</div>
					<div id="col2">
						<h3>Dolore penatibus</h3>
						<p>
							Egestas massa vivamus eget rutrum pulvinar. Cursus ornare porta nascetur urna.
						</p>
						<ul class="list">
							<li class="first"><a href="#">Suspendisse feugiat nec lectus</a></li>
							<li><a href="#">Pulvinar ut facilisis duis</a></li>
							<li><a href="#">Sapien dolor integer ultricies</a></li>
							<li><a href="#">Feugiat arcu congue imperdiet</a></li>
							<li><a href="#">Libero felis amet dolor</a></li>
							<li><a href="#">Pulvinar ut facilisis duis</a></li>
							<li><a href="#">Cras nulla lorem ridiculus</a></li>
							<li><a href="#">Feugiat arcu sed imperdiet</a></li>
							<li><a href="#">Libero felis dolor lorem</a></li>
							<li class="last"><a href="#">Nibh tellus quis egestas</a></li>
						</ul>
					</div>
					<br class="clearfix" />
				</div>
				<div id="sidebar">
					<div class="box">
						<h3>Morbi pharetra</h3>
						<ul class="list">
							<li class="first"><a href="#">Pharetra massa convallis</a></li>
							<li><a href="#">Cras nulla ridiculus</a></li>
							<li><a href="#">Feugiat arcu tempus congue</a></li>
							<li><a href="#">Libero felis magna dolor</a></li>
							<li><a href="#">Pulvinar ut facilisis duis</a></li>
							<li><a href="#">Cras nulla ridiculus</a></li>
							<li><a href="#">Feugiat arcu volutpat congue</a></li>
							<li><a href="#">Libero felis dolor</a></li>
							<li class="last"><a href="#">Venenatis et vel duis</a></li>
						</ul>
					</div>
					<div class="box">
						<h3>Magna luctus</h3>
						<p>
							Ultrices odio amet diam sollicitudin primis penatibus. Ullamcorper nulla elementum aliquam dui a nisl montes.
						</p>
					</div>
				</div>
				<br class="clearfix" />
			</div>
		</div>
		<div id="footer">
			© 2012 Sitename.com. | Powered by <a href="http://nodethirtythree.com/jquery/dropotron">Dropotron</a> | Design by <a href="http://nodethirtythree.com">nodethirtythree</a> and <a href="http://www.freecsstemplates.org/">CSS Templates</a>.
		</div>
	</body>
</html>

Css Kodu:

h1#title{display: none;} 
h2#title span {display: none;} 
div.header{display: none;} 
li.nav_element{list-style-type: none;} 
li.nav_element{display: none;}

* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: underline;
	color: #222;
}

a:hover {
	text-decoration: none;
}

body {
	font-size: 11.5pt;
	line-height: 1.75em;
	color: #888;
	background: #D0E3F1 url(https://img.webme.com/pic/e/et-tasarim/bg.jpg) top center no-repeat;
	letter-spacing: -0.02em;
}

body,input {
	font-family: Arial, sans-serif;
}

br.clearfix {
	clear: both;
}

h1,h2,h3,h4 {
	text-transform: uppercase;
	letter-spacing: -1px;
	font-weight: normal;
}

h2 {
	font-size: 1.75em;
}

h2,h3,h4 {
	color: #222;
	font-family: Oswald, sans-serif;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1em;
}

img.alignleft {
	margin: 5px 20px 20px 0;
	float: left;
}

img.aligntop {
	margin: 5px 0 20px 0;
}

p {
	margin-bottom: 1.5em;
}

ul {
	margin-bottom: 1.5em;
}

ul h4 {
	margin-bottom: 0.35em;
}

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

#footer {
	text-align: center;
	padding: 40px 0 100px 0;
	font-size: 0.9em;
}

#footer a {
	color: #555;
}

#header {
	color: #FFF;
	position: relative;
	height: 80px;
	background: #447289 url(https://img.webme.com/pic/e/et-tasarim/bg2.jpg) bottom center no-repeat;
	width: 910px;
	padding: 35px;
}

#logo {
	position: absolute;
	top: 60px;
}

#logo a {
	color: #FFF;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

#logo h1 {
	font-size: 3em;
	font-family: Oswald, sans-serif;
}

#menu {
	line-height: 60px;
	font-family: Oswald, sans-serif;
	padding: 0 35px 0 35px;
	width: 910px;
	height: 60px;
	font-size: 1.2em;
	background: #447289;
	text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

#menu {
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #FFF;
}

#menu a {
	color: #FFF;
	text-decoration: none;
}

#menu ul {
	list-style: none;
}

#menu ul li {
	padding: 0 20px 0 20px;
	height: 60px;
	display: inline-block;
}

#menu ul li.first {
	padding-left: 0;
}

#menu ul li.active {
	background: #336177;
}

#menu .arrow {
	display: inline-block;
	margin: 0 0 0 0.5em;
	position: relative;
	width: 0;
	height: 0;
	top: -3px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid #254656;
}

#page {
	color: #656565;
	padding: 60px 35px 25px 35px;
	margin: 0;
	width: 910px;
	position: relative;
}

#page strong {
	color: #222;
}

#page .section-list {
	list-style: none;
	padding-left: 0;
}

#page .section-list li {
	padding: 20px 0 20px 0;
	clear: both;
}

#page ul {
	list-style: none;
}

#page ul li {
	padding: 10px 0 10px 0;
	border-top: dotted 1px #CCC;
}

#page ul li.first {
	padding-top: 0;
	border-top: 0;
}

.box {
	margin: 0 0 30px 0;
	overflow: hidden;
}

#col1 {
	float: left;
	width: 310px;
	overflow: hidden;
}

#col2 {
	width: 310px;
	overflow: hidden;
	margin: 0 0 0 340px;
}

#search {
	position: absolute;
	top: 58px;
	right: 35px;
}

#search input.form-text {
	padding: 8px 42px 8px 12px;
	width: 175px;
	border: 0;
	background: #294C5D url(https://img.webme.com/pic/e/et-tasarim/search.gif) top right no-repeat;
	border-top: solid 1px #1F3C49;
	color: #D3DDE2;
}

#sidebar {
	width: 225px;
	margin: 0 0 0 685px;
	padding: 0;
}

#splash {
	height: 180px;
	position: relative;
	width: 980px;
	background: #FFF;
	overflow: hidden;
}

#wrapper {
	width: 980px;
	position: relative;
	background: #fff;
	margin: 80px auto 0 auto;
}

.dropotron {
	min-width: 200px;
	padding: 20px 15px 20px 15px;
	background: #346176 url(https://img.webme.com/pic/e/et-tasarim/bg4.jpg) top left no-repeat;
	list-style: none;
	line-height: 2.75em;
}

.dropotron li {
	text-shadow: 0 1px 1px rgba(0,0,0,0.8);
	color: #D3DDE2;
	position: relative;
	border-top: dotted 1px #4f798e;
	padding: 0 20px 0 20px;
}

.dropotron li:hover {
	background: #294C5D;
}

.dropotron li:hover .arrow {
	border-left-color: #153646;
}

.dropotron li.first {
	border-top: 0;
}

.dropotron li.last {
	border-bottom: 0;
}

.dropotron li a {
	color: #E3EAED;
	text-decoration: none;
}

.dropotron .arrow {
	display: inline-block;
	margin: 0 0 0 0.5em;
	position: absolute;
	right: 15px;
	top: 15px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 7px solid #254656;
}

ET Tasarım

ET-Tasarım | Tasarım Dünyası

Mavi City v1

Mavi City v1

Kategoriler

Reklamlar

ET Tasarım

ET-Tasarım | Tasarım Dünyası

Mavi City v1

Mavi City v1

Kategoriler

Reklamlar