ramblingsoul5 : Design 7 « Templates « HTML / CSS






ramblingsoul5

  

<!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>
<title>Rambling Soul 5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-image: url(ramblingsoul5-images/bgclr.png);
  background-color: #C4D9B3;
}
#wrap {
  background-image: url(ramblingsoul5-images/contentbg.png);
  background-repeat: repeat-y;
  width: 720px;
  margin-top: 15px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding: 0px;
}
#wrap #contents #maincontent h2 {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  color: #999900;
}
#wrap #contents #maincontent small {
  font-size: 10px;
}
#wrap #contents #maincontent ol {
  list-style-type: decimal;
}
#wrap #contents #maincontent ol  li {
  list-style-type: decimal;
}
#wrap #contents #maincontent ul li {
  list-style-type: none;
  display: block;
  padding: 5px;
  margin-right: 15px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #9BBE7C;
}
#wrap #contents .clear {
  clear: both;
}
#wrap #contents #maincontent img {
  float: left;
  margin: 5px;
  padding: 3px;
}

#wrap #contents #maincontent h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #B7A771;
}
#wrap #contents #maincontent .postdetails {
  padding: 5px;
  height: 15px;
  background-color: #EDEDCC;
  border: 1px solid #C3C492;
}
#wrap #contents #maincontent a {
  color: #996600;
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #996600;
}
#wrap #contents #sidebar ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#wrap #contents #sidebar ul li ul {
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
}
#wrap #contents #sidebar h2 {
  font-size: 14px;
  padding: 3px;
  background-color: #E8F5DC;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #C3C492;
  font-weight: bold;
  text-transform: uppercase;
  color: #996600;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
}
#wrap #contents #sidebar li ul li a {
  display: block;
  padding: 3px;
  text-decoration: none;
  color: #996600;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #996600;
}
#wrap #header {
  background-image: url(ramblingsoul5-images/header.png);
  background-repeat: no-repeat;
  margin: 0px;
  height: 135px;
}
#wrap #header .logo {
  display: block;
  margin: 0px;
  padding-top: 45px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 25px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 28px;
  font-weight: normal;
  color: #9BBE7C;
}
#wrap #header .description {
  padding: 0px;
  margin-top: 0px;
  margin-right: 25px;
  margin-bottom: 0px;
  margin-left: 25px;
}
#wrap #topmenu {
  background-image: url(ramblingsoul5-images/menu.png);
  background-repeat: no-repeat;
  height: 30px;
  padding-top: 10px;
  padding-bottom: 8px;
  padding-right: 25px;
  padding-left: 25px;
  margin-top: 3px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
#wrap #contents #sidebar {
  width: 200px;
  float: right;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 22px;
  padding-bottom: 0px;
  padding-left: 0px;
}
#wrap #contents #sidebar ul li ul li {
  margin: 0px;
  padding: 0px;
}

#wrap #contents #maincontent {
  margin-top: 0px;
  margin-right: 245px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 25px;
}
#wrap #contents #maincontent h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #006600;
}
#wrap #contents #maincontent p {
  line-height: 18px;
}
#wrap #footer {
  background-image: url(ramblingsoul5-images/footerbg.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  height: 75px;
}
#wrap #footer p {
  display: block;
  margin: 15px;
  padding-top: 0px;
  padding-right: 15px;
  padding-bottom: 0px;
  padding-left: 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
}
#wrap #footer a {
  color: #996600;
}


#wrap #topmenu a {
  text-decoration: none;
  display: block;
  float: left;
  margin-right: 5px;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  margin-top: 3px;
  color: #000000;
  border: 1px dashed #D6BD32;
}
#wrap #topmenu a:visited,active {
  text-decoration: none;
  display: block;
  float: left;
  margin-right: 5px;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  margin-top: 3px;
  color: #000000;
  border: 1px dashed #D6BD32;
}
#wrap #topmenu a:hover {
  text-decoration: none;
  display: block;
  float: left;
  margin-right: 5px;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  margin-top: 3px;
  color: #000000;
  border: 1px dashed #000000;
  background-image: url(ramblingsoul5-images/menubg.png);
  background-repeat: repeat-x;
}
#wrap #topmenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#wrap #topmenu li {
  display: inline;
}
#wrap #topmenu .active a {

  text-decoration: none;
  display: block;
  float: left;
  margin-right: 5px;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  margin-top: 3px;
  color: #000000;
  border: 1px dashed #999999;
  background-image: url(ramblingsoul5-images/menubg.png);
  background-repeat: repeat-x;
}
#wrap #contents {
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  background-image: url(ramblingsoul5-images/pagebg.png);
  background-repeat: repeat-y;
  padding: 0px;
}
#wrap #contents #maincontent blockquote p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-style: italic;
}
#wrap #contents #maincontent blockquote {
  margin: 15px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: #CDE9B4;
  padding-left: 15px;
}

