Update

SWizzard779 · Nov 21, 2023 · 92e7b04 · 92e7b04
1 parent 40541fa
commit 92e7b04
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -473,6 +473,11 @@ main {
     background-color: #31D0AA;
 }
 
+.social-link-footer:hover,
+.social-link-footer:focus {
+    background-color: #31d0aa;
+}
+
 .social-link-footer {
     width: 100%;
     height: 100%;
@@ -482,4 +487,5 @@ main {
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
diff --git a/index.html b/index.html
@@ -329,28 +329,28 @@ <h3 class="strategy portfolio-subheader">Online Courses</h3>
                     <ul class="socials">
                         <li class="social-items social-items-footer">
                             <a href="" class="social-link-footer">
-                                <svg width="24" height="24">
+                                <svg class="icon" width="24" height="24">
                                     <use href="./images/icons.svg#icon-instagram"></use>
                                 </svg>
                             </a>
                         </li>
                         <li class="social-items social-items-footer">
                             <a href="" class="social-link-footer">
-                                <svg width="24" height="24">
+                                <svg class="icon" width="24" height="24">
                                     <use href="./images/icons.svg#icon-twitter"></use>
                                 </svg>
                             </a>
                         </li>
                         <li class="social-items social-items-footer">
                             <a href="" class="social-link-footer">
-                                <svg width="24" height="24">
+                                <svg class="icon" width="24" height="24">
                                     <use href="./images/icons.svg#icon-facebook"></use>
                                 </svg>
                             </a>
                         </li>
                         <li class="social-items social-items-footer">
                             <a href="" class="social-link-footer">
-                                <svg width="24" height="24">
+                                <svg class="icon" width="24" height="24">
                                     <use href="./images/icons.svg#icon-linkedin"></use>
                                 </svg>
                             </a>