<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAN</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<a class="logo">
<img src="#" alt="AvtoLtava Logo">
</a>
<button class="burger" aria-label="Open menu">
<span class="burger-line"></span>
<span class="burger-line"></span>
<span class="burger-line"></span>
</button>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-content">
<span class="hero-subtitle"></span>
<h1 class="hero-title">
Твій новий автомобіль
чекає на тебе!
</h1>
<img src="#" alt="Carr">
<p class="hero-descr">
Тисни, щоб обрати свою мрію.
</p>
<button class="burger" aria-label="Open catalog"></button>
</div>
</div>
</section>
<section class="partners">
<div class="container">
<a class="partners">
<img src="#" alt="Kia Logo">
<img src="#" alt="Renault Logo">
<img src="#" alt="Lada Logo">
<img src="#" alt="Skoda Logo">
</a>
</div>
</section>
<section class="services">
<div class="container">
<h4 class="site-title">
На цьому сайті ти зможеш:
</h4>
<h1 class="second site-title">
Швидко. Легко. Зручно.
Придбати свій автомобіль
</h1>
<p class="third site-title">
Вибери свою мрію в каталозі та натисни придбати
</p>
<img src="#" alt="Form Logo">
</div>
</section>
<section class="catalog"></section>
<div class="container">
<h1 class="catalog">
Каталог
</h1>
<section class="Kia Ria">
<img src="#" alt="Kia Logo">
<h2 class="Kia Ria 2021">
Kia Rio 2021
</h2>
<h3 class="Price Kia Rio 2021">
426 685 — 502 605
грн.
</h3>
<img src="#" alt="Kia img">
</section>
<section class="Kia Ria X">
<img src="#" alt="Kia Logo">
<h2 class="Kia Ria X 2021">
Kia Rio X 2021
</h2>
<h3 class="Price Kia Rio X 2021">
467 200 — 542 390
грн.
</h3>
<img src="#" alt="Kia X img">
</section>
<section class="Renual">
<img src="#" alt="Renaul Logo">
<h2 class="Renaul Arkana">
Renauly Arkana
</h2>
<h3 class="Price Renauly Arkana">
від 437 900 грн.
</h3>
<img src="#" alt="Renual img">
</section>
<section class="Lada">
<img src="#" alt="Lada Logo">
<h2 class="Lada Vesta">
Lada Vesta
</h2>
<h3 class="Price Lada">
від 307 280 грн.
</h3>
<img src="#" alt="Lada img">
</section>
<section class="Skoda">
<img src="#" alt="Skoda Logo">
<h2 class="Skoda Kodiaq">
Skoda Kodiaq
</h2>
<h3 class="Price Skoda">
від 834 180 грн.
</h3>
<img src="#" alt="Skoda img">
</section>
</div>
<section class="Rob">
<div class="container">
<h2 class="Rob">
Обирай прямо зараз!
</h2>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-top">
<div class="footer-contacts-item">
<span class="footer-contacts-item">Телефон:</span>
<a href="tel:+380662387854" class="footer-contacts-value">+380 66 238 78 54</a>
</div>
<div class="footer-contacts-item">
<span class="footer-contacts-item">Адреса:</span>
<address class="footer-contacts-value">вул. Іфана Франка 49</address>
</div>
</div>
</div>
</footer>
<footer-bottom>
<div class="container">
<a class="log">
<img src="#" alt="AvtoLtava Logo">
</a>
</div>
</footer-bottom>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
@font-face {
font-family: '';
src: url();
}
body {
font-family: '', sans-serif;
font-weight: 400;
margin: 0;
}
img {
max-width: 100%;
}
.list-reset {
margin: 0;
padding: 0;
list-style-type: none;
}
.btn-reset{
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
}
.container {
width: 1238px;
padding: 0 15px;
margin: 0 auto;
}
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.hero {
background-image: url("../img/hero-bg.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Простой
Средний
