Nautica04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Studio 7 designs - Professional Photography and website development, Victoria BC Canada" />
<meta name="keywords" content="Studio7designs, studio 7 designs, Professional,Photography,Graphic ,Victoria,BC,Canada,wedding,photographer,victoria,bc,wedding photographers victoria bc,weddings,photo,albums,aran down,website designers victoria bc, HTML, CSS, Open Source Web Designers, Free Templates" />
<meta name="robots" content="All"/>
<meta name="author" content="Aran Down studio 7 designs" />
<title>Nautica 04</title>
<style type='text/css'>
/* CSS by Studio7designs.com give me a shout @ aran@studio7designs.com */
html, body {
margin: 0; padding: 0;
text-align: center;
background-color: #A1B3C9;
}
h1,h3,h3 {
margin: 0; padding: 0;
}
#content {
width: 760px;
text-align: left;
margin: auto;
}
#header{
width: 760px;
height: 50px;
text-align: left;
margin: auto;
}
#logo{
float: left;
height: auto;
width: 250px;
margin: 5px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
#topmenu{
width: 400px;
top: 5px;
margin-left: 310px;
padding-top: 5px;
padding-right: 0px;
padding-left: 30px;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
font-size:1.0em;
color:#DBDFEE;
}
#topmenu a{
text-decoration:none;
color:#DBDFEE;
}
#topmenu a:hover{
color:#ffffff;
background-color:#939FB2;
}
#content {
margin-top: 40px;
padding-bottom: 40px;
}
#maintext {
width: 520px;
margin-left: 20px;
text-align:justify;
}
#maintext a{
text-decoration:none;
color:#ffffff;
border-bottom:1px dotted #ffffff;
}
#maintext a:hover{
color:#ffffff;
background-color:#939FB2;
}
#rightcol {
width: 168px;
position: absolute;
top: 140px;
margin-left: 575px;
background: url(Nautica04-img/right_bg.gif) no-repeat;
}
#introduction{
float:right;
width:150px;
padding: 8px 8px 8px 8px;
margin:auto;
text-align:center;
line-height:1.5em;
color:#ffffff;
font-size:0.8em;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
letter-spacing:0px;
}
#introduction ul, #introduction li {
text-align:center;
list-style: none;
margin: 0;
padding: 0;
}
#introduction a{
text-decoration:none;
color:#ffffff;
border-bottom: none;
}
#introduction a:hover{
color:#ffffff;
background-color:#939FB2;
}
#introduction h3{
text-align: center;
position:static;
}
html, body {
font: .95em/1.6em Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
p {
margin-bottom: 1em;
}
#footer
{
width: 100%;
height: 60px;
clear: both;
padding-top: 8px;
text-align: center;
border-top: 1px solid #C6D4E6;
color: #000000;
font-size: .75em;
background-color: #414243;
background-image: url(Nautica04-img/footer.gif);
}
#footer a {
color: #888888;
text-decoration:none;
}
#footer p {color: #888888;}
html, body {
background: #A1B3C9 url(Nautica04-img/bg_grad.gif) repeat-x;
}
#content {background: url(Nautica04-img/main_grad.gif) repeat-x;}
html>body #content {
margin-top: 40px;
}
h1{
font-family:"Trebuchet MS",arial,sans-serif;
font-size:2.6em;
font-weight:normal;
background:#fff url(images/booksmall.gif) no-repeat bottom left;
padding:0 0 10px 50px;
margin:20px 5px 5px 5px;
}
h2{
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
font-size:1.2em;
margin:auto;
text-transform:capitalize;
padding:0 2px;
}
h3{
color: #ffffff;
font-family:geneva,arial,sans-serif;
font-weight:normal;
text-transform:uppercase;
word-spacing:4px;
letter-spacing:3px;
font-size:0.9em;
font-weight:bold;
padding:0 2px;
margin:0;
}
blockquote
{
border-left: 4px #c7d2ea solid;
padding: 0 0 0 10px;
margin: 10px 20px 10px 20px;
letter-spacing: 0px;
white-space:inherit;
}
h4
{
font-weight: bold;
font-size: 25px;
text-transform: capitalize;
color: #DBDFEE;
margin: 0;
padding: 0;
letter-spacing: 3px;
}
</style>
<link rel="shortcut icon" href="Nautica04-img/favicon.ico" type="favicon" />
</head>
<body>
<div id="header">
<div id="logo">
<h4>NAUTICA 04</h4>
</div>
<div id="topmenu">
<a href="#">Home</a> |
<a href="#">Gallery </a>|
<a href="#">Subscribe</a> |
<a href="#">RSS</a> |
<a href="#">Fridge</a> |
<a href="#">Stove</a> |
<a href="#">Contact</a>
</div>
</div>
<div id="content">
<div id="maintext">
<h2>Photography 101 </h2>
<p> The first thing that you want to do is check out the <a href="http://www.luminous-landscape.com/">Luminous Landscape</a> <br />
From there you can learn any thing about photography... I recommend the Nikon D200 if you are serious about photography, you can vew <a href="http://www.studio7designs.deviantart.com">my work here</a> if you like. </p>
<blockquote> <p>This is a OS template for your enjoyment.<br />
If you could <a href="mailto:aran@studio7designs.com"> email me</a>, when you go online with your new site id love to see how it is being used, its always fun checking new ideas out! <br />
Please keep a link to me at the footer if you can, always appreciated </p> </blockquote>
<p> This is a design by<a href="http://www.studio7designs.com"> Studio7designs</a>, located in Victoria bc we offer a wide range of services... Drop us a visit and check out our portfolio.<br />
<br />
This is the first version of Nautica04. Look for updates to the footer, as currently the site is designed to hold content. Vestibulum lectus elit, vehicula et, imperdiet vel, fermentum eget, urna. Sed consequat rhoncus diam. Praesent leo metus, elementum lobortis, vehicula a, ullamcorper eu, ante. Ut porta sagittis erat. </p>
<p><img src="Nautica04-img/N4.jpg" alt="n4" width="460" height="460" /><br />
<br />
Duis ut justo eget neque pellentesque fringilla. Quisque aliquam hendrerit nulla. In pretium turpis nec urna. Duis felis neque, aliquam et, sollicitudin ut, dignissim in, lorem. Morbi diam metus, ultrices ac, sodales vitae, dictum ac, nulla. Vestibulum dictum, diam non fermentum consectetuer, erat nunc congue risus, vel lobortis erat sapien a dolor. Maecenas et massa in risus molestie rutrum. Suspendisse lectus nisi, vestibulum at, pellentesque in, ornare non, sem. Sed lacinia tempor dolor. Donec porta, arcu ut blandit faucibus, purus tortor vehicula risus, vitae volutpat magna mauris id lacus. Praesent fermentum, urna non sagittis egestas, tellus tortor tristique massa, vitae vehicula sem orci non ante. Vivamus ullamcorper tempor nibh. </p>
<blockquote> <p>Donec eleifend pede ut lacus. Sed nibh. Integer gravida velit sit amet quam. Proin euismod massa non urna. Vivamus sagittis enim vitae est. Duis ut ipsum. Mauris posuere erat consequat quam. Fusce tincidunt leo eget ante. Quisque nonummy dignissim purus. Etiam dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin et nulla a tellus laoreet ornare. Maecenas nibh justo, iaculis ut, vehicula non, mattis non, mauris. Curabitur eget lorem. Etiam tempor, sapien non nonummy rhoncus, odio turpis feugiat sem, at aliquet dolor felis eget libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </blockquote>
</div>
<div id="rightcol"><br/>
<div id="introduction">
<h3>Page navigation</h3>
<ul>
<li><a href="#">Example Link 1</a></li>
<li><a href="#">Example Link 2</a></li>
<li><a href="#">Example Link 3</a></li>
<li><a href="#">Example Link 4</a><br />
<br />
</li>
</ul>
<h3>sub page menu </h3>
<ul>
<li><a href="#">Example Link 1</a></li>
<li><a href="#">Example Link 2</a></li>
<li><a href="#">Example Link 3</a></li>
<li><a href="#">Example Link 4</a></li>
</ul>
<br />
<br />
<img src="Nautica04-img/Nautica04.jpg" alt="n4" width="132" height="152" /><br />
<br />
<br />
This is some text<br />
This is some text<br />
This is some text<br />
This is some text<br />
This is some text<br />
This is some text<br />
<br />
<br />
</div>
</div>
</div>
<div id="footer">
<p>© 2006 Your Company Name | <a href="http://www.arbutusphotography.com">Design</a> <a href="http://www.weddingsvictoria.net/">By</a> <a href="http://www.studio7designs.com/">Studio7designs </a></p>
</div>
</body>
</html>
Related examples in the same category