feat: fixed issues

2024-07-05 15:01:14 +03:00
parent 21d4342a6a
commit efcdf9b099
9 changed files with 150 additions and 31 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -55,6 +55,11 @@ body {
  color: #2d2d2d;
  background-color: #ededed;
 }
+@media (max-width: 992px) {
+  body.hidden {
+    overflow: hidden;
+  }
+}

 a,
 button,
@@ -277,6 +282,16 @@ h3 {
  transition: all ease-in-out 0.1s;
  cursor: pointer;
 }
+@keyframes move-light {
+  from {
+    transform: translateX(-40px) skewX(-45deg);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(400px) skewX(-45deg);
+    opacity: 0.8;
+  }
+}
 .button--lg {
  display: flex;
  align-items: center;
@@ -315,29 +330,59 @@ h3 {
  background: url(../img/icons/ruble.svg) center no-repeat;
 }
 .button--light {
+  position: relative;
+  overflow: hidden;
  color: #2d2d2d;
  background-color: #ffffff;
 }
 .button--light:hover {
  color: #609eff;
 }
+.button--light:hover::after {
+  animation: move-light 0.5s;
+}
 .button--light:active {
  color: #3081ff;
 }
+.button--light::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.5em;
+  height: 100%;
+  background-color: rgba(96, 158, 255, 0.5);
+  transform: translateX(-4em) skewX(-45deg);
+}
 .button--dark {
-  background-color: #609eff;
+  position: relative;
+  overflow: hidden;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
+  background-color: #609eff;
 }
 .button--dark:hover {
  color: #609eff;
  background-color: #ffffff;
  border-color: #609eff;
 }
+.button--dark:hover::after {
+  animation: move-light 0.5s;
+}
 .button--dark:active {
  color: #3081ff;
  border-color: #3081ff;
 }
+.button--dark::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.5em;
+  height: 100%;
+  background-color: rgba(96, 158, 255, 0.5);
+  transform: translateX(-4em) skewX(-45deg);
+}
 .button--dark::before {
  filter: brightness(10);
 }
@@ -527,9 +572,12 @@ h3 {
    top: 70px;
    left: 0;
    right: 0;
+    bottom: 0;
+    z-index: 1000;
    flex-direction: column;
    gap: 0;
    padding: 7px 7px 44px;
+    overflow: auto;
    border-radius: 40px 7px;
    background-color: #609eff;
    transform: translateX(-200%);
@@ -1369,8 +1417,10 @@ h3 {
  justify-content: flex-start;
  gap: 20px;
  padding: 11px 29px 15px;
-  border: 1px solid rgba(98, 98, 98, 0.25);
+  color: #878787;
+  border: 1px solid #ffffff;
  border-radius: 8px 25px;
+  background-color: #ffffff;
  transition: all ease-in-out 0.1s;
  cursor: pointer;
 }
@@ -1380,17 +1430,19 @@ h3 {
    padding: 8px 21px;
  }
 }
