diff --git a/pages/about.html b/pages/about.html index 2eef408..a34dcdb 100644 --- a/pages/about.html +++ b/pages/about.html @@ -3,12 +3,9 @@ - About Us - - - + @@ -16,48 +13,137 @@ + + + -
- - - -
@@ -89,46 +175,46 @@
-
- + +

🕹️ About Us 🕹️

+

- Dot-Box is a game where players take turns drawing lines between dots to create boxes. - The player who completes the most boxes wins.It's a simple yet strategic game enjoyed by people of all ages.

+ Dot-Box is a game presented by ChromeGaming where players take turns drawing lines between dots to create boxes. + The player who completes the most boxes wins. It's a simple yet strategic game enjoyed by people of all ages. +

+
-

- -

+

History and Origin📓:

-
- +
    -
  • Dot and Boxes, also known as Dots and Boxes, is a classic pencil-and-paper game from the late 19th century.
    • +
  • 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.
    • +
  • 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🕹️

@@ -186,21 +274,22 @@

Functionalities🕹️

How to Play🎮

    -
  • - Objective: Capture more boxes than your opponent by drawing lines between adjacent dots.
    • +
  • 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.
    • +
  • 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.
+
HowToPlay? TermsOfService PrivacyPolicy + Licensing

Created with ❤️ by Chrome diff --git a/styles/about.css b/styles/about.css index 2c31570..d928997 100644 --- a/styles/about.css +++ b/styles/about.css @@ -17,10 +17,10 @@ body { font-family: "Anton", sans-serif; background-color: transparent; color: #0e0e0e; - padding: 10px; + padding: 15px; text-shadow: 2px 2px 10px white; text-align: center; - font-size: 2rem; + font-size: 2.5rem; transition: background-color 0.3s ease; } @@ -34,33 +34,33 @@ h1 { main { padding: 20px; - flex: 1; /* Ensure main takes available space */ + flex: 1; display: flex; - justify-content: center; - align-items: stretch; - flex-wrap: wrap; + flex-direction: column; + align-items: center; } p { color: #333; - line-height: 1.2; + line-height: 1.6; text-align: justify; max-width: 750px; margin: 0 auto; + font-size: 16px; } .functionalities, .how-to-play { - flex: 0 0 320px; + flex: 1 1 320px; + max-width: 320px; height: 350px; margin: 10px; color: #ffffff; font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #5f4c9b, #3540e3); - border-radius: 10px; - padding: 20px; - box-shadow: 2px 2px 10px white; + padding: 0px 204px; + box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5); transition: all 0.3s ease; overflow: hidden; position: relative; @@ -69,14 +69,15 @@ p { flex-direction: column; justify-content: center; align-items: center; + width: 352px; } .functionalities h2, .how-to-play h2 { - font-size: 30px; - margin-bottom: 15px; - font-family: 'Poppins',sans-serif; - font-weight: 900; + font-size: 24px; + margin-bottom: 10px; + font-family: 'Poppins', sans-serif; + font-weight: 700; text-align: center; position: absolute; top: 50%; @@ -107,9 +108,8 @@ p { left: 0; right: 0; text-align: center; - opacity: 1; - transition: opacity 0.3s ease; opacity: 0.7; + transition: opacity 0.3s ease; } .functionalities:hover::after, @@ -119,7 +119,7 @@ p { .functionalities:hover h2, .how-to-play:hover h2 { - top: 2px; + top: 10px; transform: translateX(-50%); } @@ -130,7 +130,7 @@ p { ul { list-style: none; - padding-left: 20px; + padding-left: 0; margin: 0; } @@ -151,36 +151,32 @@ li { display: flex; justify-content: space-between; align-items: center; - padding: 10px 10px; - transition: color 0.3s ease-in-out; + padding: 10px; + transition: background-color 0.3s ease-in-out; } .logo a { text-decoration: none; - font-size: 30px; + font-size: 24px; font-family: "Arial", sans-serif; font-weight: bold; - letter-spacing: 4px; - text-align: center; + letter-spacing: 2px; color: #fff; margin-left: 15px; } .navlinks { - display: inline-flex; - margin-right: 30px; - margin-top: 12px; - gap: 30px; + display: flex; + gap: 20px; } .navlinks a { text-decoration: none; color: #fff; - font-size: 20px; + font-size: 18px; font-family: "Arial", sans-serif; font-weight: bold; - letter-spacing: 4px; - text-align: center; + letter-spacing: 2px; } .navlinks a:hover { @@ -191,53 +187,82 @@ li { color: yellow; } -.hamburger { - display: none; +.author { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(to right, #00093c, #2d0b00); + color: #fff; + padding: 15px; + position: sticky; + bottom: 0; + z-index: 1000; +} + +.author .fotbar { + display: flex; + gap: 20px; +} + +.author .fotbar a { color: white; - font-size: x-large; - margin-right: 10px; + text-decoration: none; + padding: 10px; + border-radius: 5px; + font-size: 18px; + background-color: transparent; } -footer { - background-color: #333; +::-webkit-scrollbar{ + display: none; +} + +.author p { color: white; - text-align: center; padding: 10px; + margin-right: 10px; + font-size: 20px; + font-weight: 600; +} + +.author .social-icons { + display: flex; + gap: 10px; + margin-right: 20px; } +.author a { + color: white !important; +} + +.author .social-icons a { + color: white; + text-decoration: none; + font-size: 20px; +} +/* Responsive Styles */ @media screen and (max-width: 769px) { .navbar { - margin-top: 20px; flex-direction: column; + padding: 20px; } .logo a { font-size: 20px; } - .logo { - margin-bottom: 10px; - } .navlinks { - text-align: center; - display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; } .navlinks a { font-size: 16px; - margin: 10px 0; + margin: 5px 0; } } @media screen and (max-width: 450px) { - .hamburger { - display: inline; - z-index: 400; - } - .navlinks { - position: absolute; - right: 1rem; - top: 3rem; - background-color: #333; - flex-direction: column; - padding: 10px; - align-items: center; + .logo a { + font-size: 18px; } }