PSD to HTML5 CSS3 of Real Estate Template

AD

Today I have decided to jump into jQuery a little bit, so this time, we won’t just create a featured area but a complete featured slideshow. If you like this idea, we’ll carry on including a bit of jQuery here and there regularly.

This is the last tutorial of Real Estate Template series.  As our regular readers know that we always make a series of articles, in the first we publish a Photoshop tutorial, in the second article we present the download file and in the last article, we publish the HTML CSS tutorial. The articles of web design series are published every Friday.

Other Articles in the Series

Final Result

Template-Tutorial-in-Photoshop

Live Preview

Head Area Code

Apart from the regular stuff, you can see that we are using some <script> codes for loading jQuery and its colleagues. The method of using jQuery is simple, we upload it on a server and it loads on the client side.

Note: Google has many of these codes and libraries (such as jQuery) uploaded  on their server and they encourage web developers to use their server for loading jQuery. In this article I’m not using Google’s service because it might get complicated for you. We’ll do that after a few articles when you have your hands running.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Real Estate | Designzzz</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/jcarousellite_1.0.1.js" type="text/javascript"></script>
</head>

Moving Forward to Body

Nothing special here, let’s move to “main-container” div.

<html>
  <body>
    <div id="main-container">
      <!--all the codes carrying body content -->
    </div>
  </body>
</html>

CSS Body and Main Container

You can see we are using HTML5 and CSS3 nowadays but this code can easily work with HTML4 and CSS2.

@charset "utf-8";
 /* CSS Document */
*{
   margin:0;
   padding:0;
   }
body
   {
   background:url(images/bg.jpg) repeat top center #000;
   font-family:Arial, Helvetica, sans-serif;

   }
   article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
#main-container
   {
   width:1000px;
   margin:0 auto;
   }

Logo and Navigation Area

If you remember the photoshop tutorial of this design, you’d remember that I described the methodology behind this header.  In the code, we’ll give each menu a button a different class because they all have a different color.

Tutorial-in-Photoshop

<header>
<!-- Navigation -->
<div class="logo">
<img src="images/logo.png" alt="" />
</div>
<nav>
<ul>
<li class="circle1"><a href="#">Home</a></li>
<li class="circle2"><a href="#">About</a></li>
<li class="circle3"><a href="#">Renting</a></li>
<li class="circle4"><a href="#">Selling</a></li>
<li class="circle5"><a href="#">Finance</a></li>
<li class="circle6"><a href="#">Contact</a></li>
</ul>
</nav>
</header>

CSS of this Area

You can see that we are making circles in the menu bar with the code for <ul>.

header
 {
 width:960px;
 height:200px;
 }
 .logo
 {
 width:150px;
 float:left;
 overflow:hidden;
 }
 nav
 {

 height:90px;
 width:477px;
 float:right;
 margin:34px 2px;
 }
 .circle1
 {
 background:#21b6a8;
 }
 .circle2
 {
 background:#177f75;
 }
 .circle3
 {
 background:#b6212d;
 }
 .circle4
 {
 background:#7f171f;
 }
 .circle5
 {
 background:#b67721;
 }
 .circle6
 {
 background:#7f5417;
 }
nav ul
   {
   margin:0;
   padding:0;
   }
   nav ul li
   {
   border-radius:80px;
   -moz-border-radius: 80px;
   -webkit-border-radius: 15px;
   width:80px;
   height:80px;
   padding:3px;
   color:#ffffff;
   list-style:none;
   float:left;
   margin:0px -4px;
   }
   nav ul li a
   {
   font-family:"Verdana", Geneva, sans-serif;
   font-size:15px;
   color:#fff;
   margin:20px 15px;
   line-height:75px;
   text-decoration:none;
   }
   nav ul li a:hover
   {
   color:#CCC;
   }

HTML of Form Area

As I said, I put a lot of options in the form but it is likely that you wouldn’t need all these options for regular clients.

Web-Layout-Tutorial-in-Photoshop

