Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Designfolio - Home</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/custom-nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="css/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
pauseOnHover:true, //Stop animation while hovering
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/IE7styles.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/IE8styles.css" /><![endif]-->
</head>
<body>
<div id="bg_pattern">
<div id="bg_wrapper">
<div id="container">
<div id="header">
<a href ="" id="logo" class="replace"><span>BrightFolio</span></a>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--header-->
<div id="slideshow">
<div id="slider">
<img src="images/ss_1.jpg" alt="" title="What a Pretty View" />
<img src="images/ss_2.jpg" alt="" title="Massive Bridge Work" />
<img src="images/ss_3.jpg" alt="" title="The New Nike's in Town" />
<img src="images/ss_4.jpg" alt="" title="Everybody wants a Coke" />
</div>
</div><!--slideshow ends-->
<div id="content_top"></div>
<div class="content">
<div id="intro">
<h1>Sed eu molestie purus. Maecenas convallis faucibus viverra. Nulla malesuada vestibulum leo, non pharetra lacus cursus sed. </h1>
<p>Sed eu molestie purus. Maecenas convallis faucibus viverra. Nulla malesuada vestibulum leo, non pharetra lacus cursus sed. Nam semper sagittis leo, vitae pharetra magna ultricies a. Vivamus blandit, tortor et vehicula fringilla, lectus est pellentesque augue, vitae accumsan augue nisl sed nibh. Etiam vel erat leo. Nam tempor posuere mi, congue auctor nisl tincidunt ut. Etiam ut turpis ligula. Read More </p>
</div><!--introduction end-->
<div id="twitter">
<div id="twit_t"></div>
<div id="twit_r">
<p>This is a spot to display your latest tweets on twitter. <span>5 days ago</span></p>
</div>
<div id="twit_b">
<div id="follow"><a href="#">Follow us on Twitter</a></div>
</div>
</div><!--twitter end-->
<div class="services">
<div class="s_container">
<div class="title"><div id="design_ico"></div><h1>DESIGN</h1></div>
<div class="title_hr"></div>
<div class="service_back">
<p>Suspendisse pulvinar lectus justo. In vestibulum mollis consequat. Duis posuere, purus vel auctor rutrum, justo ipsum blandit nunc, vitae feugiat dui arcu vitae ipsum. Donec aliquet massa at nisl. <span>Read More</span></p>
</div><!--service back end-->
</div><!--s container end-->
<div class="s_container">
<div class="title"><div id="build_ico"></div><h1>BUILD</h1></div>
<div class="title_hr"></div>
<div class="service_back">
<p>Suspendisse pulvinar lectus justo. In vestibulum mollis consequat. Duis posuere, purus vel auctor rutrum, justo ipsum blandit nunc, vitae feugiat dui arcu vitae ipsum. Donec aliquet massa at nisl. <span>Read More</span></p>
</div><!--service back end-->
</div><!--s container end-->
<div class="s_container">
<div class="title"><div id="manage_ico"></div><h1>MANAGE</h1></div>
<div class="title_hr"></div>
<div class="service_back">
<p>Suspendisse pulvinar lectus justo. In vestibulum mollis consequat. Duis posuere, purus vel auctor rutrum, justo ipsum blandit nunc, vitae feugiat dui arcu vitae ipsum. Donec aliquet massa at nisl. <span>Read More</span></p>
</div><!--service back end-->
</div><!--s container end-->
</div><!--services ends-->
</div><!--content end-->
<div id="content_end"></div>
<div id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="foot_logo"></div>
<div id="copyright">Copyright © 2010 - Brightfolio. All rights reserved.</div>
<div id="foot_line"></div>
</div><!--footer ends-->
</div><!--container ends-->
</div><!--bgwrapper ends-->
</div><!--bgpattern ends-->
</body>
</html>