added hovering effects of icons

ankitmodanwall · May 17, 2024 · 5aead41 · 5aead41
1 parent 4183909
commit 5aead41
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -172,13 +172,30 @@ <h4>About Us</h4>
         <p>Welcome to our university, where academic excellence meets vibrant campus life. Join our <br>
             diverse community of learners and discover endless opportunities for growth, innovation, and success.</p>
         <div class="icons">
-            <a style="margin: 2px; color: blue;" href="https://www.facebook.com/"><i
+            <ul>
+                <li>
+                    <a style="color: blue;" href="https://www.facebook.com/" ><i
+                        class="fa-brands fa-facebook"></i></a>
+                </li>
+                <li>
+                    <a style=" color: #1DA1F2;" href="https://twitter.com/" ><i class="fa-brands fa-twitter"></i></a>
+                </li>
+                <li>
+                    <a style="color: #C13584;" href="https://www.instagram.com/" ><i
+                        class="fa-brands fa-instagram"></i></a>
+                </li>
+                <li>
+                    <a style=" color: #0077B5;" href="https://www.linkedin.com/" ><i
+                        class="fa-brands fa-linkedin"></i></a>
+                </li>
+            </ul>
+            <!-- <a style="color: blue;" href="https://www.facebook.com/" ><i
                     class="fa-brands fa-facebook"></i></a>
-            <a style="margin: 2px; color: #1DA1F2;" href="https://twitter.com/"><i class="fa-brands fa-twitter"></i></a>
-            <a style="margin: 2px; color: #C13584;" href="https://www.instagram.com/"><i
+            <a style=" color: #1DA1F2;" href="https://twitter.com/" ><i class="fa-brands fa-twitter"></i></a>
+            <a style="color: #C13584;" href="https://www.instagram.com/" ><i
                     class="fa-brands fa-instagram"></i></a>
-            <a style="margin: 2px; color: #0077B5;" href="https://www.linkedin.com/"><i
-                    class="fa-brands fa-linkedin"></i></a>
+            <a style=" color: #0077B5;" href="https://www.linkedin.com/" ><i
+                    class="fa-brands fa-linkedin"></i></a> -->
         </div>
 
         <button class="go-top-btn">

diff --git a/style.css b/style.css
@@ -609,4 +609,29 @@ h3 {
     width: 40px;
     height: 40px;
   }
-
+  .icons ul li{
+    display:inline-block;
+    /* margin:10px 20px 10px 20px; */
+    margin:10px;
+    opacity:0.8;
+  }
+  .icons ul li:hover{
+    opacity:1;
+    transform: scale(1.5);
+    transition-timing-function: ease-in-out;
+    transform:scale(1.5) ;
+  }
+  .icons ul li i{
+    position: relative;
+  }
+  .icons ul li a:hover i{
+    transform:rotateY(360deg);
+    transition:transform 2.5s;
+    transition-delay:0.275s;
+    transition-duration: 3s;
+
+  }
+  .icons ul li i:before{
+    transition:.5s;
+    top:0;
+  }