many fixes

source/index.html

@@ -1206,14 +1206,47 @@ <h2 class="reviews__title section-title section-title--dark">
             <h2 class="form__title section-title section-title--light">
               Бесплатное занятие
             </h2>
+            <form action="https://echo.htmlacademy.ru" method="GET">
+              <p class="form__input">
+                <label class="visually-hidden">
+                  Имя
+                </label>
+                <input type="text" name="user" placeholder="Имя" required>
+              </p>
+              <p class="form__input">
+                <label class="visually-hidden">
+                  Телефон
+                </label>
+                <input type="tel" pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}" name="phone"
+                  placeholder="Телефон" required>
+              </p>
+              <button type="submit">Отправить</button>
+            </form>
           </div>
         </section>
         <section class="info__col info__col--contacts contacts">
           <div class="contacts__container">
             <h2 class="contacts__title section-title section-title--dark">
               Контакты
             </h2>
-            <div class="contacts__content"></div>
+            <div class="contacts__content">
+              <div class="contacts__item">
+                <h3 class="contacts__item-title">Адрес:</h3>
+                <p class="contacts__item-descr">г. Омск, ул. 60 лет Октября, 7</p>
+              </div>
+              <div class="contacts__item">
+                <h3 class="contacts__item-title">График работы:</h3>
+                <p class="contacts__item-descr">Пн-Вс: с 8:00 до 22:00</p>
+              </div>
+              <div class="contacts__item">
+                <h3 class="contacts__item-title">Телефон:</h3>
+                <a href="tel:88005555555" class="contacts__item-descr">8 800 555-55-55</a>
+              </div>
+              <div class="contacts__item">
+                <h3 class="contacts__item-title">Email:</h3>
+                <a href="tel:88005555555" class="contacts__item-descr">oмск@supergym.ru</a>
+              </div>
+            </div>
           </div>
         </section>
       </div>

source/sass/blocks/about.scss

@@ -216,13 +216,16 @@
 
   &:focus {
     outline: none;
+  }
 
+  &:focus-visible {
+    outline: none;
     &::before {
       background-image: url("../../img/svg/video-btn-focus.svg");
     }
   }
 
