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: 0 auto; width: 80% }
/* TOP HEADER -------- */
#top {
margin: 0 auto;
padding: 0;
color: #666;
background: #FFF url(minimalistic-images/top.jpg) repeat-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.jpg) no-repeat left;
height: 81px;
}
#top .rights {
background: transparent url(minimalistic-images/topr.jpg) no-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.jpg) repeat-x top;
height: 35px;
}
#topmenu .lefts {
background: url(minimalistic-images/menul.jpg) no-repeat left;
height: 35px;
padding-left: 5px;
}
#topmenu .rights {
background: url(minimalistic-images/menur.jpg) no-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.gif) no-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.gif) no-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.gif) no-repeat left; }
#footer {
clear: both;
background: #FFF url(minimalistic-images/footer.jpg) repeat-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}
a { 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: 0 }
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 }
p { 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">© 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