<!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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<div class="header__top">
<a href="#" class="logo"><img class="logo__img" src="images/logo.svg" alt=""></a>
<div class="header__phone"><span>Заказ туров и бронирование:</span>
<a class="header__phone-number" href="tel:80508543543">тел. 8-050-8-543-543</a>
</div>
<nav class="menu">
<button class="menu__btn">
<span class="row"></span>
</button>
<ul class="menu__list">
<li class="menu__item"><a class="menu__link" href="#">Бронирование</a></li>
<li class="menu__item"><a class="menu__link" href="#">Экскурсии</a></li>
<li class="menu__item"><a class="menu__link" href="#">Туры</a></li>
<li class="menu__item"><a class="menu__link" href="#">Об Африке</a></li>
<li class="menu__item"><a class="menu__link" href="#">О нас</a></li>
</ul>
</nav>
</div>
<h1 class="header__title">Сафари по Африке</h1>
<div class="header_content">
<p class="header__desc">Туры по самомым экзотическим местам
Поехали с нами за новыми впечатлениями!</p>
<a class="header__btn" href="">Оставить заявку</a>
<a class="header__arrow" href=""><img src="images/arrow.svg" alt=""></a>
</div>
</div>
</div>
</header>
*,
*::before,
*::after{
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 140%;
color: #1f1e1e;
}
a{
text-decoration: none;
color: inherit;
}
.container{
max-width: 1140px;
margin: 0 auto;
padding: 0 10px;
}
.title{
text-align: center;
font-weight: 500;
font-size: 36px;
line-height: 130%;
}
.header__title{
font-family: 'PT Serif', serif;
}
.header{
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position:center;
background-size: cover;
}
.header__inner{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
.header__top{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
padding: 16px 0 49px;
}
.header__phone{
font-size: 16px;
line-height: 20.8px;
color: #fff;
font-weight: 700;
}
.header__phone-number{
font-weight: 400;
margin-left: 19px;
padding: 12px 31px 13px;
background-color: #886239;
border-radius: 22px;
}
.menu{
width: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-top: 15px;
padding: 27px 0 24px;
}
.menu__list{
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 16px;
color: #fff;
}
.header__title{
font-family: 'PT Serif', serif;
font-weight: 700;
font-size: 90px;
line-height: 130%;
text-align: center;
margin-bottom: auto;
/*mb чтобы максимально вверх*/
}
.header__desc{
font-weight: 700;
font-size: 20px;
max-width: 420px;
margin-bottom: 20px;
}
.header__btn{
display: inline-block;
font-size: 18px;
color: #fff;
padding: 19px 55px 20px;
background-color: #886239;
border-radius: 30px;
margin-bottom: 20px;
}
.header__arrow{
display: table;
margin: 0 auto;
margin-bottom: 15px;
}
@media(max-width:560px){
.header__title{
font-size: 50px;
}
.menu__btn{
display:inline-block;
width: 40px;
height: 30px;
border: none;
padding: 0;
background-color: transparent;
position: absolute;
right: 10px;
top: 107px;
}
.menu__btn::after,
.menu__btn::before{
content: '';
position: absolute;
width: 100%;
left: 0;
height: 2px;
background-color: #fff;
}
.menu__btn::before{
top: 0;
}
.menu__btn::after{
bottom: 0;
}
.menu__btn span{
display: block;
height: 2px;
background-color: #fff;
}
.menu__list{
transform: translateY(-200%);
display: block;
background-color: #886239;
padding: 10px 0;
}
.menu__link{
padding: 10px;
display: block;
text-align: center;
}
.logo{
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.header__phone-number{
/* justify-content: center; */
margin-left: 0;
}
.menu{
border: none;
}
}
$(function(){
$('.menu__btn').on('click',function(){
$('.menu__list').toggleClass('.menu__list--active');
});
});
Почему не добавляется класс к .menu__list?
