diff --git a/assets/css/index.css b/assets/css/index.css index 9d9c0ad..e0b3a3c 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1927,4 +1927,158 @@ h3 { .how-it-work__schedule-item-text { font-size: 18px; } +} + +.socialization { + margin: 110px 0 97px; +} +@media (max-width: 768px) { + .socialization { + margin: 90px 0 90px; + } +} +.socialization .container { + position: relative; +} +.socialization__title { + margin: 18px 0 22px; +} +@media (max-width: 768px) { + .socialization__title { + margin: 21px 0 8px; + } +} +.socialization__slider .swiper { + overflow: visible; +} +@media (max-width: 992px) { + .socialization__slider .swiper { + overflow: hidden; + } +} +.socialization__slider .swiper-wrapper { + position: static; + flex-wrap: wrap; +} +@media screen and (min-width: 992.1px) { + .socialization__slider .swiper-wrapper { + gap: 40px; + } +} +@media (max-width: 992px) { + .socialization__slider .swiper-wrapper { + position: relative; + flex-wrap: nowrap; + } +} +.socialization__slider .swiper-slide { + position: static; + height: auto; +} +@media screen and (min-width: 992.1px) { + .socialization__slider .swiper-slide { + flex: 0 0 calc(33.3333333333% - 26.6666666667px); + } +} +@media (max-width: 992px) { + .socialization__slider .swiper-slide { + position: relative; + } +} +@media screen and (min-width: 992.1px) { + .socialization__slider .swiper-slide:nth-child(-n+2) { + flex: 0 0 calc(50% - 20px); + } +} +.socialization__slide { + height: 100%; + padding: 24px 36px 34px; + box-sizing: border-box; + border-radius: 22px 40px; + background-color: #ffffff; +} +@media (max-width: 1240px) { + .socialization__slide { + padding: 24px 20px 36px; + } +} +@media (max-width: 992px) { + .socialization__slide { + padding: 24px 14px 36px; + } +} +.socialization__slide-figure { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + width: 64px; + margin: 0 0 18px; + border-radius: 64px; + background-color: #609eff; +} +@media (max-width: 992px) { + .socialization__slide-figure { + margin: 0 auto 18px; + } +} +.socialization__slide-figure-image { + display: block; + max-width: 100%; + height: auto; +} +.socialization__slide-count { + margin: 0 0 6px; + font-weight: 700; + font-size: 59px; + line-height: 127%; + letter-spacing: 0.05em; + color: #ffffff; + -webkit-text-stroke: 1px #609eff; +} +@media (max-width: 992px) { + .socialization__slide-count { + text-align: center; + } +} +@media (max-width: 576px) { + .socialization__slide-count { + font-size: 50px; + } +} +.socialization__slide-title { + margin: 0 0 9px; +} +@media (max-width: 992px) { + .socialization__slide-title { + text-align: center; + } +} +.socialization__slide-text { + margin: 0; + font-weight: 400; + font-size: 17px; + line-height: 146%; + color: #878787; +} +.socialization__slide-text > b { + font-weight: 600; +} +@media (max-width: 992px) { + .socialization__slide-text { + font-size: 15px; + text-align: center; + } +} +.socialization__slider-controls { + display: none; + justify-content: center; + align-items: center; + gap: 24px; + margin: 35px 0 0; +} +@media (max-width: 992px) { + .socialization__slider-controls { + display: flex; + } } \ No newline at end of file diff --git a/assets/img/icons/crest.svg b/assets/img/icons/crest.svg new file mode 100644 index 0000000..c6951a1 --- /dev/null +++ b/assets/img/icons/crest.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/img/icons/family.svg b/assets/img/icons/family.svg new file mode 100644 index 0000000..d7cea05 --- /dev/null +++ b/assets/img/icons/family.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/icons/hospital-building.svg b/assets/img/icons/hospital-building.svg new file mode 100644 index 0000000..ebad96f --- /dev/null +++ b/assets/img/icons/hospital-building.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/icons/pictures.svg b/assets/img/icons/pictures.svg new file mode 100644 index 0000000..7c8bb24 --- /dev/null +++ b/assets/img/icons/pictures.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/img/icons/repair-tools.svg b/assets/img/icons/repair-tools.svg new file mode 100644 index 0000000..7e8ef31 --- /dev/null +++ b/assets/img/icons/repair-tools.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/js/sliders.js b/assets/js/sliders.js index bd09f2d..d423fee 100644 --- a/assets/js/sliders.js +++ b/assets/js/sliders.js @@ -1,5 +1,6 @@ let factsSwiper = null; let whyProgramSwiper = null; +let socializationSwiper = null; let init = false; @@ -56,10 +57,35 @@ function swiperMode() { prevEl: '.why-program .button--prev', }, }); + + socializationSwiper = new Swiper('.socialization .swiper', { + loop: true, + slidesPerView: 1, + spaceBetween: 35, + breakpoints: { + 320: { + slidesPerView: 1.2, + }, + 480: { + slidesPerView: 1.4, + }, + 576: { + slidesPerView: 1.75, + }, + 700: { + slidesPerView: 2, + }, + }, + navigation: { + nextEl: '.socialization .button--next', + prevEl: '.socialization .button--prev', + }, + }); } } else { if (factsSwiper !== null) factsSwiper.destroy(); if (whyProgramSwiper !== null) whyProgramSwiper.destroy(); + if (socializationSwiper !== null) socializationSwiper.destroy(); init = false; } } diff --git a/assets/scss/_l-socialization.scss b/assets/scss/_l-socialization.scss new file mode 100644 index 0000000..0894479 --- /dev/null +++ b/assets/scss/_l-socialization.scss @@ -0,0 +1,154 @@ +.socialization { + margin: 110px 0 97px; + + @include tablet { + margin: 90px 0 90px; + } + + & .container { + position: relative; + } + + &__title { + margin: 18px 0 22px; + + @include tablet { + margin: 21px 0 8px; + } + } + + &__slider { + & .swiper { + overflow: visible; + + @include laptop { + overflow: hidden; + } + + &-wrapper { + position: static; + flex-wrap: wrap; + + @media screen and (min-width: 992.1px) { + gap: 40px; + } + + @include laptop { + position: relative; + flex-wrap: nowrap; + } + } + + &-slide { + position: static; + height: auto; + + @media screen and (min-width: 992.1px) { + flex: 0 0 calc(100% / 3 - 40px / 3 * 2); + } + + @include laptop { + position: relative; + } + + &:nth-child(-n + 2) { + @media screen and (min-width: 992.1px) { + flex: 0 0 calc(100% / 2 - 40px / 2); + } + } + } + } + } + + &__slide { + height: 100%; + padding: 24px 36px 34px; + box-sizing: border-box; + border-radius: 22px 40px; + background-color: $white; + + @include desktop { + padding: 24px 20px 36px; + } + + @include laptop { + padding: 24px 14px 36px; + } + + &-figure { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + width: 64px; + margin: 0 0 18px; + border-radius: 64px; + background-color: $blue; + + @include laptop { + margin: 0 auto 18px; + } + + &-image { + display: block; + max-width: 100%; + height: auto; + } + } + + &-count { + margin: 0 0 6px; + font-weight: 700; + font-size: 59px; + line-height: 127%; + letter-spacing: 0.05em; + color: $white; + -webkit-text-stroke: 1px $blue; + + @include laptop { + text-align: center; + } + + @include mobile { + font-size: 50px; + } + } + + &-title { + margin: 0 0 9px; + + @include laptop { + text-align: center; + } + } + + &-text { + margin: 0; + font-weight: 400; + font-size: 17px; + line-height: 146%; + color: $grey; + + & > b { + font-weight: 600; + } + + @include laptop { + font-size: 15px; + text-align: center; + } + } + } + + &__slider-controls { + display: none; + justify-content: center; + align-items: center; + gap: 24px; + margin: 35px 0 0; + + @include laptop { + display: flex; + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index d23822c..646a747 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -26,3 +26,4 @@ @import './l-why-program'; @import './l-conditions'; @import './l-how-it-work'; +@import './l-socialization'; diff --git a/index.html b/index.html index d409d28..f460df1 100644 --- a/index.html +++ b/index.html @@ -1199,6 +1199,114 @@ + +
+
+
Социальная жизнь
+ +

+ Участник программы
+ не выбивается из социальной жизни +

+ +
+
+
+
+
+
+ family +
+

Встречи с родными

+

+ По рекомендации лечащего врача и при согласовании с куратором близкие могут + посещать участника программы. Их поддержка очень важна для вас в этот + непростой период +

+
+
+ +
+
+
+ pictures +
+

Передачи из дома

+

+ Разрешается получать переданные родственниками вещи первой необходимости, + предметы гигиены, фото и письма, вселяющие дополнительные позитивные эмоции +

+
+
+ +
+
+
+ hospital-building +
+

Посещение клиник

+

+ При необходимости прохождения диагностических процедур или плановых осмотров у + сторонних специалистов, участника могут отвезти к специалисту +

+
+
+ +
+
+
+ crest +
+

Официальные инстанции

+

+ Если требуется ваше присутствие в государственных учреждениях (миграционная + служба, суд, милиция), мы обеспечим безопасный трансфер и сопровождение +

+
+
+ +
+
+
+ repair-tools +
+

Налаживание быта

+

+ По мере восстановления социальных навыков вы сможете совершать вылазки в город + для решения бытовых вопросов под наблюдением кураторов +

+
+
+
+
+
+ +
+ + +
+
+