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>Portfolio</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*----- Start "Main definitions" -----*/
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.5;
font-family: Arial, "Trebuchet MS", Tahoma sans-serif;
color: #4a4a4a;
background: #f6f6f6 url(images/body-bg.gif) repeat-x 0 0;
text-align: left;
}
a img { border: 0; }
a { color: #037bb9; text-decoration: underline; }
a:hover { text-decoration: none; }
.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
/*----- End "Main definitions" -----*/
#page { width: 952px; margin: 0 auto; padding: 0 10px; }
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Arial, Sans-Serif;
color: #2b2b2b;
font-weight: normal;
}
h1 { font-size: 23px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }
ul { padding-left: 15px; }
#header { padding: 20px 12px 15px 3px; }
#header .description { font-family: "Trebuchet MS", Tahoma, Arial, Sans-Serif; font-size: 11px; color: #9c9c9c; text-transform: uppercase; line-height: 1; }
#header h1 { line-height: 1.1; }
#header h1 a { color: #2b2b2b; text-decoration: none; }
#navigation { float: right; display: inline; font-size: 11px; line-height: 1.5; text-transform: uppercase; padding-top: 10px; }
#navigation ul li { float: left; display: inline; list-style-type: none; padding-right: 18px; margin-right: 14px; background: url(images/nav-sep.gif) repeat-y right 0; }
#navigation ul li.last { margin-right: 0; padding-right: 0; background: none; }
#navigation ul li a { color: #7f7f7f; text-decoration: none; }
#navigation ul li a:hover { text-decoration: underline; }
#navigation ul li.active a { color: #000; }
#slideshow { height: 454px; width: 962px; position: relative; left: -5px; }
#slideshow .bg { height: 454px; width: 962px; background: url(images/slider.png) no-repeat 0 0; }
#slideshow .cnt { padding: 42px 36px 0 36px; }
#slideshow .big-image { margin-bottom: 12px; }
#slideshow .big-image img { padding: 2px; border: solid 1px #d5d5d5; }
#slider { width: 890px; position: relative; }
#slider .buttons span { display: block; width: 38px; height: 37px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; }
#slider .buttons span { position: absolute; top: 21px; }
#slider .buttons .prev { left: 0; background: url(images/button-prev.gif) no-repeat 0 0; }
#slider .buttons .next { right: 0; background: url(images/button-next.gif) no-repeat 0 0; }
#slider .holder { width: 790px; height: 78px; margin: 0 auto; position: relative; overflow: hidden; }
#slider .content { position: absolute; top: 0; left: 0; width: 100000px; }
#slider .content ul { float: left; display: inline; padding-left: 0; }
#slider .fragment { float: left; display: inline; list-style-type: none; }
#slider .fragment a { float: left; display: inline; width: 133px; height: 72px; padding: 3px; background: url(images/slider-fragment.gif); margin: 0 10px; }
#content { padding: 0 5px 10px 5px; }
#content p { padding-bottom: 18px; }
#content .separator { padding-right: 18px; background: url(images/col-sep.gif) no-repeat right 10px; }
#content .left-col { float: left; display: inline; width: 395px; }
#content .right-col { float: right; display: inline; width: 505px; }
.linklist { padding-left: 0; }
.linklist li { padding-left: 7px; background: url(images/linklist-ico.gif) no-repeat 0 7px; list-style-type: none; }
#footer { background: url(images/footer-line.gif) no-repeat center 0; padding: 20px 18px; }
</style>
<!--[if IE 6]><link rel="stylesheet" href="portfolio-css/ie6-style.css" type="text/css" media="all" /><![endif]-->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/fns.js" type="text/javascript"></script>
</head>
<body>
<!-- Page -->
<div id="page">
<!-- Header -->
<div id="header">
<!-- Navigation -->
<div id="navigation">
<ul>
<li class="active"><a href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">about</a></li>
<li><a href="http://www.free-css.com/">portfolio</a></li>
<li><a href="http://www.free-css.com/">blog</a></li>
<li class="last"><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
<!-- / Navigation -->
<h1><a href="http://www.free-css.com/">Portfolio Site</a></h1>
<div class="description">welcome to our portfolio</div>
</div>
<!-- / Header -->
<!-- Slideshow -->
<div id="slideshow">
<div class="bg">
<div class="cnt">
<!-- Big Image -->
<div class="big-image"> <img src="portfolio-css/images/img1.jpg" alt="" /> </div>
<!-- / Big Image -->
<!-- Slider -->
<div id="slider">
<div class="buttons"> <span class="prev">prev</span> <span class="next">next</span> </div>
<div class="holder">
<div class="content">
<ul>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img3.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img4.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img5.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img6.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img3.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img4.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img5.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img6.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img3.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img4.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img5.jpg" alt="" /></a></li>
<li class="fragment"><a href="http://www.free-css.com/"><img src="portfolio-css/images/img6.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<!-- / Slider -->
</div>
</div>
</div>
<!-- / Slideshow -->
<!-- Content -->
<div id="content">
<div class="cl"> </div>
<div class="left-col separator">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend congue augue nec viverra. Curabitur a mi pellentesque erat laoreet sodales. Cras tempus lorem quis erat interdum cursus. Sed <a href="http://www.free-css.com/">sollicitudin</a> euismod tellus, vitae convallis velit viverra eget. Donec consequat metus nec odio ultricies lacinia. Mauris rutrum auctor augue, quis ultrices quam pellentesque ut.</p>
<p>Praesent urna risus, fermentum eget euismod eu, placerat id felis. In venenatis sapien et mauris dictum sodales ac et mi. Ut pulvinar, metus facilisis sodales <a href="http://www.free-css.com/">pellentesque</a>, arcu felis tempor ligula, eget dignissim dolor purus ut ante. Sed et risus non velit ornare condimentum ac eget risus.</p>
</div>
<div class="right-col">
<h2>Services</h2>
<p>Praesent urna risus, fermentum eget euismod eu, placerat id felis. In venenatis sapien et mauris dictum sodales ac et mi. Ut pulvinar, metus facilisis sodales <a href="http://www.free-css.com/">pellentesque</a>, arcu felis tempor ligula, eget dignissim dolor purus ut ante. Sed et risus non velit ornare condimentum ac eget risus.<br />
<a href="http://www.free-css.com/">learn more</a></p>
<h2>Blogroll</h2>
<ul class="linklist">
<li><a href="http://www.free-css.com/">Praesent urna risus, fermentum eget </a></li>
<li><a href="http://www.free-css.com/">Ut pulvinar, metus facilisis</a></li>
<li><a href="http://www.free-css.com/">Morbi ut commodo ante.</a></li>
</ul>
</div>
<div class="cl"> </div>
</div>
<!-- / Content -->
<!-- Footer -->
<div id="footer">
<p>© Sitename.com. Design by <a href="http://chocotemplates.com">ChocoTemplates.com</a></p>
</div>
<!-- / Footer -->
</div>
<!-- / Page -->
</body>
</html>
Related examples in the same category