diff --git a/assets/css/index.css b/assets/css/index.css index 7b1787a..2a90886 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -315,9 +315,11 @@ h3 { .button--dark:hover { color: #609eff; background-color: #ffffff; + border-color: #609eff; } .button--dark:active { color: #3081ff; + border-color: #3081ff; } .button--dark::before { filter: brightness(10); @@ -1026,7 +1028,6 @@ h3 { } .step-by-step { - display: none; margin: 98px 0 110px; } @media (max-width: 768px) { @@ -1046,12 +1047,36 @@ h3 { display: flex; gap: 84px; } +@media (max-width: 1240px) { + .step-by-step__wrapper { + gap: 42px 24px; + } +} +@media (max-width: 992px) { + .step-by-step__wrapper { + flex-direction: column; + } +} .step-by-step__controls { display: flex; flex-direction: column; gap: 36px; flex: 0 0 410px; } +@media (max-width: 1240px) { + .step-by-step__controls { + flex: 0 0 360px; + } +} +@media (max-width: 992px) { + .step-by-step__controls { + flex: 0 1 auto; + flex-direction: row; + gap: 20px; + padding-bottom: 10px; + overflow: auto; + } +} .step-by-step__controls-button { display: flex; align-items: center; @@ -1063,6 +1088,12 @@ h3 { transition: all ease-in-out 0.1s; cursor: pointer; } +@media (max-width: 992px) { + .step-by-step__controls-button { + flex: 0 0 auto; + padding: 8px 21px; + } +} .step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover { background-color: #609eff; border-color: #609eff; @@ -1081,11 +1112,17 @@ h3 { line-height: 146%; color: #878787; } +@media (max-width: 1240px) { + .step-by-step__controls-button-number { + font-size: 24px; + } +} .step-by-step__controls-button-text { font-weight: 400; font-size: 24px; line-height: 146%; color: #4d4d4d; + font-size: 20px; } .step-by-step__controls-button.active .step-by-step__controls-button-number { font-weight: 700; @@ -1100,4 +1137,103 @@ h3 { } .step-by-step__content { flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + padding: 26px 56px; + box-sizing: border-box; + border-radius: 22px 88px; + background-color: #ffffff; +} +@media (max-width: 992px) { + .step-by-step__content { + padding: 21px 27px; + border-radius: 10px 30px; + } +} +.step-by-step__card { + display: none; + max-width: 520px; +} +@media (max-width: 992px) { + .step-by-step__card { + max-width: none; + } +} +.step-by-step__card--wide { + max-width: none; +} +.step-by-step__card.active { + display: block; +} +.step-by-step__card-title { + margin: 0 0 13px; + font-weight: 600; + font-size: 34px; + line-height: 141%; + text-align: center; + color: #4d4d4d; +} +.step-by-step__card-text { + margin: 0 0 32px; + font-weight: 400; + font-size: 20px; + line-height: 146%; + text-align: center; + color: #878787; +} +.step-by-step__card-list { + display: flex; + flex-wrap: wrap; + gap: 24px; + margin: 0 0 40px; +} +@media (max-width: 576px) { + .step-by-step__card-list { + gap: 16px; + } +} +.step-by-step__card-list-item { + flex: 0 0 calc(33.3333333333% - 16px); + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} +@media (max-width: 576px) { + .step-by-step__card-list-item { + flex: 0 0 calc(50% - 8px); + } +} +.step-by-step__card-list-item-figure { + display: flex; + align-items: center; + justify-content: center; + height: 48px; + width: 48px; + border-radius: 48px; + background-color: #609eff; +} +.step-by-step__card-list-item-figure-image { + display: block; + max-width: 100%; + width: 24px; + height: auto; +} +.step-by-step__card-list-item-text { + font-weight: 600; + font-size: 17px; + line-height: 127%; + text-align: center; + color: #878787; +} +@media (max-width: 576px) { + .step-by-step__card-list-item-text { + font-size: 13px; + } +} +.step-by-step__card-buttons { + display: flex; + align-items: center; + justify-content: center; } \ No newline at end of file diff --git a/assets/img/icons/group.svg b/assets/img/icons/group.svg new file mode 100644 index 0000000..00ba9c4 --- /dev/null +++ b/assets/img/icons/group.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/img/icons/idea.svg b/assets/img/icons/idea.svg new file mode 100644 index 0000000..a5093fb --- /dev/null +++ b/assets/img/icons/idea.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/icons/meditation.svg b/assets/img/icons/meditation.svg new file mode 100644 index 0000000..d8cb13b --- /dev/null +++ b/assets/img/icons/meditation.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/icons/presentation.svg b/assets/img/icons/presentation.svg new file mode 100644 index 0000000..62e59ab --- /dev/null +++ b/assets/img/icons/presentation.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/img/icons/weightlifting.svg b/assets/img/icons/weightlifting.svg new file mode 100644 index 0000000..cd713c7 --- /dev/null +++ b/assets/img/icons/weightlifting.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/js/main.js b/assets/js/main.js index 995e4e5..1d6bad4 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1 +1,2 @@ import './sliders.js'; +import './step-by-step.js'; diff --git a/assets/js/step-by-step.js b/assets/js/step-by-step.js new file mode 100644 index 0000000..5f41831 --- /dev/null +++ b/assets/js/step-by-step.js @@ -0,0 +1,16 @@ +const stepByStepButtons = document.querySelectorAll('.step-by-step__controls-button'); +const stepByStepCards = document.querySelectorAll('.step-by-step__card'); +const stepByStepContent = document.querySelector('.step-by-step__content'); + +stepByStepButtons.forEach((button) => { + button.addEventListener('click', (event) => { + const targetId = event.currentTarget.dataset.target; + const targetCard = document.getElementById(targetId); + if (targetCard) { + stepByStepButtons.forEach((buttonElem) => buttonElem.classList.remove('active')); + stepByStepCards.forEach((card) => card.classList.remove('active')); + event.currentTarget.classList.add('active'); + targetCard.classList.add('active'); + } + }); +}); diff --git a/assets/scss/_l-step-by-step.scss b/assets/scss/_l-step-by-step.scss index 20405e2..126df7a 100644 --- a/assets/scss/_l-step-by-step.scss +++ b/assets/scss/_l-step-by-step.scss @@ -1,5 +1,4 @@ .step-by-step { - display: none; margin: 98px 0 110px; @include tablet { @@ -17,6 +16,14 @@ &__wrapper { display: flex; gap: 84px; + + @include desktop { + gap: 42px 24px; + } + + @include laptop { + flex-direction: column; + } } &__controls { @@ -25,6 +32,18 @@ gap: 36px; flex: 0 0 410px; + @include desktop { + flex: 0 0 360px; + } + + @include laptop { + flex: 0 1 auto; + flex-direction: row; + gap: 20px; + padding-bottom: 10px; + overflow: auto; + } + &-button { display: flex; align-items: center; @@ -36,6 +55,11 @@ transition: all ease-in-out 0.1s; cursor: pointer; + @include laptop { + flex: 0 0 auto; + padding: 8px 21px; + } + &:hover, &.active:hover { background-color: $blue; @@ -58,6 +82,10 @@ font-size: 28px; line-height: 146%; color: $grey; + + @include desktop { + font-size: 24px; + } } &-text { @@ -65,6 +93,8 @@ font-size: 24px; line-height: 146%; color: $darkgrey; + + font-size: 20px; } &.active &-number { @@ -86,5 +116,110 @@ &__content { flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + padding: 26px 56px; + box-sizing: border-box; + border-radius: 22px 88px; + background-color: $white; + + @include laptop { + padding: 21px 27px; + border-radius: 10px 30px; + } + } + + &__card { + display: none; + max-width: 520px; + + @include laptop { + max-width: none; + } + + &--wide { + max-width: none; + } + + &.active { + display: block; + } + + &-title { + margin: 0 0 13px; + font-weight: 600; + font-size: 34px; + line-height: 141%; + text-align: center; + color: $darkgrey; + } + + &-text { + margin: 0 0 32px; + font-weight: 400; + font-size: 20px; + line-height: 146%; + text-align: center; + color: $grey; + } + + &-list { + display: flex; + flex-wrap: wrap; + gap: 24px; + margin: 0 0 40px; + + @include mobile { + gap: 16px; + } + + &-item { + flex: 0 0 calc(100% / 3 - 24px / 3 * 2); + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + @include mobile { + flex: 0 0 calc(50% - 8px); + } + + &-figure { + display: flex; + align-items: center; + justify-content: center; + height: 48px; + width: 48px; + border-radius: 48px; + background-color: $blue; + + &-image { + display: block; + max-width: 100%; + width: 24px; + height: auto; + } + } + + &-text { + font-weight: 600; + font-size: 17px; + line-height: 127%; + text-align: center; + color: $grey; + + @include mobile { + font-size: 13px; + } + } + } + } + + &-buttons { + display: flex; + align-items: center; + justify-content: center; + } } } diff --git a/assets/scss/_m-button.scss b/assets/scss/_m-button.scss index 18e0489..b30cae9 100644 --- a/assets/scss/_m-button.scss +++ b/assets/scss/_m-button.scss @@ -70,10 +70,12 @@ &:hover { color: $blue; background-color: $white; + border-color: $blue; } &:active { color: $darkblue; + border-color: $darkblue; } &::before { diff --git a/index.html b/index.html index 7eb97a0..99b3361 100644 --- a/index.html +++ b/index.html @@ -498,46 +498,202 @@
- - - - - - -
-
-

- Вы оставляете заявку на нашем сайте или по телефону 8 (800) 101-21-27 -

-
+
+
+ Вы оставляете заявку на нашем сайте или по телефону
+ 8 (800) 101-21-27 +
+
Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах реабилитации и назначит дату прибытия в центр
-
+
+ +
+
+ +
+
+ Организуем трансфер от дома до центра бесплатно +
+
+ Если у вас нет возможности приехать самостоятельно или зависимый в тяжелом + состоянии, то самостоятельно заберем его и привезем на реабилитацию +
+
+ +
+
+ +
+
+ Приведем подопечного в чувство для последующего лечения (1-2 дня) +
+
+ Под наблюдением врачей безопасными способами выведем яды из организма, чтобы + облегчить состояние +
+
+ +
+
+ +
+
+ Даем подписать документы только в осознанном состоянии +
+
+ Ни один подопечный не находится в центре по принуждению, все проходит только с его + согласия и подтверждения этого в договорах +
+
+ +
+
+ +
+
+ Проводим полную перезагрузку жизни, учим жить без зависимостей +
+
+ Это ключевой этап выздоровления. Следуя передовой методике 12 шагов, психологи и + кураторы проведут глубинную терапию для устранения психологической тяги и + изменения моделей поведения. Групповые и индивидуальные занятия, тренинги помогут + пережить перезагрузку +
+
+
+
+ group +
+
Групповая терапия
+
+ +
+
+ mental-care +
+
+ Индивидуальные сессии с психологом +
+
+ +
+
+ idea +
+
Курирующий специалист
+
+ +
+
+ presentation +
+
Треннинги и ролевые игры
+
+ +
+
+ weightlifting +
+
+ Физические нагрузки, арт-терапия, прогулки +
+
+ +
+
+ meditation +
+
Дховные лекции, беседы
+
+
+
+ +
+
+ +
+
+ Даем инструментарий для успешной жизни после выхода из центра +
+
+ На финальной стадии проведем тренинги по восстановлению социальных навыков, + налаживанию новых связей. Сформируем новые сценарии, при которых не будет тяги + вернуться к веществам и алкоголю. Каждый выпускник получит сертификат, который + будет напоминать о пройденном пути +
+
+ +
+
+ +
+
+ Будем на связи и поддержим в сложных ситуациях после выпуска +
+
+ Покидая стены центра, реабилитант не останется один на один с проблемами. Мы будем + содействовать поиску работы/учебы, жилья, налаживанию новых связей. Группы + поддержки, волонтерство в центре и возможность обратиться к кураторам обеспечат + плавную адаптацию +
+