Commit d264ef80 authored by Sergey's avatar Sergey

Add adaptive

parent 9dc4b0c0
'use strict';
(function () {
var burger = document.querySelector('#hamburger-icon');
if(burger){
burger.addEventListener('click', function () {
burger.classList.toggle('active');
document.querySelector('.header__nav').classList.toggle('active')
})
}
})();
\ No newline at end of file
...@@ -12,6 +12,23 @@ ...@@ -12,6 +12,23 @@
pagination: { pagination: {
el: '.swiper-pagination', el: '.swiper-pagination',
clickable: true clickable: true
},
breakpoints: {
// when window width is <= 320px
320: {
slidesPerView: 1,
spaceBetween: 10
},
// when window width is <= 480px
480: {
slidesPerView: 1,
spaceBetween: 10
},
// when window width is <= 640px
640: {
slidesPerView: 3,
spaceBetween: 30
}
} }
}); });
}); });
......
...@@ -10,6 +10,13 @@ ...@@ -10,6 +10,13 @@
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}, },
breakpoints: {
570: {
slidesPerView: 1,
spaceBetween: 0,
simulateTouch: true,
}
}
}); });
}); });
})(); })();
\ No newline at end of file
...@@ -10,6 +10,19 @@ ...@@ -10,6 +10,19 @@
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}, },
breakpoints: {
// when window width is <= 320px
500: {
slidesPerView: 1,
spaceBetween: 0,
simulateTouch: true,
},
870: {
slidesPerView: 2,
spaceBetween: 0,
simulateTouch: true,
}
}
}); });
}); });
})(); })();
\ No newline at end of file
@import "../settings/color"; @import "../settings/color";
.about-main{ .about-main{
overflow: hidden;
background: $about-bg; background: $about-bg;
border-top: 2px solid; border-top: 2px solid;
border-bottom: 2px solid; border-bottom: 2px solid;
...@@ -31,4 +32,24 @@ ...@@ -31,4 +32,24 @@
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
} }
} }
\ No newline at end of file @media screen and (max-width: 780px){
.about-main__content{
flex-direction: column;
align-items: center;
}
.about-main__img{
margin-right: 0;
margin-bottom: 15px;
}
.about-main__text{
padding: 0 15px;
font-size: 16px;
}
.about-main__wrapper{
padding-bottom: 30px;
}
.about-main__img{
max-width: 100%;
}
}
...@@ -58,4 +58,71 @@ ...@@ -58,4 +58,71 @@
.footer__mail-text{ .footer__mail-text{
font-size: 20px; font-size: 20px;
margin: 0; margin: 0;
}
@media screen and (max-width: 1170px){
.footer__wrapper{
width: 100%;
padding: 0 10px;
}
}
@media screen and (max-width: 700px){
.footer__main{
flex-wrap: wrap;
}
.footer-hr{
display: none
}
.footer__main-item{
width: 50%;
}
.footer__main-item-last{
width: 100%;
text-align: center;
}
.footer__phone-title{
justify-content: center;
}
.footer__mail-link{
justify-content: center;
}
}
@media screen and (max-width: 425px){
.footer{
padding-top: 20px;
}
.footer__f-line{
flex-direction: column;
}
.footer__search{
margin-top: 20px;
}
.footer__main{
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.footer-hr{
display: none;
}
.footer__list-h{
text-align: center;
width: 100%;
display: inline-block;
}
.footer__mail-link{
padding-bottom: 20px;
}
}
@media screen and (max-width: 425px){
.footer__phone{
text-align: center;
}
.footer__phone-title{
justify-content: center;
padding-bottom: 20px;
}
} }
\ No newline at end of file
$background: #3d566e;
$color: #ecf0f1;
$height-icon: 14px;
$width-line: 30px;
$height-line: 3px;
$transition-time: 0.4s;
$rotation: 45deg;
$translateY: ($height-icon / 2);
$translateX: 0;
#hamburger-icon {
width:$width-line;
height:$height-icon;
position:relative;
display:block;
margin: ($height-icon * 2) auto $height-icon auto;
.line {
display:block;
background:$color;
width:$width-line;
height:$height-line;
position:absolute;
left:0;
border-radius:($height-line / 2);
transition: all $transition-time;
-webkit-transition: all $transition-time;
-moz-transition: all $transition-time;
&.line-1 {
top:0;
}
&.line-2 {
top:50%;
}
&.line-3 {
top:100%;
}
}
&:hover, &:focus {
.line-1 {
transform: translateY($height-line / 2 * -1);
-webkit-transform: translateY($height-line / 2 * -1);
-moz-transform: translateY($height-line / 2 * -1);
}
.line-3 {
transform: translateY($height-line / 2);
-webkit-transform: translateY($height-line / 2);
-moz-transform: translateY($height-line / 2);
}
}
&.active {
.line-1 {
transform: translateY($translateY) translateX($translateX) rotate($rotation);
-webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
-moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
}
.line-2 {
opacity:0;
}
.line-3 {
transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
}
}
}
a#hamburger-icon {
text-decoration:none;
color:#95a5a6;
margin: 0.5em 1.5em;
display:inline-block;
&:hover, &:focus {
color:$color;
}
}
@media screen and (min-width: 1025px){
a#hamburger-icon{
display: none;
}
}
@media screen and (max-width: 425px){
a#hamburger-icon{
margin: 0;
}
}
\ No newline at end of file
...@@ -32,3 +32,10 @@ ...@@ -32,3 +32,10 @@
width: 50%; width: 50%;
} }
.logo__main{
margin-right: 20px;
img{
max-height: 45px;
}
}
@import "../../settings/color"; @import "../../settings/color";
.header__nav{ .header__nav{
flex-grow: 1;
height: 100%; height: 100%;
} }
.header__bl-nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__list{ .nav__list{
display: flex; display: flex;
height: 100%; height: 100%;
...@@ -22,4 +28,89 @@ ...@@ -22,4 +28,89 @@
.nav__link{ .nav__link{
text-decoration: none; text-decoration: none;
color: $white-text; color: $white-text;
}
@media screen and (max-width: 1024px){
.header__nav{
display: none;
height: auto;
}
.header__nav.active{
display: flex;
position: absolute;
background: $grey-text;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
transform: translateY(100%);
}
.header__nav-list{
width: 100%;
padding: 15px;
}
.header__bl{
width: auto;
}
.header__bl-contacts{
flex-grow: 1;
}
}
@media screen and (max-width: 600px){
.nav__list{
flex-direction: column;
padding: 0;
}
.nav__item{
width: 100%;
text-align: center;
padding: 15px 0;
position: relative;
&:after{
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background: #ffffff40;
}
}
.header__contacts-list{
flex-direction: column-reverse;
}
.header__bl-nav{
width: auto;
}
.header__wrapper{
justify-content: space-between;
margin-bottom: 40px;
}
.header{
height: auto;
}
.header__contacts-item{
&:after{
display: none;
}
}
.header__contacts-phone{
position: absolute;
bottom: 0;
left: 50%;
height: auto;
margin-bottom: 15px;
transform: translateX(-50%);
}
.header__contacts-mail{
display: none;
}
.logo__main{
margin: 0;
}
.header__contacts-phone{
padding: 0;
}
} }
\ No newline at end of file
...@@ -58,4 +58,27 @@ ...@@ -58,4 +58,27 @@
.link-list-red__ico{ .link-list-red__ico{
transform: translateY(-4px); transform: translateY(-4px);
} }
}
@media screen and (max-width: 800px){
.link-list-red__list{
flex-wrap: wrap;
}
.link-list-red__item{
width: 50%;
&:after{
display: none;
}
}
}
@media screen and (max-width: 425px){
.link-list-red__item{
width: 220px;
&:after{
top: 100%;
right: 50%;
width: 30px;
height: 1px;
transform: translate(100%, 50%);
}
}
} }
\ No newline at end of file
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
color: $white-text; color: $white-text;
padding: 10px 20px 20px; padding: 10px 20px 20px;
transition: .2s; transition: .2s;
height: 100%;
&:hover { &:hover {
background: rgba($red-color, .8); background: rgba($red-color, .8);
...@@ -55,4 +56,32 @@ ...@@ -55,4 +56,32 @@
.menu-list__link.active{ .menu-list__link.active{
background: $red-color; background: $red-color;
}
@media screen and (max-width: 1024px){
.menu-list__item{
img{
width: 100%;
}
}
}
@media screen and (max-width: 810px){
.menu-list__mainpage{
flex-wrap: wrap;
}
.menu-list__item {
width: 33%;
text-align: center;
img{
width: 91px;
}
&:after{
display: none;
}
}
}
@media screen and (max-width: 425px){
.menu-list__item {
width: 100%;
}
} }
\ No newline at end of file
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
padding-top: 45px; padding-top: 45px;
padding-bottom: 45px; padding-bottom: 45px;
position: relative; position: relative;
width: 100%;
overflow: hidden;
} }
.swiper-container-news{ .swiper-container-news{
...@@ -104,7 +106,49 @@ ...@@ -104,7 +106,49 @@
} }
} }
.news-main__content{
width: 100%;
padding: 0 50px;
}
.slider-nav__next{ .slider-nav__next{
right: 0; right: 0;
transform: translateX(100%); transform: translateX(100%);
}
.slider-nav__next{
transform: none;
margin-right: 10px;
}
.slider-nav__prev{
transform: none;
margin-left: 10px;
}
@media screen and (max-width: 1024px){
.news-main__content{
width: 100%;
}
.news-main__item{
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 425px){
.news-main__content {
width: 100%;
}
.news-main__item{
flex-direction: column;
align-items: center;
}
.slider-nav__next{
transform: none;
margin-right: 10px;
}
.slider-nav__prev{
transform: none;
margin-left: 10px;
}
} }
\ No newline at end of file
@import "../settings/color"; @import "../settings/color";
.product-slider{ .product-slider{
padding: 45px 0; padding: 45px 0;
width: 100%;
overflow: hidden;
} }
.product-slider__wrapper{ .product-slider__wrapper{
widows: 100%;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
height: 0; height: 0;
...@@ -22,6 +25,7 @@ ...@@ -22,6 +25,7 @@
.product-slider__content{ .product-slider__content{
overflow: hidden; overflow: hidden;
width: 100%;
} }
.product-slider__list{ .product-slider__list{
...@@ -75,4 +79,29 @@ ...@@ -75,4 +79,29 @@
.product-slider__img{ .product-slider__img{
transform: translateY(-10px); transform: translateY(-10px);
} }
}
@media screen and (max-width: 1024px){
.product-slider__wrapper{
width: 100%;
}
.product-slider__wrapper.active{
width: 100%;
}
.product-slider__content{
width: 100%;
}
}
@media screen and (max-width:425px) {
.product-slider{
display: none;
}
/*.product-slider__wrapper, .product-slider__wrapper.active{
width: 100%;
}
.product-slider__content{
width: 100%;
}
.product-slider__content .swiper-slide{
flex-shrink: 1;
}*/
} }
\ No newline at end of file
...@@ -47,4 +47,20 @@ body{ ...@@ -47,4 +47,20 @@ body{
transform: translate(100%, -50%); transform: translate(100%, -50%);
} }
}
@media screen and (max-width: 1170px){
.wrapper{
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.slider__main{
img{
max-width: 100%;
}
}
} }
\ No newline at end of file
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</ul> </ul>
</div> </div>
<div class="footer-hr"></div> <div class="footer-hr"></div>
<div class="footer__main-item"> <div class="footer__main-item footer__main-item-last">
<div class="footer__phone"> <div class="footer__phone">
<div class="footer__phone-title"> <div class="footer__phone-title">
<svg class="footer__phone-ico"> <svg class="footer__phone-ico">
......
...@@ -6,11 +6,15 @@ ...@@ -6,11 +6,15 @@
<link rel="stylesheet" href="css/swiper.css"> <link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/nouislider.css"> <link rel="stylesheet" href="css/nouislider.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<div class="wrapper header__wrapper"> <div class="wrapper header__wrapper">
<div class="header__bl header__bl-nav"> <div class="header__bl header__bl-nav">
<div class="logo__main">
<img src="img/logo-main.png" alt="Лого">
</div>
<nav class="header__nav"> <nav class="header__nav">
<ul class="header__nav-list nav__list"> <ul class="header__nav-list nav__list">
<li class="nav__item"><a class="nav__link" href="#">Каталог</a></li> <li class="nav__item"><a class="nav__link" href="#">Каталог</a></li>
...@@ -25,14 +29,14 @@ ...@@ -25,14 +29,14 @@
</div> </div>
<div class="header__bl header__bl-contacts"> <div class="header__bl header__bl-contacts">
<ul class="header__contacts-list"> <ul class="header__contacts-list">
<li class="header__contacts-item"> <li class="header__contacts-item header__contacts-mail">
<a class="header__mail" href="mailto:test@test.ru"> <a class="header__mail" href="mailto:test@test.ru">
<svg class="header__mail-ico"> <svg class="header__mail-ico">
<use xlink:href="img/sprite-vector.svg#mail-icon"></use> <use xlink:href="img/sprite-vector.svg#mail-icon"></use>
</svg> </svg>
</a> </a>
</li> </li>
<li class="header__contacts-item"> <li class="header__contacts-item header__contacts-phone">
<a class="header__phone" href="tel:+78008888888"> <a class="header__phone" href="tel:+78008888888">
<svg class="header__phone-ico"> <svg class="header__phone-ico">
<use xlink:href="img/sprite-vector.svg#phone-icon"></use> <use xlink:href="img/sprite-vector.svg#phone-icon"></use>
...@@ -49,5 +53,10 @@ ...@@ -49,5 +53,10 @@
</li> </li>
</ul> </ul>
</div> </div>
<a id="hamburger-icon" href="#" title="Menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</a>
</div> </div>
</header> </header>
\ No newline at end of file
...@@ -2,38 +2,38 @@ ...@@ -2,38 +2,38 @@
<div class="wrapper menu-list__wrapper"> <div class="wrapper menu-list__wrapper">
<ul class="menu-list__list menu-list__mainpage"> <ul class="menu-list__list menu-list__mainpage">
<li class="menu-list__item"> <li class="menu-list__item">
<a href="#" class="menu-list__link active"> <a href="/build/catalog.html" class="menu-list__link active">
<img src="img/icon-test.png" alt="" class="menu-list__ico"> <img src="img/kolesnie-cat.png" alt="Колесные мини-погрузчики" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p> <p class="menu-list__tit">Колесные мини-погрузчики</p>
</a> </a>
</li> </li>
<li class="menu-list__item"> <li class="menu-list__item">
<a href="#" class="menu-list__link"> <a href="/build/catalog.html" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico"> <img src="img/gusen-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p> <p class="menu-list__tit">Колесные мини-погрузчики</p>
</a> </a>
</li> </li>
<li class="menu-list__item"> <li class="menu-list__item">
<a href="#" class="menu-list__link"> <a href="/build/catalog.html" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico"> <img src="img/mini-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p> <p class="menu-list__tit">Колесные мини-погрузчики</p>
</a> </a>
</li> </li>
<li class="menu-list__item"> <li class="menu-list__item">
<a href="#" class="menu-list__link"> <a href="/build/catalog.html" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico"> <img src="img/tele-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p> <p class="menu-list__tit">Колесные мини-погрузчики</p>
</a> </a>
</li> </li>
<li class="menu-list__item"> <li class="menu-list__item">
<a href="#" class="menu-list__link"> <a href="/build/catalog.html" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico"> <img src="img/ecscat-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p> <p class="menu-list__tit">Колесные мини-погрузчики</p>
</a> </a>
</li> </li>
<li class="menu-list__item"> <li class="menu-list__item">
<a href="#" class="menu-list__link"> <a href="/build/catalog.html" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico"> <img src="img/naves-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p> <p class="menu-list__tit">Колесные мини-погрузчики</p>
</a> </a>
</li> </li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment