minimalistic : Effect 2 « Templates « HTML / CSS

HTML / CSS » Templates » Effect 2 
minimalistic
   

<!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>Minimalistic</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* 
Stylesheet for the free sNews15_1 template
from http://www.free-css-templates.com
*/

/* Reset all margins and paddings for browsers */

  padding: 0;
  margin: 0;
}

body 
  font: .8em Verdana, Arial, Sans-Serif; 
  line-height: 1.6em; 
  margin: 0
}

#wrap {  margin: auto;  width: 80}

/* TOP HEADER -------- */
#top {
  margin: auto;
  padding: 0;
  color: #666;
  background: #FFF url(minimalistic-images/top.jpgrepeat-x top;
  height: 81px;
}
#top h1 padding: 10px 0 0 25px; color: #FFF; font-size: 160%; background: transparent;}
#top h2 padding: 0px 0 0 25px; color: #aaa; font-size: 80%; background: transparent;}
#top .padding padding-top: 5px; }
#top .lefts 
  background: transparent url(minimalistic-images/topl.jpgno-repeat left; 
  height: 81px; 
}
#top .rights {
  background: transparent url(minimalistic-images/topr.jpgno-repeat right;
  float: right;
  height: 81px;
  width: 18px;
}

/* SEARCH BOX AND BUTTON ----------*/
#search float: right;  padding: 10px 25px 0 0;  }

#search input.text 
  border: 1px solid #eee;
  display: inline;
  margin-top: 5px;
  width: 120px;
  height: 12px;
  font-size: 10px;
 }
 #search input.searchbutton {
  border: 0;
  background: transparent;
  color: #FFF;
  cursor: pointer;
  font: bold 0.8em Arial, Arial, Sans-Serif
 }

#subheader 
  clear: both; 
  border-top: 1px dotted #888;  
  border-bottom: 1px dotted #888;
  background: #eaeaea;
  color: #808080;
  padding: 1em;
  margin: 15px 8px 10px 8px;
  
}
#subheader a text-decoration: none; border-bottom: 1px dashed #0066B3; 
 
 
/* TOP MENU ---------- */
#topmenu {    margin: 0px 8px 0 8px; 
      padding: 0;
      background: url(minimalistic-images/menu.jpgrepeat-x top;
      height: 35px;
      
}
#topmenu .lefts 
  background: url(minimalistic-images/menul.jpgno-repeat left; 
  height: 35px; 
  padding-left: 5px;
}
#topmenu .rights {
  background: url(minimalistic-images/menur.jpgno-repeat right;
  float: right;
  height: 35px;
  width: 8px;
}
#topmenu li a 
  color: #FFF;
  text-align: left;
  padding-left: 10px;
  padding-right: 15px;
  text-decoration: none;
  background: transparent;
  font-weight: bold

#topmenu li padding: 0px;
  float: left;
  margin: 0;
  font-size: 11px;
  line-height: 35px;
  white-space: nowrap;
  list-style-type: none;
  width: auto;
  background: url(minimalistic-images/sep.gifno-repeat top right
  
}

#main background: #FFF; margin: 25px 0 15px 0; color: #666}

#main #rightside {
  width: 220px;
  float: right;
  background: #FFF;
  margin-right: 8px;
  color: #666;
  


#main #rightside .box {
  background: #efefef;
  margin-bottom: 10px;
  padding: 5px;
  color: #666;
}

#main #rightside h2 {
  font: bold 1.0em Arial, Arial, Sans-Serif; 
    background: #CDCDCD url(minimalistic-images/greyc.gifno-repeat top right;
  height: 18px;
  padding: 3px;
  color: #777;
}


/* LEFT SIDE - ARTICLES AREA -------- */
#leftside {
  padding-left: 8px;
  color: #888;
  background: #FFF;
  margin-right: 255px;
  margin-left: 8px;
  
}
#leftside h2 color: #555; text-indent: 17px; background: #FFF url(minimalistic-images/head.gifno-repeat left; }

#footer {
  clear: both;
  background: #FFF url(minimalistic-images/footer.jpgrepeat-x;
  height: 46px;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 75%;
  color: #666;
}
#footer p  padding: 5px }
#footer .rside float: right; display: inline; padding: 5px; text-align: right}

 
color: #0066B3; background: inherit; text-decoration: none }
h1 font: bold 1.9em Arial, Arial, Sans-Serif }
h2 font: bold 1.2em Arial, Arial, Sans-Serif; padding: 0; margin: }
ul {  padding: 0; margin: 0}
li list-style-type: none }
.date border-top: 1px solid #e5e5e5; text-align: right; margin-bottom: 25px; margin-top: 5px;}
#main #leftside .date a, #main #rightside a border: 0; text-decoration: none; }
 
.comment .date text-align: left; border: 0;}  


#breadcrumbs 
  float: left;
  padding-left: 8px;
  padding-top: 0px;
  font: bold .8em Arial, Arial, Sans-Serif; 
  color: #666;
  width: 100%;
  height: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
  clear: both;
}



#leftside #txt {width: 85%; height: 10em; padding: 3px 3px 3px 6px; margin-left:0em;}
#leftside textarea border: 1px solid #bbb; width: 85%;  }


/* SNEWS */
#main #leftside fieldset float: left; width: 95%; border: 1px solid #ccc; padding: 10px 8px; margin: 0 10px 8px 0; background: #FFF; color: #000}
#main #leftside fieldset p width: 95%; }
#main input padding: 3px; margin: 0; border: 1px solid #bbb }
margin-top: 5px; }
/*input.search { border: 1px solid #ccc; padding: 4px; width: 160px; }*/
.comment background: #FFF; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }
.commentsbox background: #FFF; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }


</style>


