Main Project: http://www.1stwebdesigner.com/wordpress/psd-to-html-tutorial-code-photoshop/



css code:


@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */

body{
	background:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	text-align:justify;
}

/* FONT STYLES */
h3{
	font-size:24px;
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	margin-bottom:25px;
}
h4{
	margin-bottom:25px;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
}

h5{
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
p{
	font-size:13px;
	color:#555;
	line-height:18px;
}
a, a:link, a:visited{
	text-decoration:none;
	outline:none;
}

.green{
	color:#fff;
}

.white{
	color:#fff;
}
strong{
	font-weight:bold;
}
/* END FONTS STYLES */

/* HEADER */
#header-wrap{
	border-top:10px solid #4d9543;
	padding-top:40px;
}
header{
	width:960px;
	margin:0 auto;
	padding: 0;
}
header h2 a{
	display:block;
	text-indent:-999999px;
	background:url(images/logo.png) no-repeat;
	width:214px;
	height:77px;
	float:left;
	margin-bottom:40px;
}
#call{
	float:right;
	border-right:1px solid #c8c8c8;
	padding-right:25px;
	margin-top:20px;
}
#call h3{
	margin:0;
}
#call h4{
	text-align: right;
	margin: 0px;
	color: #093;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}
nav{
	clear:both;
	width:960px;
	height:50px;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	background-color:#3b7c33;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
	background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
	/* IE 10+ */
	background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
	border: 1px solid #336c2b;
}

nav ul li{
	float:left;
	border-right:1px solid #336c2b;
	border-left:1px solid #78c368;
}
nav ul li.home{
	border-left:none;
	text-indent:-9999px;
	background:url(images/home.png) no-repeat 50% 50%;
}
nav ul li.last{
	border-left:none;
	border-right:none;
	float:right;
	margin-right:20px;
}
nav ul li a{
	display:block;
	padding:0 30px;
	height:50px;
	line-height:50px;
	font-size:15px;
	color:#fff;
	text-shadow:0 1px 0 #387031;
	/* text-shadow: h-shadow v-shadow blur color; */
}
nav ul li a:hover{
	background:#5fae53;
}
nav ul li.home a:hover{
	border-bottom-left-radius:30px;
	-moz-border-bottom-left-radius:30px;
	-webkit-border-bottom-left-radius:30px;
	border-top-left-radius:30px;
	-moz-border-top-left-radius:30px;
	-webkit-border-top-left-radius:30px;
	background:#5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li div input[type=text]{
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	background:#4b9241;
	border-left:none;
	border-right:none;
	border-bottom:1px solid #5ead52;
	border-top:1px solid #346d2c;
	color:#fff;
	text-shadow:0 1px 0 #387031;
	padding:5px 0 5px 20px;
	width:200px;
}
nav ul li div input[type=text]:focus{
	outline:none;
}

/* TO STYLE PLACE HOLDER */
::-webkit-input-placeholder{
	color:#fff;
}

nav ul li div input[type=submit]{
	background:url(images/search.png) no-repeat 50% 50%;
	border:none;
	text-indent:-999999px;
	margin-left:15px;
	height:50px;
	width:16px;
}
/* END HEADER */


/* START CONTAINER AND SLIDES */
#container{
	width:960px;
	margin:0 auto;
}

#slide1{
	margin-top:40px;
	margin-bottom:30px;
}
 
#slide-heading{
	background: url(images/slide-heading.png) no-repeat;
	float: right;
	position: relative;
	top: -277px;
	width: 494px;
	height: 68px;
	color: #fff;
	font-size: 22px;
	padding-top: 20px;
	padding-left: 80px;
	text-align: left;
	
}

#info{
	position: relative;
	top: -235px;
	float: right;
	padding-left: 30px;
	padding-right: 30px;
	width: 385px;
	color: #000000;
}
#info p{
	width:260px;
	margin-bottom:20px;
}

.readmore{
	margin-bottom:20px;
	margin-left:100px;
	font-style:italic;
	text-decoration:none;
	color:#509743;
	padding-left:15px;
	background:url(images/more.png) no-repeat 0 50%;
	
}
.readmore:hover{
	color:#c8c8c8;
}

/* END CONTAINER AND SLIDE */

/* SERVICE */	
#service{
	background:url(images/service-bg.jpg) no-repeat;
	margin:50px auto;
	width:960px;
	height:253px;
	padding-top:30px;
}

#web{
	position:relative;
	top:-25px;
	float:left;
	width:450px;
	padding-left:30px;
}
#web p{
	width: 260px;
	margin-bottom: 20px;
	color: #000;
}
#web img{
	float:right;
	margin-right:50px;
}


#vector{
	float:right;
	width:450px;
	padding-right:130px;
	margin-right:130px;
	margin-bottom:500px;
	margin-top:-320px;
}

#vector p{
	width: 260px;
	margin-bottom: 20px;
	color: #000;
}
#vector img{
	float:right;
	margin-right:50px;
}
/* END SERVICE */
	
	
    


html code:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Burnstudio</title>
<link rel="stylesheet" type="text/css" href="practical_project01.css" />
<style type="text/css">
.green1 {
	color: #509743;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}
</style>
</head>


<body>

<div id="header-wrap">
<header class="group">
<h2><a href="practical_project01.html" title="burnstudio">Burnstudio</a></h2>
<div id="call">
<h3>(012) 345 6789</h3>
<h4>Call us <strong>now</strong><span class="green"><b>w</b></span></h4>
</div><!-- end call -->
<nav class="group">
<ul>
<li class="home"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Services</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Testimonials</a></li>
<li class="last">
<div>
<input type="text" name="search" placeholder="search" />
<input type="submit" name="search" value="go" class="search" />
</div>
</li>
</ul>
</nav>
</header>
</div>

<!-- START SLIDES CONTAINER -->
<div id="container">
<div id="slide1">
<img src="images/slide1.png" alt="Nice Pic" />
<h1 id="slide-heading">Everything comes to us at the right time. Key to everything is Patience! Be Patient…!!!</h1>
<p id="info">All information provided in a job application must be true, accurate and complete. oDesk reserves the right to verify any and all information provided on a User's profile or job application.</br></br><a href="#" span class="readmore">read more</a></span></p>

</div>
</div>

<!-- END SLIDES CONTAINER -->

<!--START SERVICE-->
<div id="service">

<div id="web">
<img src="images/web.png" />
<h3>Web <span class="green1"><b>Design</b></span></h3>
<p>All information provided in a job application must be true, accurate and complete. oDesk reserves the right to verify any and all information provided on a User's profile or job application.</p>
<p><a href="#" class="readmore">read more</a></p>
</div>
</div>


<!-- END WEB -->

<div id="vector">
<img src="images/vector.png" />
<h3>Vector <span class="green1"><b>Design</b></span></h3>
<p>All information provided in a job application must be true, accurate and complete. oDesk reserves the right to verify any and all information provided on a User's profile or job application.</p>
<p><a href="#" class="readmore">read more</a></p>
</div>



</body>
</html>