FINAL RESULT
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.
<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.
<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.
<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.
<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.
<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;
}
Không có nhận xét nào:
Đăng nhận xét