Merge pull request #20 from AnnaSamtash/animation

hover and focus

src/css/footer.css

@@ -47,6 +47,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  transition: background-color 250ms linear;
 }
 
 .footer-link {
@@ -55,6 +56,8 @@
   font-weight: 400;
   line-height: 1.3;
   text-transform: uppercase;
+  padding: 15px 12px;
+  transition: color 250ms linear;
 }
 
 .footer-social {
@@ -80,8 +83,11 @@
 
 .footer-social-icon {
   fill: #fbfbfb;
+  transition: fill-opacity 250ms linear;
+}
+.footer-social-item-icon:active .footer-social-icon {
+  fill-opacity: 0.8;
 }
-
 .footer-title {
   margin: 40px auto 82px;
   max-width: 279px;
@@ -109,7 +115,12 @@
   letter-spacing: -0.03em;
   flex-shrink: 1;
 }
-
+.footer-item:active {
+  background-color: #fbfbfb;
+}
+.footer-item:active .footer-link {
+  color: #1b414b;
+}
 @media screen and (max-width: 340px) {
   .footer-container {
     padding-left: 10px;
@@ -162,6 +173,23 @@
   .copyright-info {
     gap: 32px;
   }
+  .footer-link {
+    padding-right: 25px;
+    padding-left: 24px;
+  }
+  .footer-item:hover,
+  .footer-item:focus {
+    background-color: #fbfbfb;
+    color: #1b414b;
+  }
+  .footer-item:hover .footer-link,
+  .footer-item:focus .footer-link {
+    color: #1b414b;
+  }
+  .footer-social-item-icon:hover .footer-social-icon,
+  .footer-social-item-icon:focus .footer-social-icon {
+    fill-opacity: 0.8;
+  }
 }
 
 @media screen and (min-width: 1280px) {

src/css/header.css

@@ -50,6 +50,7 @@
   border-radius: 8px;
   background: #1b414b80;
   padding: 15px 25px 15px 24px;
+  transition: background-color 250ms linear;
 }
 
 @media screen and (min-width: 320px) and (max-width: 767px) {
@@ -84,10 +85,6 @@
     column-gap: 4px;
   }
 
-  .hover {
-    background-color: #1b414b;
-  }
-
   .header-social-list {
     display: flex;
     column-gap: 8px;
@@ -100,6 +97,17 @@
   .navbar-brand {
     font-size: 20px;
   }
+  .navbar-menu-btn:hover,
+  .navbar-menu-btn:focus {
+    background-color: #1b414b;
+  }
+  .header-social-list-icon {
+    transition: fill 250ms linear;
+  }
+  .header-social-list-icon:hover,
+  .header-social-list-icon:focus {
+    fill: #062730;
+  }
 }
 
 @media screen and (min-width: 1280px) {

src/css/hero.css

@@ -24,8 +24,8 @@
         rgba(17, 19, 31, 0.8) 42.62%,
         rgba(17, 19, 31, 0.31) 84.12%,
         rgba(17, 19, 31, 0) 99.94%
-    ),
-      url(../img/hero/[email protected])
+      ),
+      url(../img/hero/[email protected]);
   }
 }
 
@@ -92,7 +92,6 @@
 
 /*-----TABLET-----*/
 
-
 @media screen and (min-width: 768px) {
   .background-picture {
     background-image: linear-gradient(
@@ -150,7 +149,12 @@
     background-color: #fbfbfb;
     color: #1b414b;
   }
-
+  .hero-btn:hover,
+  .hero-btn:focus {
+    background-color: #fbfbfb;
+    color: #1b414b;
+  }
+  /* 
   .hero-btn {
     position: relative;
     appearance: none;
@@ -189,13 +193,11 @@
 
   &:hover::before {
     --size: 350px;
-  }
+  } */
 }
 
 /*-----DESKTOP1280-----*/
 
-
-
 @media screen and (min-width: 1280px) {
   .background-picture {
     background-image: linear-gradient(

src/css/mobil-menu.css

@@ -85,6 +85,7 @@
     padding: 20px 25px 20px 24px;
     border-radius: 8px;
     width: 91px;
+    transition: background-color 250ms linear, color 250ms linear;
   }
 
   .dark {
@@ -111,9 +112,11 @@
     height: 100%;
     fill: #fbfbfb;
   }
-
-  .mob-menu-social-link:hover,
-  .mob-menu-social-link:focus {
+  .mob-menu-navigation-link:active {
+    background-color: #fbfbfb;
+    color: #1b414b;
+  }
+  .mob-menu-social-link:active {
     fill: #fbfbfbcc;
   }
 }
@@ -122,4 +125,4 @@
   .mob-menu-thumb {
     display: none;
   }
-}
+}