Merge pull request #2950 from Bhanuprakash842/main

footer section icons in homepage
anuragverma108 · Oct 4, 2024 · 9c7415d · 9c7415d
2 parents 3f10ea8 + 122fd26
commit 9c7415d
Showing 1 changed file with 74 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -956,6 +956,74 @@
   border-radius: 10px;
 }
 
+.footer-icons{
+  margin-top: 20px;
+  display: flex;
+  font-size: 24px;
+}
+
+
+.footer-icons .icon i {
+  font-size: 24px;
+  /* Set the default font size for icons */
+  transition: all 0.15s ease;
+  /* Add transition for smooth animation */
+}
+
+.footer-icons .icon:hover {
+  transform: scale(1.5);
+  /* Scale the icon on hover */
+}
+
+
+.footer-icons .icon:hover .fa-linkedin {
+  color:#3e57bc;
+  transform: scale(1);
+  /* Scale the instagram icon on hover */
+}
+
+.footer-icons .icon:hover .fa-facebook {
+  color: #0077B5;
+  /* Change to Facebook color on hover */
+}
+
+.footer-icons .icon:hover .fa-twitter {
+  color: black;
+  /* Change to Twitter color on hover */
+}
+
+.footer-icons .icon .fa-instagram {
+  color: grey;
+  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
+}
+
+
+.footer-icons .icon:hover .fa-instagram {
+  background: radial-gradient(
+    circle at 30% 107%,
+    #fdf497 0%,
+    #fdf497 5%,
+    #fd5949 45%,
+    #d6249f 60%,
+    #285aeb 90%
+  );
+  background-clip: text;
+  -webkit-background-clip: text; 
+  color: transparent; 
+  border-radius: 20%;
+  transform: scale(1.1); 
+  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
+}
+
+.footer-icons .icon:hover .fa-youtube {
+  color: #ff0001;
+  /* Change to YouTube color on hover */
+}
+
+.footer-icons .icon:hover .fa-github {
+  color: rgb(20, 15, 15);
+  /* Change to Github color on hover */
+}
   </style>
  <script type="text/javascript">
   emailjs.init("Your_User_ID"); // Replace with your actual EmailJS User ID
@@ -3739,7 +3807,9 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem;">Stay Connected</h2>
             </div>
         </form>
         <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
-        <div class="icons" style="margin-top: 1rem;">
+
+        <div class="footer-icons">
+
           <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
             <div class="icon">
               <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;  "></i>
@@ -3758,13 +3828,12 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem;">Stay Connected</h2>
             </div>
           </a>
 
-          <a href="https://www.instagram.com/">
-            <div class="icon" id="insta-icon">
-              <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+          <a href="https://www.instagram.com/" >
+            <div class="icon" id="insta-icon" >
+              <i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i>
             </div>
           </a>
 
-
           <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
             <div class="icon">
               <i class="fab fa-youtube" style="cursor: pointer;"></i>