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📓:

+
+ + +

Functionalities🕹️

- +
+ +

How to Play🎮

- +
+ +
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 {