I'll help you create the N Market online supermarket website with the specified requirements. Here's the structure and files we'll need to set up: 1. Homepage with all the required sections 2. Products page with search and cart functionality 3. Login/registration page 4. Shopping cart page 5. Individual product pages 6. Header with navigation 7. Modern styling with light colors Here's the project structure: ``` n-market/ ├── index.php (Homepage) ├── products.php (Products listing) ├── product-detail.php (Single product) ├── login.php (Login/Registration) ├── cart.php (Shopping cart) ├── includes/ │ ├── header.php (Common header) │ ├── footer.php (Common footer) │ ├── config.php (Database config) │ ├── functions.php (Helper functions) ├── assets/ │ ├── css/ │ │ ├── style.css (Main styles) │ ├── js/ │ │ ├── main.js (Main JavaScript) │ ├── images/ │ │ ├── (All website images) │ ├── videos/ │ │ ├── (Website videos) ``` Here's the implementation: 1. First, create the main index.php (homepage): ```php

Welcome to N Market

Your one-stop online supermarket

Shop Now

Our Services

What We Offer

N Market provides high-quality groceries delivered to your doorstep. We offer fresh produce, pantry staples, household items, and more with fast delivery and excellent customer service.

``` 2. Create the products.php (products listing): ```php

``` 3. Create product-detail.php (single product): ```php

``` 4. Create login.php (login/registration): ```php

``` 5. Create cart.php (shopping cart): ```php

Your Shopping Cart

Order Summary

Subtotal: $0.00

Shipping: $5.00

Total: $5.00

``` 6. Create includes/header.php (common header): ```php N Market - <?php echo $pageTitle ?? 'Online Supermarket'; ?>

N Market

``` 7. Create includes/footer.php (common footer): ```php ``` 8. Create assets/css/style.css (main styles): ```css /* Base Styles */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; color: #333; line-height: 1.6; } /* Header Styles */ header { background-color: #4CAF50; color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; } .logo a { font-size: 1.8rem; font-weight: bold; color: white; text-decoration: none; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 1.5rem; } nav ul li a { color: white; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } nav ul li a:hover { color: #e0e0e0; } /* Hero Section */ .hero { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/hero-bg.jpg'); background-size: cover; background-position: center; height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .hero-content h1 { font-size: 3rem; margin-bottom: 1rem; } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; } .btn { display: inline-block; background-color: #4CAF50; color: white; padding: 0.8rem 1.5rem; border: none; border-radius: 4px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } .btn:hover { background-color: #3e8e41; transform: translateY(-2px); } /* Products Grid */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; padding: 2rem; } .product-card { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .product-image { height: 200px; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-info { padding: 1rem; } .product-info h3 { margin-top: 0; margin-bottom: 0.5rem; } .product-info p { margin: 0.5rem 0; } .price { font-weight: bold; color: #4CAF50; font-size: 1.2rem; } .add-to-cart { background-color: #4CAF50; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; width: 100%; } .add-to-cart:hover { background-color: #3e8e41; } /* Video Section */ .video-section { padding: 3rem 2rem; text-align: center; background-color: #f0f0f0; } .video-container { max-width: 800px; margin: 2rem auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .service-description { max-width: 800px; margin: 2rem auto; text-align: left; } /* Product Detail Page */ .product-detail { padding: 2rem; max-width: 1200px; margin: 0 auto; } .product-container { display: flex; gap: 2rem; background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .product-image { flex: 1; max-width: 500px; } .product-info { flex: 1; } .quantity-selector { display: flex; align-items: center; margin: 1rem 0; } .quantity-btn { background-color: #f0f0f0; border: none; width: 30px; height: 30px; font-size: 1rem; cursor: pointer; } #quantity { width: 50px; text-align: center; margin: 0 0.5rem; height: 30px; } /* Cart Page */ .cart-container { display: flex; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem; } .cart-items { flex: 2; } .cart-summary { flex: 1; background-color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0

Welcome to N Market

Featured Products

Our Services

What We Offer

Your Shopping Cart

Order Summary