CSS Programming for Wordpress Website Part4

Tuesday, February 28, 2017

Basic Layout HTML Code:

<!doctype html - 13/02/17>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link href="css/basic_layout.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="main_layout">
<div class="header_area">
<div class="logo_area"> </div>
<div class="menu">
<ul>
<li> <a href="index.html">HOME </a></li>
<li> <a href="about.html">ABOUT</a></li>
<li> <a href="client.html">CLIENT </a></li>
<li> <a href="gallery.html">GALLERY</a></li>
<li> <a href="contact.html">CONTACT</a></li>
</ul>
</div>
</div>

<div class="slider_area"> </div>

<div class="box1_area" ></div>

<div class="box2_area"> </div>
<div class="box3_area"> </div>
<div class="footerarea">
<div class="footer_leftarea">©copyright 2017 </div>
<div class="footer_rightarea"><u> ADDRESS:</u><br/>
New Horizons <br/>
Dhaka 1200 </div>

</div>

</div>
</body>
</html>

Basic Layout CSS Code:

@charset "utf-8";
/* CSS Document */
body
{ background-color:#CCC; margin:0px;}
.main_layout
{width:960px; height:900px; margin:0px auto; background-color:#333;
}
.header_area
{width:900px; height:150px; margin:10px 30px 5px 30px; background-color: #FFF; float:left;
}

.logo_area
{width:200px; height:150px; margin:0px; background-color: #666; float:left;
}
.menu
{width:700px; height:35px; margin:115px 0px 0px 0px ; background-color: #CCC; float:left;
}
.menu ul
{ margin:0px; padding:0px; list-style:none;}
.menu li
{display:inline;}
.menu a{ width:138px; height:35px; float:left; background-color:#C60;
letter-spacing:3px; color:#FFF; line-height:35px; text-align:center;
text-decoration:none; margin:0px 1px; font-weight:bolder;
}
.menu a:hover
{ background-color:#F96;}

.slider_area
{width:900px; height:350px; margin:0px 30px 5px 30px; background-color: #FFF; float:left;
}
.box1_area
{width:300px; height:250px; margin:0px 0px 5px 30px; background-color: #FCC; float:left;
}
.box2_area
{width:290px; height:250px; margin:0px 5px 5px 5px; background-color: #9CF; float:left;
}
.box3_area
{width:300px; height250px; margin:0px 30px 5px 0px; background-color: #FCC; float:left;
}
.footerarea
{width:900px; height:120px; margin:0px 30px 5px 30px; background-color: #FFF; float:left;
}
.footer_leftarea
{width:300px; height:120px; margin:0px; float:left; text-align:center; line-height:120px; letter-spacing:3px; font-size:12px;
}
.footer_rightarea
{width:300px; height:90px; margin:0px; background-color: #96C; float: right; text-align:center; padding-top:30px;
}

Lectra Wilcom