added hover effect to links, added href targets to icon links, reduce…

…d green line height
kithenry · Aug 14, 2024 · 5d67a6e · 5d67a6e
1 parent 8dce71c
commit 5d67a6e
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -13,6 +13,9 @@
     --header-font: 'Roboto', sans-serif;
     --body-font: ;
     --footer-font: ;
+
+    /* transitions */
+    --base-transition: all .45s ease-in-out;
 }
 
 
@@ -98,17 +101,19 @@ header .navlinks {
 
 header a {
     color: var(--color-light);
+    transition: var(--base-transition);
 }
 
 header a:hover {
     color: var(--color-secondary);
+
 }
 
 
 
 .green-line {
     width: 100%;
-    height: 10px;
+    height: 8px;
     background-color: var(--color-secondary);
 }
 
@@ -174,6 +179,12 @@ header a:hover {
     padding-top: 15px;
     margin-bottom: 4.5px;
     margin-right: 6px;
+    transition: var(--base-transition);
+}
+
+.follow-icons .icons i:hover {
+    background-color: var(--color-secondary);
+    box-shadow: none;
 }
 
 .about-me {
@@ -251,10 +262,15 @@ header a:hover {
     font-family: var(--header-font)
 }
 
-.pages a {
+footer a {
     color: var(--color-light);
+    transition: var(--base-transition);
 }
 
+.pages a:hover{
+    color: var(--color-secondary);
+    transition: var(--base-transition);
+}
 
 
 .copyright {

diff --git a/assets/snippets/footer.html b/assets/snippets/footer.html
@@ -1,7 +1,7 @@
 <div class="container-fluid p-0  text-white footer-container">
     <div class="follow-icons">
         <h4 class="">FOLLOW</h4>
-        <div class="icons">
+        <!-- <div class="icons">
 
             <ul class="list-unstyled icon-list 1">
                 <li>
@@ -20,19 +20,59 @@ <h4 class="">FOLLOW</h4>
             </ul>
             <ul class="list-unstyled icon-list 2">
                 <li>
-
-                    <i class="fa fa-github" aria-hidden="true"></i>
-
+                    <a href="">
+                        <i class="fa fa-github" aria-hidden="true"></i>
+                    </a>
                 </li>
                 <li>
-                    <i class="fa fa-twitter" aria-hidden="true"></i>
+                    <a href="">
+                        <i class="fa fa-twitter" aria-hidden="true"></i>
+                    </a>
 
                 </li>
                 <li>
-                    <i class="fa fa-linkedin" aria-hidden="true"></i>
+                    <a href="https://www.linkedin.com">
+                        <i class="fa fa-linkedin" aria-hidden="true"></i>
+                    </a>
 
                 </li>
             </ul>
+        </div> -->
+        <div class="icons">
+            <ul class="list-unstyled icon-list 1">
+                <li>
+                    <a href="https://github.com">
+                        <i class="fa fa-github" aria-hidden="true"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitter.com">
+                        <i class="fa fa-twitter" aria-hidden="true"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://linkedin.com">
+                        <i class="fa fa-linkedin" aria-hidden="true"></i>
+                    </a>
+                </li>
+            </ul>
+            <ul class="list-unstyled icon-list 2">
+                <li>
+                    <a href="https://github.com">
+                        <i class="fa fa-github" aria-hidden="true"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitter.com">
+                        <i class="fa fa-twitter" aria-hidden="true"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://linkedin.com">
+                        <i class="fa fa-linkedin" aria-hidden="true"></i>
+                    </a>
+                </li>
+            </ul>
         </div>
 
 
@@ -48,7 +88,7 @@ <h4>ABOUT ME</h4>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
                 repellat ut illo.
             </p>
-            <a class="button contact-me-btn">Contact
+            <a class="button contact-me-btn" href="/contact/index.html">Contact
                 Me</a>
         </div>
     </div>