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

made the website look dynamic #318

Merged
merged 2 commits into from
Oct 13, 2024
Merged

made the website look dynamic #318

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3d41fd
changes done
Vatsal-Verma Oct 11, 2024
bb7707a
Merge branch 'main' into gane
swaraj-das Oct 13, 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
75 changes: 42 additions & 33 deletions index.html
View file
Open in desktop
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