Merge pull request #2976 from monishkumardvs/proper-allignment

Did proper allignment in footer section
anuragverma108 · Oct 5, 2024 · 8c7bbee · 8c7bbee
2 parents cb653ea + e5b5b3b
commit 8c7bbee
Showing 1 changed file with 45 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -1021,9 +1021,30 @@
 }
 
 .footer-icons .icon:hover .fa-github {
-  color: rgb(20, 15, 15);
+  color: rgb(20, 15, 15);}
   /* Change to Github color on hover */
+
+.icons {
+  display: flex;
+  gap: 10px; 
+  align-items: center;
+  justify-content: center; 
+}
+
+.icon i {
+  font-size: 24px; 
+    color: #000; 
+
+  cursor: pointer;
+  margin: 0; 
+  padding: 0; 
 }
+
+.icon i:hover {
+  color: #555; 
+}
+
+
   </style>
  <script type="text/javascript">
   emailjs.init("Your_User_ID"); // Replace with your actual EmailJS User ID
@@ -3897,55 +3918,56 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem;">Stay Connected</h2>
 
 
         <div class="icons">
-         <a href="https://www.discord.com/" target="_blank">
-              <div class="icon">
-                   <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
-               </div>
+          <!-- Discord icon -->
+          <a href="https://www.discord.com/" target="_blank">
+            <div class="icon">
+              <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+            </div>
           </a>
-
-        <div class="footer-icons">
-
-
+
+          <!-- LinkedIn icon -->
           <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>
+              <i class="fab fa-linkedin" title="LinkedIn" style="cursor: pointer;"></i>
             </div>
           </a>
-
+
+          <!-- Facebook icon -->
           <a href="https://www.facebook.com/" target="_blank">
             <div class="icon">
               <i class="fab fa-facebook" title="Facebook" style="cursor: pointer;"></i>
             </div>
           </a>
-
+
+          <!-- X (formerly Twitter) icon -->
           <a href="https://x.com/anuragverma_108" target="_blank">
             <div class="icon">
-              <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+              <i class="fab fa-twitter" title="X" style="cursor: pointer;"></i>
             </div>
           </a>
-
-          <a href="https://www.instagram.com/" >
-            <div class="icon" id="insta-icon" >
+
+          <!-- Instagram icon -->
+          <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>
-
+
+          <!-- YouTube icon -->
           <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
             <div class="icon">
               <i class="fab fa-youtube" style="cursor: pointer;"></i>
             </div>
           </a>
-
-
-
+
+          <!-- GitHub icon -->
           <a href="https://github.com/anuragverma108">
             <div class="icon">
-              <i class="fab fa-github" title="Github"></i>
+              <i class="fab fa-github" title="GitHub"></i>
             </div>
           </a>
-
-          </div>  
         </div>
+
        </div>
        <div>
         <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">