From 1605d98b3b6adcb58292164c6f7f2bd15ff5bd5f Mon Sep 17 00:00:00 2001
From: Debarghya Das <136872831+Debarghya654@users.noreply.github.com>
Date: Sat, 12 Oct 2024 20:43:05 +0530
Subject: [PATCH] Changes in HTML and CSS files to fix the problems
---
paras/public/first.css | 146 ++++++++++++++++++++++++++++------------
paras/public/index.html | 136 +++++++------------------------------
2 files changed, 129 insertions(+), 153 deletions(-)
diff --git a/paras/public/first.css b/paras/public/first.css
index f8a670f..6ce3a80 100644
--- a/paras/public/first.css
+++ b/paras/public/first.css
@@ -1,46 +1,106 @@
-footer {
- position: fixed;
- bottom: 0;
- width: 100%;
- background-color: #333;
- color: #fff;
- text-align: center;
- padding: 20px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+body {
+ font-family: 'Poppins', sans-serif;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ margin: 0;
+}
+#root {
+ flex: 1;
+}
+
+.follow-us {
+ background-color: #58ed64;
+ padding: 8px;
+ text-align: center;
+ margin-top: auto;
+}
+
+.follow-us h1 {
+ color: #fff;
+ font-size: 40px;
+ margin-bottom: 15px;
+}
+
+.follow-us a {
+ margin: 0 10px;
+ color: grey;
+ text-decoration: none;
+}
+
+.follow-us a:hover {
+ color: #007bff;
+}
+
+.follow-us a:focus {
+ outline: 2px solid #007bff;
+ outline-offset: 2px;
+}
+
+.follow-us a img {
+ width: 30px;
+ height: 30px;
+ filter: grayscale(100%);
+ transition: filter 0.3s;
+}
+
+.follow-us a:hover img {
+ filter: grayscale(0%);
+}
+
+@media (max-width: 600px) {
+ .follow-us a img {
+ width: 25px;
+ height: 25px;
}
-
- .footer-container {
- max-width: 800px;
- margin: 0 auto;
- padding: 20px;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .social-links {
- list-style: none;
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: center;
- }
-
- .social-links li {
- margin: 0 10px;
- }
-
- .social-links a {
- color: #fff;
- text-decoration: none;
- transition: color 0.2s ease;
- }
-
- .social-links a:hover {
- color: #ccc;
+
+ .follow-us h1 {
+ font-size: 30px;
}
-
- .fa {
- font-size: 24px;
- }
\ No newline at end of file
+}
+
+footer {
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ padding: 20px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ width: 100%;
+ margin-top: auto;
+}
+
+.footer-container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.social-links {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+}
+
+.social-links li {
+ margin: 0 10px;
+}
+
+.social-links a {
+ color: #fff;
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+.social-links a:hover {
+ color: #ccc;
+}
+
+.fa {
+ font-size: 24px;
+}
diff --git a/paras/public/index.html b/paras/public/index.html
index 8cd3948..0ce66b2 100644
--- a/paras/public/index.html
+++ b/paras/public/index.html
@@ -2,130 +2,46 @@
-
-
-
-
-
+
+ Tic Tac Toe
+
+
-
-
- TIC TAC TOE
-
-
-
-
-
- To begin the development, run `npm start` or `yarn start`.
- To create a production bundle, use `npm run build` or `yarn build`.
- -->
-
-
+
-
-
- 
-
-
- 
-
-
- 
-
-