Skip to content

Commit

Permalink
Merge pull request #318 from Vatsal-Verma/gane
Browse files Browse the repository at this point in the history 
made the website look dynamic
  • Loading branch information
@swaraj-das
swaraj-das authored Oct 13, 2024
2 parents 220494c + bb7707a commit f6ba698
Showing 1 changed file with 42 additions and 33 deletions.
75 changes: 42 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>

<body>
Expand Down Expand Up @@ -71,17 +72,17 @@
<button type="button" onclick="performSearch()">🔍</button>
</div>
</div>
<h1>Welcome to GamingTools</h1>
<p>Your one-stop shop for all gaming accessories.</p>
<a href="#controller" class="cta-btn">Explore Products</a>
<h1 data-aos="fade-down">Welcome to GamingTools</h1>
<p data-aos="fade-down">Your one-stop shop for all gaming accessories.</p>
<a href="#controller" class="cta-btn" data-aos="fade-down">Explore Products</a>
</div>
</section>

<!-- PS4 Controller Section -->

<div class="row" id="controller">
<div class="row" id="controller" >

<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">PS4 V2 Dualshock 4</h2>
<h3>Wireless Controllers for PlayStation 4</h3>
<p>(Compatible/Generic)</p>
Expand All @@ -103,15 +104,15 @@ <h3>Wireless Controllers for PlayStation 4</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/controller1.png" class="controller" alt="Controller">
<div class="color-box"></div>
</div>
</div>

<!-- Xbox Controller Section -->
<div class="row">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Xbox Wireless Controller</h2>
<h3>Controllers for Xbox One and Series X</h3>
<p>(Official)</p>
Expand All @@ -133,7 +134,7 @@ <h3>Controllers for Xbox One and Series X</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/newcontroller3.png" class="controller" alt="Controller"> <!-- replaced old blurry image with enhanced image -->
<div class="color-box"></div>

Expand All @@ -142,7 +143,7 @@ <h3>Controllers for Xbox One and Series X</h3>

<!-- Nintendo Switch Controller Section -->
<div class="row">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Nintendo Switch Pro Controller</h2>
<h3>Wireless Controllers for Nintendo Switch</h3>
<p>(Official)</p>
Expand All @@ -164,7 +165,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/controller2.png" class="controller" alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
<div class="color-box"></div>

Expand All @@ -173,7 +174,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>

<!-- VR Headset Section -->
<div class="row" id="vrsection">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Meta Quest Pro</h2>
<h3>VR Headset from Meta</h3>
<p>(Official)</p>
Expand All @@ -195,7 +196,7 @@ <h3>VR Headset from Meta</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/metaquest.jpg" class="controller" alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
<div class="color-box"></div>

Expand All @@ -204,7 +205,7 @@ <h3>VR Headset from Meta</h3>

<!-- VR Headset Section 2 -->
<div class="row">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Apple Vision Pro</h2>
<h3>VR Headset from Apple</h3>
<p>(Official)</p>
Expand All @@ -226,7 +227,7 @@ <h3>VR Headset from Apple</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/visionpro.png" class="controller" alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
<div class="color-box"></div>

Expand All @@ -235,7 +236,7 @@ <h3>VR Headset from Apple</h3>

<!-- Gaming Mouse Section -->
<div class="row" id="others">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Logitech G502 Hero</h2>
<h3>High Performance Gaming Mouse</h3>
<p>(Wired)</p>
Expand All @@ -257,7 +258,7 @@ <h3>High Performance Gaming Mouse</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/mouse.png" class="controller" alt="Gaming Mouse">
<div class="color-box"></div>

Expand All @@ -266,7 +267,7 @@ <h3>High Performance Gaming Mouse</h3>

<!-- Gaming Keyboard Section -->
<div class="row" id="keyboard">
<div class="col-1" >
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Razer BlackWidow</h2>
<h3>Mechanical Gaming Keyboard</h3>
<p>(Wired)</p>
Expand All @@ -288,7 +289,7 @@ <h3>Mechanical Gaming Keyboard</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/keyboard.png" class="controller" alt="Gaming Keyboard">
<div class="color-box"></div>

