expanding-portfolio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Expanding Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/************************************************
Template: Expanding Portfolio
Author: Luka Cvrk (www.solucija.com)
*************************************************/
/* GENERAL DEFINITIONS */
*{ margin: 0; padding: 0; outline: 0; }
body { font: .74em Arial, Sans-Serif; background: #f4f4f4 url(expanding-portfolio-images/bg.gif) repeat-x; color: #777; text-align: center; }
a { color: #333; text-decoration: none; }
p { line-height: 1.6em; margin: 0 0 10px; }
img { border: 0; }
.x { clear: both; }
/* LOGO */
h1 { float: left; margin: 40px 0 64px; font-size: 1.4em; letter-spacing: 6px; }
h1 a { color: #999; text-transform: uppercase; padding: 0 0 4px; }
h1 span { color: #B5DFD7; padding: 0 0 4px; }
h1 a:hover{ border-bottom: 1px dotted #444; }
h2 { font-size: 1.3em; color: #222; margin: 0 0 15px; line-height: 1.5em; }
h2 a { color: #222; }
/* CONTENT WRAPPER */
#content { clear: both; width: 960px; margin: 0 auto; text-align: left; }
/* MENU */
#menu { float: right; margin: 38px 10px 0 0; text-transform: uppercase; }
#menu li { display: inline; list-style: none; }
#menu li a { float: left; color: #777; padding: 5px; margin: 0 0 0 20px; font-weight: bold; }
#menu li a:hover { color: #fff; }
#menu li a.current { color: #B5DFD7; }
/* PITCH */
#pitch { clear: both; height: 290px; margin: 0 0 35px; }
#pitch-left { clear: both; width: 670px; float: left; margin: 0 0 30px; color: #777; font-weight: bold; }
#pitch-left img { border-bottom: 2px solid #111; }
#caption { clear: both; float: left; position: relative; margin: -67px 0 0 -11px !important; margin: -67px 0 0 -5px; height: 55px; background: url(expanding-portfolio-images/caption.gif) repeat-x; }
#caption span { float: left; background: url(expanding-portfolio-images/featured-span.gif) no-repeat; height: 52px; width: 11px; }
#caption h2 { padding: 21px 30px 0 15px; float: left; color: #222; text-transform: uppercase; font-size: 1.2em; letter-spacing: 3px; }
#pitch-right { height: 309px; width: 290px !important; width: 287px; float: right; }
.templ, .tempr { float: left; margin: 0 0 30px 0; width: 135px; height: 100px; border-bottom: 2px solid #111; }
.tempr { float: right; }
.zoom { position: relative; float: left; width: 35px; height: 37px; margin: -44px 0 0 -6px; background: url(expanding-portfolio-images/zoom.gif) no-repeat; }
#expl { clear: both; text-align: justify; color: #fff; padding: 0 5px 0 0; font-weight: normal; font-style: italic; color: #999; font-size: 1.2em; height: 97px !important; height: 92px; }
#browse { padding: 9px 17px 9px 26px; background: #fff url(expanding-portfolio-images/browse.gif) no-repeat 8px 13px; font-size: 1.2em; font-weight: bold; color: #444; border-bottom: 2px solid #111; }
#browse:hover { background: #eee url(expanding-portfolio-images/browse.gif) no-repeat 8px 13px; color: #000; }
/* COLUMNS (1/3) */
.col { float: left; width: 270px; background: #fff; padding: 15px !important; padding: 15px 15px 2px; margin: 0 30px 35px 0; text-align: justify; border-top: 1px dotted #ddd; }
.col.last { margin-right: 0; }
.col p { margin: 0 0 15px; }
.more { float: left; position: relative; margin: 0 0 0 -21px; background: url(expanding-portfolio-images/more.gif) no-repeat; padding: 11px 21px 6px; color: #fff; font-size: .9em; font-weight: bold; }
.line { clear: both; margin: 0 0 10px; border-bottom: 1px dotted #ccc; }
/* LISTS */
#lists { float: left; width: 630px; margin: 0 0 22px; padding: 18px 0 0 10px; }
#lists ul { float: left; margin: 0 50px 0 0; }
#lists ul.last { margin: 0; }
#lists li { background: url(expanding-portfolio-images/bullet.gif) no-repeat 0 10px; list-style: none; padding: 5px 0 0 12px; color: #555; }
#lists li.title { color: #222; font-size: 1.2em; font-weight: bold; font-weight: bold; padding-bottom: 9px; text-transform: uppercase; }
/* QUOTE */
#quote { float: right; width: 270px; padding: 20px 15px; background: #ddd url(expanding-portfolio-images/quote.gif) no-repeat 7px 7px; height: 115px; color: #444; font-style: italic; }
#author { font-weight: bold; padding: 10px 0 0; }
/* FOOTER */
#footer { clear: both; color: #999; font-size: .94em; border-top: 1px dotted #ccc; padding: 25px 10px; }
#flinks { float: right; }
</style>
</head>
<body>
<div id="content">
<h1><a href="#"><span>Expanding</span>Portfolio</a></h1>
<ul id="menu">
<li><a href="#">home</a></li>
<li><a class="current" href="#">projects</a></li>
<li><a href="#">services</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
</ul>
<div id="pitch">
<div id="pitch-left"> <img src="expanding-portfolio-images/featured.jpg" alt="" />
<div id="caption"> <span></span>
<h2>Featured Project</h2>
</div>
</div>
<div id="pitch-right">
<div class="templ"> <img src="expanding-portfolio-images/templ.jpg" alt="" /> <a class="zoom" href="#" /></a> </div>
<div class="tempr"> <img src="expanding-portfolio-images/templ.jpg" alt="" /> <a class="zoom" href="#" /></a> </div>
<p id="expl">Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida.</p>
<p><a id="browse" href="#">Browse Projects</a></p>
</div>
</div>
<div class="col">
<h2>Duis iaculis urna vel</h2>
<p>Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
<a class="more" href="#">read more</a> </div>
<div class="col">
<h2>Phasellus diam sapien</h2>
<p>Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
<a class="more" href="#">read more</a> </div>
<div class="col last">
<h2> Quisque scelerisque purus</h2>
<p>Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
<a class="more" href="#">read more</a> </div>
<div class="line"></div>
<div id="lists">
<ul>
<li class="title">Consulting</li>
<li>iaculis urna vel</li>
<li>leo a ligula euismod</li>
<li>natoque penatibus et magnis</li>
<li>fermentum a eleifend non</li>
<li>quisque vel lorem eu</li>
</ul>
<ul>
<li class="title">Management</li>
<li>aliquam erat volutpat</li>
<li>rhoncus sit amet</li>
<li>sociis natoque penatibus</li>
<li>erat neque vitae</li>
</ul>
<ul class="last">
<li class="title">Estimation</li>
<li>natoque penatibus et</li>
<li>consectetur adipiscing elit</li>
<li>eget nunc libero</li>
</ul>
<div class="x"></div>
</div>
<div id="quote">
<p>Nunc eget nunc libero. Nunc commodo euismod massa quis vestibulum. Quisque vel lorem eu libero laoreet facilisis. Aenean plac, ligula quis placerat iaculis, mi magna luctus.</p>
<p id="author">¬ Commodo Euismod</p>
</div>
<div id="footer">
<p id="flinks"><a href="#">Become a fan on Facebook</a> · <a href="#">Follow us on Twitter</a> · <a href="#">RSS</a></p>
<p>Copyright © 2009 EXPANDING PORTFOLIO − Design: Luka Cvrk, <a href="http://www.solucija.com/">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category