diff --git a/pages/about.html b/pages/about.html
index 3c242d3..0c6b40b 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -67,36 +67,41 @@
🕹️ About Us 🕹️
- History and Origin:
-
- Dot and Boxes, also known as Dots and Boxes, is a classic pencil-and-paper game that has a charming history
- dating back to the late 19th century. It was first described by the French mathematician Édouard Lucas in the
- 1880s. Édouard Lucas is well-known for his contributions to mathematics, particularly for his work on the
- Fibonacci sequence and the Tower of Hanoi puzzle. He introduced Dot and Boxes as a recreational game in his book
- "Récréations Mathématiques" (Mathematical Recreations), where it captured the imagination of puzzle enthusiasts
- and gamers alike.
+ History and Origin📓:
+
+
+
+ - Dot and Boxes, also known as Dots and Boxes, is a classic pencil-and-paper game from the late 19th century.
+ - French mathematician Édouard Lucas first described it in the 1880s.
+ - Lucas, known for his work on the Fibonacci sequence and the Tower of Hanoi puzzle, introduced the game in his book "Récréations Mathématiques" (Mathematical Recreations), where it quickly captivated puzzle enthusiasts and gamers.
+
+
Functionalities🕹️
-
- - Multiplayer game: Challenge your friends or family!
- - Strategic Line Selection: Think ahead to maximize your boxes.
- - Box Completion Bonus: Earn an extra turn by completing a box.
- - Adjustable Board Size: Customize the game for any difficulty.
- - Turn Switching: Players take turns to keep things fair.
-
+
+
+ - Multiplayer game: Challenge your friends or family!
+ - Strategic Line Selection: Think ahead to maximize your boxes.
+ - Box Completion Bonus: Earn an extra turn by completing a box.
+ - Adjustable Board Size: Customize the game for any difficulty.
+ - Turn Switching: Players take turns to keep things fair.
+
+
How to Play🎮
-
- -
- Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.
- - Setup: Choose your grid size and start connecting the dots.
- - Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn. The player with the
- most boxes wins.
- - Scoring: Each box is worth one point. The game ends when all boxes are claimed.
-
+
+
+ -
+ Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.
+ - Setup: Choose your grid size and start connecting the dots.
+ - Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn. The player with the
+ most boxes wins.
+ - Scoring: Each box is worth one point. The game ends when all boxes are claimed.
+
+
diff --git a/styles/about.css b/styles/about.css
index 78ec803..2c31570 100644
--- a/styles/about.css
+++ b/styles/about.css
@@ -1,21 +1,31 @@
-body {
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+html, body {
margin: 0;
padding: 0;
- background-color: #e7b537; /* Orange background */
+ height: 100%;
+ background-color: #e7b537;
+ scroll-behavior: smooth;
}
+
+body {
+ display: flex;
+ flex-direction: column;
+}
+
.about-header {
font-family: "Anton", sans-serif;
background-color: transparent;
- color: #0e0e0e; /* White text */
- padding: 20px;
+ color: #0e0e0e;
+ padding: 10px;
text-shadow: 2px 2px 10px white;
text-align: center;
- font-size: 2.1rem; /* Larger heading size */
- transition: background-color 0.3s ease; /* Smooth transition on hover */
+ font-size: 2rem;
+ transition: background-color 0.3s ease;
}
.about-header:hover {
- background-color: #e59253; /* Light orange on hover */
+ background-color: #e59253;
}
h1 {
@@ -24,108 +34,117 @@ h1 {
main {
padding: 20px;
+ flex: 1; /* Ensure main takes available space */
display: flex;
- justify-content: space-between;
- align-items: center;
+ justify-content: center;
+ align-items: stretch;
+ flex-wrap: wrap;
}
p {
color: #333;
- line-height: 1.5;
+ line-height: 1.2;
text-align: justify;
- max-width: 700px;
+ max-width: 750px;
margin: 0 auto;
}
.functionalities,
.how-to-play {
- flex: 1;
- width: 250px;
- height: 300px;
+ flex: 0 0 320px;
+ height: 350px;
margin: 10px;
- background-color: #3370e2; /* Light background for sections */
- border-radius: 10px; /* Rounded corners for a softer look */
- /* padding: 20px; */
- /* Add space between sections */
+ color: #ffffff;
+ font-family: 'Poppins', sans-serif;
+ background: linear-gradient(135deg, #5f4c9b, #3540e3);
- box-shadow: 2px 2px 10px white; /* Subtle shadow for depth */
- transition: transform 0.3s ease; /* Smooth scale on hover */
+ border-radius: 10px;
+ padding: 20px;
+ box-shadow: 2px 2px 10px white;
+ transition: all 0.3s ease;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
-.functionalities:hover,
-.how-to-play:hover {
- transform: scale(1.05); /* Slightly scale up on hover */
+.functionalities h2,
+.how-to-play h2 {
+ font-size: 30px;
+ margin-bottom: 15px;
+ font-family: 'Poppins',sans-serif;
+ font-weight: 900;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ transition: all 0.3s ease;
}
-h2 {
- margin-bottom: 10px; /* Add space below section headers */
- text-align: center;
+.functionalities .content,
+.how-to-play .content {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ font-weight: 500;
+ position: absolute;
+ top: 60px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 20px;
}
-ul {
- list-style: none; /* Remove default bullet points */
- padding: 0;
- margin: 0;
+.functionalities::after,
+.how-to-play::after {
+ content: "(Hover here to know more)";
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+ right: 0;
text-align: center;
+ opacity: 1;
+ transition: opacity 0.3s ease;
+ opacity: 0.7;
}
-li {
- margin-bottom: 10px;
- line-height: 1.5;
+.functionalities:hover::after,
+.how-to-play:hover::after {
+ opacity: 0;
}
-/* .about-footer {
-
- background-color: transparent;
- color: #fff;
-font-size: 20px; }
-
-.about-footer p{
- text-align: center;
- color: white;
-} */
-
-/* .about-footer p:hover{
- color: #3370e2;
-} */
-
-.functionalities ul {
- color: wheat;
+.functionalities:hover h2,
+.how-to-play:hover h2 {
+ top: 2px;
+ transform: translateX(-50%);
}
-.how-to-play p {
- color: wheat;
- font-family: "Tiny5", sans-serif;
+.functionalities:hover .content,
+.how-to-play:hover .content {
+ opacity: 1;
}
-/* Footer Styles */
-.about-footer {
- background-color: #333;
- color: #fff;
- text-align: center;
- padding: 10px 0;
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- overflow: hidden; /* Ensure the text doesn't overflow horizontally */
+ul {
+ list-style: none;
+ padding-left: 20px;
+ margin: 0;
}
-.about-footer p {
- display: inline-block;
- white-space: nowrap; /* Prevents the text from wrapping */
- padding-left: 100%; /* Initial offset to start the animation off-screen */
- animation: scroll 10s linear infinite; /* Animates the text infinitely */
+li {
+ margin-bottom: 8px;
+ line-height: 1.6;
}
-@keyframes scroll {
- from {
- transform: translateX(0); /* Starts at the leftmost part of the text */
- }
- to {
- transform: translateX(-100%); /* Moves the text all the way to the left */
- }
+.functionalities ul,
+.how-to-play p {
+ color: #ffffff;
+ font-size: 14px;
}
+
.navbar {
width: 100%;
background-color: #333;
@@ -135,6 +154,7 @@ font-size: 20px; }
padding: 10px 10px;
transition: color 0.3s ease-in-out;
}
+
.logo a {
text-decoration: none;
font-size: 30px;
@@ -145,12 +165,14 @@ font-size: 20px; }
color: #fff;
margin-left: 15px;
}
+
.navlinks {
display: inline-flex;
margin-right: 30px;
margin-top: 12px;
gap: 30px;
}
+
.navlinks a {
text-decoration: none;
color: #fff;
@@ -160,12 +182,29 @@ font-size: 20px; }
letter-spacing: 4px;
text-align: center;
}
+
.navlinks a:hover {
color: #e7b537;
}
+
.logo a:hover {
color: yellow;
}
+
+.hamburger {
+ display: none;
+ color: white;
+ font-size: x-large;
+ margin-right: 10px;
+}
+
+footer {
+ background-color: #333;
+ color: white;
+ text-align: center;
+ padding: 10px;
+}
+
@media screen and (max-width: 769px) {
.navbar {
margin-top: 20px;
@@ -186,12 +225,6 @@ font-size: 20px; }
margin: 10px 0;
}
}
-.hamburger {
- display: none;
- color: white;
- font-size: x-large;
- margin-right: 10px;
-}
@media screen and (max-width: 450px) {
.hamburger {