ramblingsoul_3 : Design 7 « Templates « HTML / CSS






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>&nbsp;</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">&nbsp;</div>
<div class="footer"> 
  <p>&copy; 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

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.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
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