diff --git a/assets/css/index.css b/assets/css/index.css index 2a90886..7cc7e96 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1236,4 +1236,99 @@ h3 { display: flex; align-items: center; justify-content: center; +} + +.twelve-steps { + margin: 93px 0 111px; +} +@media (max-width: 768px) { + .twelve-steps { + margin: 60px 0 75px; + } +} +.twelve-steps__title { + margin: 21px 0 31px; +} +@media (max-width: 768px) { + .twelve-steps__title { + margin: 21px 0 24px; + } +} +.twelve-steps__list { + display: flex; + flex-wrap: wrap; + gap: 50px; +} +@media (max-width: 1240px) { + .twelve-steps__list { + gap: 24px; + } +} +@media (max-width: 576px) { + .twelve-steps__list { + gap: 12px; + } +} +.twelve-steps__step { + flex: 0 0 calc(25% - 37.5px); + display: flex; + flex-direction: column; + align-items: flex-start; +} +@media (max-width: 1240px) { + .twelve-steps__step { + flex: 0 0 calc(25% - 18px); + } +} +@media (max-width: 992px) { + .twelve-steps__step { + flex: 0 0 calc(33.3333333333% - 16px); + } +} +@media (max-width: 768px) { + .twelve-steps__step { + flex: 0 0 calc(50% - 12px); + align-items: center; + } +} +@media (max-width: 576px) { + .twelve-steps__step { + flex: 1 1 100%; + } +} +.twelve-steps__step-number { + width: -moz-fit-content; + width: fit-content; + margin: 0 0 17px; + padding: 8px 16px; + font-weight: 700; + font-size: 20px; + line-height: 127%; + text-align: center; + color: #ffffff; + border-radius: 100px; + background-color: #609eff; +} +.twelve-steps__step-title { + margin: 0 0 11px; + font-weight: 600; + font-size: 18px; + line-height: 127%; + color: #4d4d4d; +} +@media (max-width: 768px) { + .twelve-steps__step-title { + text-align: center; + } +} +.twelve-steps__step-text { + font-weight: 400; + font-size: 15px; + line-height: 146%; + color: #878787; +} +@media (max-width: 768px) { + .twelve-steps__step-text { + text-align: center; + } } \ No newline at end of file diff --git a/assets/scss/_l-twelve-steps.scss b/assets/scss/_l-twelve-steps.scss new file mode 100644 index 0000000..32e797f --- /dev/null +++ b/assets/scss/_l-twelve-steps.scss @@ -0,0 +1,89 @@ +.twelve-steps { + margin: 93px 0 111px; + + @include tablet { + margin: 60px 0 75px; + } + + &__title { + margin: 21px 0 31px; + + @include tablet { + margin: 21px 0 24px; + } + } + + &__list { + display: flex; + flex-wrap: wrap; + gap: 50px; + + @include desktop { + gap: 24px; + } + + @include mobile { + gap: 12px; + } + } + + &__step { + flex: 0 0 calc(100% / 4 - 50px / 4 * 3); + display: flex; + flex-direction: column; + align-items: flex-start; + + @include desktop { + flex: 0 0 calc(100% / 4 - 24px / 4 * 3); + } + + @include laptop { + flex: 0 0 calc(100% / 3 - 24px / 3 * 2); + } + + @include tablet { + flex: 0 0 calc(100% / 2 - 24px / 2); + align-items: center; + } + + @include mobile { + flex: 1 1 100%; + } + + &-number { + width: fit-content; + margin: 0 0 17px; + padding: 8px 16px; + font-weight: 700; + font-size: 20px; + line-height: 127%; + text-align: center; + color: $white; + border-radius: 100px; + background-color: $blue; + } + + &-title { + margin: 0 0 11px; + font-weight: 600; + font-size: 18px; + line-height: 127%; + color: $darkgrey; + + @include tablet { + text-align: center; + } + } + + &-text { + font-weight: 400; + font-size: 15px; + line-height: 146%; + color: $grey; + + @include tablet { + text-align: center; + } + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index c024470..e730ad5 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -22,3 +22,4 @@ @import './l-facts'; @import './l-reviews'; @import './l-step-by-step'; +@import './l-twelve-steps'; diff --git a/index.html b/index.html index 99b3361..8953c00 100644 --- a/index.html +++ b/index.html @@ -701,6 +701,138 @@ + +
+
+
Программа 12 шагов
+ +

+ Реабилитация проходит
+ по программе “12 шагов” +

+ +
+
+
1 шаг
+
+ Признать, что есть серьезная проблема зависимости +
+
+ Понимание проблемы – начало пути к ее решению +
+
+ +
+
2 шаг
+
+ Поверить, что есть сила, способная помочь измениться +
+
+ Это не только религия, но и судьба, карма, коллектив, наука, чувство долга, + родительский инстинкт +
+
+ +
+
3 шаг
+
Принять решение полностью измениться
+
+ Принять осознанное решение бороться с пагубной привычкой, а не мириться с ней +
+
+ +
+
4 шаг
+
+ Честно оценить свои ошибки и причиненный вред +
+
+ Этап самоанализа, когда человек разбирает и принимает ошибки, принесшие вред ему и + близким +
+
+ +
+
5 шаг
+
+ Признать свою вину и взять на себя ответственность +
+
+ Этап самоанализа, когда человек разбирает и принимает ошибки, принесшие вред ему +
+
+ +
+
6 шаг
+
Подготовиться к коренным переменам в жизни
+
+ Участники программы осознает, каким должен стать их новый жизненный путь, и + приступают к его реализации +
+
+ +
+
7 шаг
+
Попросить о помощи окружающих людей
+
+ Получив помощь, человек по-настоящему осознает, что он не одинок в борьбе с + проблемой +
+
+ +
+
8 шаг
+
+ Составить список обид и постараться их простить +
+
+ Этап самоанализа, когда человек разбирает и принимает ошибки, принесшие вред ему +
+
+ +
+
9 шаг
+
Возместить причиненный другим людям ущерб
+
+ Формирование новых привычек: думать о других, анализировать поступки, выстраивать + здоровое социальное поведение +
+
+ +
+
10 шаг
+
+ Продолжать анализировать свое поведение и меняться +
+
+ Формирование новых привычек: думать о других, анализировать поступки, выстраивать + здоровое социальное поведение +
+
+ +
+
11 шаг
+
+ Использовать медитацию для душевного равновесия +
+
+ Для обретения внутреннего баланса и самоконтроля +
+
+ +
+
12 шаг
+
+ Помогать другим зависимым, делиться своим опытом +
+
+ Желание сохранить заслуженное доверие помогает закрепить результат и сделать + здоровый образ жизни нормой +
+
+
+
+