nautica
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nautica</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*
project: Nautica (free template)
author: Luka Cvrk
Solucija (www.solucija.com)
*/
*{margin:0;padding:0;}:focus,:active {outline:0}ul,ol{list-style:none}img{border:0}
body { font: .74em Sans-Serif; color: #444; background: #f4f4f4; line-height: 1.6em; }
a { text-decoration: none; color: #008080; }
p { margin: 0 0 15px; }
.wrap { margin: 0 auto; width: 960px; }
#header { height: 160px; background: #080808 url(nautica-images/bg.jpg) no-repeat center top; color: #ccc; margin: 0 0 30px; }
#header p { float: right; margin: 20px 0 0; }
#logo { float: left; margin: 40px 20px 50px 0; color: #fff; letter-spacing: .2em; font-size: 1.9em; }
#logo a { color: #fff; }
h1 { letter-spacing: -0.04em; font-size: 1.8em; text-shadow: 1px 1px 1px #000; }
h2 { font-size: 1.4em; text-shadow: 1px 1px 1px #fff; margin: 0 0 10px; color: #008080; }
h3 { font-size: 1.2em; margin: 0 0 6px; }
#menu { clear: both; padding: 13px 0 0; }
#menu li { display: inline; font-size: 1.2em; }
#menu li a { float: left; padding: 0 22px 0 0; margin: 0 22px 0 0; color: #ddd; border-right: 1px solid #505052; }
#menu li.last a { border: 0; padding: 0; }
#menu li a:hover { color: #fff; }
#menu li a.current { font-weight: bold; color: #fff; }
#main { clear: left; float: left; width: 690px; }
.l { float: left; width: 310px; }
.r { float: right; width: 330px; }
.l img, .r img { float: left; margin: 0 13px 5px 0; border: 2px solid #fff; }
.line { clear: both; border-bottom: 1px dotted #ccc; padding: 10px 0 0; margin: 0 0 20px; }
#side { float: right; width: 225px; color: #808080; background: #fff; padding: 11px; margin: 0 0 20px; }
#side a { color: #444; }
#side li { padding: 0 0 10px; }
#footer { clear: both; height: 120px; padding: 20px 0; color: #888; border-top: 1px dotted #ccc; }
#footer ul { float: left; width: 140px; }
#footer ul li { padding: 0 0 3px; }
#footer p { float: right; width: 400px; text-align: right; }
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<h1 id="logo"><a href="#">NAUTICA</a></h1>
<p><br />
Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul id="menu">
<li><a class="current" href="#">Home</a></li>
<li><a href="#">Underwater Gear</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Equipment</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Become a Partner</a></li>
<li><a href="#">About Us</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="wrap">
<div id="main">
<div class="l">
<h2>Lifestyle</h2>
<h3>Duis aute irure dolor in reprehenderit</h3>
<img src="nautica-images/img1.jpg" alt="" />
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#">» Read More</a></p>
</div>
<div class="r">
<h2>Sed ut perspiciatis unde omnis</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Nemo enim ipsam voluptatem</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Sed ut perspiciatis unde omnis</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="line"></div>
<div class="l">
<h2>Nemo enim ipsam voluptatem</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="r">
<h2>Nemo enim ipsam voluptatem</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="side">
<ul>
<li><a href="#">Esse cillum dolore</a><br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li><a href="#">Esse cillum dolore</a><br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li><a href="#">Esse cillum dolore</a><br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li><a href="#">Esse cillum dolore</a><br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</div>
<div id="footer">
<ul>
<li class="title">Item group #1</li>
<li><a href="#">Ut enim ad minim</a></li>
<li><a href="#">Ut enim ad minim</a></li>
<li><a href="#">Ut enim ad minim</a></li>
</ul>
<ul>
<li class="title">Item group #2</li>
<li><a href="#">Ut enim ad minim</a></li>
<li><a href="#">Ut enim ad minim</a></li>
<li><a href="#">Ut enim ad minim</a></li>
</ul>
<p>Design: Luka Cvrk - <a href="http://www.solucija.com">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category