$(document).ready(function() {
$('.menu_burgar').click(function(event) {
$('.menu_burgar,menu_toggle').toggleClass('active');
});
});
.container {
padding: 0 36px;
margin: 0 auto;
max-width: 100vw;
}
@media (min-width:750px){
.container{
max-width:738px ;
}
}
@media (min-width: 768px) {
.container {
max-width: 750px;
}
}
@media (max-width:768px){
.hiden-mobile{
display: none;
}
}
@media (min-width: 992px) {
.container{
max-width: 970px;
}
}
@media (min-width: 1201px) {
.container{
max-width: 1230px;
}
}
/*HEADER*/
.header{
width: 100%;
background-color:white;
z-index: 3;
}
.header .container{
display: flex;
align-items: center;
}
.flex-wrap{
flex-wrap: wrap;
}
.wraper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.header-right{
margin-left: auto;
}
.social-items{
display: flex;
gap: 43px;
list-style-type: none;
}
.logo{
margin-right:auto;
display: block;
}
.social-button{
width:36px;
height: 36px;
}
.social-button img{
position: relative;
}
.social-button:hover{
border: solid 3px black;
border-radius: 15px;
transition: 0.6s;
}
.sl-width{
padding: 0 30px;
}
.select-lang{
display: flex;
height:94px ;
width: 100%;
padding:0 15px;
text-align: center;
background-color:#F6F6F6;
font-family:Montserrat;
}
.select-lang:hover{
background-color:var(--gray) ;
transition:background 0.5s ease;
}
.exit{
display:block;
color: black;
padding:0 15px;
height:24px;
text-align: center;
}
.exit:hover{
background-color:var(--lightgray);
transition:background 0.5s ease;
}
.login{
color:black ;
}
/*SIDEBAR*/
.side-bar{
width: 360px;
height: 100%;
background-color: white;
padding-bottom:100px ;
padding-top: 60px;
}
.side-bar__button
{
display: flex;
align-items: center;
width: 100%;
height:56px;
padding-left: 68px;
transition: 0.3s;
}
.side-bar__button:hover{
background-color:var(--lightgray);
}
.side-bar__button .side-bar__icon{
width: 32px;
margin-right: 28px;
}
/*FOOTER*/
.footer{
overflow: hidden;
width: 100%;
background-color:#212121;
height:296px;
}
.footer .container{
display: flex;
overflow: hidden;
}
.fitem{
color: white;
padding-top:90px ;
}
.logo-2{
padding-bottom: 25px ;
}
.words{
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
opacity: 0.800000011920929;
}
*{
padding: 0;
margin: 0;
border: 0;
}
*,*::before,*::after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
height: 100%;
width: 100%;
font-size: 100%;
line-height:1 ;
font-size:14px ;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner{padding: 0;border: 0;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul li{list-style:none;}
li{list-style: none;}
img{vertical-align:top;}
:root {
--gray:#e4e4e4 ;
--lightgray:#F6F6F6;
}
:root{
--text:<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"/>
;
}
html, body {
height: 100%;
max-width: 1920px;
font-family:Montserrat;
background-color:var(--lightgray) ;
}
button {
/* Сбрасываем дефолтные стили */
border: none;
outline: none;
text-align: center;
text-decoration: none;
background-color:white;
font-size: 16px;}
select {
appearance: none;
}
.menu_burgar{
display: none;
}
@media (max-width:767px){
.menu_burgar{
display: flex;
position: relative;
margin: 15px 15px;
width: 30px;
height: 20px;
}
.menu_burgar span{
position: absolute;
background-color:#000000;
position: absolute;
left: 0;
width: 100%;
height: 2px;
top: 9px;
}
.menu_burgar::before,
.menu_burgar::after{
content: '';
background-color: #000000;
position: absolute;
left: 0;
width: 100%;
height: 2px;
}
.menu_burgar.active::before{
transform:rotate(45deg);
}
.menu_burgar::before{
top: 0;
}
.menu_burgar::after{
bottom: 0;
}
.menu_toogle{
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:var(--lightgray);
}
}
.button{
height: 32px;
width: 32px;
}
.button:hover{
background-color:var(--lightgray);
transition: 0.5s;
}
.container {
padding: 0 36px;
margin: 0 auto;
max-width: 100vw;
}
@media (min-width:750px){
.container{
max-width:738px ;
}
}
@media (min-width: 768px) {
.container {
max-width: 750px;
}
}
@media (max-width:768px){
.hiden-mobile{
display: none;
}
}
@media (min-width: 992px) {
.container{
max-width: 970px;
}
}
@media (min-width: 1201px) {
.container{
max-width: 1230px;
}
}
/*HEADER*/
.header{
width: 100%;
background-color:white;
z-index: 3;
}
.header .container{
display: flex;
align-items: center;
}
.flex-wrap{
flex-wrap: wrap;
}
.wraper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.header-right{
margin-left: auto;
}
.social-items{
display: flex;
gap: 43px;
list-style-type: none;
}
.logo{
margin-right:auto;
display: block;
}
.social-button{
width:36px;
height: 36px;
}
.social-button img{
position: relative;
}
.social-button:hover{
border: solid 3px black;
border-radius: 15px;
transition: 0.6s;
}
.sl-width{
padding: 0 30px;
}
.select-lang{
display: flex;
height:94px ;
width: 100%;
padding:0 15px;
text-align: center;
background-color:#F6F6F6;
font-family:Montserrat;
}
.select-lang:hover{
background-color:var(--gray) ;
transition:background 0.5s ease;
}
.exit{
display:block;
color: black;
padding:0 15px;
height:24px;
text-align: center;
}
.exit:hover{
background-color:var(--lightgray);
transition:background 0.5s ease;
}
.login{
color:black ;
}
/*SIDEBAR*/
.side-bar{
width: 360px;
height: 100%;
background-color: white;
padding-bottom:100px ;
padding-top: 60px;
}
.side-bar__button
{
display: flex;
align-items: center;
width: 100%;
height:56px;
padding-left: 68px;
transition: 0.3s;
}
.side-bar__button:hover{
background-color:var(--lightgray);
}
.side-bar__button .side-bar__icon{
width: 32px;
margin-right: 28px;
}
/*FOOTER*/
.footer{
overflow: hidden;
width: 100%;
background-color:#212121;
height:296px;
}
.footer .container{
display: flex;
overflow: hidden;
}
.fitem{
color: white;
padding-top:90px ;
}
.logo-2{
padding-bottom: 25px ;
}
.words{
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
opacity: 0.800000011920929;
}
<!DOCTYPE html>
<html lang="en" lang="ua">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/global.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/burger-menu.css"/>
<link rel="stylesheet" href="JSfile/menu-burger.js"/>
<link rel="stylesheet" href="css/buttons.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"/>
<title>Ui</title>
</head>
<body>
<header class="header">
<!-- бургер прав и все верх в бургер -->
<!-- зробити джс який добавляє актів клас до елемента який треба показувати в хедері
на мобілці -->
<div class="container flex-wrap wraper">
<div class="menu_burgar">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu_toggle">
</div>
<img class="logo" src="photo/ЛОГО.svg" />
<ul class="social-items header-right flex-wrap">
<li class="social-item">
<button class="social-button">
<img class="social-icon" src="photo/инста.svg" />
</button>
</li>
<li class="social-item">
<button class="social-button">
<img class="social-icon" src="photo/линкедин.svg" />
</button>
</li>
<li class="social-item">
<button class="social-button">
<img class="social-icon" src="photo/твит.svg" />
</button>
</li>
<li class="social-item">
<button class="social-button">
<img class="social-icon" src="photo/телега.svg" />
</button>
</li>
<li class="social-item">
<button class="social-button">
<img class="social-icon" src="photo/FaceBook.svg" />
</button>
</li>
</ul>
<div class="flex-wrap hiden-mobile sl-width">
<select class="select-lang">
<option value="ua">Ua</option>
<option value="en">En</option>
</select>
</div>
<div class="block">
<button class="exit">
<img src="photo/login.svg" />
<a
class="login"
href="https://www.google.com/search?q=exit&oq=exit&aqs=chrome..69i57j0i512l9.1231346703j0j15&sourceid=chrome&ie=UTF-8"
>
Увійти
</a>
</button>
</div>
</div>
</header>
<!-- Зробити ничку сайдбару
адаптер
соціали жирні лінії
и доробити вже до кінця
і позвонить Тарасу -->
<main>
<div class="container hiden-mobile">
<div class="side-bar ">
<ul>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/GROUP1.svg" ></span>
<span class="side-bar__text">Новини</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/Group2.svg" > </span>
<span class="side-bar__text">Події міста</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/Group3.svg" ></span>
<span class="side-bar__text">Веб-камери</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/Group4.svg" ></span>
<span class="side-bar__text">Екскурсії та розваги</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/group5.svg" ></span>
<span class="side-bar__text">Транспорт Кам’янця</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/Group6.svg" ></span>
<span class="side-bar__text">Де перекусити</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/Group7.svg" ></span>
<span class="side-bar__text">Де зупинитись</span>
</button>
</li>
<li class="side-bar__item">
<button class="side-bar__button">
<span class="side-bar__icon"><img src="SVG/Group8.svg" ></span>
<span class="side-bar__text">Навчальні заклади</span>
</button>
</li>
</ul>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<ul class="fitem header-right">
<li>
<img class="logo-2" src="SVG/ЛОГО2.svg" />
</li>
<li class="words">
Використання будь-яких матеріалів, розміщених на сайті, дозволяється
за умови
</li>
<li class="words">
посилання на KamPod.com. Редакція порталу може не поділяти точку
зору авторів
</li>
<li class="words">
і не несе відповідальності за авторські матеріали, за достовірність
та зміст реклами.
</li>
</ul>
</div>
</footer>
</body>
</html>