diff --git a/assets/css/index.css b/assets/css/index.css index 1559fc0..9d9c0ad 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1778,4 +1778,153 @@ h3 { .conditions__advantage-text { font-size: 19px; } +} + +.how-it-work { + margin: 114px 0 110px; +} +@media (max-width: 768px) { + .how-it-work { + margin: 90px 0 80px; + } +} +.how-it-work .container { + position: relative; +} +.how-it-work__title { + margin: 18px 0; +} +@media (max-width: 768px) { + .how-it-work__title { + margin: 21px 0 25px; + } +} +.how-it-work__schedule { + display: flex; + align-items: flex-start; + gap: 50px; + padding: 45px 50px; + border-radius: 70px 22px; + background-color: #ffffff; +} +@media (max-width: 1240px) { + .how-it-work__schedule { + padding: 40px 24px; + gap: 24px; + } +} +@media (max-width: 768px) { + .how-it-work__schedule { + align-items: center; + padding: 0 0 10px; + overflow-x: auto; + overflow-y: hidden; + border-radius: 0; + background: rgba(255, 255, 255, 0); + } +} +.how-it-work__schedule-block { + flex: 0 0 calc(50% - 25px); + position: relative; + display: flex; + flex-direction: column; + gap: 38px; +} +@media (max-width: 1240px) { + .how-it-work__schedule-block { + flex: 0 0 calc(50% - 12px); + gap: 16px; + } +} +@media (max-width: 768px) { + .how-it-work__schedule-block { + flex: 0 0 auto; + flex-direction: row; + } +} +.how-it-work__schedule-block::before { + content: ""; + position: absolute; + top: 2px; + bottom: 2px; + z-index: 1; + left: 80px; + width: 1px; + height: 100%; + transform: translateX(-50%); + background-color: #2d2d2d; + opacity: 0.1; +} +@media (max-width: 992px) { + .how-it-work__schedule-block::before { + left: 64px; + } +} +@media (max-width: 768px) { + .how-it-work__schedule-block::before { + display: none; + } +} +.how-it-work__schedule-item { + position: relative; + z-index: 5; + display: flex; + align-items: center; + gap: 30px; +} +@media (max-width: 992px) { + .how-it-work__schedule-item { + gap: 16px; + } +} +@media (max-width: 768px) { + .how-it-work__schedule-item { + flex: 0 0 auto; + align-items: flex-start; + flex-direction: column; + } +} +.how-it-work__schedule-item-time { + display: flex; + justify-content: center; + width: 160px; + flex: 0 0 auto; +} +@media (max-width: 992px) { + .how-it-work__schedule-item-time { + width: 128px; + } +} +@media (max-width: 768px) { + .how-it-work__schedule-item-time { + width: auto; + } +} +.how-it-work__schedule-item-time-value { + width: -moz-fit-content; + width: fit-content; + padding: 8px 11px; + font-weight: 700; + font-size: 21px; + line-height: 100%; + text-align: center; + color: #ffffff; + border-radius: 64px; + background-color: #609eff; +} +@media (max-width: 992px) { + .how-it-work__schedule-item-time-value { + font-size: 14px; + } +} +.how-it-work__schedule-item-text { + font-weight: 500; + font-size: 22px; + line-height: 110%; + color: #616161; +} +@media (max-width: 992px) { + .how-it-work__schedule-item-text { + font-size: 18px; + } } \ No newline at end of file diff --git a/assets/scss/_l-how-it-work.scss b/assets/scss/_l-how-it-work.scss new file mode 100644 index 0000000..9fd63a4 --- /dev/null +++ b/assets/scss/_l-how-it-work.scss @@ -0,0 +1,142 @@ +.how-it-work { + margin: 114px 0 110px; + + @include tablet { + margin: 90px 0 80px; + } + + & .container { + position: relative; + } + + &__title { + margin: 18px 0; + + @include tablet { + margin: 21px 0 25px; + } + } + + &__schedule { + display: flex; + align-items: flex-start; + gap: 50px; + padding: 45px 50px; + border-radius: 70px 22px; + background-color: $white; + + @include desktop { + padding: 40px 24px; + gap: 24px; + } + + @include tablet { + align-items: center; + padding: 0 0 10px; + overflow-x: auto; + overflow-y: hidden; + border-radius: 0; + background: rgba($color: $white, $alpha: 0); + } + + &-block { + flex: 0 0 calc(50% - 25px); + position: relative; + display: flex; + flex-direction: column; + gap: 38px; + + @include desktop { + flex: 0 0 calc(50% - 12px); + gap: 16px; + } + + @include tablet { + flex: 0 0 auto; + flex-direction: row; + } + + &::before { + content: ''; + position: absolute; + top: 2px; + bottom: 2px; + z-index: 1; + left: 80px; + width: 1px; + height: 100%; + transform: translateX(-50%); + background-color: $black; + opacity: 0.1; + + @include laptop { + left: 64px; + } + + @include tablet { + display: none; + } + } + } + + &-item { + position: relative; + z-index: 5; + display: flex; + align-items: center; + gap: 30px; + + @include laptop { + gap: 16px; + } + + @include tablet { + flex: 0 0 auto; + align-items: flex-start; + flex-direction: column; + } + + &-time { + display: flex; + justify-content: center; + width: 160px; + flex: 0 0 auto; + + @include laptop { + width: 128px; + } + + @include tablet { + width: auto; + } + + &-value { + width: fit-content; + padding: 8px 11px; + font-weight: 700; + font-size: 21px; + line-height: 100%; + text-align: center; + color: $white; + border-radius: 64px; + background-color: $blue; + + @include laptop { + font-size: 14px; + } + } + } + + &-text { + font-weight: 500; + font-size: 22px; + line-height: 110%; + color: #616161; + + @include laptop { + font-size: 18px; + } + } + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 6b051f1..d23822c 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -25,3 +25,4 @@ @import './l-twelve-steps'; @import './l-why-program'; @import './l-conditions'; +@import './l-how-it-work'; diff --git a/index.html b/index.html index 6bf7b92..d409d28 100644 --- a/index.html +++ b/index.html @@ -1077,6 +1077,128 @@ + +
+
+
Распорядок дня
+ +

+ Как проходит
+ день на реабилитации +

+ +
+
+
+
+
07:00
+
+
Подъем
+
+ +
+
+
07:30-08:30
+
+
Утренняя медитация/молитва
+
+ +
+
+
08:30-09:30
+
+
Завтрак
+
+ +
+
+
09:30-11:00
+
+
Групповая терапия
+
+ +
+
+
11:00-11:30
+
+
Перерыв
+
+ +
+
+
11:30-13:00
+
+
Индивидуальная консультация
+
+ +
+
+
13:00-14:00
+
+
Обед
+
+ +
+
+
14:00-15:30
+
+
Трудотерапия/хобби-терапия
+
+
+ +
+
+
+
15:30-16:00
+
+
Свободное время
+
+ +
+
+
16:00-17:30
+
+
Встреча группы поддержки
+
+ +
+
+
17:30-19:00
+
+
Личное время
+
+ +
+
+
19:00-20:00
+
+
Ужин
+
+ +
+
+
20:00-21:30
+
+
Групповое занятие
+
+ +
+
+
21:30-22:30
+
+
Личное время
+
+ +
+
+
22:30
+
+
Отбой
+
+
+
+
+