OrngBlu
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>OrngBlu</title>
<style type='text/css'>
/* CSS Document For OrngBlu */
body {margin:0; background-color:cornflowerBlue; font-family:Verdana, Arial, Helvetica, sans-serif; color:#333333;}
#page {background-color:orange; width:70%; border-top: 8px darkBlue solid; border-bottom: 3px darkBlue solid; margin: 0 auto; display:table; padding-bottom:5px;}
#header {width:600px;}
#logo {float:left; width: 190px; border-right: 1px #cccccc solid; padding-bottom: 12px; background-color:#eeeeee}
#logo h1 {font-size:12px; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; padding:5px 0 0 10px; margin:0}
#logo .tagline {font-size:10px; padding-left: 8px; margin-top:-5px}
#topHead {background-color:blue; width:70%; height:10%; float:left; font-size:20px; color:orange}
#topHead h1 {color:orange; font-size:20px; padding:0 0 0 10px}
#rightNav {background-color:darkOrange; float:right; width:20%; height:80%}
#nav {float:right; padding-bottom: 5px}
#nav .menu {width: 120px; float:right; border-bottom: 4px darkBlue solid; margin-right: 10px}
#nav .menu_item {padding-top:5px; font-size:18px;}
#nav .menu_item a{color:darkBlue; text-decoration:none;}
#nav .menu_item a:hover{color:white}
#nav .here{color:white; text-transform:uppercase; padding-top:5px; font-size:18px;}
#nav .menu_desc {font-size:10px;}
.post {float:left; width: 50%; margin:10px 0; padding-left:1%; display:table}
.post h2 {margin:0; color:darkBlue; font-size:18px; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
.post p {font-size:10px; margin:0}
.post p a{color:blue; text-decoration:none}
#leftNav {background-color:darkOrange; float:left; width:20%; height:80%}
#leftNav {float:left; margin:0; width: 170px;}
#leftNav .sidebar_head {background-color:#FF9900; margin-top:4px; padding:4px}
#leftNav h3{margin:0; color:#FFFFFF; font-size:14px; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-weight:bolder;}
#leftNav ul {margin:5px 0; padding:0 0 0 20px;}
#leftNav ul li{font-size:11px}
#leftNav ul li a{text-decoration:none; color:#333333}
#leftNav ul li a:hover{color:white}
#footer {text-align:center}
#footer p {color:#FFFFFF; font-size:10px;}
#footer p a{color:#FFFFFF; text-decoration:none}
#footer p a:hover{color:#FFFFFF; text-decoration:underline}
.folio_img {margin: 5% 0; text-align:center; width: 100%; background-color:white; padding: 10px; border: 1px blue dashed}
.folio_img img {border: 1px #cccccc solid; padding:4px; background-color:#eeeeee; margin: 10px 10px 0 0}
.style1 {color: #FF9900}
</style>
</head>
<body>
<div id="page"><!--start page -->
<div id="topHead">
<h1>OrngBlu!</h1>
</div>
<div id="rightNav"><!--start nav -->
<div id="nav">
<div class="menu">
<div class="here">Home</div>
<div class="menu_desc">main page</div>
</div>
<div class="menu">
<div class="menu_item"><a href="index.html">folio</a></div>
<div class="menu_desc">sample works</div>
</div>
<div class="menu">
<div class="menu_item"><a href="index.html">about</a></div>
<div class="menu_desc">about the site/author</div>
</div>
</div>
</div><!--end nav -->
<div id="leftNav"><!-- start sidebar -->
<!-- start sidebar item -->
<div class="sidebar_head">
<h3>The Links</h3>
</div>
<ul>
<li><a href="http://gatorzone.com">Gators</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://slashdot.org/">SlashDot</a></li>
<li><a href="http://dontpanic.awardspace.com">Don't Panic</a></li>
</ul>
<!-- end sidebar item -->
<!-- start sidebar item -->
<div class="sidebar_head"><h3>Recommended Links</h3></div>
<ul>
<li><a href="http://csszengarden.com">CSS Zen Garden</a></li>
<li><a href="http://stylegala.com">Stylegala</a></li>
<li><a href="http://alistapart.com">ALA</a></li>
<li><a href="http://openwebdesign.org">Open Web Design</a></li>
<li><a href="http://oswd.org">OSWD</a></li>
</ul>
<!-- end sidebar item -->
<!-- start sidebar item -->
<div class="sidebar_head"><h3>Yes, I care..</h3></div>
<ul>
<li><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></li>
</ul>
<!-- end sidebar item -->
</div><!-- end sidebar -->
<!-- start post -->
<div class="post">
<h2>OrngBlu | For the love of Gators</h2>
<p>Welcome to my simple site. I hope enjoy it. This is my first submission to OSWD.</p>
</div>
<!-- end post -->
<!-- start post -->
<div class="post">
<h2>Inspiration</h2>
<p>OrngBlu colors (and name) was chosen because I like the Gators (U.F.). I also think that these colors go together fairly nice. Some of the parts were taken from <a href="oswd.com">simplicss2</a>. So here it is for you to use as you like. If you use this, have questions, or comments please e-mail me at philipmw@gmail.com, thanks enjoy!</p>
</div>
<!-- end post -->
<!-- start post -->
<div class="post">
<h2>My Pics</h2>
<p>My Dog</p><p>Here you can put what pictures of your work you want.</p>
<div class="folio_img"> <a href="index.html"><img src="OrngBlu-images/dobby1.jpg" alt="Dobby" height="110px" border="0" /></a>
<a href="index.html"><img src="OrngBlu-images/dobby2.jpg" alt="Dobby" height="110" border="0" /></a>
</div>
<!-- start post -->
</div>
</div><!--end page -->
<div id="footer"><!--start footer -->
<p>Hope you enjoy my little site!<br/><a href="http://dontpanic.awardspace.com/">Created by Philip W</a></p>
</div><!--end footer -->
</body>
</html>
Related examples in the same category