diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 8ed34da..ce76971 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -557,6 +557,15 @@ width: 336px; height: 336px; } + +@media only screen and (min-width: 992px) and (max-width: 1481px) { +.how-content-item__img{ + display: none; +} +.how-content-item__text{ + width: 100%; +} +} /* how */ /* free */ diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index ba0f67f..e0b0ec8 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -404,4 +404,52 @@ main{ background-repeat: no-repeat; } } -/* projects */ \ No newline at end of file +/* projects */ + +/* how */ +@media only screen and (max-width: 992px) { +.how{ + margin-top: 40px; +} +.how__content{ + display: none; +} +.how__control{ + width: 100%; +} +.how-control__item{ + flex-direction: column; + align-items: start; +} +.how-control-item__number{ + width: 40px; + + font-size: 20px; +} +.how-control__item__name{ + margin-top: 16px; + margin-left: 0; + + max-width: 100%; + + font-size: 20px; +} +.how-content__item-block{ + position: static; +} +.how-content__item-block.active{ + margin-top: 16px; +} +.how-content__item{ + padding: 16px; +} +.how-content-item__text{ + width: 100%; +} +.how-content-item__img{ + display: none; +} +} +/* how */ + +@media only screen and (max-width: 992px) {} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 09ed547..6af0059 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -13,8 +13,6 @@ const gymSwiper = new Swiper('.gym-swiper', { } }); - - const reviewsSwiper = new Swiper('.reviews-swiper', { spaceBetween: 24, // If we need pagination @@ -42,7 +40,6 @@ const reviewsSwiper = new Swiper('.reviews-swiper', { } }) - const projectsSwiper = new Swiper('.projects-swiper', { direction: 'horizontal', breakpoints: { @@ -79,27 +76,43 @@ itemButtons.forEach((button) => { button.onclick = function name(params, index) { - let activeContent = document.querySelector('.how__content').querySelector('.active'), - activeButton = document.querySelector('.how__control').querySelector('.active'); + let activeContent = document.querySelector('.how-content__item-block.active'), + activeButton = document.querySelector('.how-control__item.active'); if (activeContent.dataset.num == button.dataset.num) return; - activeContent.style.height = '0px'; - activeContent.classList.remove('active'); - activeButton.classList.remove('active'); - - let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`), - newButton = document.querySelector(`.how-control__item[data-num='${num}']`); + activeContent.style.height = `${activeContent.offsetHeight}px`; - setTimeout(() => { - let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; - newActive.style.height = newHeight; - newActive.classList.add('active'); - newButton.classList.add('active'); - }, 300); + activeContent.style.height = '0px'; + activeContent.classList.remove('active'); + activeButton.classList.remove('active'); + + let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`), + newButton = document.querySelector(`.how-control__item[data-num='${num}']`); + + + setTimeout(() => { + let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; + newActive.style.height = newHeight; + newActive.classList.add('active'); + newButton.classList.add('active'); + + setTimeout(() => { + newActive.style.height = 'auto'; + }, 300); + }, 300); + }, 0); } }) + +let screenWidth = window.screen.width; +if (screenWidth <= 992) { + howPhone(); +}else{ + howPc(); +} + function howPc() { if (document.querySelector('.how__content').querySelector('.how-content__item-block')) { return; @@ -113,7 +126,8 @@ function howPc() { }); } function howPhone() { - if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) { + + if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) { return; } @@ -126,7 +140,7 @@ function howPhone() { button.after(block); }); } - +// how end // resize window.addEventListener('resize', () => { @@ -137,4 +151,4 @@ window.addEventListener('resize', () => { }else{ howPc(); } -}); \ No newline at end of file +}); diff --git a/index.html b/index.html index c8d3b84..f42b653 100644 --- a/index.html +++ b/index.html @@ -299,7 +299,7 @@ --> -
+ - +