sifiso
<!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>Sifiso</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll();
var thumbs = $("#recent-work-mid ul li img");
for (var i = 0, ii = thumbs.length; i < ii; i++) {
if (thumbs[i].title && thumbs[i].title.length > 0) {
var imgtitle = thumbs[i].title;
$(thumbs[i]).wrap('<div class="wrapper" />');
$(thumbs[i]).after('<div class=\'caption\'>' + imgtitle + '</div>');
$(thumbs[i]).removeAttr('title');
}
}
$('.wrapper').hover(
function () {
$(this).find('img').animate({
opacity: ".6"
}, 300);
$(this).find('.caption').animate({
top: "-85px"
}, 300);
}, function () {
$(this).find('img').animate({
opacity: "1.0"
}, 300);
$(this).find('.caption').animate({
top: "85px"
}, 100);
});
});
</script>
<style type='text/css'>
/* CSS Document */
* {
padding:0;
margin:0;
}
body {
background:url(sifiso-images/backgroundl.jpg) fixed no-repeat #191919;
background-position:center top;
}
.clear {
clear:both
}
#wrap {
width:960px;
padding:0 10px;
margin:0 auto;
position:relative;
min-height:2000px;
}
#header {
background:url(sifiso-images/header-bg.png) no-repeat;
width:940px;
height:384px;
}
h2#logo {
background:url(sifiso-images/logo.png);
width:200px;
height:64px;
text-indent:-999px;
position:relative;
top:55px;
}
ul#nav {
position:relative;
left:250px;
}
ul#nav li {
float:left;
list-style:none;
height:38px;
}
ul#nav li a {
display:block;
height:38px;
outline:none;
text-indent:-9999px;
background:url(sifiso-images/navigation.png) no-repeat;
}
ul#nav li a#rec {
width:123px;
margin-right:14px;
}
ul#nav li a:hover#rec {
position:relative;
top:-1px;
}
ul#nav li a#con {
background-position:-136px 0;
width:112px;
}
ul#nav li a:hover#con {
position:relative;
top:-1px;
}
#header p {
width:565px;
height:184px;
background:url(sifiso-images/idesignwebsites.png);
text-indent:-9999px;
position:relative;
top:105px;
}
#testimonials {
height:283px;
width:940px;
background:url(sifiso-images/testimonials-bg.png);
}
#testimonials h2 {
background:url(sifiso-images/somekindwords.png);
width:369px;
height:21px;
position:relative;
top:12px;
left:42px;
text-indent:-9999px;
}
#testimonials .col {
float:left;
width:230px;
padding:40px;
font-family:georgia;
font-size:14px;
font-style:italic;
text-shadow:0 1px 1px #000;
color:#424242;
line-height:20px;
}
#quotes {
background:url(sifiso-images/quotes-bg.png);
width:940px;
height:481px;
position:relative;
top:-62px;
}
p#quote-1 {
background:url(sifiso-images/quote-1.png);
width:538px;
height:199px;
position:relative;
top:100px;
left:385px;
text-indent:-9999px;
}
p#quote-2 {
background:url(sifiso-images/quote-2.png);
width:575px;
height:141px;
position:relative;
top:100px;
left:342px;
text-indent:-9999px;
}
#recent-work-top {
background:url(sifiso-images/recent-work-top.png);
width:940px;
height:51px;
position:relative;
top:-62px;
}
#recent-work-top h2 {
background:url(sifiso-images/takealook.png);
width:378px;
height:25px;
position:relative;
left:387px;
top:7px;
text-indent:-9999px;
}
#recent-work-mid {
background:url(sifiso-images/recent-work-mid.png) repeat-y;
width:872px;
overflow:hidden;
position:relative;
top:-62px;
padding:28px 34px 5px 34px;
}
#recent-work-mid ul {
padding:0;
margin:0;
}
#recent-work-mid ul li {
float:left;
list-style:none;
padding:0;
margin:0;
line-height:10px;
width:218px;
height:218px;
overflow:hidden;
}
/*dynamically added*/
div.wrapper {
width:218px;
height:218px;
overflow:hidden;
position:relative;
background:#000000;
}
div.caption {
font-family:arial;
font-weight:bold;
font-size:16px;
position:relative;
text-align:center;
padding:45px 15px 15px 15px;
background:url(sifiso-images/caption-bg.png) repeat-x;
min-height:125px;
color:#d20000;
text-shadow:0 1px 1px #999;
text-transform:capitalize;
line-height:16px;
}
#recent-work-bottom {
background:url(sifiso-images/recent-work-bottom.png) no-repeat;
height:47px;
width:940px;
position:relative;
top:-62px;
}
#contact {
background:url(sifiso-images/contact-bg.png);
width:940px;
height:677px;
}
#contact h2 {
background:url(sifiso-images/contactme.png);
width:283px;
height:23px;
text-indent:-9999px;
position:relative;
top:10px;
left:62px;
}
#contact p {
background:url(sifiso-images/hireme.png);
width:811px;
height:45px;
text-indent:-9999px;
position:relative;
top:56px;
left:34px;
}
#contact form {
position:relative;
top:85px;
left:50px;
width:400px;
}
#contact label {
font-family:georgia;
font-size:11px;
color:#818181;
font-style:italic;
text-shadow:0 1px 1px #000;
display:block;
clear:both;
margin-bottom:5px;
}
#contact input, #contact textarea {
clear:both;
display:block;
margin-bottom:8px;
font-size:16px;
padding:5px;
width:330px;
-moz-border-radius:4px;
}
#contact input.fade {
background:url(sifiso-images/fields-bg.gif) repeat-x top left;
height:24px;
border:0px;
}
#contact textarea {
background:url(sifiso-images/fields-bg.gif) repeat-x top left #eaeaea;
height:104px;
border:0px;
margin-bottom:25px;
}
#contact input.submitbtn {
background:url(sifiso-images/sumbit-btn.png);
width:200px;
height:39px;
border:none;
}
#contact input:hover.submitbtn {
position:relative;
top:-1px;
}
a#bac {
background:url(sifiso-images/backtotop.png);
display:block;
width:96px;
height:34px;
outline:none;
position:relative;
text-indent:-9999px;
top:208px;
left:796px;
}
#copyright {
display:block;
width:100%;
clear:both;
text-align:center;
margin:0;
padding:0 0 8px 0;
color:#333;
}
#copyright a {
color:#333;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h2 id="logo">sifiso...</h2>
<ul id="nav">
<li><a id="rec" href="#recent-work-top">see my work</a></li>
<li><a id="con" href="#contact">contact me</a></li>
</ul>
<!--nav-->
<p>I design websites. I stay up all night staring at my monitor making sure my pages are awesome...</p>
</div>
<!--header-->
<div id="testimonials" class="clear">
<h2>Some Kind Words from Recent Clients:</h2>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<!--col-->
<div class="col">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, </div>
<!--col-->
<div class="col"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<!--col-->
</div>
<!--testimonials-->
<div id="quotes">
<p id="quote-1">The artist is a receptacle for emotions that come from all over the place; from the sky, from the earth, from a scrap of paper, from a passing shape, from a spider?s web...-Pablo Picasso</p>
<p id="quote-2">You come to nature with all her theories, and she knocks them all flat...- Renoir</p>
</div>
<!--quotes-->
<div id="recent-work-top" class="clear">
<h2>Take a look at some of my recent work</h2>
</div>
<!--recent-work-top-->
<div id="recent-work-mid" class="clear">
<ul>
<li><img src="sifiso-images/thumbs/77335_4871.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/107023_5283.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/194405_2562.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/194828_4216.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/220121_3233.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/319768_8498.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/326255_8797.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/442672_90401332.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/451878_36197329.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/909780_59550139..jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/959022_75540741.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/1093986_80007689.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/194828_4216.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/220121_3233.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/319768_8498.jpg" alt="" /></li>
<li><img src="sifiso-images/thumbs/326255_8797.jpg" alt="" /></li>
</ul>
</div>
<!--recent-work-mid-->
<div id="recent-work-bottom" class="clear"></div>
<!--recent-work-bottom-->
<div id="contact" class="clear">
<h2>Contat me for a quote</h2>
<p>Hire me for your next design project</p>
<form action="#">
<label for="name">Name</label>
<input name="name" type="text" class="fade" />
<label for="email">Email</label>
<input name="email" type="text" class="fade" />
<label for="comments">Comments</label>
<textarea class="fade" name="comments"></textarea>
<input type="submit" class="submitbtn" value="" />
</form>
<a href="#header" id="bac">Back to Top</a> </div>
<!--contact-->
</div>
<!--wrap-->
<div id="copyright">Design by <a href="http://fearlessflyer.com/">FearlessFlyer</a></div>
</body>
</html>
Related examples in the same category