Good-Production
/
triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added twelve-steps

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent 01fc9d9edd
commit 000de26ee4
4 changed files with 317 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 95
      assets/css/index.css
  2. 89
      assets/scss/_l-twelve-steps.scss
  3. 1
      assets/scss/index.scss
  4. 132
      index.html

95
assets/css/index.css
Unescape View File

@ -1237,3 +1237,98 @@ h3 {
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;
}
}

89
assets/scss/_l-twelve-steps.scss
Unescape View File

@ -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;
}
}
}
}

1
assets/scss/index.scss
Unescape View File

@ -22,3 +22,4 @@
@import './l-facts';
@import './l-reviews';
@import './l-step-by-step';
@import './l-twelve-steps';

132
index.html
Unescape View File

@ -701,6 +701,138 @@
</div>
</div>
</section>
<section class="twelve-steps">
<div class="container">
<div class="tag">Программа 12 шагов</div>
<h2 class="step-by-step__title">
Реабилитация проходит <br />
<span>по программе “12 шагов”</span>
</h2>
<div class="twelve-steps__list">
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">1 шаг</div>
<div class="twelve-steps__step-title">
Признать, что есть серьезная проблема зависимости
</div>
<div class="twelve-steps__step-text">
Понимание проблемы – начало пути к ее решению
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">2 шаг</div>
<div class="twelve-steps__step-title">
Поверить, что есть сила, способная помочь измениться
</div>
<div class="twelve-steps__step-text">
Это не только религия, но и судьба, карма, коллектив, наука, чувство долга,
родительский инстинкт
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">3 шаг</div>
<div class="twelve-steps__step-title">Принять решение полностью измениться</div>
<div class="twelve-steps__step-text">
Принять осознанное решение бороться с пагубной привычкой, а не мириться с ней
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">4 шаг</div>
<div class="twelve-steps__step-title">
Честно оценить свои ошибки и причиненный вред
</div>
<div class="twelve-steps__step-text">
Этап самоанализа, когда человек разбирает и принимает ошибки, принесшие вред ему и
близким
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">5 шаг</div>
<div class="twelve-steps__step-title">
Признать свою вину и взять на себя ответственность
</div>
<div class="twelve-steps__step-text">
Этап самоанализа, когда человек разбирает и принимает ошибки, принесшие вред ему
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">6 шаг</div>
<div class="twelve-steps__step-title">Подготовиться к коренным переменам в жизни</div>
<div class="twelve-steps__step-text">
Участники программы осознает, каким должен стать их новый жизненный путь, и
приступают к его реализации
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">7 шаг</div>
<div class="twelve-steps__step-title">Попросить о помощи окружающих людей</div>
<div class="twelve-steps__step-text">
Получив помощь, человек по-настоящему осознает, что он не одинок в борьбе с
проблемой
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">8 шаг</div>
<div class="twelve-steps__step-title">
Составить список обид и постараться их простить
</div>
<div class="twelve-steps__step-text">
Этап самоанализа, когда человек разбирает и принимает ошибки, принесшие вред ему
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">9 шаг</div>
<div class="twelve-steps__step-title">Возместить причиненный другим людям ущерб</div>
<div class="twelve-steps__step-text">
Формирование новых привычек: думать о других, анализировать поступки, выстраивать
здоровое социальное поведение
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">10 шаг</div>
<div class="twelve-steps__step-title">
Продолжать анализировать свое поведение и меняться
</div>
<div class="twelve-steps__step-text">
Формирование новых привычек: думать о других, анализировать поступки, выстраивать
здоровое социальное поведение
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">11 шаг</div>
<div class="twelve-steps__step-title">
Использовать медитацию для душевного равновесия
</div>
<div class="twelve-steps__step-text">
Для обретения внутреннего баланса и самоконтроля
</div>
</div>
<div class="twelve-steps__step">
<div class="twelve-steps__step-number">12 шаг</div>
<div class="twelve-steps__step-title">
Помогать другим зависимым, делиться своим опытом
</div>
<div class="twelve-steps__step-text">
Желание сохранить заслуженное доверие помогает закрепить результат и сделать
здоровый образ жизни нормой
</div>
</div>
</div>
</div>
</section>
</main>
<script src="./assets/js/swiper-bundle.min.js" defer></script>

Write Preview
Loading…
Cancel
Save