ramblingsoul7
<!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>Free Rambling Soul Template</title>
<style type='text/css'>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
background-color: #FFFFFF;
background-image: url(images/BG.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#wrap #contents #left h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #98785B;
}
#wrap #contents #left p {
line-height: 20px;
}
#wrap {
margin-top: 0px;
margin-right: 3%;
margin-left: 3%;
}
#wrap #contents #right {
float: right;
width: 415px;
}
#wrap #contents #left {
margin-right: 425px;
}
#wrap #contents #right #sidebar1 {
float: right;
width: 200px;
margin-left: 5px;
background-color: #ECECEC;
border-right-style: none;
border-left-style: none;
border-top-style: none;
border-bottom-style: none;
}
#wrap #contents #right h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #E3E3E3;
background-color: #737373;
padding: 2px;
margin: 0px;
}
#wrap #header {
background-image: url(images/LOGO.gif);
background-repeat: no-repeat;
height: 165px;
margin: 0px;
padding: 0px;
}
#wrap #header #topnavigation {
height: 53px;
margin-left: 350px;
}
#wrap #contents #left blockquote {
margin: 15px;
background-color: #EBE9ED;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #90C3E6;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
#wrap #header #subnavigation {
height: 100px;
margin-top: 2px;
margin-bottom: 0px;
float: right;
width: 400px;
}
#wrap #contents #right #sidebar2 img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrap #header #topnavigation ul {
list-style-type: none;
padding-top: 32px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: right;
margin: 0px;
}
#wrap #header #topnavigation a {
background-image: url(images/menu.gif);
background-repeat: no-repeat;
text-align: center;
height: 16px;
padding-top: 5px;
display: block;
float: left;
margin-right: 3px;
width: 92px;
color: #4E4E4E;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrap #header #topnavigation li {
display: inline;
}
#wrap #contents {
margin-top: 15px;
margin-bottom: 15px;
}
#wrap #contents #right #sidebar2 {
float: right;
width: 200px;
margin-left: 5px;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border-right-style: none;
border-left-style: none;
border-top-style: none;
border-bottom-style: none;
}
#wrap #contents #right #sidebar1 ul {
padding: 2px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
}
.clear {
clear: both;
}
#wrap #contents #left h3 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
#wrap #contents #left #quick_dock {
background-image: url(images/dockbar.png);
background-repeat: repeat-x;
height: 69px;
border: 1px solid #E3E3E3;
}
#wrap #contents #left #quick_dock ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#wrap #contents #left #quick_dock .quote a {
background-image: url(images/quote1.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 80px;
padding-top: 19px;
padding-left: 60px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
}
#wrap #header #topnavigation a:visited,active {
background-image: url(images/menu.gif);
background-repeat: no-repeat;
text-align: center;
height: 16px;
padding-top: 5px;
display: block;
float: left;
margin-right: 3px;
width: 92px;
color: #4E4E4E;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrap #header #topnavigation a:hover {
background-image: url(images/menuhover.gif);
background-repeat: no-repeat;
text-align: center;
height: 16px;
padding-top: 5px;
display: block;
float: left;
margin-right: 3px;
width: 92px;
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrap #header #topnavigation .current a:visited,active {
background-image: url(images/menuhover.gif);
background-repeat: no-repeat;
text-align: center;
height: 16px;
padding-top: 5px;
display: block;
float: left;
margin-right: 3px;
width: 92px;
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrap #header #topnavigation .current a {
background-image: url(images/menuhover.gif);
background-repeat: no-repeat;
text-align: center;
height: 16px;
padding-top: 5px;
display: block;
float: left;
margin-right: 3px;
width: 92px;
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrap #contents #left #quick_dock .help a {
background-image: url(images/help1.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 80px;
padding-top: 19px;
padding-left: 60px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
}
#wrap #contents #left #quick_dock .chat a {
background-image: url(images/chat1.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 60px;
padding-top: 19px;
padding-left: 80px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-position: -10px 0px;
}
#wrap #contents #left #quick_dock .quote a:visited,active {
background-image: url(images/quote1.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 80px;
padding-top: 19px;
padding-left: 60px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
}
#wrap #contents #left #quick_dock .help a:visited,active {
background-image: url(images/help1.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 80px;
padding-top: 19px;
padding-left: 60px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
}
#wrap #contents #left #quick_dock .chat a:visited,active {
background-image: url(images/chat1.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 60px;
padding-top: 19px;
padding-left: 80px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-position: -10px 0px;
}
#wrap #contents #left #quick_dock .quote a:hover {
background-image: url(images/quote.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 80px;
padding-top: 19px;
padding-left: 60px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
}
#wrap #contents #left #quick_dock .help a:hover {
background-image: url(images/help.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 80px;
padding-top: 19px;
padding-left: 60px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
}
#wrap #contents #left #quick_dock .chat a:hover {
background-image: url(images/chat.png);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 60px;
padding-top: 19px;
padding-left: 80px;
color: #000000;
text-decoration: none;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-position: -10px 0px;
}
#wrap #contents #right #sidebar1 li {
color: #A58970;
text-decoration: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-bottom-color: #737373;
display: block;
height: 18px;
}
#wrap #contents #left h2 {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #993300;
font-weight: normal;
}
#wrap #contents #left h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
}
#wrap #contents #left a {
color: #0066CC;
}
#wrap #contents #right #sidebar1 li a {
color: #A58970;
text-decoration: none;
display: block;
padding: 2px;
}
#wrap #contents #right #sidebar1 li a:visited,active {
color: #A58970;
text-decoration: none;
display: block;
padding: 2px;
}
#wrap #contents #right #sidebar1 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
display: block;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#wrap #contents #left ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrap #contents #left li {
background-image: url(images/note.png);
background-repeat: no-repeat;
display: block;
margin-right: 5px;
margin-left: 5px;
padding-left: 20px;
background-position: 3px;
color: #000000;
padding-top: 3px;
padding-bottom: 3px;
}
#wrap #header #logo {
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
color: #569EE8;
font-size: 20px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 65px;
width: 250px;
display: block;
float: left;
font-weight: normal;
}
#wrap #header #logo a {
color: #5D5D5D;
text-decoration: none;
}
#wrap #header #logo a:visited,active {
color: #5D5D5D;
text-decoration: none;
}
#wrap #header #logo a:hover {
color: #4894E1;
text-decoration: none;
}
#wrap #contents #right #sidebar2 li {
color: #A58970;
text-decoration: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-bottom-color: #737373;
display: block;
height: 18px;
}
#wrap #contents #right #sidebar2 li a {
color: #A58970;
text-decoration: none;
display: block;
padding: 2px;
}
#wrap #contents #right #sidebar2 li a:visited,active {
color: #A58970;
text-decoration: none;
display: block;
padding: 2px;
}
#wrap #contents #right #sidebar2 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
display: block;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#wrap #contents #right #sidebar2 ul {
padding: 2px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
}
#wrap #contents #left a:visited,active {
color: #0066CC;
}
#wrap #contents #left a:hover {
color: #000000;
text-decoration: none;
}
#wrap #contents #left .aboutauthor img {
margin: 10px;
padding: 5px;
background-color: #ADADAD;
}
#wrap #contents #left h1 a {
color: #98785B;
text-decoration: none;
}
#wrap #contents #left .aboutauthor {
display: block;
float: left;
width: 130px;
border: 1px dashed #98785B;
margin-right: 10px;
margin-bottom: 5px;
}
#footer {
background-image: url(images/graybg.png);
background-repeat: repeat-x;
padding: 10px;
}
#footer a {
color: #000000;
text-decoration: underline;
}
#wrap #contents #left .aboutauthor .authorinfo {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
font-size: 10px;
font-style: normal;
}
#footer a:visited,active {
color: #000000;
text-decoration: underline;
}
#footer a:visited,active:hover {
color: #666666;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1 id="logo"><a href="#">Site Name</a></h1>
<div id="topnavigation">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="subnavigation">
</div>
</div>
<div id="contents">
<div id="right">
<div id="sidebar1">
<h2>Quick Links</h2>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>Browse Blog</h2>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Rambles and Rants</a></li>
</ul>
<h2>Browse Blog</h2>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Rambles and Rants</a></li>
</ul>
<h2>Browse Blog</h2>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Rambles and Rants</a></li>
</ul>
<h2>Browse Blog</h2>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Rambles and Rants</a></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="#">Links</a></li>
</ul>
</div>
<div id="sidebar2">
<h2>What's Hot</h2>
<ul>
<li><a href="#">Lorem Ipsum </a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Consecteteur</a></li>
<li><a href="#">Adipiscing Elit</a></li>
<li><a href="#">Donect at turpis</a></li>
<li><a href="#">Morbi vehicula lectus</a></li>
<li><a href="#">more.. </a></li>
</ul>
<h2>Browse</h2>
<ul>
<li><a href="#">Lorem Ipsum </a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Consecteteur</a></li>
<li><a href="#">Adipiscing Elit</a></li>
<li><a href="#">Donect at turpis</a></li>
<li><a href="#">Morbi vehicula lectus</a></li>
<li><a href="#">more.. </a></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="#">Lorem Ipsum </a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Consecteteur</a></li>
<li><a href="#">Adipiscing Elit</a></li>
<li><a href="#">Donect at turpis</a></li>
<li><a href="#">Morbi vehicula lectus</a></li>
<li><a href="#">more.. </a></li>
</ul>
<h2>Posts</h2>
<ul>
<li><a href="#">Lorem Ipsum </a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Consecteteur</a></li>
<li><a href="#">Adipiscing Elit</a></li>
<li><a href="#">Donect at turpis</a></li>
<li><a href="#">Morbi vehicula lectus</a></li>
<li><a href="#">more.. </a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="#">Lorem Ipsum </a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Consecteteur</a></li>
<li><a href="#">Adipiscing Elit</a></li>
<li><a href="#">Donect at turpis</a></li>
<li><a href="#">Morbi vehicula lectus</a></li>
<li><a href="#">more.. </a></li>
</ul>
<h2>Meta</h2>
<ul>
<li><a href="#">Valid XHTML 1.0 </a></li>
<li><a href="#">Valid CSS 2.0 </a></li>
<li><a href="http://www.opendesigns.org">Open Designs </a></li>
<li><a href="http://www.ramblingsoul.com">Rambling Soul </a></li>
</ul>
</div>
</div>
<div id="left">
<h1><a href="#">Another RamblingSoul Template </a> </h1>
<p>My name is Roshan, I design websites. and this is another free CSS Template for you to use. Enjoy! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at turpis. Morbi vehicula lectus vitae ante. Sed consectetuer ligula sed arcu. Phasellus aliquam quam eget mi. Pellentesque suscipit ligula viverra libero. Suspendisse tempor aliquam justo. Quisque lacus. Donec blandit ornare sapien. Aliquam rhoncus eros non diam. Mauris quis magna. In nibh risus, vestibulum ut, consequat sit amet, varius quis, eros. Aliquam vitae nulla eget mi tristique vestibulum. Suspendisse potenti. Cras ut eros tincidunt quam porta consequat. </p>
<div class="aboutauthor">
<img src="images/img.png" alt="Image" />
<div class="authorinfo">Suspendisse tempor aliquam justo. Quisque lacus. Donec blandit ornare sapien. Aliquam rhoncus eros non diam. Mauris quis magna. In nibh risus, vestibulum ut, consequat sit amet, varius quis, eros.</div>
</div>
<p>Cras imperdiet mi pellentesque eros. Nam sapien tortor, sodales eget, cursus ut, auctor cursus, nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget metus. Etiam justo velit, semper nec, pharetra eu, fringilla et, pede. Morbi imperdiet pede. Nunc tempor mauris eget ipsum. Etiam euismod. Maecenas nec enim. Ut ac ligula. Vestibulum convallis. Aliquam mauris ligula, mollis sit amet, congue nec, malesuada ac, mauris. Phasellus lorem. Nullam turpis. Proin massa neque, luctus vel, rutrum quis, adipiscing vel, diam. </p>
<h2>Lorem Ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at turpis. Morbi vehicula lectus vitae ante. Sed consectetuer ligula sed arcu. Phasellus aliquam quam eget mi. Pellentesque suscipit ligula viverra libero. Suspendisse tempor aliquam <a href="#">justo</a>. </p>
<h3>Heading 3</h3>
<p>Quisque lacus. Donec blandit ornare sapien. Aliquam rhoncus eros non diam. Mauris quis magna. In nibh risus, vestibulum ut, consequat sit amet, varius quis, eros. Aliquam vitae nulla eget mi tristique vestibulum. Suspendisse potenti. Cras ut eros tincidunt quam porta consequat. </p>
<ul>
<li>Cras imperdiet </li>
<li>mi pellentesque eros. </li>
<li>Nam sapien tortor, sodales eget, cursus ut, auctor cursus</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li> Cum sociis natoque penatibus et magnis dis parturient montes </li>
</ul>
<p>Nascetur ridiculus mus. Pellentesque eget metus. Etiam justo velit, semper nec, pharetra eu, fringilla et, pede. Morbi imperdiet pede. Nunc tempor mauris eget ipsum. </p>
<blockquote><p>Etiam euismod. Maecenas nec enim. Ut ac ligula. Vestibulum convallis. Aliquam mauris ligula, mollis sit amet, congue nec, malesuada ac, mauris. </p></blockquote>
<p>Phasellus lorem. Nullam turpis. Proin massa neque, luctus vel, rutrum quis, adipiscing vel, diam.</p>
<p>In hac habitasse platea dictumst. Sed vestibulum scelerisque tellus. Phasellus nisi orci, convallis rutrum, fringilla ac, bibendum lacinia, dui. Maecenas ligula. Nam nisl sem, fermentum bibendum, adipiscing eu, rutrum non, ligula. Mauris convallis justo ut risus. Aliquam ullamcorper, urna vitae vestibulum semper, tellus ipsum porta felis, a viverra lacus turpis ut odio. Suspendisse vitae quam. Sed mattis leo sit amet leo. Sed odio est, tincidunt vel, ultricies quis, sollicitudin hendrerit, magna. Etiam euismod turpis porta erat. Nulla blandit. Vestibulum magna tortor, tempor quis, cursus eget, interdum et, nulla. Pellentesque feugiat volutpat neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus pede, fringilla eu, condimentum nec, mattis non, metus. Donec quis mi a nisi eleifend gravida. Integer quam ante, dignissim quis, cursus sed, fringilla et, mi. Sed viverra, magna et blandit fringilla, lacus augue feugiat orci, a rutrum lectus arcu sit amet ante. Vivamus odio neque, pharetra porta, mattis ultrices, sagittis a, mi. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum vel diam. Sed vulputate. Nulla semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere tortor a odio. Ut ligula. Praesent dui est, aliquet dapibus, dictum eu, facilisis id, odio. Maecenas eros. Integer enim. Sed convallis metus ut mauris. Aliquam lacinia, libero a laoreet scelerisque, nisi erat pulvinar sem, et porta libero nibh vel nibh. Praesent vehicula, nunc sed pretium ultrices, erat enim semper eros, ac tempus arcu mauris ut dolor. Nulla et velit ornare ante scelerisque semper. Donec a nisl. Curabitur dictum.</p>
<p> </p>
<p> </p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
Copy Right Information Here | Your | Links |<br />
Design by : <a href="#">Rambling Soul</a></div>
</body>
</html>
Related examples in the same category