<header class="main_menu">
<div class="top_line">
<div class="center">
<a href="index.html" class="logo">FitnessTime</a>
<div class="right_side">
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">OUR TEAM</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">partners</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="slider">
<ul>
<li>
<img src="img/slide_1.jpg" alt="слайд 1">
<div class="center">
<div class="slider_text">
<a href="#" class="example">landing page template</a>
<p>PERFECT Fitness SOLUTION</p>
<ins>best choise for your site</ins>
</div>
</div>
</li>
<li>
<img src="img/slide_2.jpg" alt="слайд 2">
<div class="center">
<div class="slider_text">
<a href="#" class="example">landing page template</a>
<p>PERFECT Fitness SOLUTION</p>
<ins>best choise for your site</ins>
</div>
</div>
</li>
</ul>
<button class="prev"></button>
<button class="next"></button>
</section>
<section class="type_services">
<div class="center">
<ul class="service">
<li>
<div class="ico"><img src="img/ico1.png" alt=""></div>
<span>strength training</span>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<p>Maecenas mattis vitae tellus vel interdum. Quisque lacinia mauris id convallis pretium. Aliquam id odio sit amet mauris porttitor iaculis a eu dui. </p>
</li>
<li>
<div class="ico"><img src="img/ico2.png" alt=""></div>
<span>strength training</span>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<p>Maecenas mattis vitae tellus vel interdum. Quisque lacinia mauris id convallis pretium. Aliquam id odio sit amet mauris porttitor iaculis a eu dui. </p>
</li>
<li>
<div class="ico"><img src="img/ico3.png" alt=""></div>
<span>strength training</span>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<p>Maecenas mattis vitae tellus vel interdum. Quisque lacinia mauris id convallis pretium. Aliquam id odio sit amet mauris porttitor iaculis a eu dui. </p>
</li>
</ul>
</div>
</section>.center{
max-width: 1180px;
min-width: 320px;
margin: 0 auto;
padding: 0 5px;
}
.main_menu .top_line{
background: #202020;
padding: 38px 0px;
}
.main_menu .top_line a.logo{
display: inline-block;
vertical-align: top;
color: #fefefe;
font-size: 24px;
font-family: 'raleway-extrabold';
text-decoration: none;
}
.main_menu .top_line .right_side{
float: right;
margin-top: 6px;
}
.main_menu .top_line .right_side nav ul li{
display: inline-block;
vertical-align: top;
margin-left: 7px;
}
.main_menu .top_line .right_side nav ul li a{
font-family: 'oswald-regular';
font-size: 15px;
color: #fefefe;
text-transform: uppercase;
text-decoration: none;
padding: 6px 14px;
}
.main_menu .top_line .right_side nav ul li a.active{
background: #e25050;
}
.slider ul li{
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition: .4s;
}
.slider ul li.active{
opacity: 1;
}
.slider ul li img{
width: 100%;
}
.slider .center{
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
right: 0;
}
.slider .center .slider_text{
position: absolute;
margin-top: 87px;
left: 0;
margin-left: 11px;
width: 370px;
height: 150px;
}
.slider .center .slider_text a{
background: #d34f4e;
display: inline-block;
padding: 11px 17px 11px 13px;
color: #fefefe;
font-size: 12px;
text-transform: uppercase;
font-family: 'oswald';
word-spacing: 2px;
text-decoration: none;
opacity: 0.9;
}
.slider .center .slider_text p{
font-size: 30px;
color: #fefefe;
background: #252423;
opacity: 0.9;
font-family: 'oswald-bold';
text-transform: uppercase;
padding: 20px 21px 17px 22px;
word-spacing: 1px;
margin-top: 1px;
}
.slider .center .slider_text ins{
font-size: 18px;
color: #fefefe;
font-family: 'oswald';
background: #272625;
opacity: 0.9;
text-transform: uppercase;
padding: 15px 25px 12px 24px;
margin-top: 1px;
word-spacing: 4px;
}
.slider button{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #202020;
position: absolute;
margin-top: 10%;
border: 0;
display: block;
transition: .2s;
}
.slider button.prev{
left: 0;
background: url('../img/prev.png')no-repeat center #202020;
}
.slider button.next{
right: 0;
background: url('../img/next.png') no-repeat center #202020;
}
.slider button:hover{
background-color: #d34f4e;
opacity: 0.9;
}
.type_services .center ul li{
width: 346px;
display: inline-block;
vertical-align: top;
text-align: center;
}