ramblingsoul_3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Rambling Soul</title>
<style type='text/css'>
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
background-image: url(images/headerbg.png);
background-repeat: repeat-x;
}
h1 {
padding:0px;
font-size:24px;
line-height:28px;
font-weight:normal;
color:#996633;
font-family: "Century Gothic", Arial;
text-decoration: none;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#Content h2 {
font-family: "Century Gothic", Arial;
font-size: 17px;
text-align: center;
display: block;
font-weight: bold;
color: #999900;
padding-right: 15px;
padding-left: 15px;
background-color: #EAECCD;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
border: 1px dashed #C0D490;
}
.footer {
background-image: url(images/footer.png);
background-repeat: repeat-x;
background-color: #D9EDA8;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
p {
margin:0px 0px 16px 0px;
padding:0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
color: #000000;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#CC6600;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:visited {color:#07a;}
#Header #navigation li {
display: inline;
}
#Header #navigation a {
background-image: url(images/menu.png);
background-repeat: no-repeat;
float: left;
height: 32px;
width: 82px;
margin-right: 5px;
padding-top: 10px;
text-align: center;
display: block;
color: #6B633F;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
a:hover {}
#Header {
height:42px;
line-height:11px;
voice-family: "\"}\"";
voice-family:inherit;
height:42px;
background-image: url(images/topheadbg.png);
background-repeat: repeat-x;
padding-left: 200px;
}
#header2 .logo {
background-image: url(images/logo.png);
float: left;
height: 40px;
width: 188px;
margin-left: 15px;
padding-top: 75px;
font-family: "Century Gothic", Arial, Verdana;
font-size: 24px;
text-align: center;
color: #999933;
}
#header2 .banner {
background-image: url(images/headbanner.png);
float: right;
height: 115px;
background-repeat: no-repeat;
width: 350px;
background-position: right;
}
#header2 .banner span {
margin-top: 75px;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
color: #B3A87C;
}
body>#Header {height:42px;}
blockquote p {
color: #CC6600;
line-height: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.spacer {
clear: both;
}
#header2 {
background-image: url(images/header-bg.png);
background-repeat: repeat-x;
height: 115px;
}
body>#Header2 {height:115px;}
#Content {
background-color: #FFFFFF;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 275px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#Header a {
color: #993300;
}
#Menu {
position:absolute;
top:82px;
left:20px;
width:210px;
line-height:25px;
voice-family: "\"}\"";
voice-family:inherit;
width:210px;
margin-top: 86px;
font-size: 12px;
color: #339900;
padding-top: 15px;
padding-right: 10px;
padding-left: 10px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:210px;}
#tabs {
font-size:93%;
line-height:normal;
text-align: center;
margin-right: auto;
margin-left: auto;
width: 700px;
}
#Header #tabs .font {
display: block;
float: left;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#tabs ul {
margin:0;
list-style:none;
height: 42px;
padding-right: 5px;
padding-bottom: 0;
padding-left: 10px;
padding-top: 0px;
text-align: center;
}
#Header #tabs .font1 a {
font-family: "Century Gothic", Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
height: 30px;
width: 43px;
padding-top: 13px;
}
#Header #tabs .font2 a:hover {
color: #00CCFF;
background-color: #006699;
}
#Header #tabs .font2 a {
font-family: "Century Gothic", Arial;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
height: 33px;
width: 43px;
padding-top: 10px;
}
#Header #tabs .font3 a {
font-family: "Century Gothic", Arial;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 30px;
width: 43px;
padding-top: 10px;
float: left;
}
.activemenu {
background-image: url(images/dldoor.png);
background-repeat: repeat-x;
background-position: top;
background-color: #F0EEE0;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #4480C8;
font-weight: bold;
}
#Header #tabs .activemenu a {
color: #A3B083;
}
#tabs li {
display:block;
margin-bottom: 0;
float: left;
padding-right: 5;
padding-bottom: 0;
padding-left: 5;
height: 28px;
padding-top: 10px;
margin-right: 5px;
margin-left: 5px;
}
#Header #tabs li a {
padding-right: 5px;
padding-left: 5px;
color: #FFFFFF;
font-family: "Century Gothic", Arial;
font-size: 13px;
font-weight: bold;
margin-right: 3px;
margin-left: 3px;
}
#Header #tabs a:hover {
color: #006600;
text-decoration: none;
}
#mainright {
width:32%;
float:left;
padding-bottom:110px;
margin-top: 70px;
font-size: 14px;
margin-left: 5px;
background-image: url(images/mcbg.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#maincenter {
width:32%;
float:left;
padding-bottom:110px;
margin-top: 70px;
padding-right: 5px;
padding-left: 2px;
margin-left: 5px;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #A6B7CA;
background-image: url(images/webbg.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#mainleft {
width:32%;
float:left;
padding-bottom:110px;
margin-top: 70px;
padding-right: 5px;
margin-left: 5px;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #A6B7CA;
background-image: url(images/swbg.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#banner {
}
#banner h1 { margin:0px; padding:10px}
#Menu h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
display: block;
padding-left: 5px;
background-color: #F6F6EE;
color: #669933;
font-weight: normal;
}
#Menu .subnav {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#Menu .subnav li {
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #D8D3B9;
}
#Menu .subnav a {
font-weight: normal;
color: #CC6633;
}
#Header #tabs .font1 a:hover {
color: #00CCFF;
background-color: #006699;
}
#Header #tabs .font3 a:hover {
color: #00CCFF;
background-color: #006699;
}
@font-face {
font-family: Century Gothic;
font-style: normal;
font-weight: 700;
src: url(CENTURY3.eot);
}
@font-face {
font-family: Century Gothic;
font-style: normal;
font-weight: normal;
src: url(CENTURY4.eot);
}
@font-face {
font-family: Verdana;
font-style: normal;
font-weight: normal;
src: url(VERDANA0.eot);
}
@font-face {
font-family: Gunny Handwriting;
font-style: normal;
font-weight: normal;
src: url(GUNNYHA1.eot);
}
#Content blockquote {
margin: 10px;
color: #996633;
text-decoration: none;
font-size: 12px;
padding-left: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 18px;
background-color: #F1EFE2;
padding-top: 5px;
padding-bottom: 5px;
text-align: justify;
padding-right: 10px;
border: 2px solid #ECE9D8;
}
#navigation {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#Header #navigation a:hover {
background-image: url(images/menu-hvr.png);
background-repeat: no-repeat;
float: left;
height: 32px;
width: 82px;
margin-right: 5px;
padding-top: 10px;
text-align: center;
display: block;
color: #6B633F;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
#Header #navigation .active a {
background-image: url(images/menu-hvr.png);
background-repeat: no-repeat;
float: left;
height: 32px;
width: 82px;
margin-right: 5px;
padding-top: 10px;
text-align: center;
display: block;
color: #6B633F;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
#Menu .subnav a:visited,active {
font-weight: normal;
color: #CC6633;
}
#Menu .subnav a:hover {
font-weight: normal;
color: #000000;
background-color: #F6F6EE;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
<ul id="navigation">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Goodies</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="header2">
<div class="logo">
Rambling Soul
</div>
<div class="banner"><span>Download it.. let me know if you like it.. </span></div>
</div>
<div id="Content">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat nunc, tincidunt non, commodo ac, bibendum in, elit. Vivamus sit amet velit. Etiam at leo. </h2>
<h1>Hello and welcome</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat nunc, tincidunt non, commodo ac, bibendum in, elit. Vivamus sit amet velit. Etiam at leo. In aliquam, tellus vitae lobortis mattis, libero neque luctus justo, a pulvinar neque lectus quis pede. Duis magna. Suspendisse at risus. Sed porttitor ultricies quam. Sed tempus dui. Duis feugiat sem quis nisl. Nullam consequat pede at odio. Curabitur placerat. Quisque neque magna, accumsan vel, suscipit id, hendrerit in, lectus. Suspendisse eu libero in augue dapibus facilisis. Praesent sagittis porttitor massa. Aliquam placerat odio nec nulla. Phasellus nunc mauris, lacinia quis, suscipit vitae, tristique quis, turpis. Suspendisse et erat. Nam ornare nulla. Suspendisse vestibulum adipiscing risus. </p>
<h1>What do I do ? </h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat nunc, tincidunt non, commodo ac, bibendum in, elit. Vivamus sit amet velit. Etiam at leo. In aliquam, tellus vitae lobortis mattis, libero neque luctus justo, a pulvinar neque lectus quis pede. Duis magna. Suspendisse at risus. Sed porttitor ultricies quam. Sed tempus dui. Duis feugiat sem quis nisl. Nullam consequat pede at odio. Curabitur placerat. Quisque neque magna, accumsan vel, suscipit id, hendrerit in, lectus. Suspendisse eu libero in augue dapibus facilisis. Praesent sagittis porttitor massa. Aliquam placerat odio nec nulla. Phasellus nunc mauris, lacinia quis, suscipit vitae, tristique quis, turpis. Suspendisse et erat. Nam ornare nulla. Suspendisse vestibulum adipiscing risus. </p>
<p>Nullam adipiscing rutrum risus. Curabitur ut magna vel nisi sollicitudin egestas. In fringilla turpis non dui. Integer in tellus. Praesent lacus. Donec luctus. Aliquam convallis est nec purus. Vivamus volutpat turpis a elit. Proin congue, sapien eget lobortis varius, massa sapien suscipit elit, vitae interdum nunc sapien eu est. Quisque eros. Donec nonummy viverra quam. Fusce convallis, enim eget vulputate mattis, risus enim blandit sem, vel cursus tortor diam in felis. In placerat. Pellentesque dictum. Praesent vel mauris. Cras nisl. Etiam non orci volutpat dui tincidunt elementum. Aenean ultricies massa id tellus venenatis semper. Aenean urna urna, iaculis at, adipiscing et, volutpat at, leo. </p>
<blockquote>
<p> As is the case with most layouts in the Reservoir, the order of elements (header, content, menu) in the HTML source is friendly and accessible to mobile computers, text-based browsers, and alternative/accessible devices.</p></blockquote>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat nunc, tincidunt non, commodo ac, bibendum in, elit. Vivamus sit amet velit. Etiam at leo. In aliquam, tellus vitae lobortis mattis, libero neque luctus justo, a pulvinar neque lectus quis pede. Duis magna. Suspendisse at risus. Sed porttitor ultricies quam. Sed tempus dui. Duis feugiat sem quis nisl. Nullam consequat pede at odio. Curabitur placerat. Quisque neque magna, accumsan vel, suscipit id, hendrerit in, lectus. Suspendisse eu libero in augue dapibus facilisis. Praesent sagittis porttitor massa. Aliquam placerat odio nec nulla. Phasellus nunc mauris, lacinia quis, suscipit vitae, tristique quis, turpis. Suspendisse et erat. Nam ornare nulla. Suspendisse vestibulum adipiscing risus. </p>
<p>Nullam adipiscing rutrum risus. Curabitur ut magna vel nisi sollicitudin egestas. In fringilla turpis non dui. Integer in tellus. Praesent lacus. Donec luctus. Aliquam convallis est nec purus. Vivamus volutpat turpis a elit. Proin congue, sapien eget lobortis varius, massa sapien suscipit elit, vitae interdum nunc sapien eu est. Quisque eros. Donec nonummy viverra quam. Fusce convallis, enim eget vulputate mattis, risus enim blandit sem, vel cursus tortor diam in felis. In placerat. Pellentesque dictum. Praesent vel mauris. Cras nisl. Etiam non orci volutpat dui tincidunt elementum. Aenean ultricies massa id tellus venenatis semper. Aenean urna urna, iaculis at, adipiscing et, volutpat at, leo. </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras purus tortor, cursus at, mollis sed, vehicula ut, lacus. Curabitur quis arcu tempus diam tempor vehicula. Etiam vitae urna. Donec tristique. Fusce tincidunt sem a felis. Donec rhoncus dignissim urna. Aenean id dui. Aenean ac odio nec nulla tincidunt dictum. Praesent suscipit, nisi id dapibus posuere, arcu ligula gravida enim, non blandit mauris velit ut erat. Praesent est dui, ultricies eu, posuere eu, luctus et, orci. Quisque pede turpis, mollis lobortis, rhoncus id, consequat sollicitudin, pede. Donec arcu lectus, lacinia vel, mattis vitae, mollis vitae, mi. Etiam nisi. Morbi quam pede, vulputate vel, egestas sed, semper ut, leo. Sed risus mi, sollicitudin ac, consequat volutpat, rutrum nec, erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce sodales facilisis ligula. </p>
<h1> </h1>
</div>
<div id="Menu">
<h2>Categories</h2>
<ul class="subnav">
<li><a href="#">Rambles and rants</a></li>
<li><a href="#">Music, Movies</a></li>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Free Icons</a></li>
</ul>
<h2>Pages</h2>
<ul class="subnav">
<li><a href="#">Rambles and rants</a></li>
<li><a href="#">Music, Movies</a></li>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Free Icons</a></li>
</ul>
<h2>Latest Posts </h2>
<ul class="subnav">
<li><a href="#">Rambles and rants</a></li>
<li><a href="#">Music, Movies</a></li>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Free Icons</a></li>
</ul>
</div>
<div class="spacer"> </div>
<div class="footer">
<p>© Your Copy right Information<br />
Put all your links here.. write down what ever you like<br />
Designed by : <a href="http://ramblingsoul.com">Rambling Soul </a>| <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> | CSS</p>
</div>
</body>
</html>
Related examples in the same category