Вот HTML код:
#wrapper {
width:1024px;
height: 1800px;
margin:0 auto;
}
#toplines {
height:18px;
background-image:url(http://storage4.static.itmages.ru/i/15/0709/h_1436442347_8342033_1f2b025075.png);
background-color: #cccccc;
background-repeat: repeat-x;
}
/*Начинается блок хеадер*/
/*Начинается блок хеадер*/
#header{
height: 157px;
position: relative;
}
#logo {
width: 260px;
height: 93px;
outline: 0px solid #cccccc;
background-image: url(http://storage2.static.itmages.ru/i/15/0709/h_1436442347_9750916_c5c6455416.png);
background-repeat: no-repeat;
position: absolute;
top:26px;
left:51px;
}
#logo a {
display: block;
height: inherit;
cursor: pointer;
}
#faq{
width: 82px;
height: 164px;
outline: 0px solid #cccccc;
background-image: url(../img/http://storage2.static.itmages.ru/i/15/0709/h_1436442345_2325244_e43eecc1a7.png);
background-repeat: no-repeat;
position: absolute;
right:43px;
top:-17px;
}
#faq a{
display: block;
height: inherit;
cursor: pointer;
}
#nav {
width:520px;
height: 30px;
outline: 0px solid #cccccc;
position: absolute;
top:56px;
left: 337px;
}
#nav li{
float:left;
list-style-type: none;
margin-right: 27px;
}
#nav li a{
text-decoration: none;
font:16px Arial, sans-serif;
color: #3f3f3f;
}
#nav li a:hover,#nav li a.active{
color:#2c789c;}
/*Конец блока хеадер*/
/*Начало блока пипл*/
#people{
height: 404px;
background-image: url(http://storage3.static.itmages.ru/i/15/0709/h_1436442347_3550194_30a94e302c.png);
background-repeat: no-repeat;
background-position: 54px 14px;
position: relative;
}
#peopleImg {
height: 394px;
width:428px;
position: absolute;
right:37px;
background-image: url(http://storage2.static.itmages.ru/i/15/0709/h_1436442347_8257041_88263bc943.png);
z-index: 3;
}
#slogan {
width: 373px;
height: 79px;
position: absolute;
top: 203px;
right: 637px;
text-align: right;
}
#slogan h1{
font: bold 23px Arial,sans-serif;
color: #1d1e1b;
text-transform: uppercase;
padding-top: 10px;
margin: 0;
}
#slogan p{
font:16px Arial,sams-serif;
color:#2c789c;
margin: 2px 0 0 0;
}
#forline{
height: 97px;
position: absolute;
bottom:0;
left: 0;
width:1024px;
background-image: url(../img/line.png);
background-repeat: repeat-y;
z-index: 2;
}
/*Конец блока пипл*/
/*Начала цветного блока*/
#colors{
background-image: url(../img/http://storage4.static.itmages.ru/i/15/0709/h_1436442345_5280153_2f5f9e19ea.png);
background-repeat: repeat-y;
padding:0 49px 0 42px;
}
#blue{
width:292px;
float:left;
background-color:#2c789c ;
padding-left: 14px;
position: relative;
}
#yellow{
width:302px;
float:left;
background-color:#e5b00d;
padding-left: 19px;
position: relative;
}
#green{
width:282px;
float:left;
background-color:#97ba15 ;
padding-left: 24px;
position: relative;
}
#blue,#yellow,#green{
color:white;
padding-top: 13px;
position: relative;
}
#colors h2 {
font: 19px Arial,sans-serif;
margin: 0;
padding-left: 5px;
}
#colors p {
font: 16px Arial,sans-serif;
margin:10px 0 10px 5px;
}
#colors a {
text-decoration: none;
color:#525252;
font:16px Arial,sans-serif;
display: block;
width:99px;
height: 26px;
background-image: url(../img/http://storage4.static.itmages.ru/i/15/0709/h_1436442345_8823137_665ad35514.png);
background-repeat: no-repeat;
cursor:pointer;
padding:4px 10px;
margin:7px;
}
#yellow p{
margin-left: 10px;
}
.clean{
clear:both;
}
#imgblue{
width:50px;
height: 47px;
background-image: url(http://storage2.static.itmages.ru/i/15/0709/h_1436442345_9880128_56afdc697e.png);
position: absolute;
right:5px;
top:4px;
}
#imgyellow{
width:45px;
height: 47px;
background-image: url(http://storage3.static.itmages.ru/i/15/0709/h_1436442346_4571675_6d5dfff874.png);
position: absolute;
right:5px;
top:4px;
}
#imggreen{
width:52px;
height: 44px;
background-image: url(http://storage3.static.itmages.ru/i/15/0709/h_1436442346_1775749_0112d5d189.png);
position: absolute;
right:0;
top:0;
}
#blueangle{
width:31px;
height:57px;
background-image: url(http://storage4.static.itmages.ru/i/15/0709/h_1436442345_9648274_97cca1c8f6.png);
position:absolute;
left:0;
top:48px;
}
#yellowangle{
width:26px;
height:54px;
background-image: url(http://storage4.static.itmages.ru/i/15/0709/h_1436442348_7939743_bc8f691a9e.png);
position:absolute;
left:0;
top:51px;
}
/*Конец цветного блока*/
/*Начало блока черно-белый*/
#blackAndWhite {
margin-top: 10px;
height: 225px;
background-image: url(http://storage4.static.itmages.ru/i/15/0709/h_1436442345_5280153_2f5f9e19ea.png);
background-repeat: repeat-y;
position: relative;
padding: 17px 55px 30px 55px;
}
#bLeft, #bRight {
position: absolute;
width: 40px;
height: 101px;
}
#bLeft {
background-image: url(http://storage3.static.itmages.ru/i/15/0709/h_1436442346_6586452_46962523de.png);
background-repeat: no-repeat;
bottom: 0;
left: 0;
position: absolute;
}
#bRight {
background-image: url(http://storage2.static.itmages.ru/i/15/0709/h_1436442347_8162489_86d4fa2ee7.png);
background-repeat: no-repeat;
bottom: 0;
right: 0;
position: absolute;
}
#bbottom {
background-image: url(http://storage1.static.itmages.ru/i/15/0709/h_1436442345_5321744_671db2329e.png);
background-repeat: repeat-x;
bottom: 0;
right: 35px;
height: 1px;
width:956px;
position: absolute;
}
#bcontent{
outline: 0px solid #cccccc;
width:620px;
float: left;
}
#bForm{
height: 225px;
outline: 0px solid #cccccc;
width: 260px;
float: left;
margin-left: 19px;
}
#bcontent h2{
font:24px Arial,sans-serif;
color:#000000;
margin-bottom: 0px;
margin-top: 0;
padding-top: 0;
}
#bcontent p.strong{
color:#1d1e1b;
font:bold 16px Arial,sans-serif;
margin-bottom: 8px;
}
#bcontent p{
color:#7b7b78;
font:16px Arial,sans-serif;
margin-bottom: 8px;
}
#bcontent a {
text-decoration: none;
color:#b6b7b6;
font:16px Arial,sans-serif;
display: block;
width:99px;
height: 23px;
background-image: url(http://storage1.static.itmages.ru/i/15/0709/h_1436442345_5704092_e167979185.png);
background-repeat: no-repeat;
cursor:pointer;
padding:4px 10px;
}
#bForm input {
width: 250px;
height: 31px;
border: 1px solid #dedede;
margin-bottom: 11px;
color:#bababa;
font:16px Arial;
padding-left: 10px;
}
#bForm input.button{
width: 99px;
height: 26px;
border:none;
padding: 20px 0 0 0;
}
#bForm h2{
font:24px Arial,sans-serif;
color:#000000;
margin-bottom: 8px;
margin-top: 0;
padding-top: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/style1.css" rel="stylesheet">
<title>First</title>
</head>
<body>
<div id="wrapper">
<div id="toplines"></div>
<div id="header">
<div id="logo"><a href="index.html"></a></div>
<div id="faq"><a href="http://www.google.com"></a></div>
<ul id="nav">
<li><a href="index.html" class="active">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="services.html">SERVICES</a></li>
<li><a href="partners.html">PARTNERS</a></li>
<li><a href="solutions.html">SOLUTIONS</a></li>
</ul>
</div>
<div id="people">
<div id="peopleImg"></div>
<div id="slogan">
<h1>Fusce a sapien ac justo</h1>
<p>Phasellus at elit velit, ac</p></div>
<div id="forline"></div>
</div>
<div id="colors">
<div id="blue">
<h2>Dedicated 24/7 Support</h2>
<p>Pellentesque tellus tortor, lobortis <br> eget venenatis non, aliquet a massa. Mauris aliquam ultrices lectus, quis </p>
<a>Read more</a>
<div id="imgblue"></div>
</div>
<div id="yellow">
<h2>Quality Assured Services</h2>
<p>Mauris euismod enim aliquet orci<br> cursus aliquet. Nam lectus magna,<br> varius nec aliquet in, pharetra eu felis. </p>
<a href="readmore.html">Read more</a>
<div id="imgyellow"></div>
<div id="blueangle"></div>
</div>
<div id="green">
<h2>Our Focus</h2>
<p >Etiam ut ligula orci. Praesent male- suada leo eu magna ultricies male- suada. Cras et velit a mi bibendum</p>
<a href="readmore.html">Read more</a>
<div id="imggreen"></div>
<div id="yellowangle"></div>
</div>
<div class="clean"></div>
</div>
<div id="blackAndWhite">
<div id="bcontent">
<h2>Welcome to our site!</h2>
<p class="strong">Sed a sollicitudin risus. Proin neque velit, rutrum et semper et, dignissim feu- giat lacus. Donec ornare porta dictum. Quisque ornare, libero ac viver</p>
<p>Magna blandit magna, quis sollicitudin sapien tortor et ante. Nam ante ipsum,<br> cursus ullamcorper volutpat ornare, volutpat ac arcu. Phasellus suscipit, leo sit amet scelerisque porta, neque enim malesuada neque, non bibendum magna mauris ullamcorper mauris. Curabitur enim felis, molestie fermentum ornare id, pellen- <br>tesque et massa. Nullam vestibulum mi non urna semper vestibulum. Vestibulum </p>
<a href="readmore.html">Read more</a>
</div>
<div id="bForm">
<h2>Request a Quote</h2>
<form name="form1" action="action.php">
<input type="text" name="fName" value="First Name">
<input type="text" name="sName" value="Last Name">
<input type="text" name="email" value="Email Address">
<input class="button" type="image" src="img/send.png" alt="send">
</form>
</div>
<div class="clean"></div>
<div id="bLeft"></div>
<div id="bRight"></div>
<div id="bbottom"></div>
</div>
</div>
</body>
</html>