From 96948651b2432a6211a88310980731efe91a84d8 Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Wed, 18 Dec 2024 23:25:47 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20how=20js?= =?UTF-8?q?=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-desktop.css | 11 +-- assets/js/main.js | 29 ++++++ index.html | 152 +++++++++++++++++--------------- 3 files changed, 114 insertions(+), 78 deletions(-) diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index e3d1f54..4fb547d 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -490,6 +490,12 @@ width: 100%; } +.how-content__item-block{ + height: 0; + overflow: hidden; + + transition: height .3s; +} .how-content__item{ width: 100%; @@ -498,11 +504,6 @@ background-color: var(--background-grey); overflow: hidden; - - display: none; -} -.how-content__item.active{ - display: block; } .how-content__item .text-2{ margin-top: 16px; diff --git a/assets/js/main.js b/assets/js/main.js index af529d3..8888d23 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -43,3 +43,32 @@ const reviewsSwiper = new Swiper('.reviews-swiper', { }) // gymSwiper.destroy(); + +// how + +function howPc() { + let itemButtons = document.querySelectorAll('.how-control__item'), + itemBlocks = document.querySelectorAll('.how-content__item-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); + } + }) +} + +howPc(); \ No newline at end of file diff --git a/index.html b/index.html index 3cd2366..a496f90 100644 --- a/index.html +++ b/index.html @@ -187,7 +187,7 @@
-
+

@@ -428,7 +428,7 @@

-
+
1
@@ -460,82 +460,88 @@
-
-

- Проводим экспертизу помещения и определяем рыночный сегмент проекта -

- -
-
-

- 1. Оцениваем локацию и коммерческую эффективность рассматриваемых площадей, выявляем их избыток или дефицит -

-

- 2. Определяем для фитнес-клуба какого формата выделенные площади технически подойдут лучше всего -

-

- 3. Выявляем соотношения полезной и вспомогательной площадей будущего клуба и рассчитываем его пропускную способность -

+
+
+

+ Проводим экспертизу помещения и определяем рыночный сегмент проекта +

+ +
+
+

+ 1. Оцениваем локацию и коммерческую эффективность рассматриваемых площадей, выявляем их избыток или дефицит +

+

+ 2. Определяем для фитнес-клуба какого формата выделенные площади технически подойдут лучше всего +

+

+ 3. Выявляем соотношения полезной и вспомогательной площадей будущего клуба и рассчитываем его пропускную способность +

+
+ +
- -
-
-

- Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен) -

-

- Мы понимаем важность грамотного проекта фитнес клуба, поэтому делаем проектирование не только тренажерного зала, но и ВСЕХ зон, которые будут находится внутри -

- -
-
-

- 1. Определяем расположение и площади тренажерного зала и залов групповых программ -

-

- 2. Определяем размер раздевалок, количество шкафчиков и душевых. Расставляем в раздевалках мебель и сантехнику -

-

- 3. Прорисовываем входную группу, холлы, коридоры, служебные помещения -

-

- 4. Продумываем пути перемещения действующих и первичных клиентов, разделяем «грязные» и «чистые» потоки -

+
+
+

+ Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен) +

+

+ Мы понимаем важность грамотного проекта фитнес клуба, поэтому делаем проектирование не только тренажерного зала, но и ВСЕХ зон, которые будут находится внутри +

+ +
+
+

+ 1. Определяем расположение и площади тренажерного зала и залов групповых программ +

+

+ 2. Определяем размер раздевалок, количество шкафчиков и душевых. Расставляем в раздевалках мебель и сантехнику +

+

+ 3. Прорисовываем входную группу, холлы, коридоры, служебные помещения +

+

+ 4. Продумываем пути перемещения действующих и первичных клиентов, разделяем «грязные» и «чистые» потоки +

+
+ +
- -
-
-

- Осуществляем детализацию концепции и функциональное наполнение клуба -

- -
-
-

- 1. Определяем набор основных фитнес-направлений и дополнительных услуг, наиболее соответствующих выбранной концепции и формату клуба -

-

- 2. Разрабатываем зонирование тренажерного зала и схему расстановки оборудования по фирменной методике Gym Evolution -

-

- 3. Формируем спецификации тренажеров, аксессуаров для групповых программ, инвентаря для боевых искусств, функционального тренинга и кроссфита -

+
+
+

+ Осуществляем детализацию концепции и функциональное наполнение клуба +

+ +
+
+

+ 1. Определяем набор основных фитнес-направлений и дополнительных услуг, наиболее соответствующих выбранной концепции и формату клуба +

+

+ 2. Разрабатываем зонирование тренажерного зала и схему расстановки оборудования по фирменной методике Gym Evolution +

+

+ 3. Формируем спецификации тренажеров, аксессуаров для групповых программ, инвентаря для боевых искусств, функционального тренинга и кроссфита +

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