Added Home Kitchen Page

arghadipmanna101 · Aug 2, 2024 · f68c7e6 · f68c7e6
1 parent 33e7e0b
commit f68c7e6
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/Home-Kitchen/index.html b/Home-Kitchen/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flipkart Clone - Home & Kitchen</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="logo">
+                <h1>Flipkart Clone</h1>
+            </div>
+            <ul class="nav-links">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Electronics</a></li>
+                <li><a href="#">Fashion</a></li>
+                <li><a href="#">Home & Kitchen</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="hero">
+            <h2>Home & Kitchen Essentials</h2>
+            <p>Find everything you need for your home and kitchen at unbeatable prices.</p>
+        </section>
+
+        <section class="product-grid">
+            <div class="product-card" data-product-id="1">
+                <img src="path/to/image1.jpg" alt="Product 1">
+                <h3>Product 1</h3>
+                <p>$19.99</p>
+                <button class="add-to-cart">Add to Cart</button>
+            </div>
+            <div class="product-card" data-product-id="2">
+                <img src="path/to/image2.jpg" alt="Product 2">
+                <h3>Product 2</h3>
+                <p>$29.99</p>
+                <button class="add-to-cart">Add to Cart</button>
+            </div>
+            <!-- Add more product cards as needed -->
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Flipkart Clone. All rights reserved.</p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Home-Kitchen/script.js b/Home-Kitchen/script.js
@@ -0,0 +1,32 @@
+// Initialize cart
+let cart = [];
+
+// Function to update cart display
+function updateCartDisplay() {
+    // For simplicity, just log cart items to console
+    console.log('Cart:', cart);
+}
+
+// Function to handle add to cart button click
+function handleAddToCart(event) {
+    // Ensure the button is clicked
+    if (event.target.tagName === 'BUTTON' && event.target.classList.contains('add-to-cart')) {
+        const productCard = event.target.closest('.product-card');
+        const productId = productCard.getAttribute('data-product-id');
+        const productName = productCard.querySelector('h3').textContent;
+        const productPrice = productCard.querySelector('p').textContent;
+
+        // Add product to cart
+        const product = {
+            id: productId,
+            name: productName,
+            price: productPrice,
+        };
+
+        cart.push(product);
+        updateCartDisplay();
+    }
+}
+
+// Attach event listener to the document
+document.addEventListener('click', handleAddToCart);
diff --git a/Home-Kitchen/styles.css b/Home-Kitchen/styles.css
@@ -0,0 +1,100 @@
+/* Reset some default styles */
+body, h1, h2, h3, p, ul, li {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+}
+
+header {
+    background: #2874f0;
+    color: #fff;
+    padding: 10px 0;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+}
+
+.nav-links li {
+    margin: 0 15px;
+}
+
+.nav-links a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.hero {
+    text-align: center;
+    padding: 50px 0;
+    background: #f8f8f8;
+}
+
+.hero h2 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+}
+
+.hero p {
+    font-size: 1.2rem;
+}
+
+.product-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+}
+
+.product-card {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    width: 200px;
+    margin: 15px;
+    text-align: center;
+    padding: 15px;
+}
+
+.product-card img {
+    max-width: 100%;
+    height: auto;
+}
+
+.product-card h3 {
+    font-size: 1.2rem;
+    margin: 10px 0;
+}
+
+.product-card p {
+    font-size: 1rem;
+    color: #555;
+}
+
+.product-card button {
+    background: #2874f0;
+    color: #fff;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.product-card button:hover {
+    background: #1a5bb8;
+}
+
+footer {
+    background: #f8f8f8;
+    text-align: center;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}