<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&family=Roboto+Condensed&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<a href="#" class="logo">
<img class="logo__link" src="images/logo.svg" alt="logo">
</a>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item"><a class="menu__list-link" href="#">О НАС</a></< /li>>
<li class="menu__item"><a class="menu__list-link" href="#">АВТОПАРК</a></< /li>>
<li class="menu__item"><a class="menu__list-link" href="#">ОТЗЫВЫ</a></< /li>>
<li class="menu__item"><a class="menu__list-link" href="#">УСЛОВИЯ</a></< /li>>
<li class="menu__item"><a class="menu__list-link" href="#">КОНТАКТЫ</a></< /li>>
</ul>
</nav>
<a class="phone" href="tel:+380999999090">+38 (099) 999 90 90</a>
</div>
</header>
<section class="top">
<div class="container">
<div class="top__heading">
<div class="top__content">
<h1 class="top__title">
Каршеринг в Киеве
LUX автомобили
</h1>
<p class="top__text">
Закажи эксклюзивный автомобиль через мобильное приложение в любой точке города
</p>
<a class="application-btn" href="#">Скачать приложение</a>
</div>
<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
</div>
</div>
<div class="top__bottom">
<div class="top__items">
<div class="top__item">
<img class="top__item-img" src="" alt="images/icon-1.svg">
<p class="top__item-text">
Более 300 автомобилей в вашем распоряжении
</p>
</div>
<div class="top__item">
<img class="top__item-img" src="" alt="images/icon-2.svg">
<p class="top__item-text">
Дешевле такси и собственного автомобиля
</p>
</div>
<div class="top__item">
<img class="top__item-img" src="" alt="images/icon-3.svg">
<p class="top__item-text">
Лучшие автомобили в любой точке города
</p>
</div>
</div>
<div class="top__links">
<a class="top__link" href="#">Условия аренды автомобиля</a>
<a class="top__link" href="#">Публичный договор</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="libs/slick.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
$(function(){
$('.top__slider').slick({
arrows: false,
dots: true,
});
});
html{
box-sizing: content-box;
}
*,
*::after,
*::before{
box-sizing: inherit;
}
a{
text-decoration: none;
}
.container{
max-width: 1220px;
padding: 0 10px;
margin: 0 auto;
}
body{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #1B1818;
}
.header{
background: #332208;
}
.header__inner{
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
}
.menu__list{
display: flex;
}
.menu__item{
margin: 0 15px;
}
.menu__list-link{
text-transform: uppercase;
color: #fefefe;
font-size: 18px;
line-height: 21px;
padding-bottom: 5px;
transition: all .5s;
border-bottom: 1px solid transparent;
}
.menu__list-link:hover{
border-bottom: 1px solid #FEFEFE;
}
.phone{
color: #fefefe;
font-size: 18px;
line-height: 21px;
}
.top__heading{
display: flex;
padding-top: 50px;
padding-bottom: 30px;
}
.top__content{
text-align: center;
padding-top: 90px;
width: 50%;
}
.top__title{
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
font-size: 48px;
line-height: 58px;
margin:0 auto 15px;
max-width: 455px;
}
.top__text{
font-size: 24px;
line-height: 28px;
margin:0 auto 60px;
max-width: 470px;
}
.application-btn{
text-transform: uppercase;
color: #fefefe;
background: #C5AC2D;
padding: 16px 19px 15px;
transition: all.5s;
border: 1px solid transparent;
}
.application-btn:hover{
color: #C5AC2D;
background: #fefefe;
border: 1px solid #C5AC2D;
}
.top__slider{
width: 50%;
}
.top__slider .slick-dots{
position: absolute;
right: 0;
top: 50%;
transform: tanslateY(-50%);
}
.slick-dots{
list-style: none;
text-align: center;
}
.slick-dots button{
font-size: 0;
width: 8px;
height: 8px;
background-color: #332208;
border: none;
border-radius: 50%;
padding: 0;
.slick-active button{
width: 16px;
height: 16px;
}
.top__slider-text{
padding-right: 100px;
text-align: right;
font-family: 'Fira Sans', sans-serif;
}
