an-ocean-of-sky
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An Ocean of Sky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Bryant Smith
http://www.bryantsmith.com
Free use with link
*/
body {
margin: 0;
padding: 0;
text-align: left;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #061C37;
background: #014D5D url(an-ocean-of-sky-images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
}
#page
{
display: block;
height:auto;
position: relative;
overflow: hidden;
width: 670px;
}
.topNaviagationLink
{
text-align:center;
position:relative;
margin-top:30px;
font-size:16px;
margin-left:-10px;
width:121px;
height: 35px;
line-height: 35px;
float:left;
color:#CEEAEE;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
}
.topNaviagationLink a
{
text-decoration:none;
color:#CDE2FC;
}
.topNaviagationLink a:hover
{
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(an-ocean-of-sky-images/tab.png);
}
#mainPicture
{
width:670px;
height:345px;
background-color:#FFFFFF;
}
#mainPicture
{
width:670px;
height:345px;
background-color:#FFFFFF;
}
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
background-image:url(an-ocean-of-sky-images/anoceanofsky.jpg);
background-repeat:no-repeat;
}
#headerTitle
{
position:relative;
top:30px;
left:40px;
font-size:25px;
color:#FFFFFF;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
}
#headerSubtext
{
position:relative;
top:30px;
left:50px;
font-size:14px;
color:#A9C8FA;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
}
.contentBox
{
width:670px;
height:auto;
background-color:#FFFFFF;
}
.contentBox .innerBox
{
position:relative;
margin-top:10px;
width:650px;
height:auto;
top:10px;
background-image:url(an-ocean-of-sky-images/content_back.png);
background-repeat:repeat-x;
padding-bottom:35px;
}
.contentTitle
{
font-size:19px;
margin-bottom:0px;
padding-top:18px;
margin-left:15px;
margin-top:15px;
}
.contentText
{
font-size:13px;
line-height:24px;
margin-left:13px;
margin-right:13px;
}
#footer {
width: 670px;
height:16px;
background: url(an-ocean-of-sky-images/footer.png) no-repeat;
text-align:center;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
color:#386172;
padding-top:5px;
}
#footer a
{
text-decoration:none;
font-size:9px;
color:#386172;
}
</style>
</head>
<body>
<div id="page">
<div class="topNaviagationLink"><a href="http://www.free-css.com/">Home</a></div>
<div class="topNaviagationLink"><a href="http://www.free-css.com/">About</a></div>
<div class="topNaviagationLink"><a href="http://www.free-css.com/">Portfolio</a></div>
<div class="topNaviagationLink"><a href="http://www.free-css.com/">Services</a></div>
<div class="topNaviagationLink"><a href="http://www.free-css.com/">Contact</a></div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">An Ocean of Sky</div>
<div id="headerSubtext">Free CSS Website Template</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText">
<p>You may use this template on any site, anywhere, for free just please leave the link back to me in the footer. This template validates XHTML Strict 1.0, CSS Validates as well; enjoy :) </p>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
<br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
<div class="contentTitle">So Many Titles, So Little Time.</div>
<div class="contentText">
<p>You may use this template on any site, anywhere, for free just please leave the link back to me in the footer. This template validates XHTML Strict 1.0, CSS Validates as well; enjoy :) </p>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
<br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
<div class="contentTitle">Yet Another One!</div>
<div class="contentText">
<p>You may use this template on any site, anywhere, for free just please leave the link back to me in the footer. This template validates XHTML Strict 1.0, CSS Validates as well; enjoy :) </p>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
<br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
</div>
</div>
<div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a> | <a href="http://validator.w3.org/check?uri=referer">valid xhtml</a> | <a href="http://jigsaw.w3.org/css-validator">valid css</a></div>
</body>
</html>
Related examples in the same category