<title>Fisco | Online Shop</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background: #f5f5f5;
color:
#222;
}
/* Header */
header {
background:
#111;
color: white;
padding: 18px 6%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
}
.logo {
font-size: 28px;
font-weight: bold;
color: #ffd700;
}
nav a {
color: white;
text-decoration: none;
margin-left: 20px;
font-weight: bold;
}
nav a:hover {
color: #ffd700;
}
/* Hero */
.hero {
min-height: 430px;
background: linear-gradient(135deg,
#111, #333);
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 20px;
}
.hero h1 {
font-size: 52px;
color: #ffd700;
margin-bottom: 15px;
}
.hero p {
font-size: 20px;
margin-bottom: 25px;
}
.btn {
display: inline-block;
background: #ffd700;
color:
#111;
padding: 13px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
border: none;
cursor: pointer;
}
.btn:hover {
background: white;
}
/* Sections */
section {
padding: 55px 6%;
}
.section-title {
text-align: center;
font-size: 32px;
margin-bottom: 30px;
}
/* Search */
.search-box {
max-width: 600px;
margin: 0 auto 30px;
}
.search-box input {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
}
/* Categories */
.categories {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.category {
padding: 10px 18px;
border: none;
background:
#111;
color: white;
border-radius: 20px;
cursor: pointer;
}
.category:hover {
background: #ffd700;
color:
#111;
}
/* Products */
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 25px;
}
.product {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(0,0,0,0.1);
transition: 0.3s;
}
.product:hover {
transform: translateY(-5px);
}
.product img {
width: 100%;
height: 230px;
object-fit: cover;
}
.product-info {
padding: 18px;
}
.product-info h3 {
margin-bottom: 8px;
}
.price {
color: #e0a800;
font-size: 20px;
font-weight: bold;
margin: 10px 0;
}
/* About */
.about {
background: white;
text-align: center;
line-height: 1.8;
}
/* Contact */
.contact {
text-align: center;
}
.contact p {
margin: 10px 0;
font-size: 17px;
}
/* Cart */
.cart {
background:
#111;
color: white;
padding: 20px;
position: fixed;
right: 20px;
bottom: 20px;
border-radius: 12px;
z-index: 2000;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.cart button {
margin-top: 10px;
}
/* Footer */
footer {
background:
#111;
color: white;
text-align: center;
padding: 25px;
}
@media(max-width: 700px) {
header {
flex-direction: column;
gap: 12px;
}
nav a {
margin: 0 7px;
font-size: 14px;
}
.hero h1 {
font-size: 40px;
}
}
</style>
FISCO
<nav>
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
Welcome to Fisco
Quality Products. Best Prices. Trusted Service.
<a href="#products" class="btn">
Shop Now
</a>
</div>
<h2 class="section-title">Our Products</h2>
<!-- SEARCH -->
<div class="search-box">
<input
type="text"
id="search"
placeholder="Search products..."
onkeyup="searchProducts()"
>
</div>
<!-- CATEGORIES -->
<div class="categories">
<button class="category" onclick="filterProducts('all')">
All
</button>
<button class="category" onclick="filterProducts('fashion')">
Fashion
</button>
<button class="category" onclick="filterProducts('electronics')">
Electronics
</button>
<button class="category" onclick="filterProducts('other')">
Other
</button>
</div>
<!-- PRODUCT GRID -->
<div class="products" id="productList">
<!-- PRODUCT 1 -->
<div class="product" data-category="fashion">
<img
src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab"
alt="T-Shirt"
>
<div class="product-info">
<h3>Premium T-Shirt</h3>
<p>High quality comfortable T-Shirt.</p>
<div class="price">₹499</div>
<button
class="btn"
onclick="addToCart('Premium T-Shirt', 499)"
>
Add to Cart
</button>
</div>
</div>
<!-- PRODUCT 2 -->
<div class="product" data-category="fashion">
<img
src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
alt="Shoes"
>
<div class="product-info">
<h3>Sports Shoes</h3>
<p>Comfortable shoes for daily use.</p>
<div class="price">₹1,499</div>
<button
class="btn"
onclick="addToCart('Sports Shoes', 1499)"
>
Add to Cart
</button>
</div>
</div>
<!-- PRODUCT 3 -->
<div class="product" data-category="electronics">
<img
src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
alt="Headphones"
>
<div class="product-info">
<h3>Wireless Headphones</h3>
<p>Premium sound with wireless connection.</p>
<div class="price">₹999</div>
<button
class="btn"
onclick="addToCart('Wireless Headphones', 999)"
>
Add to Cart
</button>
</div>
</div>
<!-- PRODUCT 4 -->
<div class="product" data-category="other">
<img
src="https://images.unsplash.com/photo-1544816155-12df9643f363"
alt="Bag"
>
<div class="product-info">
<h3>Premium Bag</h3>
<p>Stylish and useful everyday bag.</p>
<div class="price">₹799</div>
<button
class="btn"
onclick="addToCart('Premium Bag', 799)"
>
Add to Cart
</button>
</div>
</div>
</div>
<h2 class="section-title">About Fisco</h2>
<p>
Fisco is your trusted online shop for quality products
at affordable prices. We are committed to providing
excellent products and customer service.
</p>
<h2 class="section-title">Contact Us</h2>
<p>📍 Kozhikode, Kerala, India</p>
<p>📞 +91 98765 43210</p>
<p>📧 fisco@example.com</p>
<br>
<a
class="btn"
href="https://wa.me/919876543210"
target="_blank"
>
WhatsApp Us
</a>
🛒 Cart:
<span id="cartCount">0</span>
<br>
<button class="btn" onclick="orderWhatsApp()">
Order on WhatsApp
</button>
© 2026 Fisco. All Rights Reserved.
<script>
let cart = [];
// ADD TO CART
function addToCart(name, price) {
cart.push({
name: name,
price: price
});
document.getElementById("cartCount").innerText =
cart.length;
alert(name + " added to cart!");
}
// SEARCH PRODUCTS
function searchProducts() {
let input =
document.getElementById("search")
.value
.toLowerCase();
let products =
document.querySelectorAll(".product");
products.forEach(function(product) {
let name =
product.querySelector("h3")
.innerText
.toLowerCase();
if (name.includes(input)) {
product.style.display = "block";
} else {
product.style.display = "none";
}
});
}
// FILTER PRODUCTS
function filterProducts(category) {
let products =
document.querySelectorAll(".product");
products.forEach(function(product) {
if (
category === "all" ||
product.dataset.category === category
) {
product.style.display = "block";
} else {
product.style.display = "none";
}
});
}
// WHATSAPP ORDER
function orderWhatsApp() {
if (cart.length === 0) {
alert("Your cart is empty!");
return;
}
let message =
"Hello Fisco! I want to order:%0A%0A";
let total = 0;
cart.forEach(function(item, index) {
message +=
(index + 1) +
". " +
item.name +
" - ₹" +
item.price +
"%0A";
total += item.price;
});
message +=
"%0ATotal: ₹" +
total +
"%0A%0AThank you!";
window.open(
"https://wa.me/919876543210?text=" +
message,
"_blank"
);
}
</script>
Welcome to Fisco
Quality Products. Best Prices. Trusted Service.
© 2026 Fisco. All Rights Reserved.
<script> let cart = []; // ADD TO CART function addToCart(name, price) { cart.push({ name: name, price: price }); document.getElementById("cartCount").innerText = cart.length; alert(name + " added to cart!"); } // SEARCH PRODUCTS function searchProducts() { let input = document.getElementById("search") .value .toLowerCase(); let products = document.querySelectorAll(".product"); products.forEach(function(product) { let name = product.querySelector("h3") .innerText .toLowerCase(); if (name.includes(input)) { product.style.display = "block"; } else { product.style.display = "none"; } }); } // FILTER PRODUCTS function filterProducts(category) { let products = document.querySelectorAll(".product"); products.forEach(function(product) { if ( category === "all" || product.dataset.category === category ) { product.style.display = "block"; } else { product.style.display = "none"; } }); } // WHATSAPP ORDER function orderWhatsApp() { if (cart.length === 0) { alert("Your cart is empty!"); return; } let message = "Hello Fisco! I want to order:%0A%0A"; let total = 0; cart.forEach(function(item, index) { message += (index + 1) + ". " + item.name + " - ₹" + item.price + "%0A"; total += item.price; }); message += "%0ATotal: ₹" + total + "%0A%0AThank you!"; window.open( "https://wa.me/919876543210?text=" + message, "_blank" ); } </script>