Почему при нажатии на кнопку все увеличилось?
0
При нажатии на кнопку само по себе появляется меню гамбургер,которое должно быть только в мобильной версии, когда на кнопку не нажимаешь все хорошо меню появляется только пр переходе на моб версию сайта?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="devedstyle.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap&subset=cyrillic-ext" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="wrapper">
<div class="header-body">
<a href="#" class="header-logo">
<img src="img/money.png" alt="">
</a>
<div class="header-burger">
<span></span>
</div>
<nav class="header-menu">
<ul class="header-list">
<li><a href="#" class="header-link">Ukfdyfz</a></li>
<li><a href="#" class="header-link">J yfc</a></li>
<li><a href="#" class="header-link">87470313100</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="wrapper">
<div class="main-ban">
<img src="tree.jpg" alt="">
<div class="maincont">
<h1>Курсы в Кызылорде</h1>
</div>
<button id="button">Записаться</button>
</div>
<div>
</div>
</div>
<div class="wrapper">
<div class="maintitle">
<h2>Все курсы</h2>
</div>
<div class="slider">
<div class="slideritem"><h3>Бухгалтерия 1 С Предприятие 8.3</h3><p >Цена: 35 000 тенге</p>
<img src="img/money.png" alt=""><br><small>Срок обучения: 1 месяц</small><br>
<button>Подробнее</button></div>
<div class="slideritem"><h3>Налоговый учет</h3><p>Цена: 35 000 тенге</p> <img src="img/tax.png" alt=""><br>
<small>Срок обучения: 1 месяц</small><br>
<button>Подробнее</button></div>
<div class="slideritem"><h3>Программирование</h3><p>Цена: 45 000 тенге</p> <img src="img/data (1).png" alt=""><br>
<small>Срок обучения: от 3 месяц</small><br>
<button>Подробнее</button></div>
<div class="slideritem"><h3>Веб-дизайн</h3><p>Цена: 45 000 тенге</p> <img src="img/ux.png" alt=""><br>
<small>Срок обучения: от 3 месяц</small><br>
<button>Подробнее</button></div>
<div class="slideritem"><h3>Компьютерная грамотность</h3><p>Цена: от 20 000тенге</p> <img src="img/tax.png" alt=""><br>
<small>Срок обучения: 10 часов</small><br>
<button>Подробнее</button></div>
<div class="slideritem"><h3>Англиский язык</h3><p>Цена: от 25 000 тенге</p> <img src="img/tax.png" alt=""><br>
<small>Срок обучения: Зависит от уровня</small><br>
<button>Подробнее</button></div>
</div>
</div>
<div class="wrapper">
<div class="about">
<div class="aboutitem"> Ни искусство, ни мудрость не могут быть достигнуты, если им не учиться.</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="guestion">
<div class="guestiontitle">
<h2>Часто задаваемые вопросы</h2>
</div>
<div class="guestionitem">
<div class="accordion-course">
<button class="accordion">Смогу ли я понять программу курса?</button>
<div class="panel">
<p>Получится. Когда мы разрабатываем содержание курсов, мы понимаем, что уроки должны быть ориентированы на тех, кто хочет освоить любую профессию с нуля, мы понимаем что очень сложно понять все сразу. Поэтому преподователи стараются объяснить каждую тему с самых базовых вещей или закрыть нераскрытые вопросы через повторение с преподавателем каждой непонятной тему</p>
</div>
<button class="accordion">Нужно ли профильное высшее оброзование?</button>
<div class="panel">
<p>Не обязательно!В наше время гораздо важнее иметь практику а также фундаментальные знания в какой-то узкой сфере,можете не волноваться,если у вас нет высшего оброзования,у вас даолжно быть огромное желание освоить новую проффесию и это самое главное!</p>
</div>
<button class="accordion">Получиться ли совмещать с работой?</button>
<div class="panel">
<p>Конечно можно!Наши преподователи подберут вам удобный график с учетом ваших желаний</p>
</div>
<button class="accordion">Гарантирует ли мне сертификат работу?</button>
<div class="panel">
<p>По окончанию всех курсов мы выдаем сертификат установленного образца, в котором прописывается изученная Вами дисциплина, количество часов обучения и дата выдачи сертификата. Данный документ подтверждает прохождение Вами обучения или повышения квалификации. ,но важно понять что если вы не старались освоить программу курсов,то любой сертификат нечего не даст!</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="formin">
<div class="formiten">
<form action="#">
<p>Имя</p>
<input type="text"id="name" name="fistname" placeholder="Ввведите ваше имя ">
<p>Почта</p>
<input type="text" id="email" name="email" placeholder="Ввведите вашу почту ">
<p>Номер</p>
<input type="text" id="name" name="fistname" placeholder="Ввведите ваш номер">
<input type="submit" value="Отправить">
</form>
</div>
</div>
</div>
<div class="wrapper">
<div class="footer">
<div class="footeritem">ProEducation</div>
<div class="footeritem">Все курсы</div>
<div class="footeritem">87470313100</div>
<div class="footeritem">Байсейтвой 100</div>
</div>
</div>
<div id="mymodal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<input type="text" name="name" placeholder="name">
<input type="text" name="number" placeholder="number">
<input type="text" name="email" placeholder="email">
<button>Send</button>
</div>
</div>
<script>
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper{
margin: 0 auto;
max-width: 1300px;
height: 100%;
padding: 0px 15px;
}
@media (max-width: 1200px){
.wrapper{
max-width: 970px;
}
}
@media (max-width: 992px){
.wrapper{
max-width: 750px;
}
}
@media (max-width: 767px){
.wrapper{
max-width: none;
}
}
body{
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
.main{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 50px;
line-height: 50px;
background-color: black;
flex-wrap: wrap;
}
.footer{
display: flex;
justify-content: center;
align-items: center;
width:100%;
height: 100%;
padding: 50px;
background-color: black;
flex-wrap: wrap;
flex-direction: row;
}
.footeritem{
margin-right: auto;
margin-left: auto;
color: white;
}
.main-child1{
}
.main-child2{
}
.main-child3{
}
.main a{
text-decoration: none;
color: white;
}
.main-ban {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
position: relative;
flex-direction: column;
height: 668px;
}
.main-ban img{
object-fit: cover;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.maincont h1{
color: white;
font-size: 50px;
width: 100%;
font-weight: bold;
padding-bottom: 50px;
z-index: 1;
}
.maincont{
z-index: 2;
}
.main-ban button{
width: 200px;
flex-basis: 25%;
height: 40px;
max-height: 40px;
text-decoration: none;
background-color:inherit;
color: white;
text-align: center;
border:3px solid white;
font-size: 18px;
font-weight: 400;
z-index: 3;
}
.maintitle{
text-align: center;
margin-top: 50px;
margin-bottom: 35px;
font-family: 'Montserrat', sans-serif;
}
.slideritem{
padding: 50px 25px;
text-align: center;
width: 330px;
height: 400px;
min-width: 0;
margin-bottom: 50px;
border:1px solid #4E7E64;
background-color: #FFF;
border-radius: 25px;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
}
.slider{
flex-wrap: wrap;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.slider button{
width: 180px;
height: 50px;
margin-top: 25px;
background-color: #4E7E64;
border:none;
color: white;
font-size: 18px;
}
.slider small{
margin-bottom: 15px;
}
.slideritem h3{
color: black;
font-weight: 400;
font-size: 20px;
padding-bottom: 20px;
}
.slideritem p{
color:#FFC909;
font-weight: 700;
font-size: 20px;
line-height: 30px;
padding-bottom: 20px;
}
.slideritem img{
width: 80px;
height: 80px;
}
.about{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 400px;
width: 100%;
background: url('img/about.png');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.aboutitem{
font-size: 30px;
font-weight: 700;
color: white;
}
.accordion {
color: white;
cursor: pointer;
padding: 18px;
width: 99.9%;
text-align: left;
background-color: #4E7E64;
border: none;
outline: none;
transition: 0.4s;
font-size: 19px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion .active:hover {
background-color: #E3F7FF;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion:after {
content: '\▼';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion.active:after {
content: "\▲";
color: white;
}
.guestionitem{
}
.guestiontitle{
margin-top: 50px;
margin-bottom: 35px;
text-align: center;
}
.formin{
display: flex;
flex-direction: row;
margin-top: 50px;
align-items: center;
justify-content: center;
position: relative;
background-color: #c0c0c0;
}
.formiten{
padding: 35px 25px;
align-content: center;
align-self: center;
flex-direction: row;
width: 100%;
}
.formiten input {
display:flex;
text-align: center;
justify-content: center;
margin-right: auto;
margin-left: auto;
width: 50%;
height: 40px;
min-width: 35px;
margin-bottom: 5px;
border-radius: 15px;
border: 1px solid #4E7E64;
}
.formiten p{
padding-bottom: 15px;
text-align: center;
}
input[type=submit]{
width: 30%;
text-align: center;
align-items: center;
color: white;
margin-top: 25px;
padding: 10px 15px;
background-color: #4E7E64;
font-size: 15px;
}
.modal{
display: none;
position: relative;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: red;
}
.modal-content{
background-color: green;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close{
float: right;
font-size: 28px;
color: blue;
}
.header{
position: fixed;
top: 0;
left: 0;
z-index: 40;
width: 100%;
}
.header:before{
content: ' ';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
z-index: 2;
}
.header-body{
position: relative;
display: flex;
justify-content: space-between;
height: 50px;
align-items: center;
}
.header-list li{
margin-left: 20px;
list-style: none;
}
.header-list {
display: flex;
position: relative;
z-index: 2;
}
.header-link
{
color: white;
text-transform: uppercase;
font-size: 18px;
text-decoration: none;
}
.header-logo img{
max-width: 100%;
display: block;
}
.header-logo{
flex: 0 0 40px;
border-radius: 60px;
overflow: hidden;
position: relative;
z-index: 5;
}
.header-burger{
display: none;
}
@media (max-width: 776px) {
body.lock{
overflow: hidden;
}
.header-burger{
display: block;
position: relative;
width: 30px;
height: 20px;
z-index: 3;
}
.header-body{
height: 50px;
}
.header-burger:before,
.header-burger:after{
content: ' ';
background-color: #fff;
width: 100%;
height: 2px;
position: absolute;
left: 0;
transition: all 0.3s ease 0s;
}
.header-burger:before{
top: 0;
}
.header-burger:after{
bottom: 0;
}
.header-burger span{
position: absolute;
position: absolute;
background-color: #fff;
top: 9px;
width: 100%;
left: 0;
height: 2px;
transition: all 0.3s ease 0s;
}
.header-menu{
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background-color: red;
padding: 70px 0px 20px 10px;
transition: all 0.3s ease 0s;
overflow: auto;
}
.header-menu.active{
top: 0;
}
.header-logo{
flex: 0 0 40px;
}
.header-list{
display: block;
}
.header-list li{
margin-bottom: 20px;
}
.header-burger.active:before{
transform: rotate(45deg);
top: 9px;
}
.header-burger.active:after{
transform: rotate(-45deg);
bottom: 9px;
}
.header-burger.active span{
transform: scale(0);
}
.header-link{
font-size: 24px;
}
}
$(document).ready(function(){
$('.header-burger').click(function(event){
$('.header-burger, .header-menu').toggleClass('active');
$('body').toggleClass('lock');
});
});я показала и js и css и html можете помочь?