diff --git a/pages/about.html b/pages/about.html index 19fd105..3d824dc 100644 --- a/pages/about.html +++ b/pages/about.html @@ -26,6 +26,7 @@ href="../assets/favicon.ico" type="image/x-icon" /> + @@ -45,7 +46,6 @@ --> -
-
-
-

🕹️ About Us 🕹️

-
- -

- 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. -
    • -
  • - 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.
    • -
-
-
- -
-

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. -
    • -
-
-
-
+ + +
+
+

Dot-Box - The Strategy Game🎮

+

Dot-Box is a game where players take turns drawing lines between dots to create boxes.
The player who completes the most boxes wins ⚔️

+ Star us ᯓ★ +
+
+
+
+
+

🕹️ About Dot-Box⚡

+

Dive into the origins, gameplay, and exciting features of Dot-Box🎯.

+
+
+
+ +

History and Origin

+ +
+
    +
  • Dot and Boxes is a classic pencil-and-paper game from the late 19th century.

    • +
  • First described by French mathematician Édouard Lucas in the 1880s.

    • +
  • Introduced in "Récréations Mathématiques" (Mathematical Recreations).
    • + +
+
+
+
+
+
+ +

Functionalities

+ + +
+
    +
  • Multiplayer game: Challenge 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 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 grid size and start connecting dots.

    • +
  • Rules: Take turns drawing lines. Complete a box to score a point and get an extra turn.

    • +
  • Scoring: Each box is worth one point. The game ends when all boxes are claimed.
    • +
    +
+
+
+
+
+
+
+
+ +
HowToPlay? @@ -196,5 +184,47 @@

How to Play🎮

>
+ + + + diff --git a/styles/about.css b/styles/about.css index 42d3bbd..60637ec 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,175 +1,150 @@ -html, -body { - margin: 0; - padding: 0; - height: 100%; - background-color: #e7b537; - scroll-behavior: smooth; -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); -body { - display: flex; - flex-direction: column; +body, html { + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; + background-color: #0a0c27; + color: #fff; + text-align: center; } -main { - flex: 1; - padding: 20px; - display: flex; - align-items: center; - justify-content: center; +/* Hero section styles */ +.header { + padding: 50px 20px; + position: relative; + overflow: hidden; } -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); -html, -body { - margin: 0; - padding: 0; - height: 100%; - background-color: #e7b537; - scroll-behavior: smooth; +.hero { + max-width: 870px; + margin: 0px auto; + } -body { - display: flex; - flex-direction: column; +.main-heading { + font-size: 3rem; + margin-bottom: 20px; + color: rgb(245, 153, 5); + margin-top: 370px; + text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); } -.about-header { - font-family: "Anton", sans-serif; - background-color: transparent; - color: #0e0e0e; - padding: 15px; - text-shadow: 2px 2px 10px white; - text-align: center; - font-size: 2.5rem; - transition: background-color 0.3s ease; +.intro-text { + font-size: 1.2rem; + margin-bottom: 20px; } -.about-header:hover { - background-color: #e59253; +.cta-button { + background-color: #007BFF; + color: #fff; + padding: 10px 15px; + border-radius: 15px; + text-decoration: none; + font-size: 1.2rem; + transition: background-color 0.2s ease-in, transform 0.2s ease; } -h1 { - margin: 0; +.cta-button:hover { + background-color: #0764c7; + color: rgb(255, 255, 170); + transform: translateY(2px) !important; } -main { - padding: 20px; - flex: 1; - display: flex; - align-items: center; +/* About section styles */ +.about-section { + background-color: #0a0c27; } -p { - color: #333; - line-height: 1.6; - text-align: justify; - max-width: 750px; - margin: 0 auto; - font-size: 16px; -} - -.functionalities, -.how-to-play { - 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: 0px 204px; - box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5); - transition: all 0.3s ease; - overflow: hidden; - position: relative; - cursor: pointer; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 352px; -} - -.functionalities h2, -.how-to-play h2 { - font-size: 24px; - margin-bottom: 10px; - font-family: "Poppins", sans-serif; - font-weight: 700; - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - transition: all 0.3s ease; -} - -.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; +.about-content { + max-width: 1400px; + margin: 200px auto; } -.functionalities::after, -.how-to-play::after { - content: "(Hover here to know more)"; - position: absolute; - bottom: 20px; - left: 0; - right: 0; - text-align: center; - opacity: 0.7; - transition: opacity 0.3s ease; + +.section-heading { + font-size: 2.8rem; + margin-bottom: 30px; + text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); + } -.functionalities:hover::after, -.how-to-play:hover::after { - opacity: 0; +.section-subtext { + font-size: 1.2rem; + margin-bottom: 40px; + color: #bbb; } -.functionalities:hover h2, -.how-to-play:hover h2 { - top: 10px; - transform: translateX(-50%); +.cards-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; } -.functionalities:hover .content, -.how-to-play:hover .content { - opacity: 1; + +.about-card { + background-color: #101239; + border-radius: 10px; + padding: 20px; + width:25%; + min-width: 160px; + height: 370px; + margin: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + color: #fff; + position: relative; + transition: all 0.3s ease-in-out; + overflow: hidden; } -ul { +ul li { list-style: none; - padding-left: 0; - margin: 0; - margin-right: 29px; - margin-left: 33px; - margin-top: -40px; } -li { - margin-bottom: 8px; - line-height: 1.6; +.about-card:hover { + transform: scale(1.05) translateY(2px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + background-color: #007bff82; + +} + +.about-card:hover .card-title, .about-card:hover .card-icon { + text-shadow: 1px 1px 2px rgba(0, 26, 255, 0.564), 0 0 1em rgba(34, 93, 255, 0.91), 0 0 0.2em rgba(47, 47, 253, 0.63); + +} + +.about-card:hover strong { + text-shadow: rgb(3, 172, 194) 1px 0 10px; } -.functionalities ul, -.how-to-play p { - color: #ffffff; - font-size: 14px; +.card-content { + position: relative; + z-index: 1; } +.card-icon { + font-size: 2rem; + margin-bottom: 10px; + color: #39a2d3; + transition: all 0.3s ease-in; +} + +.card-title { + font-size: 1.6rem; + margin-bottom: 12px; + color: orange; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + transition: all 0.3s ease-in; +} + +.card-description { + font-size: 1.2rem; + color: #ccc; +} + + + .author { width: 100%; display: flex;