Это у меня:
(Здесь зум 67%)
<header class="header">
<div class="container">
<div class="header__inner">
<div class="header__logo">MoGo</div>
<nav class="nav">
<a class="nav__link" href="#">About</a>
<a class="nav__link" href="#">Service</a>
<a class="nav__link" href="#">Blog</a>
<a class="nav__link" href="#">Work</a>
<a class="nav__link" href="#">Contact</a>
</nav>
</div>
</div>
</header>
<div class="intro">
<div class="container">
<div class="intro__inner">
<h2 class="intro__suptitle">Creative Template</h2>
<h1 class="intro__title">Welcome to Mogo</h1>
<a href="#" class="btn">Learn More</a>
</div>
<div class="slider">
<div class="container">
<div class="slider__inner">
<div class="slider__item active">
<span class="slider__num">01</span>Intro</div>
<div class="slider__item">
<span class="slider__num">02</span>Work</div>
<div class="slider__item">
<span class="slider__num">03</span>About</div>
<div class="slider__item">
<span class="slider__num">04</span>Contacts
</div>
</div>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="section__header">
<h3 class="section__suptitle">What we do</h3>
<h2 class="section__title">Story about us</h2>
<div class="section__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
body{
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
}
.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.intro{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url("../img/intro.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.intro__inner{
width: 100%;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.intro__title{
color: #fff;
font-size: 150px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
line-height: 1;
}
.intro__title:after{
content: "";
display: block;
width: 60px;
height: 3px;
margin: 60px auto;
background: #fff;
}
.intro__suptitle{
margin-bottom: 30px;
font-size: 72px;
color: #fff;
font-family: 'Kaushan Script', cursive;
text-align: center;
}
.header{
width: 100%;
padding-top: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header__logo{
font-size: 30px;
font-weight: 700;
color: #fff;
}
.header__inner{
display: flex;
justify-content: space-between;
align-items: center;
}
.nav{
font-size: 14px;
text-transform: uppercase;
}
.nav__link{
display: inline-block;
vertical-align: top;
margin: 0 10px;
color: #fff;
position: relative;
text-decoration: none;
transition: color .2s linear;
}
.nav__link:after{
content: "";
display: block;
width: 100%;
height: 3px;
opacity: 0;
background-color: #fce38a;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
transition: opacity .1s linear;
}
.nav__link:hover{
color: #fce38a;
}
.nav__link:hover:after{
opacity: 1;
}
/* button */
.btn{
display: inline-block;
vertical-align: top;
padding: 10px 15px;
border: 3px solid #fff;
font-size: 14px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
text-decoration: none;
transition: background .1s linear, color .1s linear;
}
.btn:hover{
background: #fff;
color: #333;
}
/*Slider*/
.slider{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.slider__inner{
display: flex;
justify-content: space-between;
}
.slider__item{
width: 23%;
padding: 20px 20px;
position: relative;
border-top: 3px solid #fff;
font-size: 18px;
opacity: .7;
color: #fff;
text-transform: uppercase;
padding-right: 20px;
margin-right: 25px;
}
.slider__item.active{
opacity: 1;
}
.slider__item.active:before{
content: "";
display: block;
width: 70px;
height: 3px;
background-color: #f38181;
position: absolute;
top: -3px;
left: 0;
z-index: 1;
}
.slider__num{
font-size: 24px;
font-weight: 700;
}
.section{
padding: 80px 0;
}
.section__header{
margin-bottom: 40px;
}
Простой
