серый цвет для последней секции (super easy to customize)
<section class="overview">
<div class="container">
<div class="list">
<h3>product overview</h3>
<h1>List of amazing features</h1>
<div class="list_item">
<div class="img_wrap">
<img src="img/logo_monitor.png" alt="monitor">
</div>
<h2>Responsive</h2>
<p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
<div class="list_item">
<div class="img_wrap">
<img src="img/logo_settings.png" alt="monitor">
</div>
<h2>Customizable</h2>
<p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
<div class="list_item">
<div class="img_wrap">
<img src="img/logo_like.png" alt="monitor">
</div>
<h2>Lovely design</h2>
<p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
<div class="list_item">
<div class="img_wrap">
<img src="img/logo_phone.png" alt="monitor">
</div>
<h2>Mobile Friendly</h2>
<p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
</div>
</div>
<hr>
<div class="details">
<div class="container">
<div class="details_left">
</div>
<div class="details_right">
<h3>dip into the details</h3>
<h1>Beautiful on every device</h1>
<p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.</p>
<span class="first_item">Awesome design</span>
<span class="second_item">Fully responsive</span>
<span class="third_item">Retina ready</span>
<span class="fourth_item">Tons of features and easy to use</span>
</div>
</div>
</div>
<div class="clear_left"></div>
<div class="grey">
<div class="container">
<div class="grey_left">
<h3>dip into the details</h3>
<h1>Super easy to customize</h1>
<p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="grey_right"></div>
</div>
</div>
</section>
.list {
text-align: center;
padding-top: 65px;
padding-bottom: 100px;
}
.list h3 {
text-transform: uppercase;
font-family: "SourceSansProBold", sans-serif;
font-size: 14px;
color: #008ed6;
letter-spacing: 1px;
}
.list h1 {
font-family: "SourceSansProSemiBold", sans-serif;
font-size: 36px;
margin-top: 20px;
position: relative;
}
.list h1::after {
content: '';
position: absolute;
background: url(../img/bottom_line.png) no-repeat;
height: 4px;
width: 4%;
display: block;
bottom: -40px;
left: 48.5%;
}
.list_item {
width: 230px;
margin-top: 73px;
display: inline-block;
padding: 0 20px;
}
.list_item h2 {
font-family: "SourceSansProRegular", sans-serif;
font-size: 24px;
margin-top: 33px;
}
.list_item p {
font-family: "SourceSansProRegular", sans-serif;
font-size: 18px;
color: #999999;
padding-top: 17px;
}
.img_wrap {
height: 90px;
width: 90px;
border: 1px solid #e4e4e4;
border-radius: 50%;
margin: 0 auto;
}
.img_wrap img{
margin-top: 31px;
}
.overview hr {
color: #ededed;
size: 1px;
}
.details {
padding-top: 65px;
padding-bottom: 75px;
}
.details_left {
width: 40%;
height: 600px;
float: left;
background: url(../img/iphones_bg.png) no-repeat;
background-size: 420px;
}
.details_right {
float: right;
width: 60%;
padding-top: 45px;
}
.details_right h3 {
padding-left: 110px;
font-size: 14px;
text-transform: uppercase;
font-family: "SourceSansProBold", sans-serif;
color: #008ed6;
padding-bottom: 15px;
}
.details_right h1 {
padding-left: 110px;
font-size: 36px;
font-family: "SourceSansProSemiBold", sans-serif;
position: relative;
margin-bottom: 68px;
}
.details_right h1::after {
content: '';
position: absolute;
background: url(../img/bottom_line.png) no-repeat;
height: 4px;
width: 6%;
display: block;
bottom: -23px;
}
.details_right p {
padding-left: 110px;
letter-spacing: 1px;
font-size: 18px;
color: #b4b4b4;
padding-bottom: 40px;
}
.details_right span {
padding-left: 135px;
display: block;
font-size: 18px;
font-family: "SourceSansProRegular", sans-serif;
position: relative;
}
span.first_item::before,
span.second_item::before,
span.third_item::before,
span.fourth_item::before {
content: '';
position: absolute;
width: 10px;
height: 17px;
top: 5px;
left: 110px;
}
span.first_item::before {
width: 20px;
background: url("../img/logo_cup.png") no-repeat;
}
span.second_item::before {
background: url("../img/logo_mouse.png") no-repeat;
left: 113px;
}
span.third_item::before {
background: url("../img/logo_energy.png") no-repeat;
left: 113px;
}
span.fourth_item::before {
width: 20px;
background: url("../img/logo_speedometr.png") no-repeat;
}
.grey {
background: #f2f2f2;
}
.grey_left {
float: left;
width: 35%;
padding-top: 130px;
}
.grey_right {
float: right;
width: 65%;
height: 600px;
background: url(../img/iphone_bg.png) no-repeat;
background-position: 130px 95px;
}
.grey_left h3 {
font-size: 14px;
text-transform: uppercase;
font-family: "SourceSansProBold", sans-serif;
color: #008ed6;
padding-bottom: 15px;
}
.grey_left h1 {
font-size: 36px;
font-family: "SourceSansProSemiBold", sans-serif;
position: relative;
margin-bottom: 60px;
}
.grey_left h1::after {
content: '';
position: absolute;
background: url(../img/bottom_line.png) no-repeat;
height: 4px;
width: 8%;
display: block;
bottom: -28px;
}
.grey_left p {
letter-spacing: 1px;
font-size: 18px;
color: #b4b4b4;
padding-bottom: 165px;
}