Merge pull request #52 from KhawajaFashi/add-social-links

Social Links Working and designing

index.html

@@ -269,10 +269,18 @@ <h4>Our Address</h4>
                 <div class="footer-section">
                     <h4 class="follow">Follow Us on</h4>
                     <div class="social-links">
-                        <img src="images/fb.png" alt="Facebook" />
-                        <img src="images/tw.png" alt="Twitter" />
-                        <img src="images/ig.png" alt="Instagram" />
-                        <img src="images/linkdin.png" alt="linkdin" />
+                        <a href="https://www.facebook.com/" target="_blank">
+                            <ion-icon name="logo-facebook"></ion-icon>
+                        </a>
+                        <a href="https://www.twitter.com/" target="_blank">
+                            <ion-icon name="logo-twitter"></ion-icon>
+                        </a>
+                        <a href="https://www.instagram.com/" target="_blank" class="instagram-link">
+                            <ion-icon name="logo-instagram" class="instagram-icon"></ion-icon>
+                        </a>
+                        <a href="https://pk.linkedin.com/" target="_blank">
+                            <ion-icon name="logo-linkedin"></ion-icon>
+                        </a>
                     </div>
                 </div>
             </div>
@@ -284,6 +292,8 @@ <h4 class="follow">Follow Us on</h4>
     </footer>
 
     <script src="script.js"></script>
+    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
 </body>
 
 </html>

style.css

@@ -19,6 +19,7 @@
     align-items: center;
     position: fixed;
     top: 0;
+    overflow: hidden;
     background-color: #fff;
     z-index: 1000;
 }
@@ -373,14 +374,42 @@ button:hover {
     font-size: 12px;
 }
 
-.social-links img {
-    height: 30px;
+.social-links a {
+    text-decoration: none;
+}
+
+.social-links a:first-child {
+    color: #3b5998;
+}
+
+.social-links a:nth-child(2) {
+    color: #1DA1F2;
+}
+
+.social-links a:last-child {
+    color: #0077b5;
+}
+
+.instagram-link {
+    display: inline-block;
+}
+
+.instagram-icon {
+    font-size: 64px;
+    background: radial-gradient(circle at 30% 30%, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+    mask-image: url('https://unpkg.com/[email protected]/dist/svg/logo-instagram.svg');
+    mask-size: cover;
+    color: transparent;
+}
+
+.social-links ion-icon {
+    font-size: 30px;
     margin: 14px;
     cursor: pointer;
     transition: transform 0.3s;
 }
 
-.social-links img:hover {
+.social-links ion-icon:hover {
     transform: scale(1.2);
 }
 
@@ -555,4 +584,5 @@ button:hover {
     #menuList {
         overflow: hidden;
         transition: 0.5s;
-    }
+    }
+}