| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Online Grocery - Home</title>
|
| <style>
|
| body {
|
| font-family: Arial, sans-serif;
|
| margin: 0;
|
| background-color: #f5f5f5;
|
| }
|
|
|
| header {
|
| background-color: green;
|
| color: white;
|
| padding: 20px;
|
| text-align: center;
|
| }
|
|
|
| nav {
|
| background-color: #333;
|
| display: flex;
|
| justify-content: flex-end;
|
| padding-right: 20px;
|
| }
|
|
|
| .nav-links a {
|
| display: inline-block;
|
| color: #f2f2f2;
|
| text-align: center;
|
| padding: 14px 16px;
|
| text-decoration: none;
|
| }
|
|
|
| .nav-links a:hover {
|
| background-color: #ddd;
|
| color: black;
|
| }
|
|
|
| .container {
|
| display: flex;
|
| flex-wrap: wrap;
|
| justify-content: center;
|
| padding: 20px;
|
| }
|
|
|
| .product-item {
|
| background: white;
|
| margin: 10px;
|
| border-radius: 10px;
|
| box-shadow: 0px 0px 10px #ccc;
|
| width: 250px;
|
| text-align: center;
|
| padding: 10px;
|
| }
|
|
|
| .product-item img {
|
| width: 100%;
|
| height: 150px;
|
| object-fit: cover;
|
| border-radius: 10px 10px 0 0;
|
| }
|
|
|
| .product-item h4 {
|
| margin: 10px 0 5px 0;
|
| }
|
|
|
| .product-item p {
|
| margin: 5px 0;
|
| }
|
|
|
| .product-item button {
|
| background-color: green;
|
| color: white;
|
| border: none;
|
| padding: 10px 20px;
|
| border-radius: 5px;
|
| cursor: pointer;
|
| margin-top: 10px;
|
| }
|
|
|
| .product-item button:hover {
|
| background-color: darkgreen;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <header>
|
| <h2>Welcome to Online Grocery Store</h2>
|
| </header>
|
|
|
| <nav>
|
| <div class="nav-links">
|
| <a href="#cart">Cart</a>
|
| <a href="#profile">My Profile</a>
|
| <a href="contact.html">Contact Us</a>
|
| </div>
|
| </nav>
|
|
|
| <div class="container">
|
| <div class="product-item">
|
| <img src="https://www.seriouseats.com/thmb/bcPQeCm1oPqq6q_vXanYoesE0xw=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__images__2015__06__20150622-tomato-guide-beefsteak-shutterstock-c02977ba592940c7951f77a1ce7b3dda.jpg" alt="Tomato">
|
| <h4>Tomato</h4>
|
| <p>Price: ₹30</p>
|
| <button onclick="addToCart('Tomato', 30)">Add to Cart</button>
|
| </div>
|
|
|
| <div class="product-item">
|
| <img src="https://previews.123rf.com/images/davidcrehner/davidcrehner0601/davidcrehner060100008/299063-a-pile-of-potatoes-at-the-local-grocery-store.jpg" alt="Potato">
|
| <h4>Potato</h4>
|
| <p>Price: ₹20</p>
|
| <button onclick="addToCart('Potato', 20)">Add to Cart</button>
|
| </div>
|
|
|
| <div class="product-item">
|
| <img src="https://www.iowafarmbureau.com/Article/Live/TitleImage/201409/060717-082422" alt="Milk">
|
| <h4>Milk</h4>
|
| <p>Price: ₹50</p>
|
| <button onclick="addToCart('Milk', 50)">Add to Cart</button>
|
| </div>
|
|
|
| <div class="product-item">
|
| <img src="https://www.jiomart.com/images/product/original/590003515/onion-1-kg-product-images-o590003515-p590003515-1-202408070949.jpg?im=Resize=(420,420)" alt="Onion">
|
| <h4>Onion</h4>
|
| <p>Price: ₹25</p>
|
| <button onclick="addToCart('Onion', 25)">Add to Cart</button>
|
| </div>
|
|
|
| <div class="product-item">
|
| <img src="https://www.goinggreens.in/cdn/shop/files/DesiCarrot_Gajar.jpg?v=1719831550" alt="Carrot">
|
| <h4>Carrot</h4>
|
| <p>Price: ₹35</p>
|
| <button onclick="addToCart('Carrot', 35)">Add to Cart</button>
|
| </div>
|
|
|
| <div class="product-item">
|
| <img src="https://cdn.pixabay.com/photo/2018/10/03/22/08/kohl-3722517_1280.jpg" alt="Cabbage">
|
| <h4>Cabbage</h4>
|
| <p>Price: ₹40</p>
|
| <button onclick="addToCart('Cabbage', 40)">Add to Cart</button>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| let cart = [];
|
|
|
| function addToCart(name, price) {
|
| cart.push({ name, price });
|
| alert(name + " has been added to your cart.");
|
| }
|
| </script>
|
|
|
| </body>
|
| </html>
|