Expand All @@ -297,7 +298,7 @@ <h3>Mechanical Gaming Keyboard</h3>

<!-- Gaming Headset Section -->
<div class="row">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">SteelSeries Arctis 7</h2>
<h3>Wireless Gaming Headset</h3>
<p>(Surround Sound)</p>
Expand All @@ -319,7 +320,7 @@ <h3>Wireless Gaming Headset</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/headset.png" class="controller" alt="Gaming Headset">
<div class="color-box"></div>

Expand All @@ -328,7 +329,7 @@ <h3>Wireless Gaming Headset</h3>

<!-- Gaming Chair Section -->
<div class="row">
<div class="col-1">
<div class="col-1" data-aos="fade-right">
<h2 class="card-heading">Secretlab Omega</h2>
<h3>Ergonomic Gaming Chair</h3>
<p>(Adjustable)</p>
Expand All @@ -350,7 +351,7 @@ <h3>Ergonomic Gaming Chair</h3>
<button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2">
<div class="col-2" data-aos="fade-left">
<img src="images/newchair.png" class="controller" alt="Gaming Chair">
<div class="color-box"></div>

Expand All @@ -362,16 +363,20 @@ <h3>Ergonomic Gaming Chair</h3>
<section id="faq">

<div class="faq-container">
<h1 class="faq-title">Frequently Asked Questions</h1>
<h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>

<div class="faq">
<input type="checkbox" id="faq1" >
<label for="faq1" class="faq-question" data-aos="fade-right">1. Does your website consist of all types of gaming tools?</label>
<input type="checkbox" id="faq1">
<label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span class="arrow"></span></label>
<div class="faq-answer">
We have tried our best to make all the tools available for enthusiastic gamers.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq2" >
<label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need?</label>
<div class="faq">
<input type="checkbox" id="faq2">
<label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need? <span class="arrow"></span></label>
Expand All @@ -380,15 +385,15 @@ <h1 class="faq-title">Frequently Asked Questions</h1>
</div>
</div>

<div class="faq">
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq3">
<label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, you are welcomed to buy multiple products at one time.
</div>
</div>

<div class="faq">
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq4">
<label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span class="arrow"></span></label>
<div class="faq-answer">
Expand All @@ -405,21 +410,21 @@ <h1 class="faq-title">Frequently Asked Questions</h1>

<section id="review-body">
<div class="reviews-container">
<h1 class="reviews-title">What Our Customers Say</h1>
<h1 class="reviews-title" data-aos="fade-right">What Our Customers Say</h1>

<div class="review-card">
<div class="review-card" data-aos="fade-right">
<div class="reviewer-name">John Doe</div>
<div class="review-rating">★★★★★</div>
<p class="review-text">The tools on this website are fantastic! It has made gaming much more enjoyable and efficient. Highly recommend!</p>
<p class="review-text" >The tools on this website are fantastic! It has made gaming much more enjoyable and efficient. Highly recommend!</p>
</div>

<div class="review-card">
<div class="review-card" data-aos="fade-right">
<div class="reviewer-name">Jane Smith</div>
<div class="review-rating">★★★★☆</div>
<p class="review-text">Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!</p>
</div>

<div class="review-card">
<div class="review-card" data-aos="fade-right">
<div class="reviewer-name">Alex Johnson</div>
<div class="review-rating">★★★★★</div>
<p class="review-text">Excellent customer service! I had an issue with my order, but it was resolved quickly. Definitely will buy again.</p>
Expand All @@ -433,11 +438,11 @@ <h1 class="reviews-title">What Our Customers Say</h1>
<br>


<section id="contact">
<section id="contact" data-aos="fade-right">

<div class="card pb-5 pt-1">
<div class="card-header">
<h2>Contact Us</h2>
<h2 >Contact Us</h2>
</div>
<div class="card-body">
<div class="image-section">
Expand Down Expand Up @@ -562,6 +567,10 @@ <h2>Contact Us</h2>
domain="www.chatbase.co"
defer>
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>


Expand Down

0 comments on commit f6ba698

Please sign in to comment.