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

Jump to bottom

✔️Implemented Dedicated "Testimonials Page" For DotBox #737

Merged
merged 4 commits into from
Aug 9, 2024
Merged

✔️Implemented Dedicated "Testimonials Page" For DotBox #737

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
fbc2612
Created Testimonials Page
aslams2020 Aug 8, 2024
273e79e
Added Testimonial Favicon
aslams2020 Aug 8, 2024
2d7510b
Created Testimonials.css
aslams2020 Aug 8, 2024
3e736fc
Update index.html
aslams2020 Aug 8, 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
Binary file added assets/testimonial-Favi.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 6 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,12 @@
<a href="#">Dots & Boxes ⚄</a>
</div>
<ul class="nav-links">
<li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
<li><a href="./pages/about.html"><i class="fas fa-info-circle"></i> About Us</a></li>
<li><a href="./pages/FAQs.html"><i class="fas fa-question-circle"></i> FAQs</a></li>
<li><a href="./pages/contributors.html"><i class="fas fa-users"></i> Contributors</a></li>
<li><a href="./pages/game.html"><i class="fas fa-gamepad"></i> Let's Go</a></li>
<li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
<li><a href="./pages/about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
<li><a href="./pages/FAQs.html"><i class="fas fa-question-circle"></i>FAQs</a></li>
<li><a href="./pages/contributors.html"><i class="fas fa-users"></i>Contributors</a></li>
<li><a href="./pages/testimonials.html"><i class="fas fa-users"></i>Testimonials</a></li>
<li><a href="./pages/game.html"><i class="fas fa-gamepad"></i>Let's Go</a></li>
</ul>
<div class="hamburger">
<i class="fas fa-bars"></i>
Expand Down
187 changes: 187 additions & 0 deletions pages/testimonials.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials - Dot-Box </title>
<link rel="shortcut icon" href="../assets/testimonial-Favi.png" type="image/x-icon">
<link rel="stylesheet" href="../styles/testimonials.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</head>
<body>
<nav class="navbarr" style="color: white">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
</div>

<ul class="nav-links" id="nav-links-toggled">
<li><a href="../index.html"><i class="fas fa-home">Home</i></a></li>
<li><a href="../pages/about.html"><i class="fas fa-info-circle"></i> AboutUs</a></li>
<li><a href="../pages/FAQs.html"><i class="fas fa-question-circle"></i> FAQs</a></li>
<li><a href="../pages/contributors.html"><i class="fas fa-users"></i> Contributors</a></li>

</ul>

<nav class="mobile-menu">
<div class="mobile-menu__trigger"><span></span></div>
<a class="page-scroll active-link" href="/index.html">Home </a>
<a class="page-scroll" href="/pages/about.html">About Us </a>
<a class="page-scroll" href="/pages/FAQs.html">FAQs</a>
<a class="page-scroll" href="/pages/contributors.html">Contributors</a>
</nav>

<!-- Js and CSS files for hamburger-menu -->
<link href="../styles/navbar.css" rel="stylesheet" />
<script type="text/javascript" src="../js/navbar.js"></script>
</nav>
<div class="testimonials-container">
<div class="testimonial-header">
<h1>What Players Say About Dot-Box?</h1>
<p>Discover what our passionate community of gamers has to say about Dot-Box, <br>From casual gamers to competitive strategists, players of all levels are raving about their experiences. </p>
</div>
<div class="testimonials">
<!-- Testimonial Card 1 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/16.png" alt="Profile 1">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Jess K</h3>
<p class="testimonial-role">Gamer Enthusiast</p>
<p class="testimonial-text">"Dot-Box is an incredibly strategic game. The multiplayer aspect really makes it engaging and fun! I've played so many rounds with my friends, and each time it feels like a new experience. The simplicity of the game belies the complex decisions you need to make, and that's what makes it so rewarding. Every win feels well-earned!"
</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<!-- Testimonial Card 2 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/11.png" alt="Profile 2">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Ryan L </h3>
<p class="testimonial-role">Competitive Player</p>
<p class="testimonial-text">"I've always been a fan of competitive games, and Dot-Box takes the cake! The fast-paced nature of the game combined with the need to think ahead makes every match an intense battle of wits. The game’s design is elegant and addictive, making it perfect for both short and long gaming sessions. Dot-Box is not just a game—it's a challenge!"</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial Card 3 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/12.png" alt="Profile 3">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">David Miller</h3>
<p class="testimonial-role">Puzzle Lover</p>
<p class="testimonial-text">"It's amazing how such a simple concept can provide endless hours of entertainment. I love how each game can turn on a single decision, making it crucial to stay sharp and think several moves ahead. It’s like chess, but faster and more accessible. A must-play for any strategy lover!"</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<!-- Testimonial Card 4 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/6.png" alt="Profile 4">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Sophie M</h3>
<p class="testimonial-role">Esports Aspirant</p>
<p class="testimonial-text">"I’ve played countless multiplayer games, but few have the perfect blend of strategy and simplicity that Dot-Box offers. The thrill of outsmarting your friends and pulling off a victory from the brink of defeat is unmatched."</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial Card 5 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/15.png" alt="Profile 5">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Nilu Sona</h3>
<p class="testimonial-role">Game Enthusiast</p>
<p class="testimonial-text">"The game’s design is so clever that it constantly keeps you guessing and adapting. Whether you're setting traps for your opponent or trying to outmaneuver their tactics, there’s always a sense of accomplishment when your plan comes together. It’s one of those games that makes you think, 'Just one more round!' over and over again."</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial Card 6 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/8.png" alt="Profile 6">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Jack C</h3>
<p class="testimonial-role">Board Game Buff</p>
<p class="testimonial-text">"As someone who loves exploring new games, Dot-Box has been a fantastic discovery. It's simple on the surface but offers layers of depth the more you play. The game’s pacing is perfect for both quick matches and longer sessions, making it versatile for different moods."</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>

<!-- Add Font Awesome for the stars icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
// Adding scroll reveal animation
document.addEventListener('DOMContentLoaded', function() {
const testimonials = document.querySelector('.testimonials');
window.addEventListener('scroll', function() {
const revealPoint = 0;
const windowHeight = window.innerHeight;
const testimonialsTop = testimonials.getBoundingClientRect().top;
if (testimonialsTop < windowHeight - revealPoint) {
testimonials.style.opacity = '1';
testimonials.style.transform = 'translateY(0)';
}
});

// Adding random movement animation to cards
const cards = document.querySelectorAll('.testimonial-card');
cards.forEach(card => {
setInterval(() => {
const x = Math.floor(Math.random() * 7) - 2; // Random number between -2 and 2
const y = Math.floor(Math.random() * 7) - 2; // Random number between -2 and 2
card.style.transform = `translate(${x}px, ${y}px)`;
}, 1000); // Adjust the speed as necessary
});
});
</script>
</body>
</html>
Loading
Loading