-.step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover {
+.step-by-step__controls-button:hover {
  background-color: #609eff;
  border-color: #609eff;
+  color: #ffffff;
 }
-.step-by-step__controls-button:active, .step-by-step__controls-button.active:active {
+.step-by-step__controls-button:active {
  background-color: #3081ff;
  border-color: #3081ff;
+  color: #ffffff;
 }
 .step-by-step__controls-button.active {
-  border-color: white;
-  background-color: #ffffff;
+  border-color: #609eff;
+  background-color: #609eff;
 }
 .step-by-step__controls-button-number {
  font-weight: 500;
@@ -1407,18 +1459,18 @@ h3 {
  font-weight: 400;
  font-size: 24px;
  line-height: 146%;
-  color: #4d4d4d;
+  color: #878787;
  font-size: 20px;
 }
+.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text, .step-by-step__controls-button:active .step-by-step__controls-button-number, .step-by-step__controls-button:active .step-by-step__controls-button-text {
+  color: #ffffff;
+}
 .step-by-step__controls-button.active .step-by-step__controls-button-number {
  font-weight: 700;
-  color: #2d2d2d;
+  color: #ffffff;
 }
 .step-by-step__controls-button.active .step-by-step__controls-button-text {
  font-weight: 500;
-  color: #4d4d4d;
-}
-.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text {
  color: #ffffff;
 }
 .step-by-step__content {
@@ -2787,6 +2839,7 @@ h3 {
  font-size: 21px;
  line-height: 146%;
  color: #2d2d2d;
+  cursor: pointer;
 }
@media (max-width: 768px) {
  .faq__item-question {
--- a/assets/img/favicon.ico
+++ b/assets/img/favicon.ico
--- a/assets/js/nav.js
+++ b/assets/js/nav.js
@@ -5,6 +5,7 @@ if (burger && headerNav) {
  burger.addEventListener('click', () => {
    headerNav.classList.toggle('active');
    burger.classList.toggle('active');
+    document.body.classList.toggle('hidden')
  });

  headerNav.addEventListener('click', (event) => {
@@ -15,6 +16,7 @@ if (burger && headerNav) {
    if (isLink || isPhone || isButton) {
      headerNav.classList.remove('active');
      burger.classList.remove('active');
+      document.body.classList.remove('hidden')
    }
  });
 }
--- a/assets/scss/_b-reset.scss
+++ b/assets/scss/_b-reset.scss
@@ -78,6 +78,12 @@ body {
  overflow-y: scroll;
  color: $black;
  background-color: $greybg;
+
+  &.hidden {
+    @include laptop {
+      overflow: hidden;
+    }
+  }
 }

 a,
--- a/assets/scss/_l-faq.scss
+++ b/assets/scss/_l-faq.scss
@@ -60,6 +60,7 @@
      font-size: 21px;
      line-height: 146%;
      color: $black;
+      cursor: pointer;

      @include tablet {
        font-size: 18px;
--- a/assets/scss/_l-header.scss
+++ b/assets/scss/_l-header.scss
@@ -35,9 +35,12 @@
      top: 70px;
      left: 0;
      right: 0;
+      bottom: 0;
+      z-index: 1000;
      flex-direction: column;
      gap: 0;
      padding: 7px 7px 44px;
+      overflow: auto;
      border-radius: 40px 7px;
      background-color: $blue;
      transform: translateX(-200%);
--- a/assets/scss/_l-step-by-step.scss
+++ b/assets/scss/_l-step-by-step.scss
@@ -50,8 +50,10 @@
      justify-content: flex-start;
      gap: 20px;
      padding: 11px 29px 15px;
-      border: 1px solid rgba(98, 98, 98, 0.25);
+      color: $grey;
+      border: 1px solid $white;
      border-radius: 8px 25px;
+      background-color: $white;
      transition: all ease-in-out 0.1s;
      cursor: pointer;

@@ -60,21 +62,21 @@
        padding: 8px 21px;
      }

-      &:hover,
-      &.active:hover {
+      &:hover {
        background-color: $blue;
        border-color: $blue;
+        color: $white;
      }

-      &:active,
-      &.active:active {
+      &:active {
        background-color: $darkblue;
        border-color: $darkblue;
+        color: $white;
      }

      &.active {
-        border-color: rgba($color: $white, $alpha: 1);
-        background-color: $white;
+        border-color: $blue;
+        background-color: $blue;
      }

      &-number {
@@ -92,23 +94,24 @@
        font-weight: 400;
        font-size: 24px;
        line-height: 146%;
-        color: $darkgrey;
-
+        color: $grey;
        font-size: 20px;
      }

+      &:hover &-number,
+      &:hover &-text,
+      &:active &-number,
+      &:active &-text {
+        color: $white;
+      }
+
      &.active &-number {
        font-weight: 700;
-        color: $black;
+        color: $white;
      }

      &.active &-text {
        font-weight: 500;
-        color: $darkgrey;
-      }
-
-      &:hover &-number,
-      &:hover &-text {
        color: $white;
      }
    }
--- a/assets/scss/_m-button.scss
+++ b/assets/scss/_m-button.scss
@@ -5,6 +5,17 @@
  transition: all ease-in-out 0.1s;
  cursor: pointer;

+  @keyframes move-light {
+    from {
+      transform: translateX(-40px) skewX(-45deg);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(400px) skewX(-45deg);
+      opacity: 0.8;
+    }
+  }
+
  &--lg {
    display: flex;
    align-items: center;
@@ -50,27 +61,50 @@
  }

  &--light {
+    position: relative;
+    overflow: hidden;
    color: $black;
    background-color: $white;

    &:hover {
      color: $blue;
+
+      &::after {
+        animation: move-light 0.5s;
+      }
    }

    &:active {
      color: $darkblue;
    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 100%;
+      background-color: rgba($color: $blue, $alpha: 0.5);
+      transform: translateX(-4em) skewX(-45deg);
+    }
  }

  &--dark {
-    background-color: $blue;
+    position: relative;
+    overflow: hidden;
    color: $white;
    border-color: rgba($color: $white, $alpha: 0.3);
+    background-color: $blue;

    &:hover {
      color: $blue;
      background-color: $white;
      border-color: $blue;
+
+      &::after {
+        animation: move-light 0.5s;
+      }
    }

    &:active {
@@ -78,6 +112,17 @@
      border-color: $darkblue;
    }

+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 100%;
+      background-color: rgba($color: $blue, $alpha: 0.5);
+      transform: translateX(-4em) skewX(-45deg);
+    }
+
    &::before {
      filter: brightness(10);
    }
@@ -110,7 +155,7 @@

    &--light {
      color: #dcdcdc;
-      border-color: rgba($color: $white, $alpha: 1.0);
+      border-color: rgba($color: $white, $alpha: 1);
    }

    &--white {
@@ -123,7 +168,7 @@
        border-color: $white;
        background-color: $blue;
      }
-  
+
      &:active {
        border-color: $white;
        background-color: $darkblue;
--- a/index.html
+++ b/index.html
@@ -109,9 +109,9 @@
              <button class="button button--lg button--lg--consult button--light button--callback">
                Получить консультацию
              </button>
-              <button class="button button--lg button--lg--coin button--dark">
+              <a href="#price" class="button button--lg button--lg--coin button--dark">
                Посмотреть цены
-              </button>
+              </a>
            </div>
          </div>
        </div>
@@ -518,6 +518,7 @@
                type="text"
                placeholder="Введите ваше имя"
                autocomplete="off"
+                minlength="3"
                required
              />
              <input
@@ -526,6 +527,7 @@
                type="tel"
                placeholder="Введите ваш телефон"
                autocomplete="off"
+                pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
                required
              />
              <button class="button button--lg button--light">Получить помощь</button>
@@ -1913,6 +1915,7 @@
                type="text"
                placeholder="Введите ваше имя"
                autocomplete="off"
+                minlength="3"
                required
              />
              <input
@@ -1921,6 +1924,7 @@
                type="text"
                placeholder="Введите ваш телефон"
                autocomplete="off"
+                pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
                required
              />
              <button class="button button--lg button--light">Получить помощь</button>
@@ -2007,6 +2011,7 @@
              type="text"
              placeholder="Введите ваше имя"
              autocomplete="off"
+              minlength="3"
              required
            />
            <input
@@ -2015,6 +2020,7 @@
              type="tel"
              placeholder="Введите ваш телефон"
              autocomplete="off"
+              pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
              required
            />
            <button class="button button--lg button--light">Получить помощь</button>