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

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

Browse Source
fitness
Kirill Pet 8 months ago
parent 8ec1dd88d6
commit 96948651b2
3 changed files with 114 additions and 78 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      assets/css/gp-style-desktop.css
  2. 29
      assets/js/main.js
  3. 152
      index.html

11
assets/css/gp-style-desktop.css
Unescape 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
Unescape 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
Unescape 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">

Write Preview
Loading…
Cancel
Save