-  &:hover {
+  &:hover:not(:disabled):not(:focus-visible) {
     &::before {
       background-image: url("../../img/svg/video-btn-hover.svg");
     }

source/sass/blocks/accordion-tabs.scss

@@ -12,9 +12,7 @@
   cursor: pointer;
   background-color: $color-transparent;
   border: 1px solid rgba($color-dark, 0.2);
-  transition:
-    opacity $trans-default,
-    background-color $trans-default,
+  transition: opacity $trans-default, background-color $trans-default,
     color $trans-default;
 
   @include vp-1365 {
@@ -23,25 +21,39 @@
 
   &:focus {
     outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
     border: 1px solid $color-dark;
     background-color: $color-white;
   }
 
-  &:hover {
+  &:hover:not(:disabled):not(:focus-visible) {
     border: 1px solid $color-dark;
   }
 
-  &:active,
-  &.is-active {
+  &:active {
     background: linear-gradient(97.05deg, #ed0233 17.6%, #003eb7 95.31%);
     border: 1px solid $color-transparent;
     color: $color-white;
   }
 
-  &:disabled,
-  &.disabled {
+  &:disabled {
     color: #c8c9cc;
     border: 1px solid rgba($color-dark, 0.2);
     pointer-events: none;
   }
 }
+
+.accordion-tabs.is-active {
+  background: linear-gradient(97.05deg, #ed0233 17.6%, #003eb7 95.31%);
+  border: 1px solid $color-transparent;
+  color: $color-white;
+}
+
+.accordion-tabs.disabled {
+  color: #c8c9cc;
+  border: 1px solid rgba($color-dark, 0.2);
+  pointer-events: none;
+}

source/sass/blocks/accordion.scss

@@ -148,23 +148,31 @@
 
   &:focus {
     outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
     border: 1px solid $color-dark-alternative;
     background-color: #74819c;
     color: $color-white;
   }
 
-  &:hover {
+  &:hover:not(:disabled):not(:focus-visible) {
     background-color: $color-dark-alternative;
     color: $color-white;
   }
 
-  &:disabled,
-  &.disabled {
+  &:disabled {
     opacity: 0.3;
     pointer-events: none;
   }
 }
 
+.accordion__item-btn.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
 .accordion__item-btn svg {
   @include vp-767 {
     width: 14px;

source/sass/blocks/btn.scss

@@ -11,9 +11,7 @@
   text-transform: uppercase;
   text-align: center;
   cursor: pointer;
-  transition:
-    opacity $trans-default,
-    background-color $trans-default,
+  transition: opacity $trans-default, background-color $trans-default,
     color $trans-default;
 
   &--on-dark {
@@ -23,12 +21,16 @@
 
     &:focus {
       outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
       border-color: $color-black;
       background-color: rgba($color-transparent, 0.8);
       color: $color-action;
     }
 
-    &:hover {
+    &:hover:not(:disabled):not(:focus-visible) {
       background-color: $color-white;
       color: $color-action;
     }
@@ -52,17 +54,20 @@
 
     &:focus {
       outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
       border-color: $color-black;
-      background:
-        linear-gradient(
-          151deg,
-          rgba(237, 2, 51, 0.8) 0%,
-          rgba(0, 62, 183, 0.8) 100%
-        );
+      background: linear-gradient(
+        151deg,
+        rgba(237, 2, 51, 0.8) 0%,
+        rgba(0, 62, 183, 0.8) 100%
+      );
       color: $color-white;
     }
 
-    &:hover {
+    &:hover:not(:disabled):not(:focus-visible) {
       border: none;
       background: $fill-gradient;
       color: $color-white;

source/sass/blocks/contacts.scss

@@ -0,0 +1,156 @@
+.contacts {
+  // display: flex;
+  width: 50%;
+  // min-height: 338px;
+  position: relative;
+  border-top: 1px solid #74819c;
+
+  @include vp-1365 {
+    width: 100%;
+    // min-height: 327px;
+    justify-content: center;
+  }
+
+  @include vp-767 {
+    // min-height: 438px;
+    // border-top: none;
+  }
+
+  // &::before {
+  //   position: absolute;
+  //   content: "";
+  //   width: 100%;
+  //   height: 1px;
+  //   top: 0;
+  //   left: 0;
+  //   right: 0;
+  //   background-color: #74819c;
+
+  //   @include vp-767 {
+  //     display: none;
+  //   }
+  // }
+}
+
+.contacts__container {
+  margin-right: 103px;
+  margin-left: 103px;
+  width: 477px;
+  padding-top: 60px;
+  padding-bottom: 60px;
+
+  @include vp-1365 {
+    margin: 0;
+    width: 440px;
+    // padding-bottom: 59px;
+  }
+
+  @include vp-767 {
+    width: 290px;
+    margin: 0 auto;
+    padding-top: 36px;
+    // padding-bottom: 36px;
+  }
+}
+
+.contacts__title {
+  margin: 0;
+  margin-bottom: 36px;
+
+  @include vp-1365 {
+    text-align: center;
+    font-size: 54px;
+    line-height: 54px;
+  }
+
+  @include vp-767 {
+    margin-bottom: 38px;
+    text-align: left;
+    font-size: 32px;
+    line-height: 32px;
+  }
+}
+
+.contacts__content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, minmax(51px, auto));
+  grid-column-gap: 120px;
+  grid-row-gap: 15px;
+  align-items: start;
+  position: relative;
+
+  @include vp-1365 {
+    grid-column-gap: 60px;
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    width: 1px;
+    height: 100%;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #74819c;
+
+    @include vp-767 {
+      display: none;
+    }
+  }
+
+  @include vp-767 {
+    display: flex;
+    flex-direction: column;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+    row-gap: 28px;
+  }
+}
+
+.contacts__item {
+  display: flex;
+  flex-direction: column;
+  justify-self: flex-start;
+  align-items: flex-start;
+}
+
+.contacts__item:nth-child(1) {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.contacts__item:nth-child(2) {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.contacts__item:nth-child(3) {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.contacts__item:nth-child(4) {
+  grid-area: 2 / 2 / 3 / 3;
+}
+
+.contacts__item-title {
+  margin: 0;
+  margin-bottom: 5px;
+  font-size: 24px;
+  line-height: 24px;
+  font-weight: 400;
+
+  @include vp-767 {
+    margin-bottom: 12px;
+    font-size: 20px;
+    line-height: 20px;
+  }
+}
+
+.contacts__item-descr {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+
+  @include vp-767 {
+    line-height: 20px;
+  }
+}