reinvent : Design 7 « Templates « HTML / CSS






reinvent

  

<!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>Reinvent - Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {padding:0; margin:0;}
body {font-family: "Trebuchet MS", Verdana, sans-serif;  color: #666666;  background:#444;}
.clear {clear:both;}
h2, h3, h4 {display:block;}
ul {list-style:none;}
a{color:#069;}
a:visited {color:#333;}
a:active {color:#063;}
a:hover {text-decoration:none;}
.readmore a { background:url(reinvent-images/bullet.png) 1px 2px no-repeat; display:block; padding:0 3px 0 15px; float:right;}
#wrap {background:#333; padding:10px; width:700px; margin:30px auto 30px auto}
#content {background:#fff;}
#content .post {padding:10px;}
#topnav {background:#333; height:91px; padding:10px; background: url(reinvent-images/sidebarbg.png) left top no-repeat;}
#header_home {display:block; height:150px; background:url(reinvent-images/header.jpg) center top no-repeat; text-align:center;}
.sitename {display:block; font:22px "Trebuchet MS", Verdana, sans-serif; color:#fff; height:30px; padding:8px 5px 0 5px; margin:0; text-transform:uppercase; letter-spacing:12px;}
.sitename a, .sitename a:visited, .sitename a:active {color:#fff; text-decoration:none;}
.sitename a:hover {color:#eee; text-decoration:none;}
.description {display:block; font: normal 12px Georgia, "Times New Roman", Times, serif;}
#content {font: normal 13px "Trebuchet MS", Verdana, sans-serif;}
#content p {line-height:18px; margin-bottom:18px;}
.subhead {font: bold 16px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase; color:#999999; padding:5px; text-align:center; display:block; background:#efefef;}
#searchbox {width:155px; float:left; padding-top: 15px;}
#topnavmain { float: right;  width: 370px; height: 88px;  background: url(reinvent-images/browse.png) no-repeat 1px 38px; padding-left: 110px;}
#searchbox #search {background: url(reinvent-images/search.png) no-repeat; height:46px;}
#search input { background: transparent; border-style: none; font-size: 10px; display: block; width: 115px; padding: 24px 5px 2px; color: #FFFFFF;}
#topnav h2 {font:bold 14px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase;}
#nav {padding-top: 33px;}
#nav li {display: inline;}
#nav a {display:block; background: url(reinvent-images/menu2.png) repeat-x; height:44px; padding:2px 10px 0 10px; float:left; margin-left:2px; color:#666; text-decoration:none;}
#nav a:hover {background:url(reinvent-images/menu1.png) repeat-x; color:#fff; text-decoration:none;}
#nav .active a {background:url(reinvent-images/menu3.png) repeat-x; color:#000; text-decoration:none;}
h2 .postmeta {display:block; font: normal 12px Georgia, "Times New Roman", Times, serif; color:#999; margin-bottom:18px;}
.post h2 {font:18px "Trebuchet MS", Verdana, sans-serif; color:#069; margin-bottom:10px;}
#footer h2 {font:18px "Trebuchet MS", Verdana, sans-serif; color:#666666;}
.post h2 a {color:#069; text-decoration:none;}
.post h2 a:hover {color:#000; background:#FFFFF0;}
.page_nav {background: #333; padding:3px 15px 3px 15px; height:20px;}
.alignleft {float:left; display:block;}
.alignright {float:right; display:block;}
.page_nav a, .page_nav a:visited, .pagenav a:active {color:#999; text-decoration:none;}
.page_nav a:hover {color:#fff;}
#col1 {float:left; width:49%;}
#col2 {float:right; width:49%;}
#footer {background: #222 url(reinvent-images/footer.jpg) no-repeat; padding:0 10px 10px 10px; font:12px "Trebuchet MS", Verdana, sans-serif; color:#666;}
#footertop { height: 40px; padding-top:10px; margin-bottom:10px;}
#leftfooter { float: left; width: 35%;}
#rightfooter { float: right; width: 63%;}
#bottom { padding:10px 10px 10px 75px; clear:both; background:url(reinvent-images/footerbtm.jpg) 3px 5px no-repeat; border-top: solid 1px #333; margin-top:15px;}
#sidebar2 {float:right; width:48%;}
#sidebar1 {float:left; width:48%;}
#rightfooter li { display:block; height:22px; border-bottom: 1px solid #2C2C2C;}
#rightfooter a, #rightfooter a:visited, #rightfooter a:active {display:block; height:19px; padding:3px 8px 0 8px; text-decoration:none; color:#069;}
#rightfooter a:hover {color:#fff; background:#000;}
#footer h2 { padding:3px; font: bold 16px "Trebuchet MS", Verdana, sans-serif; color:#999; }
#leftfooter .author {padding:5px 8px 3px 3px; float:left;}
#footer img {border:none;}
#footertop ul {text-align:center; padding-top:8px;}
#footertop li {display: inline;}
#footertop a, #footertop a:visited {color:#999; padding:3px; margin:3px; text-decoration:none;}
#footertop a:hover {color:#fff; }
#bottom a, #bottom a:visited{color:#999;}
#bottom a:hover {color:#fff; text-decoration:none;}
.postbottom {background:#f4f4f4; border:solid 1px #ddd; padding:3px; font-size:11px;}
/*comments*/
#comments{margin:15px;}
#comments .odd {background:#f4f4f4;}
#comments .even {background:#EEECE6;}
#comments ul li p {margin:0;}
#comments li { display:block; border:solid 1px #ddd; margin-bottom:8px; padding:8px;}
input, textarea {display:block; background:#f4f4f4; border:solid 1px #ddd; padding:5px;}
input:hover, textarea:hover {background:#fff; border:solid 1px #bbb;}
input:focus, textarea:focus {background:#fff; border:solid 1px #333;}
label {display:block; font: normal 14px "Trebuchet MS", Verdana, sans-serif; color:#000;}
img.alignleft, img.alignright {padding:3px; background:#efefef; border:solid 1px #333; margin:5px;}
blockquote {margin:10px; background:#f4f4f4; border:solid 1px #ddd; padding:10px;}
cite {font: bold italic 16px "Trebuchet MS", Verdana, sans-serif;}
.post ul, .post ol {padding:10px 10px 5px 25px;}
.post ul li {list-style:square; padding:3px;}
.post ol li {padding:3px;}
code {
  display:block;
  background:#333;
  border:solid 1px #000;
  color:#999;
  padding:5px;
  white-space: pre;
  font-size:12px;
}

</style>


<link href="dropcap.css" rel="stylesheet" media="screen"  type="text/css" />
</head>
<body>
<div id="wrap">
  <h1 id="header_home"> <span class="sitename"><a href="http://www.free-css.com/">Reinvent</a></span> <span class="description">A Free CSS Template by RamblingSoul</span></h1>
  <div id="content">
    <div id="topnav">
      <div id="searchbox">
        <form action="#">
          <div id="search">
            <input type="text" value="Search" size="25" />
          </div>
        </form>
      </div>
      <div id="topnavmain">
        <ul id="nav">
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li class="active"><a href="blog.html">Blog Layout</a></li>
          <li><a href="styles.html">Styles</a></li>
          <li><a href="notes.html">Notes</a></li>
          <li><a href="#footer">More</a></li>
        </ul>
      </div>
    </div>
    <div class="post">
      <h2><a href="http://www.free-css.com/">H2 Post Title Title - Blog Example</a><span class="postmeta">By Author</span> </h2>
      <p><b class="drop-m"><span>M</span></b>auris nisi diam, feugiat a, ultricies eget, dapibus eu, felis.  Vestibulum turpis est, condimentum in, auctor mattis, vehicula at,  nisl. Etiam tempus, eros ut rutrum pretium, orci justo ornare mi, ac  accumsan quam nulla mattis metus. Donec scelerisque tristique ante.  Integer imperdiet, purus a malesuada ornare, odio lorem dictum tellus,  eget rhoncus dui ante gravida massa. Integer massa pede, laoreet  commodo, viverra nec, vestibulum nec, velit. Donec at dui. Nulla  facilisi. Duis arcu nisl, eleifend quis, feugiat vitae, iaculis sed,  risus. Vivamus placerat massa a felis. Praesent vitae turpis et lorem  iaculis dapibus. Sed malesuada, quam vel tincidunt bibendum, orci  sapien vestibulum sem, vitae laoreet mi dui ac sem. Aenean urna. </p>
      <div class="postbottom"><a href="http://www.free-css.com/">Category</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Permalink</a> | Posted on : 15/06/2009</div>
    </div>
    <div class="post">
      <h2><a href="http://www.free-css.com/">The rest is just Lorem Ipsum</a><span class="postmeta">Some keywords or description</span> </h2>
      <p><b class="drop-v"><span>V</span></b>itae pede pulvinar consequat. Fusce sollicitudin  neque at tortor. In aliquam justo eget est. Quisque nulla orci, commodo  non, rutrum vitae, consequat vitae, ante. Suspendisse dignissim nulla  eget lectus. Integer venenatis sapien et mauris. Nam rutrum, tortor  eget condimentum aliquet, nunc felis tincidunt purus, vel elementum  erat massa non ligula. Morbi luctus porta orci. Integer sed dolor.  Nullam ut libero. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. Donec semper quam sed arcu. Sed nibh  metus, facilisis nec, elementum id, tempus in, erat. Morbi porta ligula  sit amet sapien. Nullam interdum, odio id sollicitudin scelerisque, leo  tortor pharetra nibh, sit amet bibendum elit libero viverra lorem.  Quisque elit. </p>
      <div class="postbottom"><a href="http://www.free-css.com/">Category</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Permalink</a> | Posted on : 15/06/2009</div>
    </div>
    <div class="post">
      <h2><a href="http://www.free-css.com/">The rest is just Lorem Ipsum </a><span class="postmeta">By Author</span> </h2>
      <p><b class="drop-d"><span>D</span></b>apibus eu, felis.  Vestibulum turpis est, condimentum in, auctor mattis, vehicula at,  nisl. Etiam tempus, eros ut rutrum pretium, orci justo ornare mi, ac  accumsan quam nulla mattis metus. Donec scelerisque tristique ante.  Integer imperdiet, purus a malesuada ornare, odio lorem dictum tellus,  eget rhoncus dui ante gravida massa. Integer massa pede, laoreet  commodo, viverra nec, vestibulum nec, velit. Donec at dui. Nulla  facilisi. Duis arcu nisl, eleifend quis, feugiat vitae, iaculis sed,  risus. Vivamus placerat massa a felis. Praesent vitae turpis et lorem  iaculis dapibus. Sed malesuada, quam vel tincidunt bibendum, orci  sapien vestibulum sem, vitae laoreet mi dui ac sem. Aenean urna. </p>
      <div class="postbottom"><a href="http://www.free-css.com/">Category</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Permalink</a> | Posted on : 15/06/2009</div>
      <div id="comments">
        <h3 id="comments">2 Responses to &#8220;Re-invent Blog&#8221;</h3>
        <ul class="commentlist">
          <li id="comment1"class="odd"> <img src="reinvent-images/72de71e0c4887864b7df1863d7559ed9.jpg" width="40" height="40" alt="" /> <cite><a href="http://www.free-css.com/">User</a></cite> Says: <br />
            <small class="commentmetadata">June 13th, 2008 at 9:38 pm </small>
            <p>This is a Comment</p>
          </li>
          <li id="comment2"class="even"> <img src="reinvent-images/72de71e0c4887864b7df1863d7559ed9.jpg" width="40" height="40" alt="" /> <cite>Admin</cite> Says: <br />
            <small class="commentmetadata">June 14th, 2008 at 12:31 pm </small>
            <p>Thanks for your comment</p>
          </li>
        </ul>
        <h3 id="respond">Leave a Reply</h3>
        <form action="#" method="post" id="commentform">
          <p>
            <input type="text" name="author" id="author" size="22" tabindex="1" />
            <label for="author"><small>Name (required)</small></label>
          </p>
          <p>
            <input type="text" name="email" id="email" size="22" tabindex="2" />
            <label for="email"><small>Mail (will not be published) (required)</small></label>
          </p>
          <p>
            <input type="text" name="url" id="url" value="" size="22" tabindex="3" />
            <label for="url"><small>Website</small></label>
          </p>
          <p>
            <textarea name="comment" id="comment" cols="45%" rows="10" tabindex="4"></textarea>
          </p>
          <p>
            <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
          </p>
        </form>
      </div>
    </div>
    <div class="page_nav"><span class="alignleft"><a href="http://www.free-css.com/">&laquo; Previous Entries</a></span> <span class="alignright"><a href="http://www.free-css.com/">Next Entries &raquo;</a></span></div>
    <div class="clear"></div>
  </div>
  <div id="footer">
    <div id="footertop">
      <ul id="bottomlinks">
        <li><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/">Services</a></li>
        <li><a href="http://www.free-css.com/">Portfolio</a></li>
        <li><a href="http://www.free-css.com/">Blog</a></li>
        <li><a href="http://www.free-css.com/">Contact</a></li>
        <li><a href="http://www.free-css.com/">Privacy Policy</a></li>
        <li><a href="http://www.free-css.com/">Sitemap</a></li>
      </ul>
    </div>
    <div id="leftfooter"> <img class="author" src="reinvent-images/user.jpg" alt="" />
      <h2>About</h2>
      <p>ullam nec massa vitae pede pulvinar consequat. Fusce sollicitudin  neque at tortor. In aliquam justo eget est. Quisque nulla orci, commodo  non, rutrum vitae, consequat vitae, ante. Duis arcu nisl, eleifend quis, feugiat vitae, iaculis sed,  risus. Vivamus placerat massa a felis. Praesent vitae turpis et lorem  iaculis dapibus.</p>
    </div>
    <div id="rightfooter">
      <div id="sidebar1">
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Site News</a></li>
          <li><a href="http://www.free-css.com/">Events &amp; Activities</a></li>
          <li><a href="http://www.free-css.com/">Open Source</a></li>
          <li><a href="http://www.free-css.com/">Graphic Design</a></li>
          <li><a href="http://www.free-css.com/">Web Design</a></li>
          <li><a href="http://www.free-css.com/">CSS Templates</a></li>
        </ul>
      </div>
      <div id="sidebar2">
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">January 2008</a></li>
          <li><a href="http://www.free-css.com/">February 2008</a></li>
          <li><a href="http://www.free-css.com/">March 2008</a></li>
          <li><a href="http://www.free-css.com/">April 2008</a></li>
          <li><a href="http://www.free-css.com/">May 2008</a></li>
          <li><a href="http://www.free-css.com/">June 2008</a></li>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
    <div id="bottom"> Copyright &copy; yourwebsite.com | All Rights Reserved <br />
      <a href="http://ramblingsoul.com">CSS Template</a> by RamblingSoul | Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a> <br />
      Released under <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a></div>
  </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.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
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