HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1st task</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<header>
<div class="chead"> <img src="img/logo.png" style="width:40%;height:100px;margin-left:40px;"/> </div>
<div class="chead" >
<nav>
<ul>
<li> <a href="#"> Main</a> </li>
<li> <a href="#"> Marketing</a> </li>
<li> <a href="#"> Service</a> </li>
<li> <a href="#"> Contact</a> </li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div style=" background-color:#CCC ;width:100%;height:300px;border-top:2px solid black">
<div style="width:70%;height:280px;margin:0 auto;">
<img src="img/Social-Media-Marketing-img.jpg" style="width:100%;margin-top:20px;height:260px;"/>
</div>
</div>
<div style=" background-color:#CCC;width:100%;height:200px;">
<div style="width:80%;height:200px;margin:0 auto; ">
<div class="box" style="background-color:rgb(253,112,32)"> </div>
<div class="box" style="background-color:rgb(135,204,33)"> </div>
<div class="box" style="background-color:#FF0"> </div>
<div class="box" style="background-color:#06F"> </div>
</div>
</div>
<div style=" background-color:#666;width:100%;height:100px; margin-top:10px;">
<div style=" background-color:yellow;width:80%;height:100px;float:left"> </div>
<div style=" background-color:red;width:20%;height:100px;float:left"> </div>
</div>
</div>
<footer> </footer>
</div>
</body>
</html>
CSS CODE:
@charset "utf-8";
/* CSS Document */
body
{ margin:0 auto;
padding:0px;
background-color:#03F;
}
#wrapper
{
width:100%;
height:1000px;
background-color:#939;
}
header
{
width:100%;
height:100px;
background-color:#09C;
}
#content
{
width:100%;
height:800px;
background-color:#ccc;
}
footer
{
width:100%;
height:100px;
background-color:#F96;
}
.chead
{
width:50%;
height:100px;
background-color:#CCC;
float:left;
}
nav
{
width:100%;
height:100px;
}
nav ul
{ margin:0;
list-style-type:none;
}
nav ul li
{
float:left;
margin-top:30px;
}
nav ul li a
{
text-decoration:none;
padding:20px;
color:#fff; font-size:14px;
}
.box
{
width:21.25%;
height:200px;
background-color:#9C3;
float:left;
margin-left:20px;
border-radius:10px 10px 10px 10px;
}
