<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced E-Commerce Website</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}
body{
background:#f4f4f4;
}
header{
background:#111;
color:white;
padding:20px;
text-align:center;
}
nav{
background:#333;
padding:15px;
text-align:center;
}
nav a{
color:white;
text-decoration:none;
margin:12px;
font-size:16px;
}
.search-bar{
text-align:center;
padding:20px;
}
.search-bar input{
padding:10px;
width:300px;
}
.banner{
background:linear-gradient(to right,#007bff,#00c6ff);
color:white;
padding:60px;
text-align:center;
}
section{
padding:40px;
text-align:center;
}
.products{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}
.product{
background:white;
width:250px;
padding:20px;
border-radius:10px;
box-shadow:0 0 10px gray;
}
.product img{
width:100%;
height:180px;
}
button{
background:green;
color:white;
border:none;
padding:10px;
cursor:pointer;
margin-top:10px;
width:100%;
}
button:hover{
background:darkgreen;
}
.card{
background:white;
padding:20px;
margin:20px auto;
width:80%;
border-radius:10px;
box-shadow:0 0 10px gray;
}
input,textarea{
padding:10px;
width:300px;
margin:10px;
}
footer{
background:#111;
color:white;
padding:20px;
text-align:center;
}
</style>
</head>
<body>
<header>
<h1>My Advanced E-Commerce Store</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#offers">Offers</a>
<a href="#cart">Cart</a>
<a href="#login">Login</a>
<a href="#signup">Signup</a>
<a href="#orders">Orders</a>
<a href="#profile">Profile</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search products...">
</div>
<section class="banner" id="home">
<h2>Biggest Sale of the Year</h2>
<p>Up to 70% Off</p>
</section>
<section id="products">
<h2>Featured Products</h2>
<div class="products">
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Smartphone</h3>
<p>₹15000</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Laptop</h3>
<p>₹55000</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Headphones</h3>
<p>₹2500</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Smart Watch</h3>
<p>₹4000</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Tablet</h3>
<p>₹22000</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Shoes</h3>
<p>₹3000</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Camera</h3>
<p>₹35000</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x180">
<h3>Gaming Mouse</h3>
<p>₹1800</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
</div>
</section>
<section id="offers">
<h2>Special Offers</h2>
<div class="card">
<p>Buy 1 Get 1 Free on Accessories</p>
<p>Flat 50% Off on Electronics</p>
</div>
</section>
<section id="cart">
<h2>Shopping Cart</h2>
<p>Total Items: <span id="cartCount">0</span></p>
</section>
<section id="login">
<h2>Login</h2>
<input type="text" placeholder="Username"><br>
<input type="password" placeholder="Password"><br>
<button>Login</button>
</section>
<section id="signup">
<h2>Signup</h2>
<input type="text" placeholder="Name"><br>
<input type="email" placeholder="Email"><br>
<input type="password" placeholder="Password"><br>
<button>Register</button>
</section>
<section id="orders">
<h2>Order History</h2>
<div class="card">
<p>No previous orders</p>
</div>
</section>
<section id="profile">
<h2>User Profile</h2>
<div class="card">
<p>Name: User</p>
<p>Email: [email protected]</p>
<p>Membership: Premium</p>
</div>
</section>
<section id="faq">
<h2>Frequently Asked Questions</h2>
<div class="card">
<p><b>How to order?</b> Add product to cart and checkout.</p>
<p><b>Payment options?</b> UPI, Card, Net Banking.</p>
<p><b>Return policy?</b> 7 days replacement.</p>
</div>
</section>
<section id="testimonials">
<h2>Customer Reviews</h2>
<div class="card">
<p>"Excellent website and fast delivery!"</p>
<p>- Rahul</p>
</div>
<div class="card">
<p>"Great products at affordable price."</p>
<p>- Priya</p>
</div>
</section>
<section id="newsletter">
<h2>Subscribe Newsletter</h2>
<input type="email" placeholder="Enter Email">
<button>Subscribe</button>
</section>
<section id="contact">
<h2>Contact Us</h2>
<input type="text" placeholder="Name"><br>
<input type="email" placeholder="Email"><br>
<textarea placeholder="Message"></textarea><br>
<button>Send</button>
</section>
<footer>
<p>© 2026 Advanced E-Commerce Website</p>
</footer>
<script>
let cart=0;
function addToCart(){
cart++;
document.getElementById("cartCount").innerText=cart;
alert("Product Added Successfully");
}
</script>
</body>
</html>