<div id="block1"><!-- Form -->
<div class="hd-bg1">
<p> Find Home </p>
</div>
<div class="hd-bg">
</div>
<div class="form-bg">
<div id="caption">
<p>Type</p>
<p>City</p>
<p>State</p>
<p>Zip code</p>
</div>
<div id="form">
<div class="dropdown">
<select>
<option>Type 1</option>
<option>Type 2</option>
<option>Type 3</option>
<option>Type 4</option>
</select>
</div>
<div class="dropdown">
<select>
<option>New York</option>
<option>London</option>
<option>Las Vegas</option>
<option>Singapore</option>
</select>
</div>
<div class="dropdown">
<select>
<option>USA</option>
<option>Australia</option>
<option>Malaysia</option>
<option>Brazil</option>
</select>
</div>
<div class="dropdown">
<select>
<option>Select</option>
<option>5454</option>
<option>5845</option>
<option>7584</option>
</select>
</div>
</div>
<div id="caption1">
<p>Beds</p>
<p>Baths</p>
<p>Features</p>
</div>
<div id="form1">
<div class="dropdown1">
<select class="select1">
<option></option>
<option>2</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="dropdown1">
<select class="select1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<input type="text" value="" class="textfield2"/>
<input type="submit" value="Search" class="submit"/>
</div>
</div>
</div>

CSS of Form Area

#block1
 {
 width:960px;
 height:225px;
 margin:7px 13px;
 }
 .hd-bg1
 {
 background:#000;
 width:154px;
 height:40px;
 float:left;
 border-radius:11px 3px 0px 0px;
 -moz-border-radius: 11px 3px 0px 0px;
 -webkit-border-radius: 11px 3px 0px 0px;
 text-align:center;
 }
 .hd-bg1 p
 {
 font-family:"Verdana", Geneva, sans-serif;
 font-size:15px;
 color:#fff;
 margin:9px 16px;
 }
 .hd-bg
 {
 background:url(images/hd-bg.png) no-repeat top right;
 width:195px;
 height:40px;
 }
 .form-bg
 {
 background:url(images/form-bg.png) repeat-x ;
 width:960px;
 height:142px;
 border-radius:0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
 }
 #caption
 {
 width:960px;
 overflow:hidden;
 margin-left:18px;
 }
 #caption p
 {
 font-family:"Verdana", Geneva, sans-serif;
 font-size:15px;
 color:#fff;
 width:175px;
 margin:6px 15px;
 padding:0 9px;
 float:left;
 }
 #caption1
 {
 width:960px;
 overflow:hidden;
 margin-left:18px;
 }
 #caption1 p
 {
 font-family:"Verdana", Geneva, sans-serif;
 font-size:15px;
 color:#fff;
 width:64px;
 margin:6px 17px;
 padding:0 9px;
 float:left;
 }
#form
   {
   width:960px;
   overflow:hidden;
   }
   #form1
   {
   width:960px;
   overflow:hidden;
   }
   .dropdown
   {
   background:url(images/arrow.png) no-repeat top right #fff;
   width:165px;
   overflow:hidden;
   border-radius:5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   margin:0 33px;
   float:left;
   }
   .dropdown1
   {
   background:url(images/arrow.png) no-repeat top right #fff;
   width:85px;
   overflow:hidden;
   border-radius:5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   margin:0 29px;
   float:left;
   }
   select
   {
   background:transparent;
   width:187px;
   height:30px;
   border:0px;
   margin: 0 2px;
   padding: 5px 0;
-webkit-appearance:none;
   }
   .select1
   {
   background:transparent;
   width:103px;
   height:30px;
   border:0px;
   }
   .textfield2
   {
   width:454px;
   height:30px;
   border-radius:7px;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   border:0px;
   float:left;
   }
   .submit
   {
   background:#302f2f;
   width:130px;
   height:35px;
   margin:0 36px;
   border-radius:5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   border:0px;
   text-align:center;
   font-family:"Verdana", Geneva, sans-serif;
   font-size:16px;
   color:#FFF;
   }

HTML of Feature Area

This is where jQuery comes into play. You can see the code that I just gave the <div> a class of carousel, rest will be taken care by jQuery and its carousel plugin.

Web-Layout-Tutorial-in-Photoshop

<div class="carousel gallery"><!-- Promo slider -->
<a class="prev" href="#">prev</a>
<div class="jCarouselLite">
<ul>
<li><img src="images/feature-img.png" alt="" /></li>
<li><img src="images/feature-img1.png" alt="" /></li>
<li><img src="images/feature-img2.png" alt="" /></li>
</ul>
</div>
<a class="next" href="#">next</a>
</div>

CSS of this Area

