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

сделал projects и how, а также input для ПК

Browse Source
fitness
Kirill Pet 8 months ago
parent dd58ea60e5
commit d07d972c10
12 changed files with 531 additions and 2 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. 77
      assets/css/gp-style-core.css
  2. 200
      assets/css/gp-style-desktop.css
  3. 4
      assets/img/icon/pin.svg
  4. 4
      assets/img/icon/square.svg
  5. BIN
      assets/img/photo/how-1.png
  6. BIN
      assets/img/photo/how-2.png
  7. BIN
      assets/img/photo/how-3.png
  8. BIN
      assets/img/photo/projects-1.png
  9. BIN
      assets/img/photo/projects-2.png
  10. BIN
      assets/img/photo/projects-3.png
  11. BIN
      assets/img/photo/projects-4.png
  12. 246
      index.html

77
assets/css/gp-style-core.css
Unescape View File

@ -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 */

200
assets/css/gp-style-desktop.css
Unescape View File

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

4
assets/img/icon/pin.svg
Unescape View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 10.2647C19 13.1109 15.4774 17.8245 13.43 20.3238C12.6809 21.2382 11.3191 21.2382 10.57 20.3238C8.52261 17.8245 5 13.1109 5 10.2647C5 6.25252 8.13401 3 12 3C15.866 3 19 6.25252 19 10.2647Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M14.6004 10.0001C14.6004 11.436 13.4363 12.6001 12.0004 12.6001C10.5645 12.6001 9.40039 11.436 9.40039 10.0001C9.40039 8.56408 10.5645 7.40002 12.0004 7.40002C13.4363 7.40002 14.6004 8.56408 14.6004 10.0001Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

4
assets/img/icon/square.svg
Unescape View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3273 10.3274L7.00001 7M7.00001 7H9.21823M7.00001 7L7 9.21825M13.6726 13.6726L17 17M17 17H14.7817M17 17V14.7818M10.3273 13.6726L7.00001 17M7.00001 17H9.21823M7.00001 17L7 14.7818M13.6726 10.3274L17 7M17 7H14.7817M17 7V9.21825" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15.1 2.5H8.9C6.65979 2.5 5.53969 2.5 4.68404 2.93597C3.93139 3.31947 3.31947 3.93139 2.93597 4.68404C2.5 5.53969 2.5 6.65979 2.5 8.9V15.1C2.5 17.3402 2.5 18.4603 2.93597 19.316C3.31947 20.0686 3.93139 20.6805 4.68404 21.064C5.53969 21.5 6.65979 21.5 8.9 21.5H15.1C17.3402 21.5 18.4603 21.5 19.316 21.064C20.0686 20.6805 20.6805 20.0686 21.064 19.316C21.5 18.4603 21.5 17.3402 21.5 15.1V8.9C21.5 6.65979 21.5 5.53969 21.064 4.68404C20.6805 3.93139 20.0686 3.31947 19.316 2.93597C18.4603 2.5 17.3402 2.5 15.1 2.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 983 B

BIN
assets/img/photo/how-1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
assets/img/photo/how-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
assets/img/photo/how-3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
assets/img/photo/projects-1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 KiB

BIN
assets/img/photo/projects-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

BIN
assets/img/photo/projects-3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 KiB

BIN
assets/img/photo/projects-4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 KiB

246
index.html
Unescape View File

@ -305,7 +305,253 @@
</p>
<article class="projects">
<div class="projects__item">
<img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div>
<div class="projects-item__text">
<p class="text-1">Название проекта</p>
<p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p>
</div>
</div>
</div>
<div class="projects__item">
<img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div>
<div class="projects-item__text">
<p class="text-1">Название проекта</p>
<p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p>
</div>
</div>
</div>
<div class="projects__item">
<img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div>
<div class="projects-item__text">
<p class="text-1">Название проекта</p>
<p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p>
</div>
</div>
</div>
<div class="projects__item">
<img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div>
<div class="projects-item__text">
<p class="text-1">Название проекта</p>
<p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p>
</div>
</div>
</div>
</article>
<div class="projects__next">
<a href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
все проекты
</a>
</div>
</div>
<div class="main__item">
<p class="title-1">
Как мы это делаем? Не так просто, как кажется!
</p>
<article class="how">
<div class="how__control">
<div class="how-control__item">
<div class="how-control-item__number title-3">
1
</div>
<p class="how-control__item__name text-1">
Проводим экспертизу помещения и определяем рыночный сегмент проекта
</p>
</div>
<div class="how-control__item">
<div class="how-control-item__number title-3">
2
</div>
<p class="how-control__item__name text-1">
Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен)
</p>
</div>
<div class="how-control__item">
<div class="how-control-item__number title-3">
3
</div>
<p class="how-control__item__name text-1">
Осуществляем детализацию концепции и функциональное наполнение клуба
</p>
</div>
</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>
<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>
<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>
<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">
<article class="free">
<p class="title-1">
Получи проект бесплатно
</p>
<div class="free__content">
<form class="form" method="post" action="/send-telegram.php">
<div class="input__block">
<input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required>
<label class="input__label">Имя</label>
<span class="input__error">error</span>
</div>
<input class="btn-big btn-big--blood" type="submit" value="оставить заявку">
</form>
</div>
</article>
</div>

Write Preview
Loading…
Cancel
Save