internet-encyclopedia
<!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>Internet Encyclopedia</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/*
project: internet encyclopedia
author: luka cvrk (www.solucija.com)
*/
:link,:visited { text-decoration:none } :focus,:active { outline: 0 } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } a img,:link img,:visited img, fieldset { border:none } address { font-style:normal }
body { font: .8em "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; background: #F7FCFF url(internet-encyclopedia-images/bg.gif) repeat-x; }
a { color: #AF1515; cursor: pointer; }
a:hover { color: #7D1919; }
h1 { font-size: 3em; clear: both; margin: 0 0 5px; }
h2 { font: normal 1.6em Arial; color: #3D3C3B; margin: 0 0 15px; }
h2#slogan { font-size: 1.3em; color: #808080; }
p { margin: 0 0 15px; line-height: 1.7em; }
.clear { clear: both; }
.wrap { margin: 0 auto; width: 900px; }
.background { background: url(internet-encyclopedia-images/bg.jpg) no-repeat left 42px; }
#search { float: right; margin: 9px 0 0; width: 205px; }
input.field { float: left; background: #808080; color: #ccc; padding: 4px; border: 0; margin: 0 5px 0 0; width: 170px; font: .8em "Trebuchet MS", Arial, Sans-Serif; }
input.field:focus { border-bottom: 1px dotted #ccc; color: #fff; }
input.button { float: right; background: url(internet-encyclopedia-images/search.gif) no-repeat; width: 20px; height: 13px; border: 0; margin: 5px 0 0; }
#menu { padding: 0 0 8px; margin: 0 0 25px; height: 20px; }
#menu li { display: inline; }
#menu li a { float: left; width: 86px; text-align: center; margin: 0 2px 0 0; font-weight: bold; font-size: .8em; padding: 16px 0 21px; color: #ccc; }
#menu li a:hover, #menu li a.current { color: #AF1515; background: url(internet-encyclopedia-images/menu.gif) no-repeat center bottom; }
#logo { float: left; margin: 40px 0 0; }
#feature{ color: #33617F; float: right; background: #fff; width: 580px; height: 160px; margin: 0 0 40px; font-size: 1.1em; font-style: italic; padding: 10px 10px 2px; }
#feature img { float: left; margin: 0 20px 0 0; }
#feature p { margin: 10px 0 0; }
.more { font-size: .74em; font-weight: bold; margin: 0 5px 0 0; color: #390505; font-style: normal; }
#feature_menu { float: right; }
#feature_menu li { display: inline; }
#feature_menu li a { color: #33617F; float: left; padding: 6px 14px 6px 21px; margin: 0 0 0 2px; background: #C6E5F9 url(internet-encyclopedia-images/bullet.gif) no-repeat 7px 12px; font-size: .8em; font-weight: bold; }
#feature_menu li a:hover { color: #071F2D; background: #fff url(internet-encyclopedia-images/bullet_hover.gif) no-repeat 7px 8px; }
#feature_menu li a.current { background: #fff url(internet-encyclopedia-images/bullet.gif) no-repeat 5px 12px; }
#feature, #feature_menu li a {
opacity: 0.6;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
#left { float: left; width: 550px; margin: 0 0 10px; text-align: justify; }
#left h2 { color: #52A9BA; }
#left h2 a { border-bottom: 1px dotted #ACCADE; padding: 0 0 3px; }
#left .more { color: #7EA4BC; }
.subtitle { font-weight: bold; font-style: italic; font-size: 1.1em; margin: 0 0 4px; }
.date { background: #fff; padding: 5px 0; border-right: 1px solid #D3EAFA; border-bottom: 1px solid #D3EAFA; color: #ccc; float: left; width: 55px; margin: 7px 12px 5px 0; text-align: center; }
.date span { font-size: 1.6em; }
#side { float: right; width: 300px; margin: 0 0 30px; font-size: .9em; }
#side h3 { color: #ccc; margin: 0 0 6px 5px; height: 16px; }
.boxtop { background: url(internet-encyclopedia-images/box.gif) no-repeat top; padding: 2px 0; }
.box { padding: 3px 6px; background: #363636; }
.boxbottom { background: url(internet-encyclopedia-images/box.gif) no-repeat bottom; padding: 2px 0; }
.item { font-size: .94em; display: block; color: #ccc; background: #fff url(internet-encyclopedia-images/item.gif) no-repeat; height: 54px; padding: 4px 10px; margin: 0 0 5px; }
.item.last { margin: 0; }
.item:hover { background: #fff url(internet-encyclopedia-images/item.gif) no-repeat bottom; color: #fff; }
.item strong { color: #FFFAD3; line-height: 27px; }
.sidedate { float: left; width: 35px; text-align: center; padding: 4px 9px 0 0; font-size: 1.6em; margin: 0 12px 0 0; border-right: 1px dotted #808080; }
.sidedate span { font-size: .6em; font-weight: bold; color: #808080; }
#ad { background: url(internet-encyclopedia-images/dot.gif) repeat-x; padding: 15px 0 10px; clear: both; font-size: .9em; line-height: 1.7em; }
#promo { clear: both; border-top: 3px solid #6E6E6E; background: #505050 url(internet-encyclopedia-images/footer.gif) no-repeat right top; color: #ccc; padding: 30px 0 0 0; }
#promo h2 { color: #fff; }
#promo a { color: #D9EAF9; border-bottom: 1px dotted #808080; }
.col { float: left; width: 280px; margin: 0 30px 20px 0; }
.last { margin: 0; }
#footer { clear: both; padding: 15px 0; font-size: .84em; color: #808080; border-top: 1px dotted #666; }
</style>
</head>
<body>
<div class="wrap background">
<div id="search">
<form action="http://www.free-css.com/">
<fieldset>
<input type="text" class="field" value="Search Keywords" />
<input type="submit" class="button" value="" />
</fieldset>
</form>
</div>
<ul id="menu">
<li><a href="http://www.free-css.com/" class="current">HOME</a></li>
<li><a href="http://www.free-css.com/">ARTS</a></li>
<li><a href="http://www.free-css.com/">BIOGRAPHY</a></li>
<li><a href="http://www.free-css.com/">GEOGRAPHY</a></li>
<li><a href="http://www.free-css.com/">HISTORY</a></li>
<li><a href="http://www.free-css.com/">MATHEMATICS</a></li>
<li><a href="http://www.free-css.com/">SCIENCE</a></li>
</ul>
<div id="logo">
<h1><a href="http://www.free-css.com/">Internet<br />
Encyclopedia</a></h1>
<h2 id="slogan">Hunger for Knowledge</h2>
</div>
<ul id="feature_menu">
<li><a href="http://www.free-css.com/" class="current">DID YOU KNOW...</a></li>
<li><a href="http://www.free-css.com/">ON THIS DAY</a></li>
<li><a href="http://www.free-css.com/">FEATURED CONTENT</a></li>
</ul>
<div id="feature"> <img src="internet-encyclopedia-images/feature_img.gif" alt="" />
<p>Mauris magna sem, pellentesque sit amet, nonummy vel, nonummy id, velit. Mauris facilisis, quam ut semper adipiscing, magna diam laoreet ante, ac varius massa dolor sit amet augue.</p>
<p><a class="more" href="http://www.free-css.com/">¬ READ MORE</a></p>
</div>
<div class="clear"></div>
<div id="left">
<h2><a href="http://www.free-css.com/">Today's featured article</a></h2>
<p class="date"><span>18th</span><br />
July</p>
<p class="subtitle">Aenean justo nisl, luctus sit amet, malesuada ac, dignissim ac, eros</p>
<p>Maecenas libero neque, volutpat sit amet, varius et, <em>pretium quis</em>, purus. Nulla ut magna. Nunc nec dui eget erat vulputate sagittis. Suspendisse fermentum odio. Mauris magna sem, pellentesque sit amet, nonummy vel, nonummy id, velit. <a href="http://www.free-css.com/">Mauris facilisis quam ut semper adipiscing</a>, magna diam laoreet ante, ac varius massa dolor sit amet augue. Vivamus purus. Integer consequat. Nunc et nunc. <a href="http://www.free-css.com/">Phasellus augue</a> diam, vestibulum non, iaculis eget, tristique sed, lectus. Sed pede. Nullam egestas ante a mauris. Aliquam metus turpis, luctus ac, sagittis eget, elementum tincidunt, massa. Aenean justo nisl, luctus sit amet, malesuada ac, dignissim ac, eros nec dui eget erat vulputate sagittis.</p>
<p><a class="more" href="http://www.free-css.com/">¬ READ MORE</a> <a class="more" href="http://www.free-css.com/">¬ COMMENT [12]</a> <a class="more" href="http://www.free-css.com/">¬ SHARE</a> </p>
</div>
<div id="side">
<div class="boxtop"></div>
<div class="box">
<h3>POPULAR ARTICLES</h3>
<a href="http://www.free-css.com/"> <span class="item"> <span class="sidedate">4.5<br />
<span>RATING</span></span> <strong>Lorem ipsum dolor sit amet</strong><br />
Consectetuer adipiscing elit. </span> </a> <a href="http://www.free-css.com/"> <span class="item"> <span class="sidedate">4.5<br />
<span>RATING</span></span> <strong>Suspendisse odio orci</strong><br />
Nam tortor libero, dictum vulputate. </span> </a> <a href="http://www.free-css.com/"> <span class="item last"> <span class="sidedate">4.5<br />
<span>RATING</span></span> <strong>Aliquam metus turpis luctus ac</strong><br />
Suspendisse egestas fringilla odio. </span> </a> </div>
<div class="boxbottom"></div>
</div>
<p id="ad">Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam blandit ultricies nisl. Nullam dapibus, mauris id scelerisque feugiat, sapien augue porta ipsum, ut blandit tellus enim vel mauris. Praesent accumsan metus vel. </p>
</div>
<div id="promo">
<div class="wrap">
<div class="col"> <img id="featured" src="internet-encyclopedia-images/featured.gif" alt="" /> </div>
<div class="col">
<h2>About Solucija</h2>
<p>Solucija offers a selection of some of the hottest web templates available. Looking for a free web template, commercial one, or an inspiration? You'll find it on Solucija.</p>
</div>
<div class="col last">
<h2>Like this template?</h2>
<p>If you liked this template, you might like some other Free CSS Templates or Commercial CSS templates from Solucija.</p>
</div>
<div id="footer">
<p>Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a> · Released under a <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Licence</a></p>
<p>Copyright © 2008 − Internet Encyclopedia − Design: Luka Cvrk − <a href="http://www.solucija.com/">Solucija</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category