darkportfolio
<!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>DarkPortfolio</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin:0;
padding:0;
outline:0;
}
body {
font-size:12px;
line-height:1.3;
font-family:Arial, Helvetica, Sans-Serif;
color:#ccc;
background:url('images/body-bg.gif');
}
a {
color:#0252aa;
text-decoration:none;
cursor:pointer;
}
a:hover {
text-decoration:underline;
}
a img {
border:0;
}
input, textarea, select {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
}
textarea {
overflow:auto;
}
.cl {
display:block;
height:0;
font-size:0;
line-height:0;
text-indent:-4000px;
clear:both;
}
.notext {
font-size:0;
line-height:0;
text-indent:-4000px;
}
.hidden {
display:none;
}
.left, .alignleft {
float:left;
display:inline;
}
.right, .alignright {
float:right;
display:inline;
}
h1 {
font-family:Georgia, Serif;
font-size:44px;
font-weight:bold;
text-shadow:0 2px 0 #000;
color:#f6f6f6;
}
h2 {
font-family:Georgia, Serif;
font-weight:normal;
font-size:23px;
color:#e7e7e7;
text-shadow:0 2px 0 #000;
line-height:26px;
}
h4 {
font-size:15px;
font-weight:bold;
color:#f5218f;
line-height:16px;
}
.shell {
width:960px;
padding:0 10px;
margin:0 auto;
}
#header {
background:url('images/header-bg.gif') repeat-x 0 0;
}
#header .shell {
position:relative;
padding-bottom:27px;
}
#navigation {
display:block;
width:100%;
height:32px;
padding-bottom:53px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
display:inline;
padding-right:6px;
}
#navigation ul li a {
float:left;
display:inline;
font-weight:bold;
color:#fff;
width:84px;
padding:0;
line-height:26px;
text-align:center;
text-decoration:none;
background:url('images/navigation-bg.gif') no-repeat 0 0;
padding-bottom:1px;
}
#navigation ul li a.active, #navigation ul li a:hover {
line-height:19px;
background-position:0 bottom;
line-height:31px;
}
#contact {
width:506px;
position:absolute;
right:10px;
z-index:100;
top:0;
}
#contact form {
height:100%;
color:#fff;
}
#contact .slide-area {
background:#000;
padding-top:25px;
padding-bottom:17px;
display:none;
}
#contact .field-left {
float:left;
width:182px;
padding-left:17px;
}
#contact .field-row {
margin-bottom:5px;
}
#contact .field-row label {
display:block;
color:#fff;
font-size:11px;
line-height:18px;
}
#contact .field-row label em {
font-style:normal;
color:#a1a1a1;
}
#contact .field-row span {
width:182px;
display:block;
background:url('images/input-bg.gif') no-repeat 0 0;
}
#contact .field-row span.textarea-bg {
width:266px;
height:57px;
float:left;
background:url('images/textarea-bg.gif') no-repeat 0 0;
}
#contact .field-row span.textarea-bg textarea {
width:266px;
height:57px;
background:transparent;
border:0;
}
#contact .field-row input {
background:transparent;
border:0;
width:182px;
padding:1px 0;
}
.field-right {
float:left;
width:266px;
padding-left:30px;
}
p input {
display:block;
float:right;
border:0;
background:0;
color:#f21185;
text-decoration:underline;
cursor:pointer;
padding:8px 10px 0 0;
}
.slide-area-info {
float:right;
display:inline;
background:#000 url('images/panel-left.gif') no-repeat 0 0;
padding-left:6px;
}
.green {
float:left;
display:inline;
}
.slide-area-info img {
float:left;
padding-right:4px;
}
.slide-area-info p {
float:left;
display:inline;
font-weight:bold;
line-height:28px;
color:#a6a6a7;
}
.slide-area-info p strong {
text-transform:capitalize;
color:#b9ff00;
padding-right:9px;
padding-left:4px;
}
.slide-area-info a {
float:left;
display:inline;
width:27px;
height:28px;
background:url('images/slide-button.gif') no-repeat 0 0;
font-size:0;
line-height:0;
text-indent:-4000px;
}
.slide-area-info a.active {
background:url('images/slide-button-active.gif') no-repeat 0 0;
}
#intro {
}
.info {
width:425px;
float:left;
}
.info h2 {
padding-top:5px;
}
.info p {
font-family:Georgia, Serif;
;
font-style:italic;
}
.info p.quote {
color:#e7e7e7;
padding-top:25px;
font-size:23px;
}
.info p.author {
color:#e41480;
text-align:right;
font-size:22px;
padding-right:20px;
}
.slider {
float:right;
position:relative;
z-index:50;
}
#big-slider {
padding-right:3px;
background:url('images/slider-carousel-bg.gif') no-repeat 0 0;
}
.jcarousel-clip, .slider-carousel {
width:475px;
height:235px;
padding:1px 2px 0 1px;
}
.slider-carousel ul {
list-style:none;
}
.slider-carousel ul li {
height:234px;
}
.slider-carousel img {
width:474px;
border:1px solid #000;
}
.slider-navigation {
position:absolute;
bottom:6px;
right:0;
}
.slider-navigation ul {
list-style:none;
}
.slider-navigation ul li {
float:left;
display:inline;
padding-left:11px;
}
.slider-navigation ul li a {
float:left;
display:inline;
color:#939393;
font-size:11px;
}
.slider-navigation ul li a.active {
color:#f72c95;
}
.jcarousel-prev {
width:36px;
height:110px;
background:url('images/prev.gif') no-repeat 0 0;
position:absolute;
top:63px;
left:-36px;
cursor:pointer;
}
.jcarousel-next {
width:36px;
height:110px;
background:url('images/next.gif') no-repeat 0 0;
position:absolute;
top:63px;
right:-38px;
cursor:pointer;
}
ul.buttons {
list-style:none;
padding-top:8px;
}
ul.buttons li {
float:left;
display:inline;
padding-right:6px;
}
ul.buttons li a.button {
display:block;
width:85px;
height:24px;
background:url('images/button-bg.gif') no-repeat 0 0;
font-size:10px;
font-weight:bold;
color:#404040;
line-height:24px;
text-align:center;
padding-right:15px;
text-decoration:none;
}
#main, #main-in {
background:url('images/main-bg.jpg') no-repeat center 0;
}
#main-in {
width:980px;
margin:0 auto;
}
#main .shell {
background:url('images/main-b.jpg') no-repeat center bottom;
padding-top:25px;
padding-bottom:74px;
}
#works {
width:480px;
float:left;
display:inline;
}
#works h3 {
width:142px;
height:17px;
float:left;
background:url('images/selected-works.gif') no-repeat 0 0;
font-size:0;
line-height:0;
text-indent:-4000px;
}
#works a.red {
padding-left:3px;
line-height:16px;
}
#works ul.buttons li {
padding-right:11px;
}
a.red {
font-size:11px;
color:#f9399c;
text-decoration:underline;
}
a:hover.red {
text-decoration:none;
}
.project {
padding-bottom:22px;
float:left;
position:relative;
background:url('images/slider-project-bg.gif') no-repeat 0 0;
padding-right:2px;
}
.head {
padding-bottom:33px;
}
.project .slider-carousel .jcarousel-clip, .project .slider-carousel {
width:465px;
height:150px;
}
.project .slider-carousel img {
width:464px;
}
.project .slider-navigation {
position:absolute;
bottom:28px;
right:9px;
}
.project .jcarousel-prev, .project .jcarousel-next {
background:none;
display:none;
width:1px;
height:1px;
}
.project .slider-carousel ul li {
position:relative;
}
.slider-carousel span.project-info {
display:block;
width:455px;
height:34px;
background:url('images/project-span-bg.png');
position:relative;
bottom:37px;
left:0;
line-height:34px;
font-weight:bold;
font-size:14px;
color:#fff;
padding-left:12px;
margin-left:1px;
}
#blogroll {
width:440px;
float:left;
padding-left:40px;
}
#blogroll h3 {
width:72px;
height:19px;
float:left;
background:url('images/blogroll.gif') no-repeat 0 0;
font-size:0;
line-height:0;
text-indent:-4000px;
}
a.rss {
padding-left:10px;
width:16px;
}
.box {
float:left;
padding-bottom:31px;
}
.box .comment {
font-size:11px;
line-height:16px;
color:#94b0d2;
padding-bottom:2px;
}
.box .comment span {
float:left;
}
.box p.text-right {
text-align:right;
color:#fff;
}
.box p.text-right a {
color:#fff;
text-decoration:underline;
}
.box .content {
padding-bottom:2px;
line-height:16px;
}
#footer {
color:#4a4a4a;
font-size:11px;
}
.footerlink {
display:block;
margin:0 auto;
width:960px;
padding:18px 0;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
color:#4a4a4a;
}
.footerlink a {
color:#4a4a4a;
padding:inherit;
text-decoration:none;
}
.footerlink a:hover {
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<!--[if IE 6]><link rel="stylesheet" href="darkportfolio-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="header">
<div class="shell">
<div id="navigation">
<ul>
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="contact">
<div class="slide-area">
<form action="#" method="get" accept-charset="utf-8">
<div class="field-left">
<div class="field-row">
<label for="field1">Your Name <em>(Required)</em></label>
<span>
<input name="text" class="field" id="field1" />
</span> </div>
<div class="field-row">
<label for="field2">E-Mail Address <em>(Required)</em></label>
<span>
<input name="text" class="field" id="field2" />
</span> </div>
</div>
<div class="field-row field-right">
<label for="text-field">Message <em>(Required)</em></label>
<span class="textarea-bg">
<textarea name="text" id="text-field" cols="20" rows="4"></textarea>
</span> </div>
<p>
<input type="submit" value="SUBMIT" />
</p>
<div class="cl"> </div>
</form>
</div>
<div class="slide-area-info">
<div class="green"> <img src="darkportfolio-css/images/green-light.gif" alt="" />
<p>I am currently: <strong>AVAILABLE</strong></p>
</div>
<a class="slide-down" href="#">slide-down</a> </div>
<div class="cl"> </div>
</div>
<div id="intro">
<div class="info">
<h1>DarkPortfolio</h1>
<h2>Howdy! Turpis turpis, dignissim elementum ornare ut, pretium sed orci. Nulla a ante massa, eget consequat mauris.</h2>
<p class="quote">« Everything you can imagine is real. »</p>
<p class="author">Pablo Picasso</p>
</div>
<div class="slider" id="big-slider">
<div class="slider-carousel">
<ul>
<li> <a href="#"><img src="darkportfolio-css/images/slider1.jpg" alt="" /></a> </li>
<li> <a href="#"><img src="darkportfolio-css/images/slider1.jpg" alt="" /></a> </li>
<li> <a href="#"><img src="darkportfolio-css/images/slider1.jpg" alt="" /></a> </li>
</ul>
<div class="cl"> </div>
</div>
<div class="slider-navigation">
<ul>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<ul class="buttons">
<li><a class="button" href="#">VIEW LIVE</a></li>
<li><a class="button" href="#">CASE STUDY</a></li>
</ul>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
<div id="main">
<div id="main-in">
<div class="shell">
<div id="works">
<div class="head">
<h3>Selected Works</h3>
<a class="red" href="#">see all »</a> </div>
<div class="project">
<div class="slider-carousel">
<ul>
<li> <a href="#"><img src="darkportfolio-css/images/project1.jpg" alt="" /></a> <span class="project-info">Molestie facilisis risus arcu </span> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project2.jpg" alt="" /></a> <span class="project-info">Molestie facilisis risus arcu</span> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project3.jpg" alt="" /></a> <span class="project-info">Molestie facilisis risus arcu </span> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project1.jpg" alt="" /></a> <span class="project-info">Molestie facilisis risus arcu </span> </li>
</ul>
</div>
<div class="slider-navigation">
<ul>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
<ul class="buttons">
<li><a class="button" href="#">VIEW LIVE</a></li>
<li><a class="button" href="#">CASE STUDY</a></li>
</ul>
</div>
<div class="project">
<div class="slider-carousel">
<ul>
<li> <a href="#"><img src="darkportfolio-css/images/project2.jpg" alt="" /></a> <span class="project-info">Etiam semper libero quis</span> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project1.jpg" alt="" /></a> <span class="project-info">Etiam semper libero quis</span> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project3.jpg" alt="" /></a> <span class="project-info">Etiam semper libero quis</span> </li>
</ul>
</div>
<div class="slider-navigation">
<ul>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<ul class="buttons">
<li><a class="button" href="#">VIEW LIVE</a></li>
<li><a class="button" href="#">CASE STUDY</a></li>
</ul>
</div>
<div class="project">
<div class="slider-carousel">
<ul>
<li> <a href="#"><img src="darkportfolio-css/images/project3.jpg" alt="" /></a> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project2.jpg" alt="" /></a> </li>
<li> <a href="#"><img src="darkportfolio-css/images/project1.jpg" alt="" /></a> </li>
</ul>
</div>
<div class="slider-navigation">
<ul>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<ul class="buttons">
<li><a class="button" href="#">VIEW LIVE</a></li>
<li><a class="button" href="#">CASE STUDY</a></li>
</ul>
</div>
</div>
<div id="blogroll">
<div class="head">
<h3>Blogroll></h3>
<a class="rss" href="#"><img src="darkportfolio-css/images/rss.gif" alt="" /></a> </div>
<div class="box">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<div class="comment"> <span>30 Jun 2009 - 02:32 AM by Martina</span>
<p class="text-right">32 <a href="#">Comments</a></p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus, felis quis convallis vestibulum, libero ligula ultrices tortor, vitae molestie erat lacus et nunc. Etiam semper, libero quis molestie facilisis, risus arcu pellentesque metus, accumsan pharetra ipsum metus vel tortor.</p>
</div>
<a class="red" href="#">read more »</a> </div>
<div class="box">
<h4>Molestie facilisis risus arcu </h4>
<div class="comment"> <span>30 Jun 2009 - 02:32 AM by Martina</span>
<p class="text-right">32 <a href="#">Comments</a></p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus, felis quis convallis vestibulum, libero ligula ultrices tortor, vitae molestie erat lacus et nunc. Etiam semper</p>
</div>
<a class="red" href="#">read more »</a> </div>
<div class="box">
<h4>Tortor vitae felis lorem convallis</h4>
<div class="comment"> <span>30 Jun 2009 - 02:32 AM by Martina</span>
<p class="text-right">12 <a href="#">Comments</a></p>
</div>
<div class="content">
<p>Etiam semper, libero quis molestie facilisis, risus arcu pellentesque metus, accumsan pharetra ipsum metus vel tortor.</p>
</div>
<a class="red" href="#">read more »</a> </div>
<div class="box">
<h4>Molestie facilisis risus arcu </h4>
<div class="comment"> <span>30 Jun 2009 - 02:32 AM by Martina</span>
<p class="text-right">12 <a href="#">Comments</a></p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus, felis quis convallis vestibulum, libero ligula ultrices tortor, vitae molestie erat lacus et nunc. Etiam semper, libero quis molestie facilisis, risus arcu pellentesque metus.</p>
</div>
<a class="red" href="#">read more »</a> </div>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
<div id="footer">
<div class="footerlink">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://chocotemplates.com/">ChocoTemplates.com</a></p>
<div style="clear:both;"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category