fruit.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

    <%@ page import="cart.CartItem" %>

    


<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="ISO-8859-1">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Online Grocery Store - Home</title>


    <link rel="stylesheet" href="home.css">


    <script src="js/script.js" defer></script>


</head>


<body>


    <header>


        <div class="header-container">


            <h1>Online Grocery Store</h1>


            <nav>


                <a href="home.jsp">Home</a>


                <a href="products.jsp">Products</a>


                <a href="cart.jsp">Cart</a>


                <a href="profile.jsp">Profile</a>


                <a href="login.jsp">Login</a>


            </nav>


     

        </div>


    </header>




    <main>

        <section class="categories">


            <h2>Shop by Category</h2>


            <div class="category-cards">


                <div class="category-card">


                    <img src="images/fruits.jpg" alt="Banana">


                    <h3>Banana</h3>


                   <a href="CartServlet?product=Banana&price=1.50" class="btn-secondary">Add to Cart</a>

                   



                </div>


                <div class="category-card">


                    <img src="images/vegetables.jpg" alt="Apple">


                    <h3>Apple</h3>


                   <a href="CartServlet?product=Apple&price=2.50" class="btn-secondary">Add to Cart</a>



                </div>


                <div class="category-card">


                    <img src="images/dairy.jpg" alt="Watermelon">


                    <h3>Watermelon</h3>


                    <a href="CartServlet?product=Watermelon&price=1.00" class="btn-secondary">Add to Cart</a>



                </div>


                <div class="category-card">


                    <img src="images/snacks.jpg" alt="Grape">


                    <h3>Grape</h3>


                   <a href="CartServlet?product=Grape&price=1.50" class="btn-secondary">Add to Cart</a>



                </div>

                <div class="category-card">


                    <img src="images/vegetables.jpg" alt="Mango">


                    <h3>Mango</h3>


                   <a href="CartServlet?product=Mango&price=0.50" class="btn-secondary">Add to Cart</a>



                </div>

                <div class="category-card">


                    <img src="images/vegetables.jpg" alt="Cherry">


                    <h3>Cherry</h3>


                  <a href="CartServlet?product=Cherry&price=2.50" class="btn-secondary">Add to Cart</a>



                </div>

                <div class="category-card">


                    <img src="images/vegetables.jpg" alt="Guava">


                    <h3>Guava</h3>


                   <a href="CartServlet?product=Guava&price=1.50" class="btn-secondary">Add to Cart</a>



                </div>

                <div class="category-card">


                    <img src="images/vegetables.jpg" alt="Strawberry">


                    <h3>Strawberry</h3>


                   <a href="CartServlet?product=Strawberry&price=2.00" class="btn-secondary">Add to Cart</a>

                   


                </div>


            </div>


        </section>





    </main>


<br><br>

<br>

    <footer>


        <p>&copy; 2024 Online Grocery Store</p>


    </footer>


</body>


</html>

Comments

Post a Comment

Popular posts from this blog

const btnCart = document.querySelector('#cart-icon'); const cart = document.querySelector('.cart'); const btnClose = document.querySelector('#cart-close'); btnCart.addEventListener('click', () => { cart.classList.add('cart-active'); }); btnClose.addEventListener('click', () => { cart.classList.remove('cart-active'); }); document.addEventListener('DOMContentLoaded', () => { loadContent(); loadFood(); }); function loadFood() { // Any initialization related to food items can be placed here } function loadContent() { // Retrieve item list from localStorage itemList = JSON.parse(localStorage.getItem('cartItems')) || []; // Remove Food Items From Cart let btnRemove = document.querySelectorAll('.cart-remove'); btnRemove.forEach((btn) => { btn.addEventListener('click', removeItem); }); // Product Item Change Event let qtyElements = document.querySelectorAll('.ca...
Read more
/* General Styles */ body {     font-family: Arial, sans-serif;     background-color: #f4fdf4; /* Light green background */     color: #333;     margin: 0;     padding: 0; } /* Header and Navigation */ header {     background-color: #2d572c; /* Dark green */     color: white;     padding: 10px 20px;     position: sticky;     top: 0;     z-index: 1000; } .header-container {     display: flex;     justify-content: space-between;     align-items: center; } nav {     display: flex;     justify-content: space-between;     width: 100%;     align-items: center; } .nav-left, .nav-center, .nav-right {     display: flex;     align-items: center; } .nav-center {     justify-content: center;     flex-grow: 1; } .nav-link {     color: white;     text-decoration: n...
Read more