Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал how js для пк

Browse Source
This commit is contained in:
Kirill Pet
2024-12-18 23:25:47 +03:00
parent 8ec1dd88d6
commit 96948651b2
3 changed files with 114 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/gp-style-desktop.css
View File

@@ -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;

29
assets/js/main.js
View File

@@ -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();

152
index.html
View File

@@ -187,7 +187,7 @@
</header>
<main class="wrapper">
<article class="space">
<!-- <article class="space">
<p class="title-1">
Создаем пространства, которые работают
</p>
@@ -419,7 +419,7 @@
все проекты
</a>
</div>
</div>
</div> -->
<div class="main__item">
<p class="title-1">
@@ -428,7 +428,7 @@
<article class="how">
<div class="how__control">
<div class="how-control__item">
<div class="how-control__item active">
<div class="how-control-item__number title-3">
1
</div>
@@ -460,82 +460,88 @@
</div>
<div class="how__content">
<div class="how-content__item active">
<p class="text-1">
Проводим экспертизу помещения и определяем рыночный сегмент проекта
</p>
<div class="how-content-item__content">
<div class="how-content-item__text">
<p class="text-2">
1. Оцениваем локацию и коммерческую эффективность рассматриваемых площадей, выявляем их избыток или дефицит
</p>
<p class="text-2">
2. Определяем для фитнес-клуба какого формата выделенные площади технически подойдут лучше всего
</p>
<p class="text-2">
3. Выявляем соотношения полезной и вспомогательной площадей будущего клуба и рассчитываем его пропускную способность
</p>
<div class="how-content__item-block active" style="height: 354px;">
<div class="how-content__item">
<p class="text-1">
Проводим экспертизу помещения и определяем рыночный сегмент проекта
</p>
<div class="how-content-item__content">
<div class="how-content-item__text">
<p class="text-2">
1. Оцениваем локацию и коммерческую эффективность рассматриваемых площадей, выявляем их избыток или дефицит
</p>
<p class="text-2">
2. Определяем для фитнес-клуба какого формата выделенные площади технически подойдут лучше всего
</p>
<p class="text-2">
3. Выявляем соотношения полезной и вспомогательной площадей будущего клуба и рассчитываем его пропускную способность
</p>
</div>
<img src="/assets/img/photo/how-1.png" alt="" class="how-content-item__img how-content-item__img--1">
</div>
<img src="/assets/img/photo/how-1.png" alt="" class="how-content-item__img how-content-item__img--1">
</div>
</div>
<div class="how-content__item">
<p class="text-1">
Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен)
</p>
<p class="text-2">
Мы понимаем важность грамотного проекта фитнес клуба, поэтому делаем проектирование не только тренажерного зала, но и ВСЕХ зон, которые будут находится внутри
</p>
<div class="how-content-item__content">
<div class="how-content-item__text">
<p class="text-2">
1. Определяем расположение и площади тренажерного зала и залов групповых программ
</p>
<p class="text-2">
2. Определяем размер раздевалок, количество шкафчиков и душевых. Расставляем в раздевалках мебель и сантехнику
</p>
<p class="text-2">
3. Прорисовываем входную группу, холлы, коридоры, служебные помещения
</p>
<p class="text-2">
4. Продумываем пути перемещения действующих и первичных клиентов, разделяем «грязные» и «чистые» потоки
</p>
<div class="how-content__item-block">
<div class="how-content__item">
<p class="text-1">
Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен)
</p>
<p class="text-2">
Мы понимаем важность грамотного проекта фитнес клуба, поэтому делаем проектирование не только тренажерного зала, но и ВСЕХ зон, которые будут находится внутри
</p>
<div class="how-content-item__content">
<div class="how-content-item__text">
<p class="text-2">
1. Определяем расположение и площади тренажерного зала и залов групповых программ
</p>
<p class="text-2">
2. Определяем размер раздевалок, количество шкафчиков и душевых. Расставляем в раздевалках мебель и сантехнику
</p>
<p class="text-2">
3. Прорисовываем входную группу, холлы, коридоры, служебные помещения
</p>
<p class="text-2">
4. Продумываем пути перемещения действующих и первичных клиентов, разделяем «грязные» и «чистые» потоки
</p>
</div>
<img src="/assets/img/photo/how-2.png" alt="" class="how-content-item__img how-content-item__img--2">
</div>
<img src="/assets/img/photo/how-2.png" alt="" class="how-content-item__img how-content-item__img--2">
</div>
</div>
<div class="how-content__item">
<p class="text-1">
Осуществляем детализацию концепции и функциональное наполнение клуба
</p>
<div class="how-content-item__content">
<div class="how-content-item__text">
<p class="text-2">
1. Определяем набор основных фитнес-направлений и дополнительных услуг, наиболее соответствующих выбранной концепции и формату клуба
</p>
<p class="text-2">
2. Разрабатываем зонирование тренажерного зала и схему расстановки оборудования по фирменной методике Gym Evolution
</p>
<p class="text-2">
3. Формируем спецификации тренажеров, аксессуаров для групповых программ, инвентаря для боевых искусств, функционального тренинга и кроссфита
</p>
<div class="how-content__item-block">
<div class="how-content__item">
<p class="text-1">
Осуществляем детализацию концепции и функциональное наполнение клуба
</p>
<div class="how-content-item__content">
<div class="how-content-item__text">
<p class="text-2">
1. Определяем набор основных фитнес-направлений и дополнительных услуг, наиболее соответствующих выбранной концепции и формату клуба
</p>
<p class="text-2">
2. Разрабатываем зонирование тренажерного зала и схему расстановки оборудования по фирменной методике Gym Evolution
</p>
<p class="text-2">
3. Формируем спецификации тренажеров, аксессуаров для групповых программ, инвентаря для боевых искусств, функционального тренинга и кроссфита
</p>
</div>
<img src="/assets/img/photo/how-3.png" alt="" class="how-content-item__img how-content-item__img--3">
</div>
<img src="/assets/img/photo/how-3.png" alt="" class="how-content-item__img how-content-item__img--3">
</div>
</div>
</div>
</article>
</div>
<div class="main__item">
<!-- <div class="main__item">
<article class="free">
<p class="title-1">
Получи проект бесплатно
@@ -591,9 +597,9 @@
</form>
</div>
</article>
</div>
</div> -->
<div class="main__item">
<!-- <div class="main__item">
<p class="title-1 title--center">
Отзывы клиентов
</p>
@@ -754,9 +760,9 @@
<div class="swiper-button-next"></div>
</div>
</article>
</div>
</div> -->
<div class="main__item">
<!-- <div class="main__item">
<div class="text-form">
<div class="text-form__content">
<p class="title-1">
@@ -817,9 +823,9 @@
</div>
</div>
</div>
</div> -->
<div class="main__item">
<!-- <div class="main__item">
<p class="title-1">
Дополнительные услуги
</p>
@@ -866,9 +872,9 @@
</div>
</div>
</article>
</div>
</div> -->
<div class="main__item">
<!-- <div class="main__item">
<article class="call">
<p class="title-1">
Свяжитесь с нами
@@ -891,7 +897,7 @@
</div>
</div>
</article>
</div>
</div> -->
</main>
<footer class="footer">