CSS Programming for Wordpress Website Part6

Tuesday, February 28, 2017

HTML Code:

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

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

<body>
<div class="top_header">
<div class="header">
<div class="left_header"> FACEBOOK</div>
<div class="right_header"> </div>

</div>
</div>

<div class="main_box"> </div>

<div class="footer"> </div>
</body>
</html>

CSS Code:

@charset "utf-8";

/* CSS Document */

body

{ margin:0px; background-color:#FCF;}

.top_header

{ width:100%; height:150px; background-color:#06F; margin:0px; }

.header

{ width:960px; height:150px; margin:0px auto;}

.left_header

{ width:300px; height:150px; float:left; margin:0px; text-align:center; line-height:150px; font-size:36px; color:#FFF; font-weight:bolder; letter-spacing:3px;}

.right_header

{ width:300px; height:150px; float: right; background-color: #33F; margin:0px;}

.main_box

{ width:100%; height:450px; background-color: #990; }

.footer

{ width:100%; height:150px; background-color: #FF0; margin:0px; position:absolute;}

Result of Above Code:

HTML Code Practice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="shortcut icon" href="images/google_fonts_lodp.ico">
<link href="css/01.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="main_layout">
<div class="header">
<div class="header_logo">Cat Fashion House</div>
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="shopping.html">Shopping</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="collection.html">Collection</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">AbouT Us</a></li>
</ul>

</div>

<div class="box1"><img src="images/71jSaOBCL9L._AC_UL200_SR140,200_.jpg" width="142" height="200"></div>

<div class="box2"><img src="images/s-l200.jpg" width="142" height="200"></div>

<div class="box3"><img src="images/images.jpg" width="142" height="200"></div>

<div class="box4"><img src="images/Lipstick Queen Chinatown.jpg" width="142" height="200"></div>

<div class="box5"><img src="images/wholesale-2016new-style-custom-made-high.jpg" width="142" height="200"></div>

<div class="right_bar"><h2>Category</h2>
<div class="right_bar2"><h2>Popular Post</h2></div>

<div class="right_bar3"><h2>Recent Post</h2></div>

</div>

<div class="content"></div>
<div class="feature_image"><img src="images/5.jpg" width="355" height="300"></div>

<div class="box_image1">Save upto</div>
<div class="box_image2">Save Extra Money</div>
<div class="box_image3">Save 60%</div>
<div class="box_image4">Free delivery</div>

<div class="footer">
<div class="footer_icon1"><img src="images/facebook-icon.png" width="50" height="50"></div>
<div class="footer_icon2"><img src="images/pinterest red check circle social media icon.png" width="50" height="50"></div>
<div class="footer_icon3"><img src="images/Icon-Twitter.png" width="50" height="50"></div>
<div class="footer_icon4"><img src="images/email-icon.png" width="50" height="50"></div>

</div>

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

CSS Practice Code:

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

body
{ background:#666; margin:0px;}

.main_layout
{ width:960px; height:1000px; margin:0px auto; background:#333;}

.header
{ width:960px; height:150px; margin:0px; background-image: url(../images/evasionprod.jpg);
float:left;}

.header_logo
{ width:200px; height:150px; margin:0px; float:left;
font-weight: bolder; font-size:36px; line-height:150px; text-align:center; color: #FFF;
}
.menu { width:960px; height:35px; background:#39F; margin:0px; float:left;}

.menu ul{ margin:0px; padding:0px; list-style:none;}

.menu li{ display:inline;}

.menu a{ width:120px; height:35px; float:left; background: #06F;
margin:0px; font-weight:bolder; text-decoration:none; text-align:center; line-height:35px;
font-size:18px; color: #FFF; border-radius:30px;}

.menu a:hover{ background: #09F; text-decoration:underline;}
.box1
{ width:142px; height:200px; margin:0px 0px 0px 0px; background:#09F; float:left;}

.box2
{ width:142px; height:200px; margin:0px 0px 0px 0px; background: #33C; float:left;}

.box3
{ width:142px; height:200px; margin:0px 0px 0px 0px; background: #F60; float:left;}

.box4
{width:142px; height:200px; margin:0px 0px 0px 0px; background: #F09; float:left;}

.box5
{ width:142px; height:200px; margin:0px 0px 0px 0px; background: #030; float:left;}

.right_bar
{ width:250px; height:650px; margin:0px; background:#CCC; float: right; font-weight:bolder; text-align:center;}
.right_bar2
{ width:250px; height:216px; margin:150px 0px 0px 0px; background: #999; float: right;}
.right_bar3
{ width:250px; height:216px; margin:0px 0px 0px 0px; background: #FFF; float: right;}

.content
{ width:355px; height:300px; margin:0px; background: #09F; float:left;}

.feature_image
{ width:355px; height:300px; margin:0px; background: #0CF; float:left;}

.box_image1
{ width:177px; height:150px; margin:0px; background: #0CF; float:left;
font-weight:bolder;
line-height:150px; font-size:24px; text-align:center; color:#666;;}

.box_image2
{ width:177px; height:150px; margin:0px; background: #0F6; float:left;
font-weight:bolder;
line-height:150px; font-size:24px; text-align:center; color:#666;;}

.box_image3
{ width:178px; height:150px; margin:0px; background: #0CF; float:left;
font-weight:bolder;
line-height:150px; font-size:24px; text-align:center; color:#666;;}

.box_image4
{ width:178px; height:150px; margin:0px; background: #0F6; float:left; font-weight:bolder;
line-height:150px; font-size:24px; text-align:center; color: #666;}

.footer
{ width:960px; height:165px; margin:0px; background: #0C9; float:left;}

.footer_icon1
{ width:50px; height:50px; margin:60px 0px 60px 0px; float:left;}
.footer_icon2
{ width:50px; height:50px; margin:60px 0px 60px 0px; float:left;}
.footer_icon3
{ width:50px; height:50px; margin:60px 0px 60px 0px; float:left;}

.footer_icon4
{ width:50px; height:50px; margin:60px 0px 60px 0px; float:left;}

Lectra Wilcom