Merge pull request #338 from TBorundia/main

Added Social Media icons
Dev-tanay · Jun 30, 2024 · 66ae03d · 66ae03d
2 parents ea5b688 + 66d0341
commit 66ae03d
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/AboutUs/About.css b/AboutUs/About.css
@@ -259,3 +259,54 @@ body {
     right: 1em;
   }
 }
+
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  gap: 25px;
+}
+
+.icons .icon i {
+  margin-top: 15px;
+  font-size: 30px;
+  transition: all 0.9s ease;
+}
+
+.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;
+}
diff --git a/AboutUs/About.html b/AboutUs/About.html
@@ -84,6 +84,40 @@ <h3>Permutation of Last Layer (PLL)</h3>
   </div>
   <hr/>
 
+  <div class="icons">
+    <a href="">
+      <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="">
+      <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="">
+      <div class="icon">
+        <i class="fab fa-github" title="Github"></i>
+      </div>
+    </a>
+
+  </div>
+
   <footer class="footer">
     <p id="current-year" class="text--footer">© <span id="year"></span> Rubik-Cube</p>
   </footer>