Creating a complete e-commerce website like Bacola would be a substantial project involving multiple pages, complex functionality, and extensive styling. Here's a simplified version focusing on the main homepage structure and key components: Bacola - Online Grocery Store

About Us My Account Wishlist Order Tracking

Your Location

Account

Weekend Discount

Fresh Vegetables Big discount

Save up to 50% off on your first order

Shop Now

Fruits & Vegetables

Upto 50% off

Dairy Products

Upto 30% off

Beverages

Upto 25% off

Featured Products

View All

-20%

Fresh Organic Banana

$2.99 $3.99

/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { color: #333; line-height: 1.6; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* Header styles */ .top-bar { background-color: #2b2b2b; color: #fff; padding: 10px 0; font-size: 14px; } .top-bar .container { display: flex; justify-content: space-between; align-items: center; } .top-links a { color: #fff; text-decoration: none; margin-right: 15px; } .main-header { padding: 20px 0; } .main-header .container { display: flex; align-items: center; justify-content: space-between; } .logo img { height: 40px; } .search-bar { display: flex; width: 40%; } .search-bar select { padding: 10px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } .search-bar input { flex: 1; padding: 10px; border: 1px solid #ddd; border-left: none; } .search-bar button { padding: 10px 15px; background-color: #3bb77e; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } .header-actions { display: flex; gap: 20px; } .header-actions div { display: flex; flex-direction: column; align-items: center; cursor: pointer; } /* Hero slider */ .hero-slider { background-color: #f2f3f4; padding: 50px 0; position: relative; } .slide { display: flex; align-items: center; justify-content: space-between; } .slide-content { width: 50%; } .slide-content h1 { font-size: 48px; margin-bottom: 20px; } .btn { display: inline-block; padding: 12px 30px; background-color: #3bb77e; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; } /* Product cards */ .product-card { border: 1px solid #eee; padding: 15px; border-radius: 8px; position: relative; } .product-badge { position: absolute; top: 10px; left: 10px; background-color: #f74b81; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; } .price .original { text-decoration: line-through; color: #999; margin-left: 5px; } .add-to-cart { width: 100%; padding: 8px; background-color: #3bb77e; color: white; border: none; border-radius: 4px; cursor: pointer; } /* Footer */ footer { background-color: #2b2b2b; color: #fff; padding: 50px 0 20px; } .footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 30px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #444; } /* Responsive styles */ @media (max-width: 768px) { .main-header .container { flex-direction: column; gap: 15px; } .search-bar { width: 100%; } .footer-widgets { grid-template-columns: 1fr; } } document.addEventListener('DOMContentLoaded', function() { // Mobile menu toggle functionality would go here // Cart functionality would go here // Product slider functionality would go here // Example of simple cart count update const addToCartButtons = document.querySelectorAll('.add-to-cart'); const cartCount = document.querySelector('.cart-count'); addToCartButtons.forEach(button => { button.addEventListener('click', function() { let currentCount = parseInt(cartCount.textContent); cartCount.textContent = currentCount + 1; }); }); }); This is a simplified version that captures the main structure and styling of the Bacola website. The actual site has many more features like: - Product detail pages - Shopping cart functionality - Checkout process - User account management - More complex product filtering - Additional promotional sections Would you like me to expand on any particular section or functionality?