header состояние ссылок

htmlacademy · Oct 17, 2024 · 2a9f6fc · 2a9f6fc
1 parent de5d674
commit 2a9f6fc
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 34 deletions.
diff --git a/source/icons/menu-button.svg b/source/icons/menu-button.svg
diff --git a/source/index.html b/source/index.html
@@ -32,7 +32,7 @@
         </button>
         <ul class="main-nav__list site-list">
           <li class="site-list__item">
-            <a class="site-list__link site-list__link--active" href="index.html">
+            <a class="site-list__link site-list__link--active" href="#">
               главная
             </a>
           </li>
@@ -73,7 +73,55 @@
     <section data-test="map">
     </section>
   </main>
-  <footer data-test="footer">
+  <footer class="main-footer" data-test="footer">
+    <div class="main-footer__container">
+      <a class="main-footer__logo" href="index.html">
+        <picture>
+          <source media="(min-width: 1440px)" width="170" height="36" type="image/svg+xml"
+            srcset="images/logo-desktop.svg">
+          <source media="(min-width: 768px)" width="170" height="36" type="image/svg+xml"
+            srcset="images/logo-desktop.svg">
+          <img class="main-header__logo-image" src="images/logo-tablet.svg" width="82" height="36"
+            alt="Логотип Проекта Drink2Go">
+        </picture>
+        <span class="main-header__logo-text">Интернет-магазин кофейных напитков</span>
+      </a>
+      <ul class="main-footer__contacts contacts-list">
+        <li class="contacts-list__item">
+          <a class="contacts-list__adress" href="#">
+            Санкт-Петербург, набережная реки Карповки, дом 5
+          </a>
+        </li>
+        <li class="contacts-list__item">
+          <a class="contacts-list__phone" href="tel:+79999999999">
+            +7 (999) 999-99-99
+          </a>
+        </li>
+      </ul>
+      <ul class="main-footer__social-list social-list">
+        <li class="social-list__item">
+          <a class="social-list__link social-list__link--vk" href="https://vk.com/htmlacademy">
+            <span class="visually-hidden">Вконтакте</span>
+          </a>
+        </li>
+        <li class="social-list__item">
+          <a class="social-list__link social-list__link--youtube" href="https://www.youtube.com/user/htmlacademyru">
+            <span class="visually-hidden">Наш Ютюб канал</span>
+          </a>
+        </li>
+        <li class="social-list__item">
+          <a class="social-list__link social-list__link--telegram" href="https://t.me/htmlacademy">
+            <span class="visually-hidden">Телеграмм Канал</span>
+          </a>
+        </li>
+      </ul>
+      <a class="main-footer__copyright copyright" href="https://htmlacademy.ru/intensive/adaptive">
+        <span class="copyright__text">HTML Academy</span>
+        <div class="copyright__logotype">
+          <span class="visually-hidden">Логотип HTML Academy</span>
+        </div>
+      </a>
+    </div>
   </footer>
 </body>
 

diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 12px 20px;
+  padding-left: 20px;
   width: 320px;
   margin: 0 auto;
 

diff --git a/source/styles/blocks/main-nav.scss b/source/styles/blocks/main-nav.scss
@@ -20,18 +20,31 @@
 
 .main-nav__toggle {
   position: absolute;
-  top: 22px;
-  right: 22px;
+  top: 0;
+  right: 0;
   z-index: 2;
   display: block;
-  width: 16px;
-  height: 16px;
-  background-color: $basic-black;
-  mask-image: url("../../icons/menu-button.svg");
+  width: 60px;
+  height: 60px;
+  background-color: #ffffff;
   cursor: pointer;
   border: none;
   padding: 0;
 
+  &::before {
+    content: "";
+    display: block;
+    width: 60px;
+    height: 60px;
+    background-color: $basic-black;
+    mask-image: url("../../icons/menu-button.svg");
+    mask-size: 16px 16px;
+    mask-position: center;
+    cursor: pointer;
+    mask-repeat: no-repeat;
+    background-color: $basic-black;
+  }
+
   @media (min-width: $tablet-width) {
     display: none;
   }
@@ -42,7 +55,9 @@
   }
 
   &:active {
-    opacity: 0.3;
+    background-color: $secondary-color;
+    color: $basic-black;
+    opacity: 1;
   }
 
   &:disabled {
@@ -73,7 +88,7 @@
   .main-nav--opened .main-nav__list {
     position: absolute;
     display: block;
-    top: 65px;
+    top: 60px;
     border-top: 1px solid $secondary-color;
     left: 0;
     z-index: 10;
@@ -82,13 +97,7 @@
     background-color: #ffffff;
   }
 
-  .main-nav--opened .main-nav__toggle {
+  .main-nav--opened .main-nav__toggle::before {
     mask-image: url("../../icons/close-button.svg");
-    mask-size: 16px 16px;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    width: 20px;
-    height: 21px;
-    right: 20px;
   }
 }
diff --git a/source/styles/blocks/site-list.scss b/source/styles/blocks/site-list.scss
@@ -4,10 +4,11 @@
   @media (min-width: $tablet-width) {
     @include flex;
   }
-};
+}
+
+;
 
 .site-list__item {
-  padding: 20px 20px 21px;
   border-bottom: 1px solid $secondary-color;
 
   @media (min-width: $tablet-width) {
@@ -27,22 +28,16 @@
   text-align: center;
   text-decoration: none;
   position: relative;
+  padding: 20px 20px 21px;
 
   @media (min-width: $tablet-width) {
     padding: 32px 20px;
   }
 
-  &:hover,
-  &:focus-visible {
-    opacity: 0.6;
-  }
-
-  &:active {
-    opacity: 0.3;
-  }
-
   &--active {
-    color: $primary-color;
+    @media (min-width: $tablet-width) {
+      color: $primary-color;
+    }
   }
 
   &--active::after {
@@ -57,4 +52,24 @@
       background-color: $primary-color;
     }
   }
+
+  &:hover,
+  &:focus-visible {
+    opacity: 0.6;
+
+    @media (min-width: $tablet-width) {
+      color: $primary-color;
+      opacity: 1;
+    }
+  }
+
+  &:active {
+    background-color: $secondary-color;
+    color: $basic-black;
+
+    @media (min-width: $tablet-width) {
+      color: $primary-color;
+      background-color: $secondary-color;
+    }
+  }
 }
diff --git a/source/styles/blocks/user-list.scss b/source/styles/blocks/user-list.scss
@@ -9,7 +9,6 @@
     display: block;
     font-family: $primary-font;
     font-weight: 500;
-    color: $basic-black;
     font-size: 12px;
     line-height: 16px;
     text-transform: uppercase;
@@ -20,8 +19,9 @@
 
 .user-list__icon {
   position: relative;
+  color: $basic-black;
   width: 60px;
-  height: 36px;
+  height: 60px;
 
   @media (min-width: $desktop-width) {
     width: 112px;
@@ -30,13 +30,31 @@
     &--union {
       width: 129px;
     }
+
+    &:hover,
+    &:focus-visible {
+      color: $primary-color;
+
+      &::before {
+        background-color: $primary-color;
+      }
+    }
+
+    &:active {
+      background-color: $secondary-color;
+      color: $primary-color;
+
+      &::before {
+        background-color: $primary-color;
+      }
+    }
   }
 
   &::before {
     content: "";
     display: block;
     width: 60px;
-    height: 36px;
+    height: 60px;
     position: absolute;
     mask-repeat: no-repeat;
     mask-position: 50% 50%;