JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="ru" class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="ru" class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ru">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Заголовок</title>
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700,300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/media.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="libs/font-awesome-4.2.0/css/font-awesome.min.css" />
</head>
<body>
<div class="osnova">
<div class="header_top">
<div class="logo">
<h1>Название сайта</h1>
</div>
<div class="menu_top">
<ul>
<li><a href="#">Сервис</a></li>
<li><a href="#">История</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Журнал</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
<div class="billboard">
<h2>Заголовок блока</h2>
<p>Подзаголовок блока или его описание</p>
<div class="start">
<h3>ПОДРОБНЕЕ</h3>
</div>
</div>
<div class="services">
<div class="col-md-4">
<div class="s1">
<img src="img/service_icon_1.png">
<h4>Креативность</h4>
<p>Задача организации, в особенности же дальнейшее развитие различных форм деятельности требуют определения.</p>
</div>
</div>
<div class="col-md-4">
<div class="s2">
<img src="img/service_icon_2.png">
<h4>Оптимизация</h4>
<p>Повседневная практика...
CSS
body {
background:#999;
}
.osnova {
width:1500px;
margin:0 auto;
box-shadow: 0px 0px 8px -1px #000000;
background:#fff;
}
.header_top {
height:80px;
}
.logo {
padding:10px 0px 0px 150px;
float:left;
}
.logo h1 {
color:#444;
font:35px Comfortaa,sans-serif;
}
.menu_top {
float:right;
padding:35px 150px 0px 0px;
}
.menu_top li {
list-style:none;
display:inline-block;
}
.menu_top a {
color:#595959;
font:16px Comfortaa,sans-serif;
text-decoration:none;
margin-left:55px;
}
.menu_top a:hover {
border-bottom:1px solid #a0a0a0;
}
.billboard {
background:#057D9F;
height:652px;
}
.billboard h2 {
color:#fff;
font:50px Comfortaa,sans-serif;
padding-top:230px;
margin-bottom:0px;
text-align:center;
line-height:1em;
}
.billboard p {
color:#fff;
font:18px Comfortaa,sans-serif;
text-align:center;
}
.start {
background:url(../img/head_button.png);
width:290px;
height:49px;
margin:0 auto;
cursor:pointer;
}
.start h3 {
text-align:center;
color:#fff;
font:20px Comfortaa,sans-serif;
padding-top:12.5px;
}
.services {
width:1200px;
height:380px;
margin:0 auto;
border-bottom:1px solid lightgray;
}
.services img {
}
.s1 {
width:340px;
float:left;
margin-top:80px;
text-align:center;
}
.services h4 {
color:#222;
font:bold 22px Comfortaa,sans-serif;
}
.services p {
color:#666;
font:14px Comfortaa,sans-serif;
}
.s2 {
width:340px;
float:left;
margin-top:80px;
margin-left:20px;
text-align:center;
}
.s3 {
width:340px;
float:left;
margin-top:80px;
margin-left:40px;
text-align:center;
}
.chistka {
clear:both;
}
.video {
width:685px;
margin:0 auto;
}
.video h5 {
text-align:center;
font:bold 28px Comfortaa,sans-serif;
line-height:1em;
margin-bottom:15px;
margin-top:60px;
}
.video p {
color:#666;
font:18px Comfortaa,sans-serif;
text-align:center;
}
.video img {
margin-top:50px;
}
.recent {
width:1200px;
margin:0 auto;
}
.recent h5 {
color:#222;
font:bold 28px...