Merge pull request #893 from Saipradyumnagoud/main

feat: Added social media links
apu52 · Jun 28, 2024 · b48381b · b48381b
2 parents 4503b42 + a7a6117
commit b48381b
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
     integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 
   <link rel="stylesheet" href="styles.css" />
   <link rel="stylesheet" href="./Image-Gallery/style.css">
@@ -1093,6 +1093,32 @@ <h4>Reach Out To Us</h4>
           <p><span>Phone:</span><a href="tel:8562145852">+91 8562145852</a></p>
         </div>
         </div>
+        <div class="footer__col">
+          <div class="footer__area">
+            <h4>Follow Us</h4>
+
+              <a href="https://www.facebook.com/yourpage" target="_blank" class="footer__link">
+                <i class="fab fa-facebook-f"></i> 
+              </a>
+
+
+              <a href="https://twitter.com/ArpanCh40193288" target="_blank" class="footer__link">
+                <i class="fab fa-twitter"></i> 
+              </a>
+
+
+              <a href="https://www.instagram.com/anuragbasu1973/" target="_blank" class="footer__link">
+                <i class="fab fa-instagram"></i> 
+              </a>
+
+
+              <a href="https://www.linkedin.com/in/arpan-chowdhury-775294251" target="_blank" class="footer__link">
+                <i class="fab fa-linkedin-in"></i> 
+              </a>
+
+          </div>
+        </div>
+
         <div class="footer__col">
           <div id="google_element"></div>
           <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
@@ -1105,7 +1131,7 @@ <h4>Reach Out To Us</h4>
           </script>
       </div>
 
-
+      
       <!--  New copyright code to make it dynamic and display current year -->
       <div class="footer__bar">
         <div>

diff --git a/styles.css b/styles.css
@@ -2,6 +2,27 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Oxygen:wght@300&display=swap');
 
 
+.footer__link:hover {
+  color: inherit; 
+}
+
+.footer__link[href*="facebook.com"]:hover {
+  color: #1877F2; 
+}
+
+.footer__link[href*="twitter.com"]:hover {
+  color: #1DA1F2; /
+}
+
+.footer__link[href*="instagram.com"]:hover {
+  color: #E4405F; 
+}
+
+.footer__link[href*="linkedin.com"]:hover {
+  color: #0A66C2; 
+}
+
+
 :root {
   --primary-color: #3685fb;
   --primary-color-dark: #2f73d9;
@@ -1250,18 +1271,14 @@ body.dark-theme #emailInput {
 }
 */
 
-.footer__link{
-  font-size: 1rem;
-  cursor: pointer;
-  transition: 0.3s;
+.footer__link {
   color: white;
+  margin-right: 15px; /* Adjust spacing between icons */
+  font-size: 1.3em; /* Initial font size */
 }
 
-
 .footer__link:hover {
-  color: #ff0000;
-  font-size: 13px;
-  overflow: hidden;
+  transform: scale(10); /* Scale up the icon on hover */
 }
 
 .footer__col p span {