Add social media logo icons to website

index.html

@@ -18,6 +18,20 @@
     <div class="centered-content">
         <h1>reiyua</h1>
         <p class="email">rei@reiyua.lol</p>
+        <div class="social-icons">
+            <a href="https://instagram.com/reiyua" target="_blank">
+                <img src="assets/instagram-logo.png" alt="Instagram" class="social-logo">
+            </a>
+            <a href="discord://-/users/1024179829911855234" target="_blank">
+                <img src="assets/discord-logo.png" alt="Discord" class="social-logo">
+            </a>
+            <a href="https://youtube.com/@reiyua" target="_blank">
+                <img src="assets/youtube-logo.png" alt="YouTube" class="social-logo">
+            </a>
+            <a href="https://github.com/reiyua" target="_blank">
+                <img src="assets/github-logo.png" alt="GitHub" class="social-logo github-logo">
+            </a>
+        </div>
     </div>
     <div class="credit">
         Video by <a href="https://www.pexels.com/video/an-orange-liquid-paint-in-motion-5649211/" target="_blank" rel="noopener noreferrer">Dan Cristian Pădureț</a> from Pexels

styles.css

@@ -56,3 +56,28 @@ h1 {
 .credit a:hover {
     text-decoration: none;
 }
+
+.social-icons {
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.social-logo {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+    transition: transform 0.3s ease;
+}
+
+.social-logo.github-logo {
+    width: 90px; /* Increase the size of the GitHub logo slightly */
+    height: 90px;
+    margin-left: -30px;
+}
+
+.social-logo:hover {
+    transform: scale(1.2);
+}