Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✔️Upgraded the "About Us" Page in DotBox! #691

Merged
merged 4 commits into from
Aug 6, 2024
Merged

✔️Upgraded the "About Us" Page in DotBox! #691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f785aa
Update about.css
aslams2020 Aug 3, 2024
cda6fb6
Update about.html
aslams2020 Aug 3, 2024
4919692
Merge branch 'main' into AboutUs
aslams2020 Aug 5, 2024
edad7b5
Update About.css
aslams2020 Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 117 additions & 87 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
href="../assets/favicon.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
Expand All @@ -45,7 +46,6 @@
</ul>
</nav> -->

<div class="whole-background">
<nav class="navbarr" style="color: white">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
Expand Down Expand Up @@ -80,94 +80,82 @@
<link href="../styles/navbar.css" rel="stylesheet" />
<script type="text/javascript" src="../js/navbar.js"></script>
</nav>
</div>

<header class="about-header">
<h1>🕹️ About Us 🕹️</h1>
</header>

<p
style="
font-size: 25px;
font-family: EB Garamond, serif;
font-weight: bolder;
text-shadow: 2px 2px 3px white;
"
>
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.
</p>

<main>
<section class="about-description">
<p></p>
</section>

<section class="functionalities">
<h2>History and Origin📓:</h2>
<div class="content">
<ul>
<li>
Dot and Boxes, also known as Dots and Boxes, is a classic
pencil-and-paper game from the late 19th century.
</li>
<li>
French mathematician Édouard Lucas first described it in the
1880s.
</li>
<li>
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.
</li>
</ul>
</div>
</section>

<section class="functionalities">
<h2>Functionalities🕹️</h2>
<div class="content">
<ul>
<li>Multiplayer game: Challenge your friends or family!</li>
<li>
Strategic Line Selection: Think ahead to maximize your boxes.
</li>
<li>
Box Completion Bonus: Earn an extra turn by completing a box.
</li>
<li>
Adjustable Board Size: Customize the game for any difficulty.
</li>
<li>Turn Switching: Players take turns to keep things fair.</li>
</ul>
</div>
</section>

<section class="functionalities">
<h2>How to Play🎮</h2>
<div class="content">
<ul>
<li>
Objective: Capture more boxes than your opponent by drawing lines
between adjacent dots.
</li>
<li>Setup: Choose your grid size and start connecting the dots.</li>
<li>
Rules: Take turns drawing lines. Complete a box to score a point
and get an extra turn. The player with the most boxes wins.
</li>
<li>
Scoring: Each box is worth one point. The game ends when all boxes
are claimed.
</li>
</ul>
</div>
</section>
</main>


<header class="header">
<div class="hero">
<h1 class="main-heading">Dot-Box - The Strategy Game🎮</h1>
<p class="intro-text">Dot-Box is a game where players take turns drawing lines between dots to create boxes. <br> The player who completes the most boxes wins ⚔️</p>
<a href="https://github.com/ChromeGaming/Dot-Box" class="cta-button">Star us ᯓ★</a>

</div>
</header>
<main>
<section id="about" class="about-section">
<div class="about-content">
<h2 class="section-heading">🕹️ About Dot-Box⚡</h2>
<p class="section-subtext">Dive into the origins, gameplay, and exciting features of Dot-Box🎯.</p>
<div class="cards-container">
<div class="about-card">
<div class="card-content">
<i class="fas fa-history card-icon"></i>
<h3 class="card-title">History and Origin</h3>

<div class="card-expanded-content">
<ul>
<li><strong>Dot and Boxes</strong> is a classic pencil-and-paper game from the late 19th century.</li> <br>
<li>First described by French mathematician <strong>Édouard Lucas</strong> in the 1880s.</li> <br>
<li>Introduced in <strong>"Récréations Mathématiques"</strong> (Mathematical Recreations).</li>

</ul>
</div>
</div>
</div>
<div class="about-card">
<div class="card-content">
<i class="fas fa-cogs card-icon"></i>
<h3 class="card-title">Functionalities</h3>


<div class="card-expanded-content">
<ul>
<li> <strong>Multiplayer game:</strong> Challenge friends or family!</li> <br>
<li> <strong>Strategic Line Selection:</strong> Think ahead to maximize your boxes.</li> <br>
<li><strong>Box Completion Bonus: </strong>Earn an extra turn by completing a box.</li> <br>
<li>Adjustable Board Size: Customize for any difficulty.</li>
<br>
<li><strong>Turn Switching:</strong> Players take turns to keep things fair.</li>
<br>
<br>
</ul>
</div>
</div>
</div>
<div class="about-card">
<div class="card-content">
<i class="fas fa-play card-icon"></i>
<h3 class="card-title">How to Play</h3>


<div class="card-expanded-content">
<ul>
<li><strong>Objective:</strong>Capture more boxes than your opponent by drawing lines between adjacent dots.</li>
<br>
<li><strong>Setup:</strong> Choose grid size and start connecting dots.</li> <br>
<li><strong>Rules: </strong>Take turns drawing lines. Complete a box to score a point and get an extra turn.</li> <br>
<li><strong>Scoring:</strong> Each box is worth one point. The game ends when all boxes are claimed.</li>
<br>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</main>


<div class="author">
<div class="fotbar">
<a href="howtoplay.html">HowToPlay?</a>
Expand Down Expand Up @@ -196,5 +184,47 @@ <h2>How to Play🎮</h2>
></a>
</div>
</div>

<script>
function toggleNavBar() {
var nav_bar = document.getElementById("nav-links-toggled");
if (nav_bar.style.display === "flex") {
nav_bar.style.display = "none";
} else {
nav_bar.style.display = "flex";
}
}

</script>
<script>

document.addEventListener('DOMContentLoaded', () => {
const expandButtons = document.querySelectorAll('.card-expand-button');

expandButtons.forEach(button => {
button.addEventListener('click', () => {
const expandedContent = button.nextElementSibling;
const isExpanded = expandedContent.style.display === 'block';

// Close all other expanded contents
document.querySelectorAll('.card-expanded-content').forEach(content => {
content.style.display = 'none';
content.style.maxHeight = '0';
content.style.padding = '0 15px';
});

// Toggle current card
if (!isExpanded) {
expandedContent.style.display = 'block';
expandedContent.style.maxHeight = expandedContent.scrollHeight + 'px';
expandedContent.style.padding = '15px';
}
});
});
});


</script>

</body>
</html>
Loading