Оцените верстку

Всем привет. Моя первая верстка, закадайте меня помидорами, я буду только рад.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts.css">
<title>Webpaint</title>
</head>
<body>
<div class="container">
<header>
<div class="center">
<img class="logo" src="img/logo.png" height="33" width="107" alt="Logo">
<nav>
<ul class="header-menu">
<li class="active">Home</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="descr cf">
<div class="center">
<h1>We are <span>Webpaint</span></h1>
<p>digital & branding agency based in Jupiter and we would love to turn ideas into beautiful things.</p>
<button class="btn">See Portfolio</button>
</div>
</section>
<section class="features cf">
<div class="center">
<div class="features-item">
<figure>
<img src="img/android.png" height="54" width="47" alt="Android">
<figcaption>Consectetur</figcaption>
</figure>
<p>Vestibulum id ligula porta euismod<br> semper. Aenean lacinia bibendum<br> nulla sed consectetur dui.</p>
</div>
<div class="features-item">
<figure>
<img src="img/mac.png" height="59" width="62" alt="iMac">
<figcaption>Tristiquet</figcaption>
</figure>
<p>Fusce dapibus, cursus commodo,<br> tortor mauris condimentum nibh, ut<br> fermentum massa justo risus.</p>
</div>
<div class="features-item">
<figure>
<img src="img/camera.png" height="56" width="60" alt="Camera">
<figcaption>Fermentum</figcaption>
</figure>
<p>Aenean eu leo quam. Pellentesque<br> ornare sem lacinia quam venenatis<br> vestibulum sagittis lacus mollis.</p>
</div>
<div class="features-item">
<figure>
<img src="img/time.png" height="65" width="55" alt="Stop Watch">
<figcaption>Elit Ultricies</figcaption>
</figure>
<p>Maecenas sed diam eget risus varius<br> blandit sit amet non magna. Vivamus<br> sagittis lacus vel augue laoreet.</p>
</div>
</div>
</section>
<section class="works cf">
<div class="center">
<h3>Our Featured Works</h3>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
<div class="buttons">
<button class="active-btn">All</button>
<button>Graphic</button>
<button>Illustration</button>
<button>Motion</button>
</div>
<p class="thumb">
<img src="img/work-1.jpg" height="220" width="270" alt="">
<img src="img/work-2.jpg" height="220" width="270" alt="">
<img src="img/work-3.jpg" height="220" width="270" alt="">
<img src="img/work-4.jpg" height="220" width="270" alt="">
<img src="img/work-5.jpg" height="220" width="270" alt="">
<img src="img/work-6.jpg" height="220" width="270" alt="">
<img src="img/work-7.jpg" height="220" width="270" alt="">
<img src="img/work-8.jpg" height="220" width="270" alt="">
<img src="img/work-9.jpg" height="220" width="270" alt="">
<img src="img/work-10.jpg" height="220" width="270" alt="">
<img src="img/work-11.jpg" height="220" width="270" alt="">
<img src="img/work-12.jpg" height="220" width="270" alt="">
</p>
</div>
</section>
<section class="contacts cf">
<div class="center">
<h4>Get in Touch</h4>
<p>Vestibulum id ligula porta felis euismod semper,malesuada euismod.</p>
<div class="align-center">
<img src="img/map.png" height="13" width="9" alt="Map">
<span>Moonshine Street No: 14/05 Light City, Jupiter</span>
<img src="img/phone.png" height="11" width="10" alt="Phone">
<span>0247 541 65 87</span>
</div>
<div class="social">
<i class="sprite sprite-dribble"></i>
<i class="sprite sprite-fb"></i>
<i class="sprite sprite-pinterest"></i>
<i class="sprite sprite-rss"></i>
<i class="sprite sprite-tw"></i>
</div>
</div>
<footer><span>@ 2013 Webpaint. All Rights Reserved.</span></footer>
</section>
</div>
</body>
</html>
body {
width: 100%;
font: 14px/24px 'latoregular', Arial, sans-serif;
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after { clear: both; }
.center {
margin: 0 auto;
width: 1110px;
}
header {
width: 100%;
height: 100px;
background-color: #262626;
}
.logo {
position: absolute;
top: 37px;
left: 243px;
}
.header-menu {
float: right;
position: absolute;
right: 87px;
}
.header-menu li {
float: left;
padding-top: 30px;
padding-right: 50px;
list-style: none;
font: bold 13px 'latoblack';
}
.header-menu li:last-child {
padding-right: 0;
}
.header-menu .active {
color: #ff6760;
text-transform: uppercase;
}
.header-menu li a {
text-decoration: none;
text-transform: uppercase;
color: #d9d9d9;
}
.header-menu li a:hover {
text-decoration: underline;
}
.descr {
background-color: #2A2A2A;
color: #d9d9d9;
}
.descr h1 {
padding-top: 20px;
text-align: center;
font: 60px/50px 'latolight';
}
.descr h1 span {
font: bold 60px/50px 'latoblack';
color: #d9d9d9;
}
.descr p {
text-align: center;
font: 44px 'latolight_italic';
margin-top: -13px;
}
.btn {
position: relative;
right: -537px;
padding: 18px 46px;
margin-bottom: 60px;
border: none;
background-color: #ff6760;
color: #fff;
font: 14px 'latoblack';
text-transform: uppercase;
-webkit-border-radius: 7px;
border-radius: 9px;
}
.features {
padding-bottom: 90px;
background-color: #f8f8f8;
}
.features-item {
float: left;
text-align: center;
width: 22.5%;
padding-top: 77px;
margin-right: 1.25%;
margin-left: 1.25%;
color: #616161;
}
.features-item h2 { font: bold 18px/60px 'latoblack'; }
.features-item p { font: 14px/24px 'latoregular'; }
.works { background-color: #fff; }
.works h3 {
margin-bottom: 25px;
font: bold 30px/60px 'latoblack';
text-align: center;
color: #616161;
}
.works p {
text-align: center;
margin-bottom: 55px;
font: 20px 'latolight';
color: #616161;
}
.buttons { text-align: center; }
.buttons button {
margin-right: 10px;
border: none;
padding: 12px 20px;
margin-bottom: 25px;
color: #fff;
font: 12px 'latoblack';
text-transform: uppercase;
background-color: #ff6760;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.buttons .active-btn {
background-color: #595959;
}
.thumb { margin-bottom: 80px; }
.contacts { background-color: #313131; }
.contacts p { text-align: center; }
.contacts h4 {
text-align: center;
margin-bottom: 20px;
color: #e0e0e0;
font: bold 30px/60px 'latoblack';
}
.contacts p {
color: #bebebe;
font: 20px 'latolight';
}
.align-center {
text-align: center;
margin-bottom: 25px;
}
.align-center span {
font: 14px/24px 'latoregular';
color: #bebebe;
}
.sprite {
background: url(../img/sprite.png) no-repeat;
display: inline-block;
}
.sprite-dribble {
width: 30px;
height: 30px;
background-position: -5px -5px;
}
.sprite-fb {
width: 30px;
height: 30px;
background-position: -45px -5px;
}
.sprite-pinterest {
width: 30px;
height: 30px;
background-position: -85px -5px;
}
.sprite-rss {
width: 30px;
height: 30px;
background-position: -125px -5px;
}
.sprite-tw {
width: 30px;
height: 30px;
background-position: -165px -5px;
}
.social {
text-align: center;
margin-bottom: 60px;
}
footer {
text-align: center;
background-color: #2C2C2C;
line-height: 80px;
}
footer span {
font: 14px/24px 'latoregular';
color: #bebebe;
}
06 февраля 2016 в 23:53
Ближайшие курсы
Онлайн интенсив "Основы управления продуктом"
Онлайн интенсив "Основы управления продуктом"
27
февраля
Интенсив Инструменты управления проектами
Интенсив Инструменты управления проектами
27
февраля
Как стать фрилансером?
Онлайн-курс
27
февраля
Новые статьи

Как защитить Windows: системный подход
12600

«После Scratch поняла, что не хочу бросать программирование»
51200

Что такое MVP и зачем его делать
43700