enthusiastica
<!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>Enthusiastica</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*
project: Enthusiastica
author: Luka Cvrk (www.solucija.com)
-------------------------------------
2009. Solucija
*/
*{margin:0;padding:0;}:focus,:active {outline:0}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;}a img{border:0}
body { font: .7em "Trebuchet MS", Tahoma, Arial, Sans-Serif; background: #eee url(enthusiastica-images/bg.gif) repeat-x; color: #777; }
a { text-decoration: none; color: #6796CE; }
a:hover { color: #45134A; }
p { margin: 0 0 15px; line-height: 1.64em; }
#wrap { margin: 20px auto 0; width: 979px; }
.clear { clear: both; }
#logo { float: left; margin: 35px 0 0 20px; height: 89px; }
#logo a:hover { border-bottom: 1px solid #222; }
#logo p { padding: 2px 0 0 4px; font-size: .9em; color: #555; }
#logo h1 { font-size: 2.6em; margin: 0; text-shadow: 1px 1px 1px #000; }
#logo h1 a { color: #fff; }
#explore { float: right; margin: 130px 5px 0 0; }
#explore-link { float: left; height: 25px; padding: 9px 0 0 20px; width: 106px; color: #808080; background: url(enthusiastica-images/explore.gif) no-repeat; }
#explore-link:hover { color: #fff; }
#menu { clear: left; float: left; height: 43px; margin: 0 0 0 10px; background: url(enthusiastica-images/menu.gif) repeat-x; }
#menu-left { background: url(enthusiastica-images/menu-corners.gif) no-repeat left top; float: left; width: 9px; height: 43px; }
#menu-right { background: url(enthusiastica-images/menu-corners.gif) no-repeat left bottom; float: right; width: 9px; height: 43px; }
#menu ul { float: left; padding: 7px 0; }
#menu li { display: inline; text-transform: uppercase; }
#menu li a { float: left; margin: 0 5px 0 0; padding: 12px 0 15px 20px; color: #777; position: relative; z-index: 2; }
#menu li a span { padding: 12px 20px 15px 0; }
#menu li a:hover, #menu li a:focus { color: #1295E4; }
#menu li a.current { background: url(enthusiastica-images/tableft.gif) no-repeat; color: #000; font-weight: bold; }
#menu li a.current span { background: url(enthusiastica-images/tabright.gif) no-repeat right top; }
#content-top { clear: both; height: 26px; background: url(enthusiastica-images/content-top.gif) no-repeat; position: relative; margin: 0 !important; margin: -14px 0 0; }
#content-middle { padding: 0 25px 25px; background: url(enthusiastica-images/content-middle.gif) repeat-y; }
#content-bottom { clear: both; padding: 6px 0 7px; background: url(enthusiastica-images/content-bottom.gif) no-repeat left bottom; }
#pitch { text-shadow: 1px 1px 1px #3F6AA2; background: url(enthusiastica-images/pitch.jpg) no-repeat; height: 159px; padding: 50px 40px 0 30px; position: relative; margin: 0 -7px 30px; font-size: 1.3em; font-style: italic; color: #fff; }
#pitch h1 { float: left; line-height: 1.3em; font-style: normal; font-size: 1.7em; width: 260px; padding: 0 40px 0 0; height: 150px; font-weight: normal; text-transform: uppercase; }
#pitch h1 span { font-size: 1.2em; text-transform: lowercase; font-size: .6em; font-style: italic; color: #F4EDC1; }
h3 { font-size: 1.3em; font: bold 1.3em Arial; color: #222; margin: 0 0 10px; }
.column { float: left; width: 283px; margin: 0 40px 0 0; line-height: 2.2em; }
.column.last { margin-right: 0; }
.column img { padding: 10px; border: 1px solid #ddd; margin: 0 0 5px; }
.more a { background: url(enthusiastica-images/bullet.gif) no-repeat 0 7px; padding: 0 0 0 8px; color: #672A6D; font-weight: bold; font-size: .9em; }
#footer { padding: 20px; color: #999; }
#links { float: right; }
#links a { margin: 0 0 0 15px; }
</style>
</head>
<body>
<div id="wrap">
<div id="logo">
<h1><a href="#">enthusiastica</a></h1>
<p>enthusiastic about the web</p>
</div>
<div id="explore"> <a href="#" id="explore-link">Explore</a> </div>
<div id="menu">
<div id="menu-left"></div>
<ul>
<li><a class="current" href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
<div id="menu-right"></div>
</div>
<div id="content-top"></div>
<div id="content-middle">
<div id="pitch">
<h1>Duis aute irure reprehenderit in voluptate velit<br />
<span>exercitation ullamco</span></h1>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
<div class="column">
<h3>Lorem Ipsum dolor sit amet</h3>
<img src="enthusiastica-images/thumb.gif" alt="" />
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="more"><a href="#">read more</a></p>
</div>
<div class="column">
<h3>Lorem Ipsum dolor sit amet</h3>
<img src="enthusiastica-images/thumb.gif" alt="" />
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="more"><a href="#">read more</a></p>
</div>
<div class="column last">
<h3>Lorem Ipsum dolor sit amet</h3>
<img src="enthusiastica-images/thumb.gif" alt="" />
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="more"><a href="#">read more</a></p>
</div>
<div class="clear"></div>
</div>
<div id="content-bottom"></div>
<div id="footer">
<p id="links"> <a href="#">Terms and Conditions</a> <a href="#">Privacy</a> <a href="#">About Us</a> </p>
<p>Copyright © Enthusiastica · Design: Luka Cvrk, <a href="http://www.solucija.com">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category