Compare commits
43 Commits
| Author | SHA1 | Date |
|---|---|---|
Kirill Pet
|
078f77b44b | 8 months ago |
|
Kirill Pet
|
5bb2a18ae3 | 8 months ago |
|
Kirill Pet
|
9ec0db852e | 8 months ago |
|
Kirill Pet
|
86eb54bb5c | 8 months ago |
|
Kirill Pet
|
5b0a62233e | 8 months ago |
|
Kirill Pet
|
a68e12af2f | 8 months ago |
|
Kirill Pet
|
d272e126ad | 8 months ago |
|
Kirill Pet
|
d04ff5db02 | 8 months ago |
|
Kirill Pet
|
9422a0c347 | 8 months ago |
|
Kirill Pet
|
ae087de19f | 8 months ago |
|
Kirill Pet
|
29021ee1e5 | 8 months ago |
|
Kirill Pet
|
74fb21358e | 8 months ago |
|
Kirill Pet
|
81faffc0a1 | 8 months ago |
|
Kirill Pet
|
3df5fbf291 | 8 months ago |
|
Kirill Pet
|
7983a28c7a | 8 months ago |
|
Kirill Pet
|
d7f32deadf | 8 months ago |
|
Kirill Pet
|
0f3b5cd7e8 | 8 months ago |
|
Kirill Pet
|
ff26f2213c | 8 months ago |
|
Kirill Pet
|
ac728ce829 | 8 months ago |
|
Kirill Pet
|
6bf3962541 | 8 months ago |
|
Kirill Pet
|
9fc5e1cb5f | 8 months ago |
|
Kirill Pet
|
dec1a3b62a | 8 months ago |
|
Kirill Pet
|
f32e1eb3fb | 8 months ago |
|
Kirill Pet
|
ce39d4028e | 8 months ago |
|
Kirill Pet
|
abc8f59a8e | 8 months ago |
|
Kirill Pet
|
c007fff12e | 8 months ago |
|
Kirill Pet
|
6ae52a7795 | 8 months ago |
|
Kirill Pet
|
f801ab4569 | 8 months ago |
|
Kirill Pet
|
352e1ead99 | 8 months ago |
|
Kirill Pet
|
b155852f9c | 8 months ago |
|
Kirill Pet
|
6bc4c7213c | 8 months ago |
|
Kirill Pet
|
96948651b2 | 8 months ago |
|
Kirill Pet
|
8ec1dd88d6 | 8 months ago |
|
Kirill Pet
|
c082f320f6 | 8 months ago |
|
Kirill Pet
|
d07d972c10 | 8 months ago |
|
Kirill Pet
|
dd58ea60e5 | 8 months ago |
|
Kirill Pet
|
077f5baf53 | 8 months ago |
|
Kirill Pet
|
cd23fb02ae | 8 months ago |
|
Kirill Pet
|
bf2dd875e0 | 8 months ago |
|
Kirill Pet
|
72ea7506a3 | 8 months ago |
|
Kirill Pet
|
73acc61c2b | 8 months ago |
|
Kirill Pet
|
3396d6e974 | 8 months ago |
|
Kirill Pet
|
13da123645 | 8 months ago |
@ -1,16 +1,487 @@ |
|||||||
/* Переменные, шрифты, UI kit */ |
/* Переменные, шрифты, UI kit */ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "Proxima Nova"; |
||||||
|
src: local("Proxima Nova Bold"), |
||||||
|
local("ProximaNova-Bold"), |
||||||
|
url("/assets/fonts/ProximaNova-Bold.woff2") format("woff2"), |
||||||
|
url("/assets/fonts/ProximaNova-Bold.woff") format("woff"), |
||||||
|
url("/assets/fonts/ProximaNova-Bold.ttf") format("ttf"); |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "Proxima Nova"; |
||||||
|
src: local("Proxima Nova Semibold"), |
||||||
|
local("ProximaNova-Semibold"), |
||||||
|
url("/assets/fonts/ProximaNova-Semibold.woff2") format("woff2"), |
||||||
|
url("/assets/fonts/ProximaNova-Semibold.woff") format("woff"), |
||||||
|
url("/assets/fonts/ProximaNova-Semibold.ttf") format("ttf"); |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "Proxima Nova"; |
||||||
|
src: local("Proxima Nova Regular"), |
||||||
|
local("ProximaNova-Regular"), |
||||||
|
url("/assets/fonts/ProximaNova-Regular.woff2") format("woff2"), |
||||||
|
url("/assets/fonts/ProximaNova-Regular.woff") format("woff"), |
||||||
|
url("/assets/fonts/ProximaNova-Regular.ttf") format("ttf"); |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "Proxima Nova"; |
||||||
|
src: local("Proxima Nova Light"), |
||||||
|
local("ProximaNova-Light"), |
||||||
|
url("/assets/fonts/ProximaNova-Light.woff2") format("woff2"), |
||||||
|
url("/assets/fonts/ProximaNova-Light.woff") format("woff"), |
||||||
|
url("/assets/fonts/ProximaNova-Light.ttf") format("ttf"); |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
/* |
|
||||||
|
|
||||||
ШАБЛОН использования глобальных переменных: |
*{ |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
:root { |
:root { |
||||||
--main-text: #e1667c; |
--font-family: "Proxima Nova", sans-serif; |
||||||
--main-color: #8da6cb; |
|
||||||
--font-family: "Craftwork Grotesk", sans-serif; |
--red: #d3241d; |
||||||
|
--blood: #ae0b05; |
||||||
|
|
||||||
|
--background-main: #111114; |
||||||
|
--background-grey: #2a2a2d; |
||||||
|
--background-grey-hover: #46464a; |
||||||
|
|
||||||
|
--link: #86868b; |
||||||
|
|
||||||
|
--text-white: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
background-color: var(--background-main); |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
} |
||||||
|
|
||||||
|
.modal{ |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
|
||||||
|
height: 100vh; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
background-color: rgba(17, 17, 20, .8); |
||||||
|
|
||||||
|
z-index: 100; |
||||||
|
|
||||||
|
pointer-events: none; |
||||||
|
|
||||||
|
transition: opacity .3s; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.modal.active{ |
||||||
|
pointer-events: auto; |
||||||
|
|
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.modal__item{ |
||||||
|
padding: 88px 64px; |
||||||
|
|
||||||
|
background-color: var(--background-main); |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
display: none; |
||||||
|
} |
||||||
|
.modal__item.active{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* text */ |
||||||
|
.title-1{ |
||||||
|
font-weight: 700; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.title-2{ |
||||||
|
font-weight: 700; |
||||||
|
color: var(--text-white); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.title-3{ |
||||||
|
font-weight: 700; |
||||||
|
color: var(--text-white); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.title-4{ |
||||||
|
font-weight: 700; |
||||||
|
color: var(--text-white); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.title--center{ |
||||||
|
text-align: center; |
||||||
} |
} |
||||||
|
.text-1{ |
||||||
|
font-weight: 400; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.text-2{ |
||||||
|
font-weight: 400; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.text-3{ |
||||||
|
font-weight: 400; |
||||||
|
color: var(--text-white); |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
.text--bo-line{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
/* text */ |
||||||
|
|
||||||
|
/* components */ |
||||||
|
.btn-social{ |
||||||
|
margin-left: 16px; |
||||||
|
|
||||||
|
width: 40px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
padding: 8px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
border-radius: 4px; |
||||||
|
|
||||||
|
background-color: var(--background-grey); |
||||||
|
|
||||||
|
transition: background-color .3s; |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.btn-social:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.btn-social:hover{ |
||||||
|
background-color: var(--background-grey-hover); |
||||||
|
} |
||||||
|
.btn-social:active{ |
||||||
|
background-color: var(--background-grey-hover); |
||||||
|
} |
||||||
|
.btn-social> img{ |
||||||
|
width: 24px; |
||||||
|
aspect-ratio: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-big{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
padding: 22.5px 32px; |
||||||
|
|
||||||
*/ |
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-white); |
||||||
|
text-decoration: none; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
border-radius: 4px; |
||||||
|
|
||||||
|
transition: background-color .3s; |
||||||
|
background-color: rgba(17, 17, 20, 0); |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.btn-big--border{ |
||||||
|
padding: 21px 32px; |
||||||
|
|
||||||
|
border: 1px solid; |
||||||
|
} |
||||||
|
.btn-big--border--blood{ |
||||||
|
border-color: var(--blood); |
||||||
|
} |
||||||
|
.btn-big--border--blood:hover{ |
||||||
|
background-color: var(--red); |
||||||
|
} |
||||||
|
.btn-big--border--blood:active{ |
||||||
|
background-color: var(--blood); |
||||||
|
} |
||||||
|
.btn-big--border--white{ |
||||||
|
border-color: var(--text-white); |
||||||
|
} |
||||||
|
.btn-big--border--white:hover{ |
||||||
|
background-color: var(--background-grey-hover); |
||||||
|
} |
||||||
|
.btn-big--border--white:active{ |
||||||
|
background-color: rgba(17, 17, 20, 0); |
||||||
|
} |
||||||
|
.btn-big--blood{ |
||||||
|
background-color: var(--blood); |
||||||
|
} |
||||||
|
.btn-big--blood:hover{ |
||||||
|
background-color: var(--red); |
||||||
|
} |
||||||
|
.btn-big--blood:active{ |
||||||
|
background-color: var(--blood); |
||||||
|
} |
||||||
|
|
||||||
|
.btn-big--social{ |
||||||
|
padding-right: 66px; |
||||||
|
|
||||||
|
background-position: top 20px right 34px; |
||||||
|
background-size: 24px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.btn-big--tg{ |
||||||
|
background-image: url(/assets/img/social/telegram.svg); |
||||||
|
} |
||||||
|
.btn-big--ws{ |
||||||
|
background-image: url(/assets/img/social/whatsapp.svg); |
||||||
|
} |
||||||
|
|
||||||
|
.btn--100-per{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.link{ |
||||||
|
font-weight: 400; |
||||||
|
text-transform: uppercase; |
||||||
|
text-decoration: underline; |
||||||
|
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; |
||||||
|
|
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
|
||||||
|
.form__item{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.form__item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.form__item--two{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.form__item--two .input__block{ |
||||||
|
width: calc(50% - 8px); |
||||||
|
} |
||||||
|
.form__additional{ |
||||||
|
margin-top: 32px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.form__additional input[type="file"]{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.form-additional__text{ |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
.form input[type=submit]{ |
||||||
|
margin-top: 32px; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
|
||||||
|
border: none; |
||||||
|
} |
||||||
|
.form__link{ |
||||||
|
margin-left: 6px; |
||||||
|
|
||||||
|
font-size: 16px; |
||||||
|
text-transform: uppercase; |
||||||
|
text-decoration: underline; |
||||||
|
text-decoration-skip-ink: none; |
||||||
|
color: var(--link); |
||||||
|
} |
||||||
|
.form__file{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.form__mini-btn{ |
||||||
|
background-color: var(--background-grey-hover); |
||||||
|
border: none; |
||||||
|
|
||||||
|
transition: all .3s; |
||||||
|
} |
||||||
|
.form__mini-btn:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
.form__checkbox{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.form__checkbox:checked + .form-checkbox__square{ |
||||||
|
border-color: var(--blood); |
||||||
|
|
||||||
|
background-image: url(/assets/img/icon/red-arrow.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
} |
||||||
|
.form.checked .form__checkbox:invalid + .form-checkbox__square{ |
||||||
|
border-color: var(--blood); |
||||||
|
} |
||||||
|
.form__checkbox-block{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.form-checkbox__square{ |
||||||
|
width: 18px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
border-radius: 4px; |
||||||
|
border: 1.50px solid var(--text-white); |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
/* components */ |
||||||
|
|
||||||
|
/* header */ |
||||||
|
.header__logo{ |
||||||
|
width: 74px; |
||||||
|
height: 64px; |
||||||
|
|
||||||
|
background-image: url(/assets/img/main/logo.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
/* header */ |
||||||
|
|
||||||
|
/* footer */ |
||||||
|
.footer__logo{ |
||||||
|
width: 74px; |
||||||
|
height: 64px; |
||||||
|
} |
||||||
|
.footer__menu{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.footer-menu__list{ |
||||||
|
list-style-type: none; |
||||||
|
|
||||||
|
font-weight: 400; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.footer-menu__list a{ |
||||||
|
color: var(--text-white); |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.footer__text{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
font-weight: 400; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.footer__text:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.footer__text--no-line{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.footer__media{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.footer__review{ |
||||||
|
width: 309px; |
||||||
|
height: 146px; |
||||||
|
} |
||||||
|
.footer__about{ |
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--link); |
||||||
|
} |
||||||
|
/* footer */ |
||||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,81 @@ |
|||||||
/* Стили для мобильных устройств */ |
/* Стили для мобильных устройств */ |
||||||
@media only screen and (max-width: 576px) { |
@media only screen and (max-width: 576px) { |
||||||
|
|
||||||
|
/* component */ |
||||||
|
.link{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* footer */ |
||||||
|
.footer{ |
||||||
|
padding: 40px 16px; |
||||||
|
} |
||||||
|
.footer__wrapper{ |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
display: block; |
||||||
|
} |
||||||
|
.footer__item{ |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
.footer__item:nth-child(2){ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.footer__contact .footer__item:nth-child(2), |
||||||
|
.footer__contact .footer__item:nth-child(3){ |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
.footer__contact{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.footer__contact .footer__item{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.footer-menu__item{ |
||||||
|
margin-left: 53px; |
||||||
|
} |
||||||
|
.footer-menu__item:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.footer-menu__list{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.footer-menu__list li{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.footer-menu__list li:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.footer__text{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.footer__about{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.footer-about__link{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
/* footer */ |
||||||
|
} |
||||||
|
|
||||||
|
/* services */ |
||||||
|
@media only screen and (max-width: 576px) { |
||||||
|
.services__content .title-4{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.services__item .text-2{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
/* services */ |
||||||
|
|
||||||
|
/* call */ |
||||||
|
.call .title-3{ |
||||||
|
font-size: 20px; |
||||||
} |
} |
||||||
|
/* call */ |
||||||
@ -1,5 +1,796 @@ |
|||||||
/* Стили для планшетов */ |
/* Стили для планшетов */ |
||||||
@media only screen and (max-width: 992px) { |
@media only screen and (max-width: 992px) { |
||||||
|
.wrapper{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.phone--hone{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* text */ |
||||||
|
.title-1{ |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
.title-2{ |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
.title-3{ |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
.title-4{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.text-1{ |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.text-2{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
/* text */ |
||||||
|
|
||||||
|
/* component */ |
||||||
|
.btn-big{ |
||||||
|
padding: 23.5px 19.5px; |
||||||
|
|
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
/* component */ |
||||||
|
|
||||||
|
/* header */ |
||||||
|
.header{ |
||||||
|
padding: 24px 16px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.header__wrapper{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.header__phone{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.header-phone__item{ |
||||||
|
margin-left: 24px; |
||||||
|
|
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
|
||||||
|
transition: opacity .3s; |
||||||
|
} |
||||||
|
.header-phone__item > img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.header-phone__item:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.header-phone__item:active{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
|
||||||
|
.button-menu{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.button-menu__open{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
transition: opacity .3s; |
||||||
|
} |
||||||
|
|
||||||
|
.phone-menu{ |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
right: 0; |
||||||
|
left: 0; |
||||||
|
|
||||||
|
height: 0; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
background-color: var(--background-main); |
||||||
|
|
||||||
|
z-index: 10; |
||||||
|
overflow: hidden; |
||||||
|
transition: all .3s; |
||||||
|
} |
||||||
|
.phone-menu.active{ |
||||||
|
height: 100vh; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
/* .phone-menu__block-content{ |
||||||
|
height: 0; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
z-index: 10; |
||||||
|
|
||||||
|
transition: all .5s; |
||||||
|
} */ |
||||||
|
.phone-menu__content{ |
||||||
|
padding: 104px 16px 40px 16px; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.phone-menu__sub{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 100%; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
padding: 104px 16px 40px 16px; |
||||||
|
|
||||||
|
background-color: var(--background-main); |
||||||
|
|
||||||
|
transition: all .5s; |
||||||
|
|
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.phone-menu__sub.open{ |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
.phone-menu__sub > li:nth-child(2) a{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
.phone-menu-content__close{ |
||||||
|
position: absolute; |
||||||
|
top: 40px; |
||||||
|
right: 16px; |
||||||
|
|
||||||
|
width: 32px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
background-image: url(/assets/img/icon/close.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
|
||||||
|
background-color: var(--background-main); |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.phone-menu__block{ |
||||||
|
margin-top: 32px; |
||||||
|
} |
||||||
|
.phone-menu__title{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 32px; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.phone-menu__list{ |
||||||
|
list-style-type: none; |
||||||
|
|
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.phone-menu__list a{ |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-white); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.phone-menu__list li{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.phone-menu__list li:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.phone-menu--next{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
background-image: url(/assets/img/icon/arrow-right.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center right; |
||||||
|
} |
||||||
|
|
||||||
|
.phone-menu__text{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
display: block; |
||||||
|
|
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.phone-menu__text:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.phone-menu__text > a { |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
.phone-menu__text--no-line{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.phone-social{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.phone-menu{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.phone-search{ |
||||||
|
position: absolute; |
||||||
|
top: 112px; |
||||||
|
left: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
|
||||||
|
display: block; |
||||||
|
|
||||||
|
transition: all .3s; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.phone-search.active{ |
||||||
|
height: 79px; |
||||||
|
} |
||||||
|
.phone-search.hidden{ |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
.phone-search__content{ |
||||||
|
padding: 16px; |
||||||
|
|
||||||
|
background-color: var(--background-grey-hover); |
||||||
|
} |
||||||
|
.phone-search__input{ |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
padding: 14.5px 23px; |
||||||
|
|
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-white); |
||||||
|
|
||||||
|
border: 1px solid var(--text-white); |
||||||
|
border-radius: 4px; |
||||||
|
|
||||||
|
background-color: rgba(0, 0, 0, 0); |
||||||
|
|
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.phone-search__input::placeholder{ |
||||||
|
color: var(--link); |
||||||
|
} |
||||||
|
.phone-search__found{ |
||||||
|
position: absolute; |
||||||
|
top: 95px; |
||||||
|
left: 16px; |
||||||
|
right: 16px; |
||||||
|
|
||||||
|
max-height: 256px; |
||||||
|
width: calc(100% - 32px); |
||||||
|
|
||||||
|
padding: 16px; |
||||||
|
|
||||||
|
background-color: var(--background-grey-hover); |
||||||
|
border-radius: 4px; |
||||||
|
|
||||||
|
overflow-y: auto; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.phone-search__found.active{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.phone-search__item{ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.phone-search__item{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.phone-search__item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.phone-search-item__img{ |
||||||
|
width: 64px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
.phone-search-item__content{ |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
.phone-search-item__art{ |
||||||
|
margin-top: 8px; |
||||||
|
|
||||||
|
color: var(--link); |
||||||
|
} |
||||||
|
.phone__open-search{ |
||||||
|
width: 32px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
border: none; |
||||||
|
background-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
.phone__open-search.active img:first-child{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
/* header */ |
||||||
|
|
||||||
|
/* footer */ |
||||||
|
.footer{ |
||||||
|
margin-top: 96px; |
||||||
|
} |
||||||
|
.footer__wrapper{ |
||||||
|
padding: 0 16px; |
||||||
|
|
||||||
|
justify-content: start; |
||||||
|
} |
||||||
|
.footer__item:nth-child(2){ |
||||||
|
margin-left: 38px; |
||||||
|
} |
||||||
|
.footer__contact{ |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.footer__contact .footer__item:nth-child(3){ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
/* footer */ |
||||||
|
} |
||||||
|
/* footer */ |
||||||
|
@media only screen and (max-width: 829px) { |
||||||
|
.footer__about{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 630px) { |
||||||
|
.footer__wrapper{ |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.footer__contact{ |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.footer__contact .footer__item:nth-child(2){ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
/* footer */ |
||||||
|
|
||||||
|
main{ |
||||||
|
padding: 0 16px; |
||||||
|
} |
||||||
|
|
||||||
|
/* space */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.space{ |
||||||
|
margin-top: 32px; |
||||||
|
} |
||||||
|
.space__content{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.space__consultation{ |
||||||
|
order: 1; |
||||||
|
|
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
max-width: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.space__consultation .btn-big{ |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
.space__statistics{ |
||||||
|
order: 2; |
||||||
|
|
||||||
|
margin-top: 40px; |
||||||
|
|
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
|
||||||
|
padding: 0; |
||||||
|
|
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.space-statistics__img{ |
||||||
|
position: static; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
min-height: 300px; |
||||||
} |
} |
||||||
|
.space-statistics__item{ |
||||||
|
margin-top: 16px; |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
width: calc(50% - 8px); |
||||||
|
height: 160px; |
||||||
|
|
||||||
|
background: #2a2a2d; |
||||||
|
} |
||||||
|
} |
||||||
|
/* space */ |
||||||
|
|
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.main__item{ |
||||||
|
margin-top: 96px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* gym */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.gym{ |
||||||
|
margin: 40px -16px 0 0; |
||||||
|
|
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.gym .swiper-wrapper{ |
||||||
|
flex-wrap: nowrap; |
||||||
|
} |
||||||
|
.gym .swiper-slide:nth-child(3){ |
||||||
|
display: flex; |
||||||
|
flex-direction: column-reverse; |
||||||
|
} |
||||||
|
.gym__item{ |
||||||
|
margin: 0; |
||||||
|
|
||||||
|
flex-direction: column-reverse; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.gym-item__img, .gym-item__text{ |
||||||
|
max-width: 100%; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
height: 179px; |
||||||
|
} |
||||||
|
.gym-item__img{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.gym-item-text__header .text-1{ |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
.gym-item-text__header .title-2{ |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
/* gym */ |
||||||
|
|
||||||
|
/* projects */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.projects{ |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.projects .swiper-wrapper{ |
||||||
|
margin: 40px 0 0 0; |
||||||
|
|
||||||
|
flex-wrap: nowrap; |
||||||
|
} |
||||||
|
.projects__item{ |
||||||
|
margin: 0; |
||||||
|
|
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
.projects-item__img{ |
||||||
|
height: 200px; |
||||||
|
} |
||||||
|
.projects-item__content{ |
||||||
|
padding: 16px; |
||||||
|
|
||||||
|
min-height: auto; |
||||||
|
} |
||||||
|
.projects-item__tag{ |
||||||
|
margin-left: 24px; |
||||||
|
} |
||||||
|
.projects-item__text{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.projects-item__text .text-1{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.projects__next{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.projects__counter{ |
||||||
|
margin-top: 40px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
font-weight: 400; |
||||||
|
font-size: 18px; |
||||||
|
color: var(--text-white); |
||||||
|
} |
||||||
|
|
||||||
|
.projects .swiper-button-next::after, .projects .swiper-button-prev::after{ |
||||||
|
position: static; |
||||||
|
|
||||||
|
font-size: 0; |
||||||
|
} |
||||||
|
.projects .swiper-button-next, .projects .swiper-button-prev{ |
||||||
|
position: static; |
||||||
|
|
||||||
|
margin-top: 0; |
||||||
|
|
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
} |
||||||
|
.projects .swiper-button-next{ |
||||||
|
margin-left: 40px; |
||||||
|
|
||||||
|
background-image: url(/assets/img/icon/slider-righ.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.projects .swiper-button-prev{ |
||||||
|
margin-right: 40px; |
||||||
|
|
||||||
|
background-image: url(/assets/img/icon/slider-left.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
} |
||||||
|
/* projects */ |
||||||
|
|
||||||
|
/* how */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.how{ |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
.how__content{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.how__control{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.how-control__item{ |
||||||
|
flex-direction: column; |
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.how-control-item__number{ |
||||||
|
width: 40px; |
||||||
|
|
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.how-control__item__name{ |
||||||
|
margin-top: 16px; |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
max-width: 100%; |
||||||
|
|
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.how-content__item-block{ |
||||||
|
position: static; |
||||||
|
} |
||||||
|
.how-content__item-block.active{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.how-content__item{ |
||||||
|
padding: 16px; |
||||||
|
} |
||||||
|
.how-content-item__text{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.how-content-item__img{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
/* how */ |
||||||
|
|
||||||
|
/* free */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.free{ |
||||||
|
padding: 40px 16px 39px 16px; |
||||||
|
} |
||||||
|
.free__content{ |
||||||
|
margin-top: 40px; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.form__item--two{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.form__item--two .input__block{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.form__item--two .input__block:nth-child(2){ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.form__additional, |
||||||
|
.form input[type=submit]{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.form__checkbox-block{ |
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.free .title-1{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* reviews */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.reviews__item{ |
||||||
|
padding-bottom: 71px; |
||||||
|
|
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.reviews-item-content-header__img{ |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
.reviews-item-content-header__block{ |
||||||
|
margin-left: 16px; |
||||||
|
|
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.reviews-item-content-header__item .text-2{ |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
.reviews-item-content-header__item:nth-child(2){ |
||||||
|
margin-top: 12px; |
||||||
|
|
||||||
|
justify-content: start; |
||||||
|
} |
||||||
|
.reviews-item-content__text{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.reviews-item__img{ |
||||||
|
margin-top: 24px; |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
height: 300px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.reviews-item__img-block{ |
||||||
|
margin-top: 24px; |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
height: 300px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.swiper-reviews-img{ |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.reviews-item__img-block .swiper-slide{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.reviews-item__img-block .swiper-slide img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.reviews .swiper-pagination{ |
||||||
|
bottom: 87px; |
||||||
|
|
||||||
|
padding-right: 0px; |
||||||
|
|
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.reviews .swiper-pagination-bullet{ |
||||||
|
width: 53px; |
||||||
|
} |
||||||
|
} |
||||||
|
/* reviews */ |
||||||
|
|
||||||
|
/* text-form */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.text-form__form{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.text-form__content .text-2{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
/* text-form */ |
||||||
|
|
||||||
|
/* services */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.services{ |
||||||
|
margin: 40px 0 0 0; |
||||||
|
} |
||||||
|
.services__item{ |
||||||
|
margin: 24px 0 0 0; |
||||||
|
|
||||||
|
padding: 16px; |
||||||
|
|
||||||
|
height: auto; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.services__item:nth-child(n){ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.services__item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.services__img{ |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
.services__content{ |
||||||
|
min-height: auto; |
||||||
|
} |
||||||
|
.services__content .title-4{ |
||||||
|
margin-top: 24px; |
||||||
|
/* margin-bottom: 0; */ |
||||||
|
} |
||||||
|
.services__item .text-2{ |
||||||
|
/* display: none; */ |
||||||
|
} |
||||||
|
} |
||||||
|
/* services */ |
||||||
|
|
||||||
|
/* call */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.call{ |
||||||
|
padding: 40px 16px 39px 16px; |
||||||
|
} |
||||||
|
.call__content{ |
||||||
|
margin-top: 40px; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
|
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.call__item{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.call__item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.call__item a{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.call__item a:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
/* call */ |
||||||
|
|
||||||
|
/* modal */ |
||||||
|
.modal__item{ |
||||||
|
padding: 64px 16px; |
||||||
|
} |
||||||
|
.modal__item > .form{ |
||||||
|
padding: 40px 0 0 0; |
||||||
|
} |
||||||
|
.modal-item__close{ |
||||||
|
top: 20px; |
||||||
|
right: 20px; |
||||||
|
} |
||||||
|
.modal__item .text--bo-line.form__link{ |
||||||
|
margin-top: 6px; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
/* modal */ |
||||||
|
|
||||||
|
@media only screen and (max-width: 992px) {} |
||||||
@ -1,2 +0,0 @@ |
|||||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
|
||||||
/*# sourceMappingURL=normalize.min.css.map */ |
|
||||||
@ -1 +0,0 @@ |
|||||||
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 187 B |
|
After Width: | Height: | Size: 194 B |
|
After Width: | Height: | Size: 217 B |
|
After Width: | Height: | Size: 473 B |
|
After Width: | Height: | Size: 253 B |
|
After Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 641 B |
|
After Width: | Height: | Size: 227 B |
|
After Width: | Height: | Size: 411 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 784 B |
|
After Width: | Height: | Size: 196 B |
|
After Width: | Height: | Size: 196 B |
|
After Width: | Height: | Size: 983 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 416 KiB |
|
After Width: | Height: | Size: 316 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 464 KiB |
|
After Width: | Height: | Size: 791 KiB |
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 745 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 877 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,449 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
const gymSwiper = new Swiper('.gym-swiper', { |
||||||
|
direction: 'horizontal', |
||||||
|
breakpoints: { |
||||||
|
320:{ |
||||||
|
slidesPerView: 1.20, |
||||||
|
spaceBetween: 24, |
||||||
|
}, |
||||||
|
996: { |
||||||
|
slidesPerView: 3 |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const reviewsSwiper = new Swiper('.reviews-swiper', { |
||||||
|
spaceBetween: 24, |
||||||
|
allowTouchMove: false, |
||||||
|
// If we need pagination
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
// Navigation arrows
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
// And if we need scrollbar
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
runCallbacksOnInit: true, |
||||||
|
// === new change
|
||||||
|
on: { |
||||||
|
slideChange: function(){ |
||||||
|
let offer = document.querySelector('#numberReviews'); |
||||||
|
offer.innerHTML = (this.activeIndex + 1); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
let swiperReviews = document.querySelectorAll('.swiper-reviews-img'); |
||||||
|
let reviewsSwiperImgs = {}; |
||||||
|
swiperReviews.forEach((review, index) => { |
||||||
|
let newClass = `swiper-reviews-img-${index}`; |
||||||
|
review.classList.add(newClass); |
||||||
|
|
||||||
|
reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, { |
||||||
|
pagination: { |
||||||
|
el: ".swiper-pagination", |
||||||
|
clickable: true, |
||||||
|
renderBullet: function (index, className) { |
||||||
|
return '<span class="' + className + '">' + "</span>"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const projectsSwiper = new Swiper('.projects-swiper', { |
||||||
|
direction: 'horizontal', |
||||||
|
breakpoints: { |
||||||
|
320:{ |
||||||
|
slidesPerView: 1, |
||||||
|
spaceBetween: 24, |
||||||
|
}, |
||||||
|
996: { |
||||||
|
slidesPerView: 10 |
||||||
|
}, |
||||||
|
}, |
||||||
|
// Navigation arrows
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
},
|
||||||
|
runCallbacksOnInit: true, |
||||||
|
// === new change
|
||||||
|
on: { |
||||||
|
slideChange: function(){ |
||||||
|
let offer = document.querySelector('#numberProjects'); |
||||||
|
offer.innerHTML = (this.activeIndex + 1); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// how
|
||||||
|
let itemButtons = document.querySelectorAll('.how-control__item'); |
||||||
|
itemButtons.forEach((button) => { |
||||||
|
let num = button.dataset.num; |
||||||
|
|
||||||
|
button.onclick = function name(params, index) { |
||||||
|
|
||||||
|
let activeContent = document.querySelector('.how-content__item-block.active'), |
||||||
|
activeButton = document.querySelector('.how-control__item.active'); |
||||||
|
|
||||||
|
if (activeContent.dataset.num == button.dataset.num) return; |
||||||
|
|
||||||
|
activeContent.style.height = `${activeContent.offsetHeight}px`; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
activeContent.style.height = '0px'; |
||||||
|
activeContent.classList.remove('active'); |
||||||
|
activeButton.classList.remove('active'); |
||||||
|
|
||||||
|
let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`), |
||||||
|
newButton = document.querySelector(`.how-control__item[data-num='${num}']`); |
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; |
||||||
|
newActive.style.height = newHeight; |
||||||
|
newActive.classList.add('active'); |
||||||
|
newButton.classList.add('active'); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
newActive.style.height = 'auto'; |
||||||
|
}, 300); |
||||||
|
}, 300); |
||||||
|
}, 0); |
||||||
|
}
|
||||||
|
}) |
||||||
|
|
||||||
|
let screenWidth = window.screen.width; |
||||||
|
if (screenWidth <= 992) { |
||||||
|
howPhone(); |
||||||
|
}else{ |
||||||
|
howPc(); |
||||||
|
} |
||||||
|
|
||||||
|
function howPc() { |
||||||
|
if (document.querySelector('.how__content').querySelector('.how-content__item-block')) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
let blocks = document.querySelectorAll('.how-content__item-block'), |
||||||
|
content = document.querySelector('.how__content'); |
||||||
|
|
||||||
|
blocks.forEach(block => { |
||||||
|
content.appendChild(block) |
||||||
|
}); |
||||||
|
} |
||||||
|
function howPhone() { |
||||||
|
|
||||||
|
if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
let buttons = document.querySelectorAll('.how-control__item'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
let num = button.dataset.num, |
||||||
|
block = document.querySelector(`.how-content__item-block[data-num='${num}']`); |
||||||
|
|
||||||
|
button.after(block); |
||||||
|
}); |
||||||
|
} |
||||||
|
// how end
|
||||||
|
|
||||||
|
// phone menu
|
||||||
|
addClosePhoneMenu('.phone-menu__content'); |
||||||
|
addClosePhoneMenu('.phone-menu__sub'); |
||||||
|
|
||||||
|
let btnOpenMenu = document.querySelector('.button-menu__open'); |
||||||
|
btnOpenMenu.onclick = function () { |
||||||
|
let block = document.querySelector('.phone-menu'), |
||||||
|
content = document.querySelector('.phone-menu__content'), |
||||||
|
contentHeight = content.offsetHeight + 'px'; |
||||||
|
|
||||||
|
block.style.height = contentHeight; |
||||||
|
} |
||||||
|
|
||||||
|
let closeMenu = document.querySelector('.phone-menu-content__close'); |
||||||
|
closeMenu.onclick = function () { |
||||||
|
let block = document.querySelector('.phone-menu'); |
||||||
|
|
||||||
|
block.style.height = '0px'; |
||||||
|
} |
||||||
|
|
||||||
|
let phoneList = document.querySelectorAll('.phone-menu__list'); |
||||||
|
phoneList.forEach(list => { |
||||||
|
let elementList = list.querySelectorAll('li'); |
||||||
|
|
||||||
|
elementList.forEach(element => { |
||||||
|
let nextList = element.querySelector('.phone-menu__sub'); |
||||||
|
|
||||||
|
if (nextList) { |
||||||
|
let button = element.querySelector('a'); |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
nextList.classList.add('open')
|
||||||
|
} |
||||||
|
|
||||||
|
nextList.querySelector('.phone-menu-content__close').onclick = function () { |
||||||
|
nextList.classList.remove('open')
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
function addClosePhoneMenu(classAdd) { |
||||||
|
document.querySelectorAll(classAdd).forEach(element => { |
||||||
|
let button = document.createElement('button'); |
||||||
|
button.className = "phone-menu-content__close"; |
||||||
|
|
||||||
|
let referenceElement = element.firstElementChild; |
||||||
|
|
||||||
|
element.insertBefore(button, referenceElement); |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
// phone menu end
|
||||||
|
|
||||||
|
// search
|
||||||
|
let openBtnSearch = document.querySelector('.header-menu-search__open'), |
||||||
|
blockSearchPc = document.querySelector('.header-menu__search'); |
||||||
|
|
||||||
|
openBtnSearch.onclick = function () { |
||||||
|
blockSearchPc.classList.toggle('active'); |
||||||
|
} |
||||||
|
|
||||||
|
let btnOpenSearchPhone = document.querySelector('.phone__open-search'), |
||||||
|
searchPhone = document.querySelector('.phone-search'); |
||||||
|
|
||||||
|
btnOpenSearchPhone.onclick = function () { |
||||||
|
if (!searchPhone.classList.contains('hidden')) { |
||||||
|
setTimeout(() => { |
||||||
|
searchPhone.classList.add('hidden'); |
||||||
|
}, 300); |
||||||
|
}else{ |
||||||
|
searchPhone.classList.remove('hidden'); |
||||||
|
} |
||||||
|
|
||||||
|
btnOpenSearchPhone.classList.toggle('active'); |
||||||
|
searchPhone.classList.toggle('active'); |
||||||
|
} |
||||||
|
|
||||||
|
// pc
|
||||||
|
let inputSearchPc = document.querySelector('.header-menu-search__input'), |
||||||
|
btnSearchPc = document.querySelector('.header-menu-search__btn'); |
||||||
|
|
||||||
|
btnSearchPc.onclick = function () { |
||||||
|
let value = inputSearchPc.value, |
||||||
|
newPost = { |
||||||
|
value: value, |
||||||
|
}; |
||||||
|
|
||||||
|
postSearch(newPost, 'pc'); |
||||||
|
} |
||||||
|
|
||||||
|
// phone
|
||||||
|
let inputSearchPhone = document.querySelector('.phone-search__input'); |
||||||
|
|
||||||
|
inputSearchPhone.addEventListener('input', function(event) { |
||||||
|
let value = event.target.value, |
||||||
|
newPost = { |
||||||
|
value: value, |
||||||
|
}; |
||||||
|
|
||||||
|
postSearch(newPost, 'phone'); |
||||||
|
}); |
||||||
|
|
||||||
|
function postSearch(newPost, device) { |
||||||
|
let contentPc = document.querySelector('.header-menu-search__found'), |
||||||
|
contentPhone = document.querySelector('.phone-search__found'); |
||||||
|
|
||||||
|
fetch('http://jsonplaceholder.typicode.com/posts', { |
||||||
|
method: 'POST', |
||||||
|
// body: JSON.stringify(newPost),
|
||||||
|
headers: { |
||||||
|
'Content-type': 'application/json; charset=UTF-8', |
||||||
|
}, |
||||||
|
}) |
||||||
|
.then((data) => { |
||||||
|
if (device == 'pc') { |
||||||
|
contentPc.innerHTML = ''; |
||||||
|
|
||||||
|
contentPc.innerHTML = `<div class="header-menu-search__item">
|
||||||
|
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img"> |
||||||
|
|
||||||
|
<div class="header-menu-search-item__content"> |
||||||
|
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> |
||||||
|
<p class="header-menu-search-item__art text-2">Артикул: STP1000C</p> |
||||||
|
</div> |
||||||
|
</div>`; |
||||||
|
|
||||||
|
contentPc.classList.add('active'); |
||||||
|
}else{ |
||||||
|
contentPhone.innerHTML = ''; |
||||||
|
|
||||||
|
contentPhone.innerHTML = `<div class="phone-search__item">
|
||||||
|
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img"> |
||||||
|
|
||||||
|
<div class="phone-search-item__content"> |
||||||
|
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> |
||||||
|
<p class="phone-search-item__art text-2">Артикул: STP1000C</p> |
||||||
|
</div> |
||||||
|
</div>`; |
||||||
|
|
||||||
|
contentPhone.classList.add('active'); |
||||||
|
} |
||||||
|
}).catch( |
||||||
|
() => { |
||||||
|
if (device == 'pc') { |
||||||
|
postError(contentPc); |
||||||
|
}else{ |
||||||
|
postError(contentPhone); |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function postError(divContent) { |
||||||
|
divContent.innerHTML = '' |
||||||
|
|
||||||
|
let p = document.createElement("p"); |
||||||
|
p.textContent = "Произошла ошибка" |
||||||
|
p.className = "header-menu-search__error text-2"; |
||||||
|
|
||||||
|
divContent.appendChild(p); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// search end
|
||||||
|
|
||||||
|
// open-modal
|
||||||
|
|
||||||
|
let openModals = document.querySelectorAll('.open-modal'), |
||||||
|
modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
openModals.forEach(openModal => { |
||||||
|
let modalName = openModal.dataset.modal; |
||||||
|
|
||||||
|
openModal.onclick = function () { |
||||||
|
let modalItem = document.querySelector(`.modal__item.${modalName}`); |
||||||
|
|
||||||
|
modalItem.classList.add('active'); |
||||||
|
modal.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
modal.onclick = function (event) { |
||||||
|
if (event.srcElement.classList.contains('modal')) { |
||||||
|
document.querySelector(`.modal__item.active`).classList.remove('active'); |
||||||
|
modal.classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let itemModels = document.querySelectorAll('.modal__item'); |
||||||
|
|
||||||
|
itemModels.forEach(item => { |
||||||
|
let btnClose = item.querySelector('.modal-item__close'); |
||||||
|
|
||||||
|
btnClose.onclick = function () { |
||||||
|
item.classList.remove('active'); |
||||||
|
modal.classList.remove('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
// open-modal end
|
||||||
|
|
||||||
|
// masks
|
||||||
|
|
||||||
|
let phoneInputs = document.querySelectorAll('.input__field[type=phone]'); |
||||||
|
|
||||||
|
phoneInputs.forEach(phoneInput => { |
||||||
|
phoneInput.onfocus = function (event) { |
||||||
|
let value = phoneInput.value; |
||||||
|
|
||||||
|
if (value.length == 0) { |
||||||
|
phoneInput.value = '+7 ' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
phoneInput.addEventListener('input', function(event) { |
||||||
|
let value = phoneInput.value, |
||||||
|
data = event.data, |
||||||
|
length = value.length; |
||||||
|
|
||||||
|
if (value.charAt(0) == '+' && length == 1) return; |
||||||
|
|
||||||
|
if (isNaN(data)) { |
||||||
|
phoneInput.value = value.slice(0, -1); |
||||||
|
} |
||||||
|
|
||||||
|
if (typeof data != 'object') { |
||||||
|
if (length == 2 || length == 6 || length == 10) { |
||||||
|
phoneInput.value = value + ' '; |
||||||
|
} |
||||||
|
if (length == 3 || length == 7 || length == 11) { |
||||||
|
if (data != ' ') { |
||||||
|
phoneInput.value = value.slice(0, -1) + ' ' + data; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (length <= 3) { |
||||||
|
phoneInput.value = '+7 ' |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
// masks end
|
||||||
|
|
||||||
|
// pc menu
|
||||||
|
|
||||||
|
let listMenu = document.querySelectorAll('.header-menu__list > li'); |
||||||
|
|
||||||
|
listMenu.forEach(li => { |
||||||
|
if (li.querySelector('.header-menu-list__next')) { |
||||||
|
let nextButton = li.querySelector('.header-menu-list__next'), |
||||||
|
sub = li.querySelector('.header-menu-list__sub'); |
||||||
|
|
||||||
|
nextButton.addEventListener('mouseover', function (event) { |
||||||
|
let openSubMenu = document.querySelector('.header-menu-list__sub.open'); |
||||||
|
|
||||||
|
if (openSubMenu) { |
||||||
|
openSubMenu.classList.remove('open'); |
||||||
|
} |
||||||
|
|
||||||
|
sub.classList.add('open'); |
||||||
|
}) |
||||||
|
|
||||||
|
sub.addEventListener('mouseout', function (event) { |
||||||
|
if (event.relatedTarget.offsetParent.tagName != 'UL') { |
||||||
|
sub.classList.remove('open'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}; |
||||||
|
}) |
||||||
|
|
||||||
|
// pc menu end
|
||||||
|
|
||||||
|
// resize
|
||||||
|
window.addEventListener('resize', () => { |
||||||
|
let screenWidth = window.screen.width; |
||||||
|
|
||||||
|
if (screenWidth <= 992) { |
||||||
|
howPhone(); |
||||||
|
}else{ |
||||||
|
howPc(); |
||||||
|
} |
||||||
|
}); |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@ |
|||||||
|
<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) --> |
||||||
|
<!-- <form class="form" method="post" action="/send-telegram.php"> |
||||||
|
<div class="form__item"> |
||||||
|
<input class="form__input" type="text" name="name" required> |
||||||
|
<label class="form__label">Ваше имя</label> |
||||||
|
</div> |
||||||
|
<div class="form__item"> |
||||||
|
<input class="form__input" type="text" name="phone" required> |
||||||
|
<label class="form__label">Номер телефона</label> |
||||||
|
</div> |
||||||
|
<input class="form__input btn" type="submit" value="Отправить"> |
||||||
|
</form> --> |
||||||
|
|
||||||
Loading…
Reference in new issue