Adding Social Media Icons

about.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="./images/atom.png" type="image/png" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+      rel="stylesheet"
+    />
     <title>About</title>
     <style>
       * {
@@ -376,6 +380,64 @@
           transform: translateY(0);
         }
       }
+
+      /* Social Media Icon */
+      .icons {
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        gap: 35px;
+        background-color: rgb(34, 34, 34); /* Black background */
+        padding: 20px; /* Padding to provide some space around the icons */
+        box-shadow: 0 0 10px red; /* Red shadow */
+        border-radius: 10px;
+      }
+
+      .icons .icon i {
+        margin-top: 5px;
+        font-size: 30px;
+        transition: all 0.9s ease;
+        color: red;
+      }
+
+      .icons .icon:hover i {
+        transform: scale(1.2);
+      }
+
+      .icons .icon:hover .fab.fa-facebook {
+        color: #3b5998;
+      }
+
+      .icons .icon:hover .fab.fa-twitter {
+        color: #090e11;
+      }
+
+      .icons .icon:hover .fab.fa-instagram {
+        background: radial-gradient(
+          circle at 30% 107%,
+          #fdf497 0%,
+          #fdf497 5%,
+          #fd5949 45%,
+          #d6249f 60%,
+          #285aeb 90%
+        );
+        background-clip: text;
+        border-radius: 20%;
+        transform: scale(1.5);
+        color: transparent;
+      }
+
+      .icons .icon:hover .fab.fa-youtube {
+        color: #c31a1e;
+      }
+      .icons .icon:hover .fab.fa-github {
+        color: #333;
+      }
+      .icons .icon:hover .fab.fa-linkedin {
+        color: #0077b5;
+      }
     </style>
   </head>
 
@@ -419,9 +481,7 @@ <h3>Explore and Discover</h3>
           </li>
           <br />
           <li>
-            <span class="highlight">
-              <center>Level Up</center> </span
-            ><br />
+            <span class="highlight"> <center>Level Up</center> </span><br />
             Progress through 13 challenging levels, each with the goal of
             discovering 100 new elements. As you advance, the combinations
             become more intricate, pushing your problem-solving skills to the
@@ -564,9 +624,49 @@ <h3>Why Physi-c-Tech?</h3>
             discover!</span
           >
         </p>
+
+        <div class="icons">
+          <a href="https://www.linkedin.com/company/chromegaming">
+            <div class="icon">
+              <i
+                class="fab fa-linkedin"
+                title="linkedin"
+                style="cursor: pointer"
+              ></i>
+            </div>
+          </a>
+
+          <a href="">
+            <div class="icon">
+              <i class="fab fa-twitter" title="X" style="cursor: pointer"></i>
+            </div>
+          </a>
+
+          <a href="https://www.instagram.com/chromegamingon/">
+            <div class="icon">
+              <i
+                class="fab fa-instagram"
+                title="Instagram"
+                style="cursor: pointer"
+              ></i>
+            </div>
+          </a>
+
+          <a href="" title="YouTube">
+            <div class="icon">
+              <i class="fab fa-youtube" style="cursor: pointer"></i>
+            </div>
+          </a>
+
+          <a href="https://github.com/ChromeGaming">
+            <div class="icon">
+              <i class="fab fa-github" title="Github"></i>
+            </div>
+          </a>
+        </div>
       </div>
     </div>
-    <footer style="text-align: center">
+    <footer style="text-align: center; margin-top: 15px">
       &copy; 2024 Physi-c-Tech. All rights reserved.
     </footer>
   </body>