jQuery does add splendid effects but its always a good idea to give it finishing touches with CSS. In this tutorial I’m doing most of the styling with CSS and jQuery just animates the slider. I think this is a good practice.

.carousel
 {
 background:url(../images/carousel-tail.gif) 0 0 repeat;
 height:365px;
 padding:10px;
 position:relative;
 width:918px;
 margin:0 auto;
 }
.carousel .prev
   {
   background:url(images/left-arrow.png) left top no-repeat;
   display:block;
   height:52px;
   left:12px;
   position:absolute;
   text-indent:-5000px;
   top:174px;
   width:55px;
   z-index:99;
   }
.carousel .next
   {
   background:url(images/right-arrow.png) left top no-repeat;
   display:block;
   height:52px;
   position:absolute;
   right:10px;
   text-indent:-5000px;
   top:176px;
   width:55px;
   z-index:99;
   }
.carousel .prev:hover,.carousel .next:hover
   {
   background-position:left bottom;
   }
.carousel li
   {
   margin-right:7px;
   }
.jCarouselLite
   {
   height:100%;
   overflow:hidden;
   width:918px !important;
   }

HTML of Special Deals

We can add some animation here as well but let’s just finish this tutorial quickly and not get into jQuery again.

Real-Estate-Template-Tutorial-in-Photoshop

 <div id="block3"><!-- Special deals -->
<div class="hd-bg1">
<p> Special Deals </p>
</div>
<div class="hd-bg">
</div>
<div class="form-bg">
<div class="special-deals">
<div class="img"><img src="images/img1.png" alt="" /></div>
<div class="img"><img src="images/img2.png" alt="" /></div>
<div class="img"><img src="images/img3.png" alt="" /></div>
</div>
</div>
</div>

CSS of this Area

#block3
 {
 width:960px;
 height:225px;
 margin:7px 13px;
 }
 .special-deals
 {
 width:858px;
 overflow:hidden;
 padding:13px 0px;
 margin-left:50px;
 }
 .img
 {
 width:200px;
 height:115px;
 float:left;
 padding:0 43px;
 }

Footer Area HTML

Nothing fancy here, except that I added the photo of my business card instead of writing down contact details. I just wanted to do something crazy.

Easy-Tutorial-in-Photoshop

<footer><!-- Footer -->
<div id="block2">
<div class="f-block">
<div class="hd-bg2">
<p>Compnay</p>
</div>
<div class="list">
<p>Home</p>
<p>About</p>
<p>Selling</p>
<p>Renting</p>
<p>Contact</p>
</div>
</div>
<div class="f-block">
<div class="hd-bg2">
<p>For Clients</p>
</div>
<div class="list">
<p>Promotion</p>
<p>Forums</p>
<p>Sign-up</p>
</div>
</div>
<div class="f-block">
<div class="hd-bg2">
<p>Properties</p>
</div>
<div class="list">
<p>Residential</p>
<p>Commercial</p>
<p>Luxury</p>
</div>
</div>
</div>
<div id="contact">
<img src="images/contact.png" alt="" />
</div>
<div class="cprt">
<p> 2012 © Copyrighted Designzzz.com </p>
</div>
</footer>

CSS of this Area

Simple stuff here.

footer
 {
 background:url(images/footer-bg.png) repeat-x #000;
 width:1000px;
 height:236px;
 border-radius:5px 5px 5px 5px;
 }
 #block2
 {
 width:550px;
 height:210px;
 float:left;
 }
 .f-block
 {
 width:175px;
 height:200px;
 padding:13px 3px;
 float:left;
 }
 .hd-bg2
 {
 background:#000;
 width:118px;
 height:35px;
 margin:0 auto;
 }
 .hd-bg2 p
 {
 font-family:"Verdana", Geneva, sans-serif;
 font-size:16px;
 color:#fff;
 padding:4px 16px;
 }
 .list
 {
 font-family:"Verdana", Geneva, sans-serif;
 font-size:14px;
 color:#fff;
 line-height:30px;
 text-align:center;
 width:123px;
 margin:0 auto;
 }
 #contact
 {
 width:350px;
 height:196px;
 padding:10px 38px;
 float:left;
 }
 .cprt
 {
 width:960px;
 height:20px;
 }
 .cprt p
 {
 font-family:"Verdana", Geneva, sans-serif;
 font-size:12px;
 color:#6f6f6f;
 text-align:center;
 }
Live Preview

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved