diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index e5cb5ee..218c358 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -190,6 +190,83 @@ body{ text-decoration-skip-ink: none; color: var(--link); } + +.input__block{ + display: flex; + flex-direction: column; + + border-radius: 4px; + + position: relative; +} +.input__label{ + position: absolute; + top: 14px; + left: 24px; + + + font-size: 12px; + color: var(--link); + text-transform: uppercase; + + transition: all 0.3s; +} +.input__field{ + height: 64px; + + padding: 31px 24px 14px 24px; + + height: 64px; + + background-color: var(--background-grey-hover); + border: none; + border-radius: 4px; + + font-weight: 400; + font-size: 16px; + color: var(--text-white); + + outline: none; + transition: all 0.3s; +} +.input__field:hover{ + border: 1px solid var(--text-white); +} +.input__field:focus{ + border: 1px solid var(--text-white); +} +.input__field:placeholder-shown + .input__label{ + top: 22.5px; + left: 24px; + + font-weight: 400; + font-size: 16px; + color: var(--text-white); +} +.input__field:focus + .input__label{ + top: 14px; + left: 24px; + + + font-size: 12px; + color: var(--link); +} +.input__field:not(:placeholder-shown):invalid{ + border: 1px solid #ef120a; +} +.input__error{ + margin-top: 16px; + + font-weight: 400; + font-size: 12px; + text-transform: uppercase; + color: var(--text-white); + + display: none; +} +.form.checked .input__error{ + display: block; +} /* components */ /* header */ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 7f15edc..0914d06 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -361,10 +361,208 @@ /* projects */ .projects{ - margin: 34px -20px -20px -20px; + margin: 37px -20px -20px -20px; + + display: flex; + flex-wrap: wrap; +} +.projects__item{ + margin: 20px; + + width: calc(50% - 40px); + + display: flex; + flex-direction: column; + + border-radius: 4px; + overflow: hidden; +} +.projects-item__img{ + width: 100%; + height: 304px; + + object-fit: cover; +} +.projects-item__content{ + min-height: 275px; + + padding: 32px; + + background-color: var(--background-grey); +} +.projects-item__tags{ + display: flex; + align-items: center; +} +.projects-item__tag{ + margin-left: 40px; + + display: flex; + align-items: center; +} +.projects-item__tag:first-child{ + margin-left: 0; +} +.projects-item-tag__icon{ + width: 24px; + aspect-ratio: 1; +} +.projects-item-tag__name{ + margin-left: 16px; +} +.projects-item__text{ + margin-top: 32px; +} +.projects-item__text .text-2{ + margin-top: 16px; +} +.projects__next{ + margin-top: 56px; + + display: flex; + justify-content: center; } /* projects */ +/* how */ +.how{ + margin-top: 56px; + + display: flex; +} +.how__control{ + width: 577px; + + flex-shrink: 0; +} +.how-control__item{ + margin-top: 24px; + + padding: 16px; + + display: flex; + align-items: center; + + background-color: var(--background-grey); + border-radius: 4px; + + transition: background-color .3s; +} +.how-control__item:first-child{ + margin-top: 0; +} +.how-control-item__number{ + width: 64px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 4px; + background-color: var(--background-grey-hover); + + transition: background-color .3s; +} +.how-control__item__name{ + margin-left: 24px; + + max-width: 440px; +} +.how-control__item:hover{ + background-color: var(--background-grey-hover); +} +.how-control__item:hover .how-control-item__number{ + background-color: var(--background-grey); +} +.how-control__item.active{ + background-color: var(--background-grey-hover); +} +.how-control__item.active .how-control-item__number{ + background-color: var(--background-grey); +} + +.how__content{ + margin-left: 40px; + + width: 100%; +} +.how-content__item{ + width: 100%; + + padding: 32px; + + background-color: var(--background-grey); + + overflow: hidden; + + display: none; +} +.how-content__item.active{ + display: block; +} +.how-content__item .text-2{ + margin-top: 16px; +} +.how-content-item__content{ + margin-top: 24px; + + display: flex; + + position: relative; +} +.how-content-item__content .text-2{ + margin-top: 16px; +} +.how-content-item__content .text-2:first-child{ + margin-top: 0; +} +.how-content-item__text{ + width: 480px; +} +.how-content-item__img--1{ + position: absolute; + right: -36px; + bottom: -39px; + + width: 303px; + height: 303px; +} +.how-content-item__img--2{ + position: absolute; + right: -34px; + bottom: -41px; +} +.how-content-item__img--3{ + position: absolute; + right: -31.98px; + bottom: -30.98px; + + width: 336px; + height: 336px; +} +/* how */ + +/* free */ +.free{ + padding: 88px 64px; + + display: flex; + flex-direction: column; + align-items: center; + + background-color: var(--background-grey); +} +/* .free > .title-1{ + text-align: center; +} */ +.free__content{ + margin-top: 56px; + + width: 800px; +} +/* free */ + /* services */ .services{ margin: 34px -20px -20px -20px; diff --git a/assets/img/icon/pin.svg b/assets/img/icon/pin.svg new file mode 100644 index 0000000..bc78ee8 --- /dev/null +++ b/assets/img/icon/pin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icon/square.svg b/assets/img/icon/square.svg new file mode 100644 index 0000000..5937275 --- /dev/null +++ b/assets/img/icon/square.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/photo/how-1.png b/assets/img/photo/how-1.png new file mode 100644 index 0000000..0cf6be2 Binary files /dev/null and b/assets/img/photo/how-1.png differ diff --git a/assets/img/photo/how-2.png b/assets/img/photo/how-2.png new file mode 100644 index 0000000..d93bd87 Binary files /dev/null and b/assets/img/photo/how-2.png differ diff --git a/assets/img/photo/how-3.png b/assets/img/photo/how-3.png new file mode 100644 index 0000000..0de40b6 Binary files /dev/null and b/assets/img/photo/how-3.png differ diff --git a/assets/img/photo/projects-1.png b/assets/img/photo/projects-1.png new file mode 100644 index 0000000..bde683f Binary files /dev/null and b/assets/img/photo/projects-1.png differ diff --git a/assets/img/photo/projects-2.png b/assets/img/photo/projects-2.png new file mode 100644 index 0000000..d4f3feb Binary files /dev/null and b/assets/img/photo/projects-2.png differ diff --git a/assets/img/photo/projects-3.png b/assets/img/photo/projects-3.png new file mode 100644 index 0000000..db72177 Binary files /dev/null and b/assets/img/photo/projects-3.png differ diff --git a/assets/img/photo/projects-4.png b/assets/img/photo/projects-4.png new file mode 100644 index 0000000..5c1b33a Binary files /dev/null and b/assets/img/photo/projects-4.png differ diff --git a/index.html b/index.html index 6a6e81b..b5e2851 100644 --- a/index.html +++ b/index.html @@ -305,7 +305,253 @@

- +
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
+
+ +
+

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

+

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

+
+
+
+ +
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
+
+ +
+

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

+

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

+
+
+
+ +
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
+
+ +
+

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

+

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

+
+
+
+ +
+ + +
+
+
+ + +

Локация

+
+ +
+ + +

Площадь

+
+
+ +
+

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

+

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

+
+
+
+
+ +
+ + все проекты + +
+ + +
+

+ Как мы это делаем? Не так просто, как кажется! +

+ +
+
+
+
+ 1 +
+ +

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

+
+ +
+
+ 2 +
+ +

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

+
+ +
+
+ 3 +
+ +

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

+
+
+ +
+
+

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

+ +
+
+

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

+

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

+

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

+
+ + +
+
+ +
+

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

+

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

+ +
+
+

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

+

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

+

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

+

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

+
+ + +
+
+ +
+

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

+ +
+
+

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

+

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

+

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

+
+ + +
+
+
+
+
+ +
+
+

+ Получи проект бесплатно +

+ +
+
+
+ + + error +
+ + +
+