diff --git a/assets/css/index.css b/assets/css/index.css index f7d038a..8bc3c78 100644 --- 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; @@ -3203,4 +3206,35 @@ h3 { .modal__disclaimer { 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; } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index d8fc2db..153589a 100644 --- 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'); + } +}); diff --git a/assets/scss/_l-go-top.scss b/assets/scss/_l-go-top.scss new file mode 100644 index 0000000..8665864 --- /dev/null +++ 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; + } + } +} diff --git a/assets/scss/_l-step-by-step.scss b/assets/scss/_l-step-by-step.scss index c9bc15a..2156dba 100644 --- 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 { diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 933b125..85dee76 100644 --- 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'; diff --git a/index.html b/index.html index e64ec27..00bbb2e 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,9 @@ + + + @@ -267,7 +270,6 @@ Каждый зависимый получает куратора, который когда-то уже поборол зависимость. - Каждый зависимый получает куратора, который когда-то уже поборол зависимость. Он не будет смотреть свысока или жалеть своего подопечного, а на своем примере расскажет, как справляться с трудностями

@@ -586,11 +588,10 @@
Вы оставляете заявку на нашем сайте или по телефону
- 8 (800) 101-21-27 + 8 (800) 101-21-27
- Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах - реабилитации и назначит дату прибытия в центр + Опытные специалисты помогут выйти из состояния ломки и прийти в чувства
@@ -1977,7 +1978,7 @@
- Triumftomsk.ru - © Все права защищены. 2024 + Реабилитационный центр Томск - © Все права защищены. 2024 Политика конфиденциальности Разработка и продвижение: Ledoffsky Agency @@ -2033,8 +2034,10 @@
- - - +
+ +
+ +