<!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>
<link type="text/css" rel="stylesheet" href="styles.css" />
</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>
<div class="inner_copyright">Collect from <a href="http://www.moobnn.com/" target="_blank" title="????">????</a></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="images/thumbs/77335_4871.jpg" alt="" /></li>
<li><img src="images/thumbs/107023_5283.jpg" alt="" /></li>
<li><img src="images/thumbs/194405_2562.jpg" alt="" /></li>
<li><img src="images/thumbs/194828_4216.jpg" alt="" /></li>
<li><img src="images/thumbs/220121_3233.jpg" alt="" /></li>
<li><img src="images/thumbs/319768_8498.jpg" alt="" /></li>
<li><img src="images/thumbs/326255_8797.jpg" alt="" /></li>
<li><img src="images/thumbs/442672_90401332.jpg" alt="" /></li>
<li><img src="images/thumbs/451878_36197329.jpg" alt="" /></li>
<li><img src="images/thumbs/909780_59550139..jpg" alt="" /></li>
<li><img src="images/thumbs/959022_75540741.jpg" alt="" /></li>
<li><img src="images/thumbs/1093986_80007689.jpg" alt="" /></li>
<li><img src="images/thumbs/194828_4216.jpg" alt="" /></li>
<li><img src="images/thumbs/220121_3233.jpg" alt="" /></li>
<li><img src="images/thumbs/319768_8498.jpg" alt="" /></li>
<li><img src="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">More Templates <a href="http://www.moobnn.com/" target="_blank" title="????">????</a></div>
</body>
</html>
黑色精美的设计师的个人网站模板_黑色 精美 精品 个人 设计 个人主页 跳转 案例 作品 简历 铅笔.rar （38个子文件） 
黑色精美的设计师的个人网站模板_黑色 精美 精品 个人 设计 个人主页 跳转 案例 作品 简历 铅笔 ftps_18 
jquery.scrollTo-1.4.2-min.js 2KB
index.html 5KB images 
backgroundl.jpg 512KB
takealook.png 7KB contactme.png 5KB backtotop.png 2KB
fields-bg.gif 322B sumbit-btn.png 5KB somekindwords.png 7KB quote-1.png 46KB logo.png 7KB recent-work-mid.png 328B quote-2.png 22KB navigation.png 8KB recent-work-bottom.png 3KB recent-work-top.png 859B hireme.png 15KB header-bg.png 69KB caption-bg.png 3KB thumbs 959022_75540741.jpg 57KB 451878_36197329.jpg 56KB 107023_5283.jpg 50KB 77335_4871.jpg 44KB 194405_2562.jpg 87KB 442672_90401332.jpg 72KB 1093986_80007689.jpg 72KB 326255_8797.jpg 49KB 909780_59550139.jpg 93KB 220121_3233.jpg 53KB 194828_4216.jpg 33KB 319768_8498.jpg 40KB contact-bg.png 281KB idesignwebsites.png 35KB quotes-bg.png 193KB testimonials-bg.png 2KB s.jpg 27KB styles.css 5KB jquery.localscroll-1.2.7-min.js 2KB资源评论
