FINAL RESULT
Live Preview
Head Area Code
As usual, we are creating this template in HTML4 as it still is the most common language of the web. We have created a simple <head> section.
<!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>Business Company</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head>
Moving Forward to Body
Details of <body> are given below this step. Right now, you can just see that I have created a master <div> with an ID ofMain Container.
<body>
<div id="main-container">
<!-- All the Body Area Code -->
</div>
</body>
CSS Body and Main Container
These are the CSS code properties of main <body> and the <div> ID Main Container. I have extracted the the background from PSD file and I’m using that picture in code. I have also associated a gray color in the background.
@charset "utf-8";
/* CSS Document */
html, * {margin:0;padding:0;}
body
{
background:url(images/bg-header.jpg) repeat-x #363637;
}
a {
color:#FFF; text-decoration:none;
}
#main-container {
width:1000px; margin:0 auto;
}
Logo and Navigation Area
Time to create the navigation. I made a JPG of the logo, and also created a <ul> list for the nav bar. Here’s the HTML.
<div id="header-bg"> <div id="logo"> <img src="images/logo.png" alt="" /> </div> <div id="nav"> <ul> <li class="active"><a href="#"> Home </a></li> <li><a href="#"> About </a></li> <li><a href="#"> Products </a></li> <li><a href="#"> Services </a></li> <li><a href="#"> Contact </a></li> </ul> </div>
Css for Nav Bar
Now the CSS. You should play with the values to create something of your own.
#header-bg
{
height:413px;
top:auto;
width:1000px;
overflow:hidden;
}
#logo
{
margin-left: 10px;
margin-top:10px;
width:200px;
float:left;
}
#nav
{
background:#39393a;
border-bottom:#48494a solid 7px;
overflow:hidden;
margin-left:334px;
text-decoration:none;
line-height: 0px;
width:666px;
height:50px;
float:left;
}
#nav ul
{
list-style:none;
color:#FFF;
}
#nav ul li
{
font:bold 15px Arial, Monaco, monospace;
font-style:normal;
color:#ffffff;
background:#393a3b;
width:44px;
padding:12px 35px;
margin:0 auto;
float:left;
}
#nav ul li:hover
{
border-top:5px solid #626262;
}
.active
{
border-top:5px solid #626262;
}
Featured Area
I’m using temporary text from an article of Designzzz, neglect that please.
<div id="line"> <h2> SOLUTIONS </h2> <img src="images/line.png" alt="" /> <div> <h3>It is a long established fact that a reader<br/>will be distracted by the readable content<br/>of a page when looking at its layout.</h3> </div> </div> <div id="featured"> <a href="#"><img src="images/pic.jpg" alt="" /></a> </div> </div>
Featured Area CSS
And now the CSS. Always give the CSS it’s due value. It is sometimes neglected.
h2
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:25px;
color:#FFFFFF;
padding:25px;
margin-left:10px;
margin-top:10px;
line-height:2px;
width:200px
}
h3
{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
margin-left: 20px;
margin-top: 22px;
font-weight:300;
width:250px;
text-align:justify;
}
#line
{
margin-left:5px;
width:300px;
}
#featured
{
float: right;
height: 250px;
margin-right:50px;
margin-top:-96px;
border:solid #333;
}
Gallery Area’s HTML
This is the slider/gallery whatever you wanna call it.
<div id="bar"> <div class="left-arrow"> <a href="#"><img src="images/left-arrow.png" alt="" /></a> <div class="right-arrow"> <a href="#"><img src="images/right-arrow.png" alt="" /></a> </div> </div> </div> <div id="image"> <a href="#"><img src="images/img1.jpg" alt="" /></a> <a href="#"><img src="images/img2.jpg" alt="" /></a> <a href="#"><img src="images/img3.jpg" alt="" /></a> <a href="#"><img src="images/img4.jpg" alt="" /></a> </div>
CSS for this Area
CSS here a little tricky, pay attention please :)
.left-arrow
{
margin-left:17px;
padding-top:76px;
}
.right-arrow
{
margin-right:17px;
float:right
}
#bar
{
background-color: #494a4a;
width:100%;
height:170px;
}
#image
{
margin-left:50px;
margin-top:-166px;
}
#image img
{
margin:0 7px;
border: 2px solid #333;
}
Moving Towards Content Area
This section doesn’t really has a name but it’s always present in corporate templates. I’m calling it Big-Box.
<div id="big-box"> <div class="box"> <h1>Finance</h1> <div class="box-img"> <img src="images/box1.jpg" alt="" /> </div> <h3>There are many variations of<br/> passages of Lorem Ipsum<br /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3> <div class="readmore"> <a href="#"><img src="images/read-more.jpg" alt="" /></a> </div> </div> <div class="box"> <h1>Investment</h1> <div class="box-img"> <img src="images/box2.jpg" alt="" /> </div> <h3>There are many variations of<br/> passages of Lorem Ipsum<br /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3> <div class="readmore"> <a href="#"><img src="images/read-more.jpg" alt="" /></a> </div> </div> <div class="box"> <h1>Research</h1> <div class="box-img"> <img src="images/box3.jpg" alt="" /> </div> <h3>There are many variations of<br/> passages of Lorem Ipsum<br /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3> <div class="readmore"> <a href="#"><img src="images/read-more.jpg" alt="" /></a> </div> </div> <div class="box"> <h1>Management</h1> <div class="box-img"> <img src="images/box4.jpg" alt="" /> </div> <h3>There are many variations of<br/> passages of Lorem Ipsum<br /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3> <div class="readmore"> <a href="#"><img src="images/read-more.jpg" alt="" /></a> </div> </div> </div> </div>
Content Area CSS
CSS, this shouldn’t be so hard.
#big-box
{
background-color: #363637;
width:91%;
height:330px;
margin:20px auto;
}
.box
{
background-color:#282828;
border:#000 solid 1px;
width:200px;
height:342px;
margin: 0 12px;
float:left;
}
h1
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color: #ffffff;
margin: 10px 52px;
}
.box-img
{
margin: 6px;
}
.readmore
{
margin: 8px 38px;
}
Footer HTML
And last but not the least, the footer.
<div id= "bottom"> <div id="footer"> <div class="bottom-ul"> <ul> <li class="color"><strong> Links </strong></li> <li><a href="#"> Home </a></li> <li><a href="#"> About </a></li> <li><a href="#"> Products </a></li> <li><a href="#"> Services </a></li> </ul> </div> <div class="bottom-ul"> <ul> <li class="color"><strong> Networks </strong></li> <li><a href="#"> Designer's Dare </a></li> <li><a href="#"> Blasting art </a></li> <li><a href="#"> Designzzz </a></li> <li><a href="#"> Imagzzz </a></li> </ul> </div> <div class="bottom-ul"> <ul> <li class="color"><strong> Contact </strong></li> <li><a href="#"> Email: info@designzzz.com </a></li> <li> Telephone #0900-78601 </li> <li> Suite# 55 Floor #3<br /> Designzzz Building, ITville </li> </ul> </div> <div class="bottom-ul"> <ul id="no-back"> <li class="color"><strong> Follow Us </strong></li> <li> <a href="#"><img src="images/facebook.png" alt="" /></a> <a href="#"><img src="images/twitter.png" class="icon" alt="" /></a> </li> <li> <a href="#"><img src="images/Rss.png" alt="" /></a> <a href="#"><img src="images/Stumble.png" alt="" /></a> </li> <li> <img src="images/logo-bottom.png" alt="" /> </li> </ul> </div> <div id="bottom-text">Copyrighted by designzzz.com © 2011 </div> </div> </div>
Footer CSS
We conclude it with the CSS.
#bottom
{background:url(images/footer-bg.jpg) repeat;
width: 100%; overflow: hidden; margin:33px auto 0 auto;}
#footer
{
width:1000px;
margin: 0 auto;
}
#footer ul
{list-style:none;
color:#ffffff;
margin-left:42px;
}
#footer ul li
{
padding:10px;
text-decoration: none;
background:url(images/underline.png) no-repeat bottom;
}
.color
{
color:#000000;
background:none !important;
}
.image
{
margin-left:50px;
}
.bottom-ul
{
float:left;width:22%;
margin-left:30px;
}
.bottom-ul ul li img
{
margin: 0px 2px;
}
#bottom-text
{
text-align:center;
color:#FFF;
}
FINAL RESULT
I hope you liked it. Please, your suggestions are very important for me right now. Do comment.
