feat: added facts

1 year ago · d5fee8eb76
parent aa44dd8117
commit d5fee8eb76
14 changed files with 681 additions and 8 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -83,6 +83,47 @@ img {
  height: auto;
 }

+h2 {
+  margin: 0;
+  font-weight: 700;
+  font-size: 55px;
+  line-height: 122%;
+  letter-spacing: 0.01em;
+  color: #4d4d4d;
+  text-align: center;
+}
+h2 > span {
+  color: #609eff;
+}
+@media (max-width: 992px) {
+  h2 {
+    font-size: 40px;
+  }
+}
+@media (max-width: 768px) {
+  h2 {
+    font-size: 36px;
+  }
+}
+@media (max-width: 576px) {
+  h2 {
+    font-size: 28px;
+  }
+}
+
+h3 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 23px;
+  line-height: 127%;
+  color: #878787;
+}
+@media (max-width: 576px) {
+  h3 {
+    font-size: 20px;
+  }
+}
+
 .container {
  max-width: 1236px;
  width: 100%;
@ -300,6 +341,29 @@ img {
  border-color: #3081ff;
  background-color: #3081ff;
 }
+.button--prev, .button--next {
+  height: 60px;
+  width: 60px;
+  border: none;
+  border-radius: 30px;
+  background: url(../img/icons/prev.svg) center no-repeat;
+  background-color: #609eff;
+  transition: background-color ease-in-out 0.1s;
+  cursor: pointer;
+}
+@media (max-width: 992px) {
+  .button--prev, .button--next {
+    height: 42px;
+    width: 42px;
+    background-size: 8px;
+  }
+}
+.button--prev:active, .button--next:active {
+  background-color: #3081ff;
+}
+.button--next {
+  transform: rotate(180deg);
+}

 .tag {
  display: flex;
@ -577,6 +641,11 @@ img {
 .advantages {
  margin: 51px 0 116px;
 }
+@media (max-width: 768px) {
+  .advantages {
+    margin: 15px 0 90px;
+  }
+}
 .advantages .container {
  display: flex;
  flex-wrap: wrap;
@ -709,4 +778,161 @@ img {
  .advantages__item-counter {
    font-size: 120px;
  }
+}
+
+.facts {
+  margin: 116px 0 100px;
+}
+@media (max-width: 768px) {
+  .facts {
+    margin: 90px 0 77px;
+  }
+}
+.facts .container {
+  position: relative;
+}
+.facts__title {
+  max-width: 702px;
+  margin: 21px auto 27px;
+}
+.facts__figure {
+  position: absolute;
+  top: 664px;
+  right: 15px;
+  left: 15px;
+  border-radius: 80px 12px;
+  overflow: hidden;
+}
+@media (max-width: 1240px) {
+  .facts__figure {
+    position: static;
+    margin: 0 0 33px;
+    border-radius: 35px 10px;
+  }
+}
+.facts__figure-image {
+  display: block;
+  max-height: 546px;
+  max-width: none;
+  width: 100%;
+  height: auto;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.facts__slider .swiper {
+  overflow: visible;
+}
+@media (max-width: 992px) {
+  .facts__slider .swiper {
+    overflow: hidden;
+  }
+}
+.facts__slider .swiper-wrapper {
+  position: static;
+  flex-wrap: wrap;
+}
+@media screen and (min-width: 992.1px) {
+  .facts__slider .swiper-wrapper {
+    gap: 36px 42px;
+  }
+}
+@media (max-width: 992px) {
+  .facts__slider .swiper-wrapper {
+    position: relative;
+    flex-wrap: nowrap;
+  }
+}
+.facts__slider .swiper-slide {
+  position: static;
+  height: auto;
+}
+@media screen and (min-width: 992.1px) {
+  .facts__slider .swiper-slide {
+    flex: 0 0 calc(33.3333333333% - 28px);
+  }
+}
+@media (max-width: 992px) {
+  .facts__slider .swiper-slide {
+    position: relative;
+  }
+}
+.facts__slider .swiper-slide:nth-child(-n+3) {
+  margin-bottom: 590px;
+}
+@media (max-width: 1240px) {
+  .facts__slider .swiper-slide:nth-child(-n+3) {
+    margin: 0;
+  }
+}
+.facts__slide {
+  height: 100%;
+  padding: 24px 36px 34px;
+  box-sizing: border-box;
+  border-radius: 22px 40px;
+  background-color: #ffffff;
+}
+@media (max-width: 1240px) {
+  .facts__slide {
+    padding: 24px 20px 36px;
+  }
+}
+@media (max-width: 992px) {
+  .facts__slide {
+    padding: 24px 14px 36px;
+  }
+}
+.facts__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) {
+  .facts__slide-count {
+    text-align: center;
+  }
+}
+@media (max-width: 576px) {
+  .facts__slide-count {
+    font-size: 50px;
+  }
+}
+.facts__slide-title {
+  margin: 0 0 9px;
+}
+@media (max-width: 992px) {
+  .facts__slide-title {
+    text-align: center;
+  }
+}
+.facts__slide-text {
+  margin: 0;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 146%;
+  color: #878787;
+}
+.facts__slide-text > b {
+  font-weight: 600;
+}
+@media (max-width: 992px) {
+  .facts__slide-text {
+    font-size: 15px;
+    text-align: center;
+  }
+}
+.facts__slider-controls {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  margin: 35px 0 0;
+}
+@media (max-width: 992px) {
+  .facts__slider-controls {
+    display: flex;
+  }
 }
--- a/assets/css/swiper-bundle.min.css
+++ b/assets/css/swiper-bundle.min.css
--- a/assets/img/facts.jpg
+++ b/assets/img/facts.jpg
--- a/assets/img/icons/prev.svg
+++ b/assets/img/icons/prev.svg
@ -0,0 +1,3 @@
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.15895 17.9517C9.50823 17.8241 9.7676 17.5796 9.91976 17.2358C9.97855 17.1011 9.99584 16.9983 9.99584 16.7608C9.99584 16.1973 10.269 16.5163 6.38892 12.5361L2.94455 8.99891L6.38892 5.46175C10.2656 1.48155 9.99584 1.80053 9.99584 1.23699C9.9993 0.985351 9.982 0.903833 9.90938 0.740797C9.78143 0.464345 9.60506 0.2765 9.35261 0.138274C9.16587 0.0354905 9.09324 0.014225 8.84079 0.00359223C8.59872 -0.00704052 8.50881 0.00359226 8.33935 0.0673889C8.13878 0.145363 8.00737 0.272956 4.16529 4.20708C-0.316547 8.79689 0.00506761 8.42475 0.00506766 8.99891C0.00506771 9.57308 -0.316547 9.20094 4.1653 13.7907C7.96241 17.6788 8.13878 17.856 8.33244 17.9269C8.56414 18.012 8.95838 18.0261 9.15895 17.9517Z" fill="white"/>
+</svg>
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -0,0 +1 @@
+import './sliders.js';
--- a/assets/js/sliders.js
+++ b/assets/js/sliders.js
@ -0,0 +1,47 @@
+let factsSwiper = null;
+
+let init = false;
+
+function swiperMode() {
+  let mobile = window.matchMedia('(min-width: 0px) and (max-width: 992px)');
+
+  if (mobile.matches) {
+    if (!init) {
+      init = true;
+      factsSwiper = new Swiper('.facts .swiper', {
+        loop: true,
+        slidesPerView: 1,
+        spaceBetween: 35,
+        breakpoints: {
+          320: {
+            slidesPerView: 1.2,
+          },
+          480: {
+            slidesPerView: 1.4,
+          },
+          576: {
+            slidesPerView: 2,
+          },
+          700: {
+            slidesPerView: 2.4,
+          },
+        },
+        navigation: {
+          nextEl: '.facts .button--next',
+          prevEl: '.facts .button--prev',
+        },
+      });
+    }
+  } else {
+    if (factsSwiper !== null) factsSwiper.destroy();
+    init = false;
+  }
+}
+
+window.addEventListener('load', function () {
+  swiperMode();
+});
+
+window.addEventListener('resize', function () {
+  swiperMode();
+});
--- a/assets/js/swiper-bundle.min.js
+++ b/assets/js/swiper-bundle.min.js
--- a/assets/scss/_b-reset.scss
+++ b/assets/scss/_b-reset.scss
@ -24,9 +24,9 @@
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-RegularItalic.eot');
  src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'),
-      url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
-      url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
-      url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
+    url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
+    url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
 }
@ -108,3 +108,41 @@ img {
  max-width: 100%;
  height: auto;
 }
+
+h2 {
+  margin: 0;
+  font-weight: 700;
+  font-size: 55px;
+  line-height: 122%;
+  letter-spacing: 0.01em;
+  color: $darkgrey;
+  text-align: center;
+
+  & > span {
+    color: $blue;
+  }
+
+  @include laptop {
+    font-size: 40px;
+  }
+
+  @include tablet {
+    font-size: 36px;
+  }
+
+  @include mobile {
+    font-size: 28px;
+  }
+}
+
+h3 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 23px;
+  line-height: 127%;
+  color: $grey;
+
+  @include mobile {
+    font-size: 20px;
+  }
+}
--- a/assets/scss/_b-vars.scss
+++ b/assets/scss/_b-vars.scss
@ -1,6 +1,7 @@
 // colors

 $black: #2d2d2d;
+$darkgrey: #4d4d4d;
 $grey: #878787;
 $lightgrey: #cacaca;
 $blue: #609eff;
--- a/assets/scss/_l-advantages.scss
+++ b/assets/scss/_l-advantages.scss
@ -1,6 +1,10 @@
 .advantages {
  margin: 51px 0 116px;

+  @include tablet {
+    margin: 15px 0 90px;
+  }
+
  & .container {
    display: flex;
    flex-wrap: wrap;
--- a/assets/scss/_l-facts.scss
+++ b/assets/scss/_l-facts.scss
@ -0,0 +1,156 @@
+.facts {
+  margin: 116px 0 100px;
+
+  @include tablet {
+    margin: 90px 0 77px;
+  }
+
+  & .container {
+    position: relative;
+  }
+
+  &__title {
+    max-width: 702px;
+    margin: 21px auto 27px;
+  }
+
+  &__figure {
+    position: absolute;
+    top: 664px;
+    right: 15px;
+    left: 15px;
+    border-radius: 80px 12px;
+    overflow: hidden;
+
+    @include desktop {
+      position: static;
+      margin: 0 0 33px;
+      border-radius: 35px 10px;
+    }
+
+    &-image {
+      display: block;
+      max-height: 546px;
+      max-width: none;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+  }
+
+  &__slider {
+    & .swiper {
+      overflow: visible;
+
+      @include laptop {
+        overflow: hidden;
+      }
+
+      &-wrapper {
+        position: static;
+        flex-wrap: wrap;
+
+        @media screen and (min-width: 992.1px) {
+          gap: 36px 42px;
+        }
+
+        @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 - 42px / 3 * 2);
+        }
+
+        @include laptop {
+          position: relative;
+        }
+
+        &:nth-child(-n + 3) {
+          margin-bottom: 590px;
+
+          @include desktop {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &__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;
+    }
+
+    &-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;
+    }
+  }
+}
--- a/assets/scss/_m-button.scss
+++ b/assets/scss/_m-button.scss
@ -60,8 +60,6 @@
    &:active {
      color: $darkblue;
    }
-
-    
  }

  &--dark {
@ -81,7 +79,8 @@
      filter: brightness(10);
    }

-    &:hover::before, &:active::before {
+    &:hover::before,
+    &:active::before {
      filter: brightness(1);
    }
  }
@ -106,4 +105,30 @@
      background-color: $darkblue;
    }
  }
+
+  &--prev,
+  &--next {
+    height: 60px;
+    width: 60px;
+    border: none;
+    border-radius: 30px;
+    background: url(../img/icons/prev.svg) center no-repeat;
+    background-color: $blue;
+    transition: background-color ease-in-out 0.1s;
+    cursor: pointer;
+
+    @include laptop {
+      height: 42px;
+      width: 42px;
+      background-size: 8px;
+    }
+
+    &:active {
+      background-color: $darkblue;
+    }
+  }
+
+  &--next {
+    transform: rotate(180deg);
+  }
 }
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@ -19,3 +19,4 @@
@import './l-footer';
@import './l-first-screen';
@import './l-advantages';
+@import './l-facts';
--- a/index.html
+++ b/index.html
@ -7,6 +7,7 @@
    <title>Триумф</title>
    <meta name="description" content="SEO Description" />
    <link rel="shortcut icon" href="./assets/img/favicon.ico?v=1.0" />
+    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
  </head>

@ -156,7 +157,7 @@
          </div>

          <div class="advantages__item advantages__item--support">
-            <figure class="advantages__item-figure ">
+            <figure class="advantages__item-figure">
              <img
                class="advantages__item-figure-image"
                src="./assets/img/icons/mental-care.svg"
@ -167,8 +168,151 @@
          </div>
        </div>
      </section>
+
+      <section class="facts">
+        <div class="container">
+          <div class="tag">О нашем центре</div>
+
+          <h2 class="facts__title"><span>9 фактов о нас,</span> которые мы считаем важными</h2>
+
+          <figure class="facts__figure">
+            <img class="facts__figure-image" src="./assets/img/facts.jpg" alt="facts" />
+          </figure>
+
+          <div class="facts__slider">
+            <div class="swiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#1</div>
+                    <h3 class="facts__slide-title">
+                      Полное избавление от зависимости – наша главная цель
+                    </h3>
+                    <p class="facts__slide-text">
+                      Мы знаем, как сложно преодолеть зависимость самостоятельно. С нами зависимый
+                      пройдет путь от начала до конца и даже после реабилитации
+                      <b>мы поможем ему научиться жить трезво</b>
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#2</div>
+                    <h3 class="facts__slide-title">Многолетний опыт успешной реабилитации</h3>
+                    <p class="facts__slide-text">
+                      <b>Уже более 8 лет мы помогаем людям избавляться от зависимостей.</b>
+                      Благодаря нашему профессионализму сотни человек обрели свободу и счастливую
+                      трезвую жизнь
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#3</div>
+                    <h3 class="facts__slide-title">
+                      Постоянно обучаемся и совершенствуем методики
+                    </h3>
+                    <p class="facts__slide-text">
+                      <b>Специалисты регулярно повышают квалификацию,</b> адаптируясь под меняющиеся
+                      привычки, препараты и даже возраст зависимых
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#4</div>
+                    <h3 class="facts__slide-title">Учим жить без зависимости</h3>
+                    <p class="facts__slide-text">
+                      Самый тяжелый период – первые месяцы после реабилитации. Мы будем с участников
+                      программы в это время и
+                      <b>поможем побороть тягу, а также выработаем новые полезные привычки,</b>
+                      чтобы он не вернулся к старым
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#5</div>
+                    <h3 class="facts__slide-title">Конфиденциальность</h3>
+                    <p class="facts__slide-text">
+                      <b>
+                        Все сотрудники центра подписывают обязательство о неразглашении информации.
+                      </b>
+                      Может даже дать реабилитанту кодовое имя, не раскрывая настоящее. Ни одно
+                      постороннее лицо не может проникнуть на территорию центра без соответствующего
+                      допуска
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#6</div>
+                    <h3 class="facts__slide-title">Позитивный пример</h3>
+                    <p class="facts__slide-text">
+                      <b>
+                        Каждый зависимый получает куратора, который когда-то уже поборол
+                        зависимость.
+                      </b>
+                      Каждый зависимый получает куратора, который когда-то уже поборол зависимость.
+                      Он не будет смотреть свысока или жалеть своего подопечного, а на своем примере
+                      расскажет, как справляться с трудностями
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#7</div>
+                    <h3 class="facts__slide-title">Атмосфера понимания, заботы и поддержки</h3>
+                    <p class="facts__slide-text">
+                      <b>В нашем центре нет места принуждению или боли.</b>
+                      Излечение зависимости проходит только по воле зависимого, а персонал относится
+                      к подопечным с уважением и заботой
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#8</div>
+                    <h3 class="facts__slide-title">Мы полностью открыты перед вами и честны</h3>
+                    <p class="facts__slide-text">
+                      <b>Мы ничего не скрываем от родственников и зависимых,</b>
+                      не даем ложных гарантий и надежд. Свободно говорим о методах реабилитации и
+                      приглашаем оценить условия проживания
+                    </p>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="facts__slide">
+                    <div class="facts__slide-count">#9</div>
+                    <h3 class="facts__slide-title">Помощь родным в преодолении последствий</h3>
+                    <p class="facts__slide-text">
+                      Зависимость затрагивает не только самого больного, но и его близких.
+                      <b>Мы научим родственников вести себя и общаться с зависимым,</b> чтобы
+                      поддержать его и помочь адаптироваться
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="facts__slider-controls">
+            <button class="button button--prev"></button>
+            <button class="button button--next"></button>
+          </div>
+        </div>
+      </section>
    </main>

-    <script src="./assets/js/main.js"></script>
+    <script src="./assets/js/swiper-bundle.min.js" defer></script>
+    <script src="./assets/js/main.js" type="module" defer></script>
  </body>
 </html>