</head>
<body>
<div id="wrap">
  <div id="top">
    <div class="rights"> </div>
    <div id="search"> </div>
    <div class="lefts">
      <h1>sNews 1.5</h1>
      <h2>More features, less code</h2>
    </div>
  </div>
  <div id="topmenu">
    <div class="rights"></div>
    <div class="lefts">
      <ul>
        <li><a href="http://www.free-css.com/">HOME</a></li>
        <li><a href="http://www.free-css.com/">ARTICLES</a></li>
        <li><a href="http://www.free-css.com/">GALLERY</a></li>
        <li><a href="http://www.free-css.com/">AFFILIATES</a></li>
        <li><a href="http://www.free-css.com/">ARTICLES</a></li>
        <li><a href="http://www.free-css.com/">ABOUTS US</a></li>
        <li><a href="http://www.free-css.com/">CONTACT</a></li>
      </ul>
    </div>
  </div>
  <div id="subheader"> <strong>sNews</strong> is both template independant, and standards compliant, and having only one file means you can redesign your site whenever you want. We are constantly working on sNews development, which means that as new features are added, all you have to do is <a href="http://snews.solucija.com/" title="download">download</a> and install the newer version. Your site and design will not be affected. </div>
  <div id="main">
    <div id="rightside">
      <h2>Categories:</h2>
      <div class="box">
        <ul>
          <li><a href="http://www.free-css.com/">Templates (15)</a></li>
          <li><a href="http://www.free-css.com/">Internet (10)</a></li>
          <li><a href="http://www.free-css.com/">Tutorials (23)</a></li>
          <li><a href="http://www.free-css.com/">Photoshop (11)</a></li>
          <li><a href="http://www.free-css.com/">sNews (16)</a></li>
          <li><a href="http://www.free-css.com/">Personal (5)</a></li>
        </ul>
      </div>
      <h2>New Articles:</h2>
      <div class="box">
        <ul>
          <li><a href="http://www.free-css.com/">I would like to send...</a></li>
          <li><a href="http://www.free-css.com/">This simple tutorial will...</a></li>
          <li><a href="http://www.free-css.com/">To make this nice fade...</a></li>
          <li><a href="http://www.free-css.com/">If you want to advertise...</a></li>
          <li><a href="http://www.free-css.com/">This has to be one of the...</a></li>
          <li><a href="http://www.free-css.com/">This day I would like to...</a></li>
        </ul>
      </div>
      <h2>Sponsored Links</h2>
      <div class="box">
        <ul>
          <li><a href="http://www.free-css.com/">Links4se.com</a></li>
        </ul>
      </div>
    </div>
    <div id="leftside">
      <h2> Download this template for free! </h2>
      <p> <img src="minimalistic-images/img.jpg" alt="img" /> Phasellus quis est eget metus blandit lacinia. Quisque molestie, diam a dignissim mattis, lectus felis placerat lectus, eget sollicitudin neque nunc eleifend metus. <a href="http://www.free-css.com/">Curabitur ullamcorper</a> sem ac pede gravida sagittis. Sed et felis. Vestibulum placerat, ipsum nec congue auctor, ante massa placerat felis, sit amet <strong>consectetuer</strong> elit arcu vitae metus. In commodo, risus sed tristique luctus, ipsum diam dapibus eros, et vehicula dui augue tempus quam. In laoreet. Suspendisse et pede volutpat lacus interdum consequat. Cras dui. Quisque ac turpis nec ligula rutrum pulvinar. Quisque lectus ligula, vehicula nec, fringilla eu, dignissim ut, nisl. Vestibulum non turpis. Maecenas urna. </p>
      <div class="date"><a href="http://www.free-css.com/">Comments (5)</a> . 05 Jan 2007 10:37</div>
      <h2>Lorem Ipsum</h2>
      <p> Sed odio tortor, rhoncus ac, auctor a, volutpat sed, diam. Quisque imperdiet. Maecenas quis nisl. Fusce sed nibh eget odio faucibus lobortis. Fusce sagittis est sed elit. Sed venenatis elit ut urna. Etiam varius imperdiet leo. Integer rhoncus venenatis arcu. Donec sollicitudin lectus. Cras ac est. Fusce odio. Donec posuere fermentum dolor. Sed a lacus tristique tellus ultrices mattis. Sed adipiscing urna a orci. Maecenas pharetra volutpat sem. </p>
      <div class="date"><a href="http://www.free-css.com/">Comments (11)</a> . 07 Jan 2007 02:56</div>
    </div>
  </div>
  <div id="footer">
    <div class="rside">&copy; Copyright 2006, <a href="http://www.free-css.com/">Your Site Name</a> - <a href="http://www.free-css.com/">HOME</a><br />
      Design: <a href="http://www.free-css-templates.com" title="Design by David Herreman">David Herreman</a></div>
    <p> <a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> </p>
  </div>
</div>
</body>
</html>

   
    
    
  
Related examples in the same category
1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
6.plain2
7.plastic-surgery
8.plastics
9.overdose
10.outlined
11.optimism
12.optimistic
13.Modern_Theme
14.MultiStrangeColor
15.modern
16.primitive
17.sparkle
18.sparkling
19.spotlight
20.simplyfluid
21.slider
22.pragmatic
23.popular
24.primitif
25.pure-web-2.0
26.pure
27.reflection
28.reflections
29.royal-cyan
30.royal_policy
31.smalltown
32.smallwindow
33.smartdesign
34.smarttouch
35.splendid
36.workfire
37.webtile
38.Wide_Side
39.zionnarrow
40.zionnarrows
41.xtreme
42.ZEN
43.zenlike
44.wondrous
45.stonewalled
46.tattoopatt
47.tattoopattern
48.tastelessly
49.tasty
50.thebarn
51.tinfoil_helmet
52.tomato
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.