Merge pull request #741 from sailaja-adapa/footer

Removed Dissortion
ChromeGaming · Aug 10, 2024 · 6025589 · 6025589
2 parents 5d67c4d + 3d22870
commit 6025589
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -188,6 +188,34 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 					</div>
 				</div>
 			</div>
+			<div class="author">
+				<div class="fotbar">
+					<a href="./pages/howtoplay.html"><i class="fas fa-gamepad"></i> HowToPlay?</a>
+					<a href="./pages/termsofservice.html"><i class="fas fa-file-contract"></i> TermsOfService</a>
+					<a href="./pages/privacypolicy.html"><i class="fas fa-user-shield"></i> PrivacyPolicy</a>
+					<a href="./pages/licensing.html"><i class="fas fa-copyright"></i> Licensing</a>
+				</div>
+				<div id="copyright">
+					&copy;
+					<script>
+						document.write(new Date().getFullYear());
+					</script>
+					Made with ❤️ by
+				</div>
+				<div class="footer">
+					<div class="social-icons" style="display: flex; justify-content: flex-end;">
+						<a href="https://github.com/ChromeGaming" style="font-size: 12px;">Chrome Gaming</a>
+
+						<a href="https://github.com/ChromeGaming/Dot-Box" target="_blank" style="font-size: 16px;">
+							<i class="fab fa-github"></i>
+						</a>
+						<a href="https://discord.gg/2HTCFrSvPB" target="_blank" style="font-size: 16px;">
+							<i class="fab fa-discord"></i>
+						</a>
+					</div>
+				</div>
+
+
 		</div>
 		<div class="author">
 			<div class="fotbar">
@@ -207,6 +235,7 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 			<div class="social-icons">
 				<a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
 				<a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
+
 			</div>
 		</div>
 	</div>

diff --git a/styles/index.style.css b/styles/index.style.css
@@ -582,18 +582,77 @@ form {
 	}
 }
 
-.footer {
-	/* border-top: 2px dashed #ff6b6b; */
-	/* background: linear-gradient(125deg, #ffecd2, #ffece5); */
-	width: 100%;
-	border-radius: 3px;
-	height: 40px;
-	padding: 0 15px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+/* General reset for margin and padding */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+body {
+    font-family: Arial, sans-serif;
+}
+
+/* Footer Styling */
+footer {
+    background-color: #222;
+    color: #fff;
+    padding: 20px 0;
 }
 
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+    text-align: center;
+}
+.social-icons {
+    display: flex;
+    justify-content: flex-end; /* Aligns the icons to the right */
+    gap: 10px; /* Adds space between the icons */
+}
+
+.social-icons a {
+    color: inherit; /* Ensures the icon color matches the current text color */
+    text-decoration: none; /* Removes the underline from the links */
+}
+#copyright {
+    margin-top: 20px; /* Adjust the value as needed to move it down */
+    text-align: center; /* Center-align the text if desired */
+    font-size: 14px; /* Optional: Adjust the font size */
+}
+
+.footer-links {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.footer-links li {
+    margin: 10px 0;
+}
+
+.footer-links a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 16px;
+    transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+    color: #ffd700; /* Gold color on hover */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .footer-links {
+        flex-direction: column;
+        gap: 10px;
+    }
+
 .footer span {
 	font-size: 18px;
 	font-weight: 600;