<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Picture perfect</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:700|Roboto" rel="stylesheet">
</head>
<body>
<header id="header" class="header">
<dir class="main-header clearfix">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="navbar-brand">MoGo</div>
</div>
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<nav>
<ul class="menu d-flex justify-content-between clearfix">
<li class="menu_item">
<a href="#">
about
</a>
</li>
<li class="menu_item">
<a href="#">
service
</a>
</li>
<li class="menu_item">
<a href="#">
work
</a>
</li>
<li class="menu_item">
<a href="#">
blog
</a>
</li>
<li class="menu_item">
<a href="#">
contact
</a>
</li>
<li class="menu_item">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li class="menu_item">
<a href="#">
<i class="fa fa-search"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</dir>
</body>
</html>body {
font-family: 'Roboto', sans-serif;
color: #999999;
background: #ffffff;
}
ul, li {
display: block;
padding: 0;
margin: 0;
}
.navbar-brand {
font-family: Montserrat;
color: #ffffff;
font-size: 30px;
font-weight: 700;
text-align: left;
padding-top: 0px;
padding-bottom: 0px;
}
.menu {
margin: 20px;
}
.menu_item {
font-family: 'Montserrat';
font-size: 14px;
font-weight: 400;
text-align: center;
}
.menu_item a {
color: #ffffff;
text-transform: uppercase;
}
.metu_item a:focus, a:hover {
color: #fce38a;
}
.header {
background: url(..//img/header_bg.png); no-repeat center top;
height: 500px;
background-attachment: relative;
background-position: center center;
}
Простой
Средний
Средний
