SUCCESSFULLY ADDED THE VR-ACCESSORIE PAGE

swaraj-das · Oct 17, 2024 · 975577e · 975577e
1 parent 8427199
commit 975577e
Show file tree

Hide file tree

Showing 15 changed files with 272 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
                     <li><a href="./index.html">Home</a></li>
                     <li><a href="./aboutus.html">About Us</a></li>
                     <li><a href="#controller">Game Controllers</a></li>
-                    <li><a href="#vrsection">VR Accessories</a></li>
+                    <li><a href="vraccessories/index.html">VR Accessories</a></li>
                     <li><a href="#keyboard">Gaming Keyboard</a></li>
                     <li><a href="#others">Others</a></li>
 

diff --git a/style.css b/style.css
@@ -1,3 +1,4 @@
+
 .card {
     width: 50%; /* Set a specific width */
     margin: 10px auto; /* Center horizontally with automatic margins */
@@ -841,6 +842,11 @@ button {
     transition: border-color 0.4s, box-shadow 0.4s;
 }
 
+.footer-section h2:hover{
+    text-decoration: underline;
+    text-shadow: 1px 1px 1px orangered;
+}
+
 .contact-form form{
     width: 100%;
     display: flex;
@@ -850,6 +856,7 @@ button {
     padding: 10px;
 }
 
+
 /* Input focus effects */
 .text-input:focus {
     border-color: #f39c12;

diff --git a/vraccessories/download.jpeg b/vraccessories/download.jpeg
diff --git a/vraccessories/high-tech-futuristic-gaming-virtual-reality-headset.jpg b/vraccessories/high-tech-futuristic-gaming-virtual-reality-headset.jpg
diff --git a/vraccessories/index.html b/vraccessories/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VR Accessories - Gaming Store</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <div class="header-container">
+            <h1 class="title">VR Accessories</h1>
+            <div class="search-bar">
+                <input type="text" id="searchInput" placeholder="Search for products...">
+                <button onclick="searchProducts()">Search</button>
+            </div>
+        </div>
+    </header>
+
+    <section class="products-container" id="productsContainer">
+        <div class="product-card" data-name="Oculus Quest 2">
+            <img src="oculus.jpg" alt="Oculus Quest 2">
+            <h2>Oculus Quest 2</h2>
+            <p>$299.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="HTC Vive Pro">
+            <img src="high-tech-futuristic-gaming-virtual-reality-headset.jpg" alt="HTC Vive Pro">
+            <h2>HTC Vive Pro</h2>
+            <p>$799.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="PlayStation VR">
+            <img src="playstation.jpeg">
+            <h2>PlayStation VR</h2>
+            <p>$399.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="Valve Index">
+            <img src="valve.jpeg" alt="Valve Index">
+            <h2>Valve Index</h2>
+            <p>$999.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="Samsung Gear VR">
+            <img src="samsung.jpeg" alt="Samsung Gear VR">
+            <h2>Samsung Gear VR</h2>
+            <p>$129.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="Pimax 8K X">
+            <img src="primax.jpeg" alt="Pimax 8K X">
+            <h2>Pimax 8K X</h2>
+            <p>$1,299.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="Oculus Rift S">
+            <img src="rift.jpg" alt="Oculus Rift S">
+            <h2>Oculus Rift S</h2>
+            <p>$399.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="HP Reverb G2">
+            <img src="reverb.jpeg" alt="HP Reverb G2">
+            <h2>HP Reverb G2</h2>
+            <p>$599.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="Sony PlayStation VR2">
+            <img src="sony.jpeg" alt="Sony PlayStation VR2">
+            <h2>Sony PlayStation VR2</h2>
+            <p>$549.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+        <div class="product-card" data-name="Meta Quest Pro">
+            <img src="download.jpeg" alt="Meta Quest Pro">
+            <h2>Meta Quest Pro</h2>
+            <p>$1,499.99</p>
+            <button class="buy-now">Buy Now</button>
+        </div>
+
+
+        <!-- Add more products as needed -->
+    </section>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/vraccessories/oculus.jpg b/vraccessories/oculus.jpg
diff --git a/vraccessories/playstation.jpeg b/vraccessories/playstation.jpeg
diff --git a/vraccessories/primax.jpeg b/vraccessories/primax.jpeg
diff --git a/vraccessories/reverb.jpeg b/vraccessories/reverb.jpeg
diff --git a/vraccessories/rift.jpg b/vraccessories/rift.jpg
diff --git a/vraccessories/samsung.jpeg b/vraccessories/samsung.jpeg
diff --git a/vraccessories/script.js b/vraccessories/script.js
@@ -0,0 +1,13 @@
+function searchProducts() {
+    const input = document.getElementById('searchInput').value.toLowerCase();
+    const productCards = document.querySelectorAll('.product-card');
+
+    productCards.forEach(card => {
+        const productName = card.getAttribute('data-name').toLowerCase();
+        if (productName.includes(input)) {
+            card.style.display = 'block';
+        } else {
+            card.style.display = 'none';
+        }
+    });
+}
diff --git a/vraccessories/sony.jpeg b/vraccessories/sony.jpeg
diff --git a/vraccessories/style.css b/vraccessories/style.css
@@ -0,0 +1,153 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 9px;
+}
+
+::-webkit-scrollbar-track {
+    background: #dcdcdd;  /* Dark background for the track */
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #f2d600, #f09300);  
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #f7e600, #ff9e00);  
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: linear-gradient(180deg, #ffeb3b, #ffa000);  
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #e8e9ee;
+    color: #66fcf1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+header{
+    background-color: #3f63f3;
+    width: 100%;
+    position: relative;
+    box-shadow: 0 0 5px black;
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 20px;
+    background-color: #eef0f4;
+}
+
+.title {
+    font-family: 'Orbitron', sans-serif;
+    color: #45a29e;
+    font-size: 2.5rem;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+}
+
+.search-bar input {
+    padding: 10px;
+    font-size: 1rem;
+    border: none;
+    border-radius: 5px;
+    background-color: #45a29e;
+    color: #0b0c10;
+    outline: none;
+    transition: all 0.3s;
+}
+
+.search-bar input:focus {
+    box-shadow: 0px 0px 10px #66fcf1;
+}
+
+.search-bar button {
+    padding: 10px 15px;
+    font-size: 1rem;
+    margin-left: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #66fcf1;
+    color: #0b0c10;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.search-bar button:hover {
+    background-color: #45a29e;
+}
+
+.products-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    max-width: 1200px;
+}
+
+.product-card {
+    background-color: #1f2833;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    width: 250px;
+    text-align: center;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.product-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+}
+
+.product-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+
+.product-card h2 {
+    font-family: 'Orbitron', sans-serif;
+    font-size: 1.5rem;
+    margin: 15px 0;
+    color: #66fcf1;
+}
+
+.product-card p {
+    font-size: 1.2rem;
+    color: #c5c6c7;
+}
+
+.buy-now {
+    padding: 10px;
+    width: 100%;
+    border: none;
+    background:#f5d9ac;
+    color: #0b0c10;
+    border: 1px dashed rgb(0, 0, 0);
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.buy-now:hover {
+    background-color: #45a29e;
+    transform: scale(1.05);
+}
diff --git a/vraccessories/valve.jpeg b/vraccessories/valve.jpeg