nautica08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Nautica08</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/* This CSS style sheet was developed by www.studio7designs.com for opensourcetemplates.org ... Please email if you have any questions aran@studio7designs.com Have fun! */
body{
background:#ffffff url('nautica08-images/bg.jpg') top center repeat-x;
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#blogtitle{
width:100%;
margin:0px auto;
padding:0 0 5px 0;
font-size:1.1em;
line-height:1.2em;
}
#small{
positon:relative;
padding-left: 5px;
}
#small2{
positon:relative;
float:right;
margin-top: -15px;
}
#blogtitle a:link, a:visited{
color:#b8ce83;
text-decoration:none;
}
#blogtitle a:hover, a:active{
color:#fff;
text-decoration:none;
}
UL.BLUE {
list-style: url(nautica08-images/bullet.jpg) disc;
font-size: 1.1em;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
margin-top: 116px;
background-image:url("nautica08-images/strips_onside.jpg");
background-repeat:repeat-y;
font-size:1.0em;
padding-left: 12px;
padding-top: 8px;
}
#leftcontent p{padding-right:10px; margin-left: 5px; color:#888; font-size:1em;}
#leftcontent a, a:link { color:#888; font-weight:500;}
#leftcontent a:hover, a:active{ color:#FF6666;}
#centercontent {
margin-top: 37px;
background:#fff;
margin-left: 199px;
margin-right:199px;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
padding:20px;
}
#centercontent p {color:#888;}
#centercontent a, a:link { color:#006633;}
#centercontent a:hover, a:active{ color:#FF6666;}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
.centercontentleft {float:left; width:40%; height:200px; background-color:#fff; text-align:left;
border:dashed 2px #ccc; margin: 4px 10px 5px 10px; padding:6px; font-size:1.1em; color:#666666;}
.centercontentright {float:right; width:30%; height:100px; background-color:#fff; text-align:left;
border:dashed 2px #ccc; margin: 4px 10px 5px 10px; padding:6px; font-size:1.1em; color:#666666;}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
font-size:1.1em;
background-image:url("nautica08-images/strips_onside.jpg");
background-repeat:repeat-y;
margin-top: 116px;
padding-left: 5px;
padding-right: 8px;
padding-top: 8px;
}
#rightcontent p {color:#888;}
#rightcontent a, a:link { color:#888; font-weight:600;}
#rightcontent a:hover, a:active{ color:#FF6666;}
#banner {
background:#fff;
height:40px;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
html>body #banner {
height:39px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}
h1 {
font-size:2.5em;
float:right;
color:#ccc;
padding-top:15px;
}
h3 {
font-size:14px;
color:#999;
}
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
#rightcontent p {
font-size:11px
}
.introduction ul, #introduction li {
text-align:center;
list-style: none;
margin: 0;
padding: 0;
}
.introduction a {
border-bottom: none;
color:#999999;
}
.introduction h3{
text-align: center;
position:static;
}
/* ~~~~~~~~~ PROPS FOR THE MENU GO OUT TO EXPLODING-BOY.COM ~~~~~~~~~ */
#topmenu {
position: absolute;
top: 45px;
left: 240px;
width: 600px;
font-size:100%;
margin: 0 0 50px 0;;
line-height:normal;
height: 35px;
}
#topmenu ul {
margin:0;
padding:0px 0px 0 0px;
list-style:none;
}
#topmenu li {
display:inline;
margin:0;
padding:0;
}
#topmenu a {
float:left;
background:url(nautica08-images/menuleft.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#topmenu a span {
float:left;
display:block;
background:url(nautica08-images/menuright.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#888;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#topmenu a span {float:none;}
/* End IE5-Mac hack */
#topmenu a:hover span {
color:#999999;
}
#topmenu a:hover {
background-position:0% -42px;
}
#topmenu a:hover span {
background-position:100% -42px;
}
/* ~~~~~~~~~ END MENU ~~~~~~~~~ */
/* ~~~~~~~~~ BEGIN FOOTER ~~~~~~~~~ */
#footer{
height:329px;
background:#000 url('nautica08-images/bg.jpg') top center repeat-x;
text-align: center;
padding-top: 8px;
clear: both;
float: none;
margin-left: -10px;
margin-right: -10px;
margin-bottom: -20px;
}
#footer a, a:link {
color:#999999;
text-decoration: none;
}
#footer a:hover {
color:#A5CE77;
text-decoration: none;
}
/* ~~~~~~~~~ END FOOTER~~~~~~~~~ */
/* ~~~~~~~~~ BOXES AT BOTTOM OF PAGE ~~~~~~~~~ */
.centercontentleftb {float:left; width:45%; height:200px; background-color:#31412c; text-align:left;
border:dashed 1px #888; margin: 50px 10px 5px 10px; padding:6px; font-size:1.1em; color:#fff;}
.centercontentleftimg {float:left; width:45%; height:45%x; background-color:#31412c; text-align:left;
border:dashed 1px #888; padding:6px; font-size:1.1em; color:#fff;}
.centercontentrightimg {float:right; width:45%; height:45%; background-color:#31412c; text-align:left;
border:dashed 1px #888; padding:6px; font-size:1.1em; color:#fff;}
.centercontentrightb {float:right; width:45%; height:200px; background-color:#31412c; text-align:left;
border:dashed 1px #888; margin: 50px 13px 5px 10px; padding:6px; font-size:1.1em; color:#fff;}
.centercontentleftimg {float:left; width:45%; height:45%; background-color:#31412c; text-align:left;
border:dashed 1px #888; padding:6px; font-size:1.1em; color:#fff;}
.centercontentrightimg {float:right; width:45%; height:45%; background-color:#31412c; text-align:left;
border:dashed 1px #888; padding:6px; font-size:1.1em; color:#fff;}
</style>
</head>
<body>
<!-- start top menu and blog title-->
<div id="blogtitle">
<div id="small"><a href="http://www.free-css.com/">Your Blog news</a> or current info and links ::</div>
<div id="small2"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Services</a> | <a href="http://www.free-css.com/">Projects</a> | <a href="http://www.free-css.com/">Supplies</a> | <a href="http://www.free-css.com/">Information</a></div>
</div>
<div id="topmenu">
<ul class="BLUE">
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/"><span>Photo Gallery</span></a></li>
<li><a href="http://www.free-css.com/"><span>Subscribe</span></a></li>
<li><a href="http://www.free-css.com/"><span>Tech Blog</span></a></li>
<li><a href="http://www.free-css.com/"><span>Contact</span></a></li>
<li><a href="http://www.free-css.com/"><span>RSS Feeds</span></a></li>
</ul>
</div>
<!-- end top menu and blog title-->
<!-- start left box-->
<div id="leftcontent"> <img style="margin-top:-9px; margin-left:-12px;" src="nautica08-images/top2.jpg" alt="" />
<h3 align="left">Main Menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
</ul>
</div>
<h3 align="left">Sub menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
<li><a href="http://www.free-css.com/">Sample Link</a></li>
</ul>
<p>Nullam non metus. Duis in metus vitae elit luctus convallis. Ut sagittis. Nam tempor. Nam vehicula adipiscing augue. Vestibulum pretium lacinia erat. Duis ut enim. In hendrerit vulputate lectus. Donec ipsum magna, tempor ornare, fringilla sit amet, placerat</p>
</div>
<!-- You have to modify the "padding-top: when you change the content of this div to keep the footer image looking aligned -->
<img style="padding-top:2px; margin-left:-12px; margin-bottom:-4px;" src="nautica08-images/specs_bottom.jpg" alt="" /> </div>
<!-- end left box-->
<!-- start content -->
<div id="centercontent">
<h1>Nautica 08 </h1>
<p><a href="http://www.free-css.com/"><img src= "nautica08-images/logo.jpg" border="0" style="width: 300px; height: 65px;"/></a><br />
</p>
<div class="centercontentleft">Sample Box for Products</div>
<p><a href="http://www.free-css.com/">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Ut elit pede, vestibulum in, tempor a, nonummy eget, mauris. Aliquam erat volutpat. Nulla facilisi. In hac habitasse platea dictumst. Nullam porttitor orci feugiat odio. Nam vestibulum interdum lectus. Etiam eros. Donec imperdiet lorem a tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at mi ut enim luctus commodo. Fusce a purus. Morbi eget odio. Sed convallis eleifend felis. Integer fermentum consectetuer est. Sed vitae nisi ac pede scelerisque feugiat. Etiam mollis urna non lacus tincidunt cursus. Aliquam erat volutpat. Nam tempus.</p>
<p><img style="width: 200px; height: 299px; float: right; padding:9px;" alt="#" src="nautica08-images/sample.jpg" hspace="5" vspace="5" /> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vestibulum, tortor a sagittis facilisis, sapien ante sollicitudin urna, eu hendrerit sem massa et arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt nisi in odio. Aenean semper, nisi ut lobortis tristique, odio elit venenatis nisl, semper condimentum metus eros vel tortor. Pellentesque at nulla. Sed metus nisi, malesuada pharetra, malesuada vel, dictum eget, eros. Cras sed metus. Aenean facilisis nunc nec sem. Nulla facilisi. Sed placerat diam ut libero. Vestibulum fringilla. Nam tincidunt. Nam metus metus, rutrum eu, sagittis id, venenatis in, velit. Sed tempor blandit ipsum. Phasellus nisi massa, pretium in, gravida ac, hendrerit vitae, massa. Nulla facilisi.</p>
<p><a href="http://www.free-css.com/">Nullam non metus.</a> Duis in metus vitae elit luctus convallis. Ut sagittis. Nam tempor. Nam vehicula adipiscing augue. Vestibulum pretium lacinia erat. Duis ut enim. In hendrerit vulputate lectus. Donec ipsum magna, tempor ornare, fringilla sit amet, placerat vel, purus. Pellentesque tempus est a dolor. Quisque neque nulla, interdum eu, blandit ut, tempus quis, ligula. Cras ac purus. Sed quis urna. Nulla facilisi. Nam ornare sem consequat augue. Ut dapibus diam sit amet dolor adipiscing dictum. Praesent tristique eros vel mauris. Maecenas lacus velit, sodales consectetuer, molestie et, faucibus in, odio. Vivamus libero velit, sodales a, feugiat vel, tempor vitae, libero. Duis aliquam ipsum.</p>
<img style="width: 153px; height: 59px; float: left; padding:9px;" src="nautica08-images/n8g.jpg" alt="Nautica08" />
<p>Duis sagittis est ac turpis. Nam ac quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque malesuada massa. Ut gravida volutpat felis. Aliquam massa leo, commodo a, placerat in, volutpat ut, turpis. Phasellus in turpis. Fusce turpis diam, ullamcorper id, tincidunt at, fringilla eu, lacus. Maecenas in mauris vel ipsum blandit euismod. Aliquam consequat egestas lectus. Mauris a est. Sed sit amet neque. In in urna.
Maecenas nonummy accumsan tortor. In hac habitasse platea dictumst. Fusce suscipit mollis neque. Maecenas turpis dolor, rhoncus eu, ullamcorper eu, tincidunt sed, leo. Quisque molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pellentesque convallis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed euismod, turpis ac congue facilisis, mi nisl consequat felis, ut egestas nisl velit in justo. Fusce eu tortor faucibus diam dictum adipiscing. In nisl. Nam lacus orci, scelerisque at, pulvinar in, commodo ut, arcu. Aliquam porttitor. Nullam aliquet risus id erat. Pellentesque leo nisl, hendrerit at, ornare in, volutpat in, ante. Nulla pretium velit sit amet nisi. Nam eu magna. Aenean viverra auctor neque. <a href="http://www.free-css.com/">Pellentesque elit.</a></p>
</div>
<!-- end content -->
<!-- start right box -->
<div id="rightcontent"> <img style="margin-top:-9px; margin-left: -5px;" src="nautica08-images/top2.jpg" alt="" /> <img style="width: 153px; height: 59px; float: left; padding:9px;" src="nautica08-images/n8g.jpg" alt="Nautica08" />
<p><a href="http://www.free-css.com/">Pick a location:</a><br />
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper</p>
<p> Pick a location:<br />
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper</p>
<p> Pick a location:<br />
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper</p>
<img style="padding-top:5px; margin-left:-5px; margin-bottom:-4px;" src="nautica08-images/specs_bottom.jpg" alt="" /> </div>
<!-- end right box -->
<!-- start footer -->
<div id="footer">© 2006 Design by <a href="http://www.studio7designs.com">Studio7designs.com</a> | ArbutusPhotography.com | Opensourcetemplates.org
<!-- start left boxes -->
<div class="centercontentleftb">
<div class="centercontentleftimg">Sample Box for Products</div>
<div class="centercontentrightimg">Sample Box for Products</div>
</div>
<!-- endleft boxes -->
<!-- start right boxes -->
<div class="centercontentrightb">
<div class="centercontentleftimg">Sample Box for Products</div>
<div class="centercontentrightimg">Sample Box for Products</div>
</div>
<!-- end right boxes -->
<!-- end bottom boxes -->
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category