Merge pull request #763 from AsmitaMishra24/main

Added Floating Iconbar
ChromeGaming · Aug 10, 2024 · adbb39c · adbb39c
2 parents 960acb2 + 7d686af
commit adbb39c
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" href="./styles/mainstyle.css" />
+		<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"
+		/>
+		<!-- JavaScript files -->
+		<script defer src="./js/validation.js"></script>
+		<script defer src="./js/index.js"></script>
+		<!-- Logo of the game -->
+		<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
+		<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+		/>
+		<script src="./js/emoji.js"></script>
+		<title>Dots & Boxes Game</title>
+	</head>
+
+
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -172,6 +199,32 @@ <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">
+				<div class="players"></div>
+				<video autoplay muted class="video" loop id="myVideo2">
+					<source src="/assets/videos/2.mp4" type="video/mp4" />
+				</video>
+				<div class="player-turn">
+					<div class="bg"><span class="name">PlayerX</span>'s turn</div>
+				</div>
+				<div class="flex-btn">
+					<button class="mute-btn button">Mute</button>
+					<button class="restart-btn button">Restart</button>
+				</div>
+			</div>
+		</div> -->
+
 	</div>
 	<div id="footer-placeholder"></div>
 

diff --git a/styles/index.style.css b/styles/index.style.css
@@ -294,6 +294,32 @@ form {
 	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 {