#wrap #contents #contenthead {
  background-image: url(ramblingsoul5-images/contenthead.png);
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  height: 18px;
}
#wrap #contents #contentfooter {
  background-image: url(ramblingsoul5-images/contentfooter.png);
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  height: 28px;
}
#wrap #topmenu .active a:visited,active {
  text-decoration: none;
  display: block;
  float: left;
  margin-right: 5px;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  margin-top: 3px;
  color: #000000;
  border: 1px dashed #999999;
  background-image: url(ramblingsoul5-images/menubg.png);
  background-repeat: repeat-x;
}
#wrap #contents #maincontent a:visited,active {
  color: #9BBE7C;
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #9BBE7C;
}
#wrap #contents #maincontent a:hover {
  color: #000000;
  text-decoration: none;
  border-bottom-style: none;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
}
#wrap #footer a:visited,active {
  color: #996600;
}
#wrap #footer a:hover {
  color: #000000;
  text-decoration: none;
}
#wrap #contents #sidebar li ul li a:visited,active {

  display: block;
  padding: 3px;
  text-decoration: none;
  color: #996600;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #996600;
}
#wrap #contents #sidebar li ul li a:hover {

  display: block;
  padding: 3px;
  text-decoration: underline;
  color: #000000;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #996600;
}

</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <h1 class="logo">Sample Logo </h1>
    <span class="description">Just another ramblingsoul template</span> <br />
  </div>
  <div id="topmenu">
    <ul>
      <li class="active"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">free templates</a></li>
      <li><a href="http://www.free-css.com/">My Blog</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <div id="contents">
    <div id="contenthead"> </div>
    <div id="sidebar">
      <ul>
        <li>
          <h2>Recent Posts</h2>
        </li>
        <li>
          <ul>
            <li><a href="http://www.free-css.com/">Another Free Template</a></li>
            <li><a href="http://www.free-css.com/">Another Heading</a></li>
            <li><a href="http://www.free-css.com/">The Header looks like</a></li>
            <li><a href="http://www.free-css.com/">This is a list</a></li>
          </ul>
        </li>
        <li>
          <h2>Categories</h2>
        </li>
        <li>
          <ul>
            <li><a href="http://www.free-css.com/">Another Free Template</a></li>
            <li><a href="http://www.free-css.com/">Another Heading</a></li>
            <li><a href="http://www.free-css.com/">The Header looks like</a></li>
            <li><a href="http://www.free-css.com/">This is a list</a></li>
          </ul>
        </li>
        <li>
          <h2>Pages</h2>
        </li>
        <li>
          <ul>
            <li><a href="http://www.free-css.com/">Another Free Template</a></li>
            <li><a href="http://www.free-css.com/">Another Heading</a></li>
            <li><a href="http://www.free-css.com/">The Header looks like</a></li>
            <li><a href="http://www.free-css.com/">This is a list</a></li>
          </ul>
        </li>
        <li>
          <h2>Links</h2>
        </li>
        <li>
          <ul>
            <li><a href="http://www.free-css.com/">Another Free Template</a></li>
            <li><a href="http://www.free-css.com/">Another Heading</a></li>
            <li><a href="http://www.free-css.com/">The Header looks like</a></li>
            <li><a href="http://www.free-css.com/">This is a list</a></li>
          </ul>
        </li>
        <li>
          <h2>Blogroll</h2>
        </li>
        <li>
          <ul>
            <li><a href="http://www.free-css.com/">Another Free Template</a></li>
            <li><a href="http://www.free-css.com/">Another Heading</a></li>
            <li><a href="http://www.free-css.com/">The Header looks like</a></li>
            <li><a href="http://www.free-css.com/">This is a list</a></li>
          </ul>
        </li>
        <li>
          <h2>Meta</h2>
        </li>
        <li>
          <ul>
            <li><a href="http://www.free-css.com/">Valid XHTML 1.0</a></li>
            <li><a href="http://www.free-css.com/">OpenDesigns</a></li>
            <li><a href="http://www.free-css.com/">Rambling Soul</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="maincontent">
      <h1>Another free template</h1>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sit  amet nibh. In euismod orci ut lorem. Fusce cursus. Nunc ac sapien ac  velit gravida ultrices.</p>
      <blockquote>
        <p> Aliquam eros leo, aliquam vitae, lobortis ut,  molestie sed, dui. Integer mollis nisl mollis dui. Praesent  ullamcorper, sem vitae commodo iaculis, velit ante suscipit dolor, et  congue sapien tellus a nibh. Praesent suscipit, ante et posuere varius,  lorem pede feugiat sem, eu semper nibh ipsum id felis.</p>
      </blockquote>
      <p> Curabitur ipsum  felis, rhoncus id, rhoncus sed, condimentum in, arcu. Duis dapibus  porta odio. Phasellus vitae sem nec arcu pulvinar ultrices. Nulla eu  dui. Praesent rutrum est vitae justo. Fusce lorem sapien, adipiscing  eget, luctus sit amet, bibendum quis, urna... <a href="http://www.free-css.com/">read more</a> </p>
      <h1>Another Heading</h1>
      <img title="Sample Image" src="ramblingsoul5-images/photo.png" alt="Sample Photo" />
      <p>Ut sed velit ac dolor auctor blandit. Praesent auctor sagittis  mauris. Sed convallis nisi eu arcu. Phasellus non odio non eros  facilisis viverra. Proin orci. Donec feugiat, magna malesuada rhoncus  pretium, felis sem convallis elit, et gravida sem risus ac purus.  Curabitur ultricies magna ut tellus. Proin viverra, nibh mattis  suscipit vestibulum, nisi ante sagittis libero, eget elementum eros  nibh aliquam massa. Sed blandit sapien nec nisi. Nulla ac felis sed  lectus dapibus eleifend. Maecenas et metus vel tortor malesuada  tincidunt.   Curabitur ultricies magna ut tellus. Proin viverra, nibh mattis  suscipit vestibulum, nisi ante sagittis libero, eget elementum eros  nibh aliquam massa. Sed blandit sapien nec nisi. Nulla ac felis sed  lectus dapibus eleifend. Maecenas et metus vel tortor malesuada  tincidunt. </p>
      <p> Curabitur ultricies magna ut tellus. Proin viverra, nibh mattis  suscipit vestibulum, nisi ante sagittis libero, eget elementum eros  nibh aliquam massa. Sed blandit sapien nec nisi. Nulla ac felis sed  lectus dapibus eleifend. Maecenas et metus vel tortor malesuada  tincidunt. </p>
      <h1>Here is a list</h1>
      <p>Donec quis pede ut diam iaculis nonummy. </p>
      <ul>
        <li>Quisque tincidunt  posuere sem.</li>
        <li>Maecenas ipsum. Nullam ut libero a dolor accumsan nonummy.  Aliquam auctor sapien a est.</li>
        <li>Suspendisse lobortis tortor a ante  porttitor venenatis.</li>
        <li>Praesent erat magna, rhoncus a, nonummy id,  ullamcorper nec, tellus.</li>
      </ul>
      <h2>This is Heading 2 </h2>
      <small>And this is an ordered list</small>
      <ol>
        <li>Donec tristique eros ut nibh.</li>
        <li>Duis vestibulum enim a felis.</li>
        <li>Cras  egestas vestibulum neque. Aenean ornare tempus urna. Maecenas nisl  velit, iaculis a, malesuada vel,</li>
        <li>eleifend ac, quam. Curabitur nonummy  blandit eros. Vivamus nec velit non lacus fermentum sodales.</li>
        <li>Vivamus  elit. Nam mattis. Vivamus varius vulputate ante. Vivamus et turpis.  Integer venenatis varius neque.</li>
        <li>Class aptent taciti sociosqu ad litora  torquent per conubia nostra, per inceptos hymenaeos.</li>
        <li>Ut tristique.</li>
      </ol>
      <h3>This is heading 3</h3>
      <p>Praesent at arcu ac dui rhoncus luctus. Morbi elit arcu, volutpat  sed, egestas in, volutpat sit amet, pede. Nulla bibendum magna vel  nibh. Quisque quis ipsum. Quisque quis turpis vel metus interdum  lobortis. Morbi interdum pellentesque nibh. Proin tincidunt, lectus  euismod consectetuer suscipit, libero nunc egestas purus, vitae  pellentesque elit metus sed arcu. In ligula nulla, sodales quis,  lacinia eget, consequat eu, nisl. Phasellus tellus erat, eleifend  vitae, feugiat eu, tristique vel, dui. In sit amet diam in dui varius  ornare. Quisque eu elit. </p>
      <div class="postdetails"> <a href="http://www.free-css.com/">Posted on 3rd May 2007</a> | <a href="http://www.free-css.com/">News</a> | <a href="http://www.free-css.com/">No Comments</a></div>
    </div>
    <div class="clear"></div>
    <div id="contentfooter"> </div>
  </div>
  <div id="footer">
    <p>Copyright Information | Put some Quick Links | And something else<br />
      Designed by : <a href="http://www.ramblingsoul.com">Rambling Soul</a></p>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul7
49.ramblingsoul_2
50.ramblingsoul_3
51.random
52.rational
53.realize
54.realone
55.rebel-magazine
56.reckoning
57.recreations
58.reference
59.regeneracy
60.rehabilitation
61.reinvent
62.replenish
63.republic
64.resizeme
65.resplendissant
66.revolt-01
67.ridinghood
68.rockband
69.rogue
70.Rothko
71.route66
72.rust
73.safe-as-houses
74.sahara
75.sampling
76.Sapphire
77.schemermag
78.scotchmark
79.scribbled
80.secretlab
81.seduction
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous