xhtmldev_rainbow
<!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=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title></title>
<style type='text/css'>
/* Common */
* {
margin: 0;
padding: 0;
}
body {
font: normal 100.01%/1.4 Verdana, Arial, sans-serif;
text-align: center;
color: #2d2d2d;
background: url("xhtmldev_rainbow-i/bg.png") repeat-x #195c87;
margin: 1em 0;
}
.clear {
clear: both;
font-size: 0;
line-height: 0;
}
/* Float */
.right {
float: right;
margin: .5em 0 1em 1em;
}
/* Links */
a:link,
a:visited,
a:hover,
a:active {color: #369;}
/* Typography */
h1 {
font-size: 140%;
font-weight: normal;
color: #000;
}
h2 {
font-size: 120%;
font-weight: normal;
color: #222;
margin: 1.5em 0 0 0;
}
p {
font-size: 80%;
margin: 0 0 1.5em 0;
}
.date {
font-size: 70%;
color: #999;
}
.post-info {
font-size: 70%;
color: #999;
}
/* Header */
#header {
height: 170px;
margin: 0;
background: url("xhtmldev_rainbow-i/bg_header.jpg") no-repeat;
border-top: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
}
/* Logo */
#logo {
float: left;
padding: 50px 0 0 20px;
}
#logo h2 {
font-size: 230%;
font-weight: normal;
line-height: 1;
color: #f7d124;
margin: 0;
padding: 0;
}
#logo h2 span {
color: #fff;
}
#logo p {
font-size: 70%;
color: #fff;
}
/* Navigation */
#navigation {
width: 960px;
margin: 0 auto;
background: #f7d124;
}
b.rtop, b.rbottom {
display: block;
background: #fff;
}
b.rtop b,
b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
background: #f7d124;
}
b.r1 {margin: 0 5px;}
b.r2 {margin: 0 3px;}
b.r3 {margin: 0 2px;}
b.rtop b.r4,
b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}
#navigation ul {
margin: 0 0 0 1em;
}
#navigation li {
float: left;
list-style: none;
font-size: 120%;
line-height: 1.2;
}
#navigation li a:link,
#navigation li a:visited,
#navigation li a:active {
display: block;
float: left;
color: #584a08;
background: #f7d124;
text-decoration: none;
padding: .1em 1em;
}
#navigation li a:hover {
text-decoration: underline;
}
/* Box */
.box {
margin: 0 0 10px 0;
background: #fbfaf5;
}
.box .padding {
padding: .5em 1em;
}
.box h2 {
font-size: 110%;
color: #275d80;
margin: 0 0 .5em 0;
padding: 0;
}
.box p {
font-size: 80%;
margin: 0 0 .5em 0;
}
.box img {
margin: 0 0 .5em 0;
border: 2px solid #fff;
}
.box b.rtop,
.box b.rbottom {
display: block;
background: #FFF;
}
.box b.rtop b,
.box b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
background: #fbfaf5;
}
b.r1 {margin: 0 5px;}
b.r2 {margin: 0 3px;}
b.r3 {margin: 0 2px;}
b.rtop b.r4,
b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}
/* Container */
#container {
width: 980px;
margin: 0 auto;
text-align: left;
background: #fff;
}
/* Content */
#content {
float: left;
width: 720px;
padding: 2em 20px;
}
/* Sidebar */
#sidebar {
float: right;
width: 180px;
padding: 4.5em 20px;
}
/* Footer */
#footer {
clear: both;
width: 100%;
border-top: 3px solid #f7d124;
}
#footer p, #footer a {
color: #fff;
}
/* Copyright */
#copyright {
float: left;
padding: 20px;
}
</style>
</head>
<body>
<!-- Container -->
<div id="container">
<!-- Header -->
<div id="header">
<div id="logo">
<h2>Site<span>Name</span></h2>
<p>Short Description</p>
</div>
</div>
<!-- /Header -->
<!-- Navigation -->
<div id="navigation">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<div class="clear"></div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<!-- /Navigation -->
<!-- Content -->
<div id="content">
<div class="date">November 11, 2008</div>
<h1>Rainbow Template</h1>
<p><strong>Rainbow</strong> is a free template, designed and coded by <a href="http://xhtmldev.net/">xhtmldev.net</a>. It is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5 License</a>. Photos are from <a href="http://pdproto.org">pdphoto.org</a>.</p>
<p>You may use this template for both commercial or personal use. The only requirement is to keep a link to our <a href="http://xhtmldev.net">website</a>.</p>
<p>Sed Quisque Nulla Nulla metus tellus sodales dui In dui augue. Turpis pede at In vitae semper vitae nibh nibh turpis consequat. Facilisis orci lacus laoreet congue volutpat pretium egestas tellus non In. Quis Quisque non venenatis Vestibulum elit wisi dictumst et Vestibulum eros. Pellentesque magna ante volutpat et adipiscing id eget convallis cursus sit. Lacus vel ut dolor.</p>
<h2>Second Level Header</h2>
<p>Egestas pellentesque interdum feugiat urna eros sem Donec turpis suscipit Phasellus. Semper amet Curabitur eleifend augue tristique semper magna sed Sed urna. Nibh nibh ut wisi mauris Praesent pretium penatibus Pellentesque hendrerit Suspendisse. Nam facilisi amet suscipit elit Pellentesque pretium Phasellus et eu Curabitur. Tempus id penatibus egestas sed magna diam id id Phasellus habitasse. Interdum sapien Nulla leo ullamcorper et pretium Cras interdum a scelerisque. A senectus.</p>
<p>Lorem fames Nulla fringilla justo id Pellentesque sed adipiscing laoreet urna. Leo Sed wisi nec eros In ut porttitor Ut consequat amet. Rutrum auctor molestie elit volutpat elit Donec elit Pellentesque ut nisl. Et ullamcorper odio vel condimentum dui vel sagittis et tristique hac. Morbi Morbi nibh et Sed ornare id id mauris et Aenean. Id Vestibulum at urna Donec sed consequat.</p>
<p>Tellus augue Proin Sed convallis eget vitae Vestibulum fringilla tempor ut. Id amet mus eget feugiat ligula eros nec aliquet vitae in. Nunc rutrum aliquam Sed Vivamus a turpis neque Vestibulum lacinia tincidunt. Iaculis dapibus elit wisi enim In id arcu dui gravida est. Nec nulla dui pretium Donec et eros Nullam rutrum et orci. </p>
<p>Lorem fames Nulla fringilla justo id Pellentesque sed adipiscing laoreet urna. Leo Sed wisi nec eros In ut porttitor Ut consequat amet. Rutrum auctor molestie elit volutpat elit Donec elit Pellentesque ut nisl. Et ullamcorper odio vel condimentum dui vel sagittis et tristique hac. Morbi Morbi nibh et Sed ornare id id mauris et Aenean. Id Vestibulum at urna Donec sed consequat.</p>
<div class="post-info">Author: <a href="#">admin</a> | Comments: <a href="#">8</a></div>
</div>
<!-- /Content -->
<!-- Sidebar -->
<div id="sidebar">
<!-- Box -->
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="padding">
<h2>Fringilla Justo</h2>
<img src="xhtmldev_rainbow-i/1.jpg" alt="" title="" />
<p>Lorem fames Nulla fringilla justo id Pellentesque sed adipiscing laoreet urna.</p>
<p>Leo Sed wisi nec eros In ut porttitor Ut consequat amet.</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<!-- Box -->
<!-- Box -->
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="padding">
<h2>Semper Vitae</h2>
<img src="xhtmldev_rainbow-i/2.jpg" alt="" title="" />
<p>Lorem fames Nulla fringilla justo id Pellentesque sed adipiscing laoreet urna.</p>
<p>Leo Sed wisi nec eros In ut porttitor Ut consequat amet.</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<!-- Box -->
</div>
<!-- /Sidebar -->
<!-- Footer -->
<div id="footer">
<div id="copyright"><p>2008 © Your company. Designed by <a href="http://xhtmldev.net">xhtmldev.net</a></p></div>
</div>
<!-- /Footer -->
</div>
<!-- /Container -->
</body>
</html>
Related examples in the same category