diff --git a/assets/css/index.css b/assets/css/index.css index e0b3a3c..750a1c2 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1937,9 +1937,6 @@ h3 { margin: 90px 0 90px; } } -.socialization .container { - position: relative; -} .socialization__title { margin: 18px 0 22px; } @@ -2081,4 +2078,162 @@ h3 { .socialization__slider-controls { display: flex; } +} + +.price { + margin: 100px 0; +} +@media (max-width: 768px) { + .price { + margin: 90px 0; + } +} +.price__title { + margin: 21px 0 24px; +} +@media (max-width: 768px) { + .price__title { + margin: 18px 0 37px; + } +} +.price__list { + display: flex; + flex-wrap: wrap; + gap: 40px 46px; +} +@media (max-width: 992px) { + .price__list { + gap: 30px 24px; + } +} +.price__list-item { + flex: 0 0 calc(50% - 23px); + display: flex; + flex-direction: column; + align-items: center; + padding: 35px 35px 40px; + box-sizing: border-box; + color: #2d2d2d; + border-radius: 8px 30px; + background-color: #ffffff; +} +@media (max-width: 992px) { + .price__list-item { + flex: 0 0 calc(50% - 12px); + border-radius: 8px 30px; + } +} +@media (max-width: 768px) { + .price__list-item { + flex: 1 1 100%; + } +} +.price__list-item--active { + color: #ffffff; + background-color: #609eff; +} +.price__list-item--active > * { + border-color: rgba(255, 255, 255, 0.1); +} +.price__list-item > * { + max-width: 410px; + width: 100%; + box-sizing: border-box; +} +.price__list-item-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + margin: 0 0 12px; + font-weight: 400; + font-size: 17px; + line-height: 122%; + text-align: center; +} +@media (max-width: 768px) { + .price__list-item-info { + font-size: 16px; + } +} +.price__list-item-info::before { + content: ""; + display: block; + border-radius: 100px; + width: 12px; + height: 12px; + background-color: #609eff; +} +.price__list-item--active .price__list-item-info::before { + background-color: #ffffff; +} +.price__list-item-title { + padding: 0 0 23px; + margin: 0; + font-weight: 600; + font-size: 33px; + line-height: 129%; + letter-spacing: 0.01em; + text-align: center; + border-bottom: 1px solid rgba(45, 45, 45, 0.2); +} +@media (max-width: 768px) { + .price__list-item-title { + padding: 0 0 19px; + font-size: 26px; + } +} +.price__list-item-time { + padding: 21px 0; + font-weight: 500; + font-size: 25px; + line-height: 129%; + letter-spacing: 0.01em; + text-align: center; + border-bottom: 1px solid rgba(45, 45, 45, 0.2); +} +@media (max-width: 768px) { + .price__list-item-time { + padding: 19px 0; + font-size: 23px; + } +} +.price__list-item-description { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + padding: 24px 0; + font-weight: 500; + font-size: 17px; + line-height: 132%; + text-align: center; + border-bottom: 1px solid rgba(45, 45, 45, 0.2); +} +@media (max-width: 768px) { + .price__list-item-description { + padding: 19px 0; + font-size: 16px; + } +} +.price__list-item-price { + padding: 24px 0 31px; + font-weight: 600; + font-size: 33px; + line-height: 129%; + letter-spacing: 0.01em; + text-align: center; +} +@media (max-width: 768px) { + .price__list-item-price { + padding: 18px 0 22px; + font-size: 28px; + } +} +.price__list-item-buttons { + display: flex; + justify-content: center; +} +.price__list-item--active .price__list-item-title, .price__list-item--active .price__list-item-time, .price__list-item--active .price__list-item-description { + border-color: rgba(255, 255, 255, 0.2); } \ No newline at end of file diff --git a/assets/scss/_l-price.scss b/assets/scss/_l-price.scss new file mode 100644 index 0000000..64872f3 --- /dev/null +++ b/assets/scss/_l-price.scss @@ -0,0 +1,164 @@ +.price { + margin: 100px 0; + + @include tablet { + margin: 90px 0; + } + + &__title { + margin: 21px 0 24px; + + @include tablet { + margin: 18px 0 37px; + } + } + + &__list { + display: flex; + flex-wrap: wrap; + gap: 40px 46px; + + @include laptop { + gap: 30px 24px; + } + + &-item { + flex: 0 0 calc(50% - 46px / 2); + display: flex; + flex-direction: column; + align-items: center; + padding: 35px 35px 40px; + box-sizing: border-box; + color: $black; + border-radius: 8px 30px; + background-color: $white; + + @include laptop { + flex: 0 0 calc(50% - 24px / 2); + border-radius: 8px 30px; + } + + @include tablet { + flex: 1 1 100%; + } + + &--active { + color: $white; + background-color: $blue; + + & > * { + border-color: rgba($color: $white, $alpha: 0.1); + } + } + + & > * { + max-width: 410px; + width: 100%; + box-sizing: border-box; + } + + &-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + margin: 0 0 12px; + font-weight: 400; + font-size: 17px; + line-height: 122%; + text-align: center; + + @include tablet { + font-size: 16px; + } + + &::before { + content: ''; + display: block; + border-radius: 100px; + width: 12px; + height: 12px; + background-color: $blue; + } + } + + &--active &-info::before { + background-color: $white; + } + + &-title { + padding: 0 0 23px; + margin: 0; + font-weight: 600; + font-size: 33px; + line-height: 129%; + letter-spacing: 0.01em; + text-align: center; + border-bottom: 1px solid rgba($color: $black, $alpha: 0.2); + + @include tablet { + padding: 0 0 19px; + font-size: 26px; + } + } + + &-time { + padding: 21px 0; + font-weight: 500; + font-size: 25px; + line-height: 129%; + letter-spacing: 0.01em; + text-align: center; + border-bottom: 1px solid rgba($color: $black, $alpha: 0.2); + + @include tablet { + padding: 19px 0; + font-size: 23px; + } + } + + &-description { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + padding: 24px 0; + font-weight: 500; + font-size: 17px; + line-height: 132%; + text-align: center; + border-bottom: 1px solid rgba($color: $black, $alpha: 0.2); + + @include tablet { + padding: 19px 0; + font-size: 16px; + } + } + + &-price { + padding: 24px 0 31px; + font-weight: 600; + font-size: 33px; + line-height: 129%; + letter-spacing: 0.01em; + text-align: center; + + @include tablet { + padding: 18px 0 22px; + font-size: 28px; + } + } + + &-buttons { + display: flex; + justify-content: center; + } + + &--active &-title, + &--active &-time, + &--active &-description { + border-color: rgba($color: $white, $alpha: 0.2); + } + } + } +} diff --git a/assets/scss/_l-socialization.scss b/assets/scss/_l-socialization.scss index 0894479..9266280 100644 --- a/assets/scss/_l-socialization.scss +++ b/assets/scss/_l-socialization.scss @@ -5,10 +5,6 @@ margin: 90px 0 90px; } - & .container { - position: relative; - } - &__title { margin: 18px 0 22px; diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 646a747..74d9b15 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -27,3 +27,4 @@ @import './l-conditions'; @import './l-how-it-work'; @import './l-socialization'; +@import './l-price'; diff --git a/index.html b/index.html index f460df1..38e20a5 100644 --- a/index.html +++ b/index.html @@ -1307,6 +1307,69 @@ + +
+
+
Cтоимость
+ +

+ Актуальная стоимость
+ программ реабилитации +

+ +
+
+
Для лечения сложных и длительных зависимостей
+

Стандартная программа

+
9-12 месяцев
+
Для получения стабильного результата
+
от 25 000 ₽
+
+ +
+
+ +
+
Для лечения алкоголизма и наркомании
+

Ускоренная программа

+
3 месяца
+
+ Ускоренный курс реабилитации, позволяющий добиться результатов в сжатые сроки +
+
от 35 000 ₽
+
+ +
+
+ +
+
Актуально для вывода человека из запоя
+

Экспресс курс

+
28 дней
+
+ Для людей, не имеющих возможности длительного пребывания в центре +
+
от 45 000 ₽
+
+ +
+
+ +
+
+

Социальная адаптация

+
Бессрочно
+
+ Программа для людей, которые прошли реабилитацию и учатся жить в трезвом обществе +
+
от 15 000 ₽
+
+ +
+
+
+
+