From b155852f9ca4c83eebbaf6ad51dd4198b3be2493 Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Thu, 19 Dec 2024 01:03:13 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=B0?= =?UTF-8?q?=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82?= =?UTF-8?q?=D1=8C=20=D0=B4=D0=BB=D1=8F=20projects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-desktop.css | 7 +- assets/css/gp-style-tablet.css | 77 ++++++++++++- assets/js/main.js | 136 ++++++++++++++--------- index.html | 186 +++++++++++++++++--------------- 4 files changed, 265 insertions(+), 141 deletions(-) diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 7e1d52e..8ed34da 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -364,6 +364,8 @@ /* projects */ .projects{ +} +.projects .swiper-wrapper{ margin: 37px -20px -20px -20px; display: flex; @@ -372,7 +374,7 @@ .projects__item{ margin: 20px; - width: calc(50% - 40px); + width: calc(50% - 40px) !important; display: flex; flex-direction: column; @@ -425,6 +427,9 @@ display: flex; justify-content: center; } +.projects__counter{ + display: none; +} /* projects */ /* how */ diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index f531e49..ba0f67f 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -329,4 +329,79 @@ main{ margin-left: 8px; } } -/* gym */ \ No newline at end of file +/* gym */ + +/* projects */ +@media only screen and (max-width: 992px) { +.projects{ + overflow: hidden; +} +.projects .swiper-wrapper{ + margin: 40px 0 0 0; + + flex-wrap: nowrap; +} +.projects__item{ + margin: 0; + + width: 100% !important; +} +.projects-item__img{ + height: 200px; +} +.projects-item__content{ + padding: 16px; + + min-height: auto; +} +.projects-item__tag{ + margin-left: 24px; +} +.projects-item__text{ + margin-top: 16px; +} +.projects-item__text .text-1{ + font-size: 20px; +} +.projects__next{ + display: none; +} +.projects__counter{ + margin-top: 40px; + + display: flex; + align-items: center; + justify-content: center; + + font-weight: 400; + font-size: 18px; + color: var(--text-white); +} + +.projects .swiper-button-next::after, .projects .swiper-button-prev::after{ + position: static; + + font-size: 0; +} +.projects .swiper-button-next, .projects .swiper-button-prev{ + position: static; + + margin-top: 0; + + width: 32px; + height: 32px; +} +.projects .swiper-button-next{ + margin-left: 40px; + + background-image: url(/assets/img/icon/slider-righ.svg); + background-repeat: no-repeat; +} +.projects .swiper-button-prev{ + margin-right: 40px; + + background-image: url(/assets/img/icon/slider-left.svg); + background-repeat: no-repeat; +} +} +/* projects */ \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 4e09515..09ed547 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -42,65 +42,99 @@ const reviewsSwiper = new Swiper('.reviews-swiper', { } }) -// gymSwiper.destroy(); -// how - -function howPc() { - let itemButtons = document.querySelectorAll('.how-control__item'); +const projectsSwiper = new Swiper('.projects-swiper', { + direction: 'horizontal', + breakpoints: { + 320:{ + slidesPerView: 1, + spaceBetween: 24, + }, + 996: { + slidesPerView: 1 + }, + }, + // Navigation arrows + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + runCallbacksOnInit: true, + // === new change + on: { + slideChange: function(){ + let offer = document.querySelector('#numberProjects'); + offer.innerHTML = (this.activeIndex + 1); + } + } +}); - itemButtons.forEach((button) => { - let num = button.dataset.num; - button.onclick = function name(params, index) { - let activeContent = document.querySelector('.how__content').querySelector('.active'), - activeButton = document.querySelector('.how__control').querySelector('.active'); - if (activeContent.dataset.num == button.dataset.num) return; - - activeContent.style.height = '0px'; - activeContent.classList.remove('active'); - activeButton.classList.remove('active'); +// how +let itemButtons = document.querySelectorAll('.how-control__item'); +itemButtons.forEach((button) => { + let num = button.dataset.num; + + button.onclick = function name(params, index) { + + let activeContent = document.querySelector('.how__content').querySelector('.active'), + activeButton = document.querySelector('.how__control').querySelector('.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}']`); + + + setTimeout(() => { + let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; + newActive.style.height = newHeight; + newActive.classList.add('active'); + newButton.classList.add('active'); + }, 300); + } +}) +function howPc() { + if (document.querySelector('.how__content').querySelector('.how-content__item-block')) { + return; + } - let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`), - newButton = document.querySelector(`.how-control__item[data-num='${num}']`); - + let blocks = document.querySelectorAll('.how-content__item-block'), + content = document.querySelector('.how__content'); - setTimeout(() => { - let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; - newActive.style.height = newHeight; - newActive.classList.add('active'); - newButton.classList.add('active'); - }, 300); - } - }) + blocks.forEach(block => { + content.appendChild(block) + }); } +function howPhone() { + if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) { + return; + } + + let buttons = document.querySelectorAll('.how-control__item'); -howPc(); - - -// function howPc() { -// let itemButtons = document.querySelectorAll('.how-control__item'), -// itemBlocks = document.querySelectorAll('.how-content__item-block'); + buttons.forEach(button => { + let num = button.dataset.num, + block = document.querySelector(`.how-content__item-block[data-num='${num}']`); + + button.after(block); + }); +} -// itemButtons.forEach((button, index) => { -// let block = itemBlocks[index]; -// button.onclick = function () { -// let activeContent = document.querySelector('.how__content').querySelector('.active'), -// activeButton = document.querySelector('.how__control').querySelector('.active'); - -// activeContent.style.height = '0px'; -// activeContent.classList.remove('active'); -// activeButton.classList.remove('active'); - -// setTimeout(() => { -// let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px'; -// block.style.height = newHeight; -// block.classList.add('active'); -// button.classList.add('active'); -// }, 300); -// } -// }) -// } \ No newline at end of file +// resize +window.addEventListener('resize', () => { + let screenWidth = window.screen.width; + + if (screenWidth <= 992) { + howPhone(); + }else{ + howPc(); + } +}); \ No newline at end of file diff --git a/index.html b/index.html index 8a0e0ad..c8d3b84 100644 --- a/index.html +++ b/index.html @@ -297,121 +297,131 @@ - + -->

Разработанные проекты

-
-
- - -
-
-
- +
+
+
+ + +
+
+
+ + +

Локация

+
-

Локация

+
+ + +

Площадь

+
- -
- -

Площадь

+
+

Название проекта

+

+ Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект +

- -
-

Название проекта

-

- Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект -

-
-
- -
- - -
-
-
- -

Локация

+
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
- -
- -

Площадь

+
+

Название проекта

+

+ Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект +

- -
-

Название проекта

-

- Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект -

-
-
- -
- - -
-
-
- -

Локация

+
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
- -
- -

Площадь

+
+

Название проекта

+

+ Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект +

- -
-

Название проекта

-

- Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект -

-
-
- -
- - -
-
-
- -

Локация

+
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
- -
- -

Площадь

+
+

Название проекта

+

+ Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект +

- -
-

Название проекта

-

- Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект -

-
+ +
+ +
+
+ 1/4 +
+
@@ -419,14 +429,14 @@ все проекты
-
--> +
-
+