From 5b36e91c56e7180d48c546c0564f0d5ea758bfa7 Mon Sep 17 00:00:00 2001
From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com>
Date: Sat, 10 Aug 2024 16:23:59 +0530
Subject: [PATCH] Added Floating Iconbar

---
 index.html             | 10 ++++++++++
 styles/index.style.css | 29 ++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 6757350..f91a644 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="./styles/default.style.css" />
 		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="./styles/index.style.css" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
@@ -268,6 +269,15 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 				
 			</div>
 		</div>
+		<!-- Floating Social Media Icon -->
+		 <div class="floating-social">
+			<a href="https://twitter.com" target="_blank" class="social-icon"><i class="fab fa-twitter"></i></a>
+			<a href="https://instagram.com" target="_blank" class="social-icon"><i class="fab fa-instagram"></i></a>
+			<a href="https://facebook.com" target="_blank" class="social-icon"><i class="fab fa-facebook"></i></a>
+			<a href="https://linkedin.com" target="_blank" class="social-icon"><i class="fab fa-linkedin"></i></a>
+    <!-- Add more icons as needed -->
+	</div>
+
 		<!-- <div class="flex">
 			<div class="board"></div>
 			<div class="score">
diff --git a/styles/index.style.css b/styles/index.style.css
index 5e8f3ff..88935d3 100644
--- a/styles/index.style.css
+++ b/styles/index.style.css
@@ -369,6 +369,32 @@ display: flex;
 justify-content: space-between;
 }
 
+.floating-social {
+    position: fixed;
+    top: 50%;
+    right: 20px; 
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1000; 
+}
+
+.social-icon {
+    background: #333; 
+    color: #fff; 
+    border-radius: 50%;
+    padding: 10px;
+    margin: 5px;
+    font-size: 25px;
+    transition: background 0.3s ease, transform 0.3s ease;
+    text-decoration: none;
+}
+
+.social-icon:hover {
+    background: #555;
+    transform: scale(1.1);
+}
 
 
 @keyframes fadeIn {
@@ -636,9 +662,6 @@ footer {
 }
 
 
-}
-
-
 body {
     font-family: Arial, sans-serif;
 }