HTML program to create a website for online sales of kirana store products

 Here's a basic HTML program to create a website for online sales of kirana store products:


Kirana Store Online


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Kirana Store Online</title>

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

</head>

<body>

    <header>

        <nav>

            <ul>

                <li><a href="#home">Home</a></li>

                <li><a href="#products">Products</a></li>

                <li><a href="#about">About Us</a></li>

                <li><a href="#contact">Contact Us</a></li>

            </ul>

        </nav>

    </header>

    <main>

        <section id="home">

            <h1>Welcome to Kirana Store Online!</h1>

            <p>Get your daily essentials delivered right to your doorstep!</p>

            <button>Shop Now!</button>

        </section>

        <section id="products">

            <h1>Our Products</h1>

            <div class="product-grid">

                <div class="product-card">

                    <img src="product1.jpg" alt="Product 1">

                    <h2>Product 1</h2>

                    <p>₹100</p>

                    <button>Add to Cart</button>

                </div>

                <div class="product-card">

                    <img src="product2.jpg" alt="Product 2">

                    <h2>Product 2</h2>

                    <p>₹200</p>

                    <button>Add to Cart</button>

                </div>

                <!-- Add more product cards here -->

            </div>

        </section>

        <section id="about">

            <h1>About Us</h1>

            <p>We are a local kirana store committed to delivering quality products to our customers.</p>

        </section>

        <section id="contact">

            <h1>Contact Us</h1>

            <p>Phone: 01234-567890</p>

            <p>Email: [info@kiranaonline.com](mailto:info@kiranaonline.com)</p>

        </section>

    </main>

    <footer>

        <p>&copy; 2023 Kirana Store Online</p>

    </footer>

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

</body>

</html>

```


This HTML program creates a basic website structure with the following features:


1. *Navigation menu*: A navigation menu with links to different sections of the website.

2. *Home section*: A home section with a welcome message and a call-to-action button.

3. *Products section*: A products section with a grid of product cards, each featuring an image, name, price, and add-to-cart button.

4. *About section*: An about section with a brief description of the kirana store.

5. *Contact section*: A contact section with phone number and email address.

6. *Footer*: A footer with copyright information.


Note that this is a basic HTML program, and you will need to add CSS styles and JavaScript functionality to make the website fully functional and interactive.


CSS Styles (in styles.css file)

```

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

}


header {

    background-color: #333;

    color: #fff;

    padding: 1em;

    text-align: center;

}


nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: space-between;

}


nav li {

    margin-right: 20px;

}


nav a {

    color: #fff;

    text-decoration: none;

}


main {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 2em;

}


section {

    background-color: #f7f7f7;

    padding: 1em;

    margin-bottom: 20px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}


h1 {

    font-size: 24px;

    margin-top: 0;

}


.product-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 20px;

}


.product-card {

    background-color: #fff;

    padding: 1em;

    border: 1px solid #ddd;

    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}


.product-card img {

    width: 100%;

    height: 150px;

    object-fit: cover;

    border-radius: 10px 10px 0 0;

}


.product-card h2 {

    font-size: 18px;

    margin-top: 10px;

}


.product-card p {

    font-size: 14px;

    color: #666;

}


.product-card button {

    background-color: #333;

    color: #fff;

    border: none;

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

}


.product-card button:hover {

    background-color: #555;

}


footer {

    background-color: #333;

    color: #fff;

    padding: 1em;

    text-align: center;

    clear: both;

}



And here is some sample JavaScript code to add interactivity to the website:



// Add event listener to add-to-cart buttons

const addToCartButtons = document.querySelectorAll('.product-card button');

addToCartButtons.forEach(button => {

    button.addEventListener('click', () => {

        // Get the product name and price

        const productName = button.parentNode.querySelector('h2').textContent;

        const productPrice = button.parentNode.querySelector('p').textContent;


        // Add the product to the cart

        const cart = document.querySelector('#cart');

        const cartItem = document.createElement('div');

        cartItem.innerHTML = `

            <h2>${productName}</h2>

            <p>${productPrice}</p>

            <button>Remove from Cart</button>

        `;

        cart.appendChild(cartItem);


        // Update the cart total

        const cartTotal = document.querySelector('#cart-total');

        const currentTotal = parseFloat(cartTotal.textContent.replace('$', ''));

        const newTotal = currentTotal + parseFloat(productPrice.replace('$', ''));

        cartTotal.textContent = `$${newTotal.toFixed(2)}`;

    });

});



This JavaScript code adds an event listener to each add-to-cart button. When a button is clicked, it gets the product name and price, adds the product to the cart, and updates the cart total.


Note that this is just a basic example, and you will likely need to add more functionality and error checking to your website.

Comments

Popular posts from this blog

Solve

Solved practical slips of 12th Computer Science journal

SOLVE QUESTION ANSWERS ON OPERATING SYSTEM .