CSS Programming for Wordpress Website Part3

Tuesday, February 28, 2017

Template Layout HTML Code:

<!doctype html - 11/02/17 - We will user google font in this article>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link href="css/bg.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Anton|Barrio" rel="stylesheet">
</head>

<body>
<div class="main_layout">

<div class="header_area">
<div class="header_logo"> </div>
<div class="header_icon"> WEB DESIGN</div>

</div>

<div class="line"> </div>
<div class="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT ME</a></li>
<li><a href="client.html">CLIENT</a></li>
<li><a href="product.html">PRODUCT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="box1_area">
<div class="box_image"><img src="images/cover-art.jpg" width="80" height="120"></div>
<h2>TITLE DATA1 </h2>
<p> Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data </p>

</div>
<div class="box2_area">
<div class="box_image"> <img src="images/Steak.jpg" width="80" height="120"></div>
<h2>TITLE DATA2 </h2>
<p> Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data </p>

</div>
<div class="box3_area">
<div class="box_image"><img src="images/art.jpg" width="80" height="120"> </div>
<h2>TITLE DATA3 </h2>
<p> Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data </p>

</div>

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

Template Layout CSS Code:

@charset "utf-8";

/* CSS Document */

body

{background-image: url(../images/modelling.jpg);

background-repeat: no-repeat;

background-position:center center;

background-attachment:fixed;

background-size:cover;

margin:0px; color:#FFF;

}

.main_layout

{width:960px; height:1000px; margin:0px auto; background:rgba(0,0,0,.5);

}

.header_area

{width:900px; height:150px; margin:10px 30px 5px 30px;

background:#06C; float:left;

}

.header_logo

{width:200px; height:100px; margin:25px 0px 25px 25px;

background: #9F0; float:left;

}

.header_icon

{width:200px; height:100px; margin:25px 0px 25px 25px;

float: right; line-height:100px;

}

.line

{width:900px; height:5px; margin:0px 30px 5px 30px;

background: #FFF; float:left;

}

.menu

{width:900px; height:35px; margin:0px 30px 5px 30px;

background:#06C; float:left;

}

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

.menu li { display:inline;}

.menu a { width:178px; height:35px; font-weight:bolder; float:left; text-align:center; line-height:35px; color:#FFF; text-decoration:none;font-family: 'Barrio', cursive;

font-family: 'Anton', sans-serif; letter-spacing:3px;}

.menu a:hover { background-color: #03C; text-decoration:underline;}

.box1_area

{width:300px; height:450px; margin:0px 0px 5px 30px;

background:rgba(100,0,0,.4); float:left;

}

.box_image

{width:80px; height:120px; margin:5px;

background: #0FC; float: right; border:1px solid #FFF;

}

.box2_area

{width:300px; height:450px; margin:0px 0px 5px 0px;

background:rgba(0,100,0,.4); float:left;

}

.box3_area

{width:300px; height:450px; margin:0px 30px 5px 0px;

background:rgba(0,0,100,.4); float:left;

}

{color: #FFF; letter-spacing:3px; text-indent:5px;

text-shadow:0px -5px 5px #FFFF33;

}

p{ text-align:justify; padding:0px 15px;}

Lectra Wilcom