abstract-studio
<!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>Abstract Studio</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*
project: abstract studio template
author: luka cvrk (www.solucija.com)
*/
*{ margin: 0; padding: 0; }*
body { font: .74em Tahoma, Arial, "Trebuchet MS", Tahoma, sans-serif; line-height: 1.64em; background: #fff; color: #444; }
a { color: #299DCA; background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
.blue { color: #299DCA; }
.white { color: #fff; }
p { margin: 0 0 15px 0; }
h1 { font: normal 2.4em Georgia, Arial, Sans-Serif; margin: 15px 0 0 5px; }
h1 a:hover { color: #E4FFD3; background: inherit; }
h2 { font: bold 1.6em Arial, Sans-Serif; margin: 0 0 12px; }
h4 { color: #808080; background: inherit; font-weight: normal; font-size: .9em; }
#content { width: 920px; margin: 0 auto; }
#logo { float: left; border-bottom: 5px solid #7DD0F1; height: 58px; width: 330px; }
#menu { float: right; width: 584px; padding: 10px 0; margin: 19px 0 5px; border-bottom: 5px solid #e0e0e0; }
#menu li { font-size: 1.1em; display: inline; }
#menu li a { padding: 17px 15px 0 10px; margin: 0 45px 0 0; background: #fff url(abstract-studio-images/menuarrow.jpg) no-repeat 10px 5px; color: #808080; border-left: 1px solid #e0e0e0; }
#menu li a:hover { color: #000; border-left: 1px solid #7DD0F1; }
#intro { clear: both; background: #ccc url(abstract-studio-images/teaser.jpg) no-repeat; color: #333; height: 150px; padding: 35px 0 0 20px; }
#intro h1 { margin: 0; background: #666666 url(abstract-studio-images/h1bg.jpg) repeat-x bottom; display: inline; color: #7DD0F1; padding: 2px 5px; }
#intro p { margin: 0; color: #808080; font-weight: bold; font-size: .9em; }
#login { font-size: .9em; margin: 45px 0 0; }
#login a { color: #616161; background: #8BE1FA; padding: 4px 20px 6px; border-bottom: 1px solid #616161; }
#login a:hover { color: #fff; background: #8BE1FA url(abstract-studio-images/loginhover.gif) no-repeat; }
#left { clear: left; float: left; width: 550px; padding: 0 34px 0 5px; margin: 15px 0 15px; }
#left img { border: 1px solid #ccc; padding: 1px; float: left; margin: 0 15px 5px 0;}
#articles { margin: 40px 0 0 0; }
#articles li { border-top: 1px solid #cecece; list-style: none; float: left; width: 245px; background: #eee url(abstract-studio-images/newslist.jpg) repeat-x bottom; padding: 4px 8px; margin: 0 15px 0 0;}
#articles li a { background: url(abstract-studio-images/menuarrow.jpg) no-repeat 0 5px; padding: 0 0 0 8px; }
#articles li.last { margin: 0; }
#right { position: relative; top: -80px; margin: 0 15px 0 0; padding: 15px; float: right; width: 284px; font-size: .9em; background: #fff; }
#right img { border: 1px solid #ccc; padding: 1px; margin: 0 0 8px; }
#left a { background: #EFFCFF; }
#left h3 { border-bottom: 1px solid #eee; padding: 0 0 7px; margin: 0 0 15px 0; }
#right h2 { border-bottom: 1px solid #ccc; padding: 0 0 8px; }
#right .info { border: 1px solid #e0e0e0; background: #f4f4f4; padding: 8px; }
#footer { clear: both; border-top: 1px solid #ccc; padding: 10px; margin: 0 0 5px; font-size: .9em; color: #9b9b9b; background: #fff; }
#footer a { color: #808080; background: #fff; font-weight: bold; }
.right{ float: right; padding: 7px 0 0 15px; }
</style>
</head>
<body>
<div id="content">
<div id="logo">
<h1>Abstract Studio</h1>
</div>
<ul id="menu">
<li><a href="http://www.free-css.com/">Home</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/">Career</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
</ul>
<div id="intro">
<h1>So, you need <span class="white">something designed</span>?</h1>
<p>We're glad to help.</p>
<div id="login">
<p><a href="http://www.free-css.com/">Portfolio</a> <a href="http://www.free-css.com/">Clients</a></p>
</div>
</div>
<div id="left">
<h4>Suspendisse fermentum odio</h4>
<h2>Vel illum <span class="blue">dolore eu feugiat</span> nulla facilisis at vero eros</h2>
<p><img src="abstract-studio-images/image.jpg" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <a href="http://www.free-css.com/">laoreet dolore magna</a> aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla <a href="http://www.free-css.com/">facilisis at vero</a> eros et accumsan et iusto odio dignissim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<ul id="articles">
<li>12th Dec 2007<br />
<a href="http://www.free-css.com/">Nam tortor libero dictum porta</a></li>
<li class="last">13h Dec 2007<br />
<a href="http://www.free-css.com/">Quisque nibh lacus pellentesque sed</a></li>
</ul>
</div>
<div id="right">
<h2><span class="blue">About</span> Abstract Studio</h2>
<img src="abstract-studio-images/rightimage.jpg" alt="" />
<p>Maecenas erat. Suspendisse odio orci, convallis ac, volutpat non, volutpat et, lectus. In cursus rhoncus ante. Quisque nibh lacus, pellentesque sed, porttitor a, luctus blandit, mi. Nam tortor libero, dictum porta, vulputate nec, imperdiet sed, mauris. Maecenas libero neque, volutpat sit amet.</p>
<p>Varius et pretium quis purus. Nulla ut magna. Nunc nec dui eget erat vulputate sagittis. Suspendisse fermentum odio. Mauris magna sem, pellentesque sit amet.</p>
<p class="info">If you liked this template, you might like some other Free or Commercial CSS templates from Solucija.</p>
</div>
<div id="footer">
<p class="right">Design: <a href="http://www.solucija.com">Luka Cvrk</a></p>
<p><a href="http://www.free-css.com/">Terms and Conditions</a> · <a href="http://www.free-css.com/">Privacy</a><br />
© Copyright 2007 <a href="http://www.free-css.com/">Abstract Studio</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category