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 */ |
||||
|
||||
@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 { |
||||
--main-text: #e1667c; |
||||
--main-color: #8da6cb; |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
--font-family: "Proxima Nova", 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) { |
||||
|
||||
/* 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) { |
||||
.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) {} |
||||
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