Skip to content

Commit

Permalink
Merge pull request #737 from aslams2020/main
Browse files Browse the repository at this point in the history 
✔️Implemented Dedicated "Testimonials Page" For DotBox
  • Loading branch information
@ayush-t02
ayush-t02 authored Aug 9, 2024
2 parents 8c2313a + 3e736fc commit 1dbd3e5
Show file tree
Hide file tree
Showing 4 changed files with 389 additions and 5 deletions.
Binary file added assets/testimonial-Favi.png
View file
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
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
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

0 comments on commit 1dbd3e5

Please sign in to comment.