diff --git a/assets/css/index.css b/assets/css/index.css index 2e4dbff..b306042 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -572,4 +572,141 @@ img { .first-screen__buttons > .button { width: 100%; } +} + +.advantages { + margin: 51px 0 116px; +} +.advantages .container { + display: flex; + flex-wrap: wrap; + gap: 39px 34px; +} +@media (max-width: 1240px) { + .advantages .container { + gap: 24px; + } +} +.advantages__item { + padding: 36px 36px 28px; + box-sizing: border-box; + border-radius: 22px 40px; + background-color: #ffffff; +} +@media (max-width: 768px) { + .advantages__item { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px 24px; + } +} +@media (max-width: 576px) { + .advantages__item { + padding: 30px 19px; + } +} +.advantages__item--counter { + flex: 1 1 440px; + display: flex; + flex-direction: column; + gap: 20px; + padding: 0; + background-color: rgba(255, 255, 255, 0); +} +@media (max-width: 1240px) { + .advantages__item--counter { + flex: 1 1 100%; + align-items: center; + } +} +@media (max-width: 576px) { + .advantages__item--counter { + gap: 8px; + } +} +.advantages__item--conditions { + flex: 0 1 666px; +} +.advantages__item--detox { + flex: 0 1 454px; +} +.advantages__item--center, .advantages__item--support { + flex: 1 1 20%; +} +@media (max-width: 1240px) { + .advantages__item--conditions, .advantages__item--detox, .advantages__item--center, .advantages__item--support { + flex: 1 1 calc(50% - 12px); + } +} +@media (max-width: 768px) { + .advantages__item--conditions, .advantages__item--detox, .advantages__item--center, .advantages__item--support { + flex: 1 1 100%; + } +} +.advantages__item-figure { + display: flex; + align-items: center; + justify-content: center; + height: 66px; + width: 66px; + margin: 0 0 20px; + border-radius: 80px; + background-color: #609eff; +} +@media (max-width: 768px) { + .advantages__item-figure { + height: 55px; + width: 55px; + } +} +.advantages__item-figure-image { + display: block; + max-width: 100%; + height: auto; +} +@media (max-width: 768px) { + .advantages__item-figure-image { + width: 28px; + } +} +.advantages__item-text { + font-weight: 500; + font-size: 19px; + line-height: 146%; + color: #878787; +} +@media (max-width: 768px) { + .advantages__item-text { + font-size: 18px; + line-height: 141%; + text-align: center; + } +} +.advantages__item-text--counter { + font-weight: 500; + font-size: 17px; + line-height: 122%; + color: #878787; +} +@media (max-width: 576px) { + .advantages__item-text--counter { + font-size: 15px; + } +} +.advantages__item-text b { + font-weight: 700; +} +.advantages__item-counter { + font-weight: 700; + font-size: 174px; + line-height: 94%; + letter-spacing: 0.06em; + text-transform: uppercase; + color: #609eff; +} +@media (max-width: 576px) { + .advantages__item-counter { + font-size: 120px; + } } \ No newline at end of file diff --git a/assets/img/icons/convenient.svg b/assets/img/icons/convenient.svg new file mode 100644 index 0000000..06260d8 --- /dev/null +++ b/assets/img/icons/convenient.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/img/icons/heart.svg b/assets/img/icons/heart.svg new file mode 100644 index 0000000..b5cc5ea --- /dev/null +++ b/assets/img/icons/heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/icons/hospital.svg b/assets/img/icons/hospital.svg new file mode 100644 index 0000000..ec3fe52 --- /dev/null +++ b/assets/img/icons/hospital.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icons/mental-care.svg b/assets/img/icons/mental-care.svg new file mode 100644 index 0000000..2d0928a --- /dev/null +++ b/assets/img/icons/mental-care.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/scss/_l-advantages.scss b/assets/scss/_l-advantages.scss new file mode 100644 index 0000000..c941e84 --- /dev/null +++ b/assets/scss/_l-advantages.scss @@ -0,0 +1,142 @@ +.advantages { + margin: 51px 0 116px; + + & .container { + display: flex; + flex-wrap: wrap; + gap: 39px 34px; + + @include desktop { + gap: 24px; + } + } + + &__item { + padding: 36px 36px 28px; + box-sizing: border-box; + border-radius: 22px 40px; + background-color: $white; + + @include tablet { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px 24px; + } + + @include mobile { + padding: 30px 19px; + } + + &--counter { + flex: 1 1 440px; + display: flex; + flex-direction: column; + gap: 20px; + padding: 0; + background-color: rgba($color: $white, $alpha: 0); + + @include desktop { + flex: 1 1 100%; + align-items: center; + } + + @include mobile { + gap: 8px; + } + } + + &--conditions { + flex: 0 1 666px; + } + + &--detox { + flex: 0 1 454px; + } + + &--center, + &--support { + flex: 1 1 20%; + } + + &--conditions, + &--detox, + &--center, + &--support { + @include desktop { + flex: 1 1 calc(50% - 24px / 2); + } + + @include tablet { + flex: 1 1 100%; + } + } + + &-figure { + display: flex; + align-items: center; + justify-content: center; + height: 66px; + width: 66px; + margin: 0 0 20px; + border-radius: 80px; + background-color: $blue; + + @include tablet { + height: 55px; + width: 55px; + } + + &-image { + display: block; + max-width: 100%; + height: auto; + + @include tablet { + width: 28px; + } + } + } + + &-text { + font-weight: 500; + font-size: 19px; + line-height: 146%; + color: $grey; + + @include tablet { + font-size: 18px; + line-height: 141%; + text-align: center; + } + + &--counter { + font-weight: 500; + font-size: 17px; + line-height: 122%; + color: $grey; + + @include mobile { + font-size: 15px; + } + } + + & b { + font-weight: 700; + } + } + + &-counter { + font-weight: 700; + font-size: 174px; + line-height: 94%; + letter-spacing: 0.06em; + text-transform: uppercase; + color: $blue; + + @include mobile { + font-size: 120px; + } + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index b695c9a..d8c7e7f 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -18,3 +18,4 @@ @import './l-main'; @import './l-footer'; @import './l-first-screen'; +@import './l-advantages'; diff --git a/index.html b/index.html index 8ed20db..236cd6a 100644 --- a/index.html +++ b/index.html @@ -52,9 +52,7 @@
-
- Реабилитационный центр и социальная адаптация -
+
Реабилитационный центр и социальная адаптация

Лечение алкоголизма и наркомании в Томске

@@ -101,9 +99,72 @@ - + +
+
+ +
+ +
+
+
+
340+
+
+ Человек смогли побороть зависимость вместе с нами +
+
+ +
+
+ convenient +
+
+ Комфортные условия проживания под круглосуточным присмотром наших специалистов
+ +
+
+ heart +
+
+ Поддержка на всех этапах: детокс - реабилитация - социальная адаптация +
+
+ +
+
+ hospital +
+
+ Наш центр успешно работает более 8-ми лет +
+
+ +
+
+ mental-care +
+
Психологическая поддержка родственников
+