Merge pull request #92 from Ayushmaanagarwal1211/side-icons

sanjay-kv · web-flow · commit ab3df08c4365 · 2024-08-05T18:47:08.000+10:00
Added Side icons of Social media
diff --git a/index.html b/index.html
@@ -10,6 +10,8 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
   </head>
   <body>
     <nav class="navbar">
@@ -30,6 +32,24 @@
         </div>
       </div>
     </nav>   
+    <div class="side-icons">
+      <a href="https://facebook.com" target="_blank" aria-label="Facebook">
+          <i class="fab fa-facebook-f"></i>
+      </a>
+      <a href="https://instagram.com" target="_blank" aria-label="Instagram">
+          <i class="fab fa-instagram"></i>
+      </a>
+      <a href="https://linkedin.com" target="_blank" aria-label="LinkedIn">
+          <i class="fab fa-linkedin-in"></i>
+      </a>
+      <a href="https://twitter.com" target="_blank" aria-label="Twitter">
+          <i class="fab fa-twitter"></i>
+      </a>
+      <a href="https://youtube.com" target="_blank" aria-label="YouTube">
+          <i class="fab fa-youtube"></i>
+      </a>
+  </div>
+  
     <div class="container">
       <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
       <div class="tags">
diff --git a/styles.css b/styles.css
@@ -479,3 +479,32 @@ body {
   transition: transform 1.5s ease-in-out;
 }
 
+.side-icons{
+  position: fixed;
+  left: 0px;
+  top: 30%;
+  height: 260px;
+  width: 70px;
+  align-items: center;
+  padding-top: 30px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+}
+body.dark-mode .side-icons {
+  background: #333;
+}
+.side-icons a {
+  color: #374151; /* Gray color for the icons */
+  font-size: 24px; /* Size of the icons */
+  text-decoration: none;
+}
+
+.side-icons a:hover {
+  color: #555; /* Darker gray on hover, or adjust to desired hover color */
+}
+body.dark-mode .side-icons  a{
+  color: white !important;
+}
