fix: fixed issues

1 year ago · 13ed8c0609
parent fe2a7463d1
commit 13ed8c0609
6 changed files with 96 additions and 10 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -1555,6 +1555,9 @@ h3 {
  text-align: center;
  color: #4d4d4d;
 }
+.step-by-step__card-title a {
+  color: #4d4d4d;
+}
 .step-by-step__card-text {
  margin: 0 0 32px;
  font-weight: 400;
@ -3204,3 +3207,34 @@ h3 {
    font-size: 10px;
  }
 }
+
+.go-top__button {
+  position: fixed;
+  left: auto;
+  right: 15px;
+  bottom: 40px;
+  z-index: 0;
+  display: block;
+  height: 60px;
+  width: 60px;
+  border-radius: 60px;
+  background: url(../img/icons/prev.svg) center no-repeat;
+  background-color: #609eff;
+  box-shadow: 0 0 10px rgba(45, 45, 45, 0.2);
+  transform: rotate(90deg);
+  opacity: 0;
+  transition: opacity ease-in-out 0.15s, background-color ease-in-out 0.1s;
+  cursor: pointer;
+}
+@media (max-width: 992px) {
+  .go-top__button {
+    display: none;
+  }
+}
+.go-top__button:active {
+  background-color: #3081ff;
+}
+.go-top__button.active {
+  z-index: 100;
+  opacity: 1;
+}
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -18,3 +18,14 @@ const phoneInputs = phoneInputClassNames

 phoneInputs.forEach((inputElement) => IMask(inputElement, maskOptions));

+const goTopButton = document.querySelector('.go-top__button');
+
+document.addEventListener('scroll', () => {
+  const scrollYPosition = window.scrollY;
+
+  if (scrollYPosition >= 800) {
+    if (goTopButton) goTopButton.classList.add('active');
+  } else {
+    if (goTopButton) goTopButton.classList.remove('active');
+  }
+});
--- a/assets/scss/_l-go-top.scss
+++ b/assets/scss/_l-go-top.scss
@ -0,0 +1,33 @@
+.go-top {
+  &__button {
+    position: fixed;
+    left: auto;
+    right: 15px;
+    bottom: 40px;
+    z-index: 0;
+    display: block;
+    height: 60px;
+    width: 60px;
+    border-radius: 60px;
+    background: url(../img/icons/prev.svg) center no-repeat;
+    background-color: $blue;
+    box-shadow: 0 0 10px rgba($color: $black, $alpha: 0.2);
+    transform: rotate(90deg);
+    opacity: 0;
+    transition: opacity ease-in-out 0.15s, background-color ease-in-out 0.1s;
+    cursor: pointer;
+
+    @include laptop {
+      display: none;
+    }
+
+    &:active {
+      background-color: $darkblue;
+    }
+
+    &.active {
+      z-index: 100;
+      opacity: 1;
+    }
+  }
+}
--- a/assets/scss/_l-step-by-step.scss
+++ b/assets/scss/_l-step-by-step.scss
@ -156,6 +156,10 @@
      line-height: 141%;
      text-align: center;
      color: $darkgrey;
+
+      & a {
+        color: $darkgrey;
+      }
    }

    &-text {
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@ -33,3 +33,4 @@
@import './l-faq';
@import './l-callback';
@import './l-modal';
+@import './l-go-top';
--- a/index.html
+++ b/index.html
@ -12,6 +12,9 @@
    <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" />
+    <script src="./assets/js/swiper-bundle.min.js" defer></script>
+    <script src="./assets/js/imask.js" defer></script>
+    <script src="./assets/js/main.js" type="module" defer></script>
  </head>

  <body>
@ -267,7 +270,6 @@
                        Каждый зависимый получает куратора, который когда-то уже поборол
                        зависимость.
                      </b>
-                      Каждый зависимый получает куратора, который когда-то уже поборол зависимость.
                      Он не будет смотреть свысока или жалеть своего подопечного, а на своем примере
                      расскажет, как справляться с трудностями
                    </p>
@ -586,11 +588,10 @@
              <div class="step-by-step__card active" id="step1">
                <div class="step-by-step__card-title">
                  Вы оставляете заявку на нашем сайте или по телефону <br />
-                  8 (800) 101-21-27
+                  <a href="88001012127">8 (800) 101-21-27</a>
                </div>
                <div class="step-by-step__card-text">
-                  Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах
-                  реабилитации и назначит дату прибытия в центр
+                  Опытные специалисты помогут выйти из состояния ломки и прийти в чувства
                </div>
                <div class="step-by-step__card-buttons">
                  <button class="button button--lg button--dark button--callback">
@ -941,7 +942,7 @@
                  <div class="why-program__slide">
                    <h3 class="why-program__slide-title">Компклесный подход</h3>
                    <p class="why-program__slide-text">
-                      Участник программы проходит детоксикацию организма под наблюдением врача, а
+                      Участник программы проходит детоксикацию организма под наблюдением специалиста, а
                      также избавляется от триггеров провоцирующих зависимость
                    </p>
                  </div>
@ -1063,7 +1064,7 @@
            <div class="conditions__location-text">
              Каждый желающий может приехать и посмотреть условия проживания с разрешения персонала
            </div>
-            <div class="conditions__location-address">г. Томск, пр. Ленина, 186</div>
+            <div class="conditions__location-address">г. Томск, ул. Севастопольская д.5</div>
          </div>

          <div class="conditions__advantages">
@ -1977,7 +1978,7 @@
        </div>

        <div class="footer__copyrights">
-          <span>Triumftomsk.ru - © Все права защищены. 2024</span>
+          <span>Реабилитационный центр Томск - © Все права защищены. 2024</span>
          <a href="#">Политика конфиденциальности</a>
          <span>
            Разработка и продвижение: <a href="https://ledoffsky.agency">Ledoffsky Agency</a>
@ -2033,8 +2034,10 @@
      </div>
    </div>

-    <script src="./assets/js/swiper-bundle.min.js" defer></script>
-    <script src="./assets/js/imask.js" defer></script>
-    <script src="./assets/js/main.js" type="module" defer></script>
+    <div class="go-top"> 
+      <a class="go-top__button" href="#"></a>
+    </div>
+
+    
  </body>
 </html>