Hello friends, today we will make a clone of Flipkart with the help of HTML and CSS.
What is Flipkart –
Flipkart is an online product selling platform in India where various types of products like electronics, fashion, home appliances and more are available.
01. HTML Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipkart Clone</title>
<link rel="shortcut icon" href="flipkart_logo1.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="nav-container">
<div id="logo1"><img src="flipkart_logo1.png" alt=""></div>
<div class="logo">
<img src="flipkart_logo.png" alt="logo">
</div>
<div class="search">
<div class="search-container">
<input type="text" class="search-box" placeholder="Search for products, brands and more">
<button class="search-btn">
<svg width="20" height="20" viewBox="0 0 17 18" class="" xmlns="http://www.w3.org/2000/svg"><g fill="#2874F1" fill-rule="evenodd"><path class="_34RNph" d="m11.618 9.897l4.225 4.212c.092.092.101.232.02.313l-1.465 1.46c-.081.081-.221.072-.314-.02l-4.216-4.203"></path><path class="_34RNph" d="m6.486 10.901c-2.42 0-4.381-1.956-4.381-4.368 0-2.413 1.961-4.369 4.381-4.369 2.42 0 4.381 1.956 4.381 4.369 0 2.413-1.961 4.368-4.381 4.368m0-10.835c-3.582 0-6.486 2.895-6.486 6.467 0 3.572 2.904 6.467 6.486 6.467 3.582 0 6.486-2.895 6.486-6.467 0-3.572-2.904-6.467-6.486-6.467"></path></g></svg>
</button>
</div>
</div>
<div class="login">
<button>Login</button>
</div>
<div class="become-seller">
Become a Seller
</div>
<div class="more">
More
<svg width="4.7" height="8" viewBox="0 0 16 27" xmlns="http://www.w3.org/2000/svg" class="zZ3yfL"><path d="M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z" fill="#fff" class="_2gTTdy"></path></svg>
</div>
<div class="cart">
<svg class="V3C5bO" width="14" height="14" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="_1bS9ic" d="M15.32 2.405H4.887C3 2.405 2.46.805 2.46.805L2.257.21C2.208.085 2.083 0 1.946 0H.336C.1 0-.064.24.024.46l.644 1.945L3.11 9.767c.047.137.175.23.32.23h8.418l-.493 1.958H3.768l.002.003c-.017 0-.033-.003-.05-.003-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92c.99 0 1.805-.75 1.91-1.712l5.55.076c.12.922.91 1.636 1.867 1.636 1.04 0 1.885-.844 1.885-1.885 0-.866-.584-1.593-1.38-1.814l2.423-8.832c.12-.433-.206-.86-.655-.86" fill="#fff"></path></svg>
Cart
</div>
</div>
</header>
<section class="section-1">
<div class="section-1-container">
<div class="section-1-item">
<img src="flipkart_category1.webp" alt="">
Grocery
</div>
<div class="section-1-item">
<img src="flipkart_category2.webp" alt="">
Mobiles & Tablets
</div>
<div class="section-1-item">
<img src="flipkart_category3.webp" alt="">
Electronics
</div>
<div class="section-1-item">
<img src="flipkart_category4.webp" alt="">
Travel
</div>
<div class="section-1-item">
<img src="flipkart_category5.webp" alt="">
Laptop
</div>
<div class="section-1-item">
<img src="flipkart_category6.webp" alt="">
fashion
</div>
<div class="section-1-item">
<img src="flipkart_category7.webp" alt="">
Home & Furniture
</div>
<div class="section-1-item">
<img src="flipkart_category8.webp" alt="">
Two Wheeler
</div>
<div class="section-1-item">
<img src="flipkart_category9.webp" alt="">
Toys
</div>
</div>
</section>
<section class="section-2 container">
<div class="section-2-container">
</div>
</section>
<section class="section-3 container">
<div class="section-3-container">
</div>
</section>
<section class="section-4 container">
<div class="section-4-container">
<div class="section-4-offers">
<div class="section-4-offers-viewall">
Top Offers
<button>View All</button>
</div>
</div>
<div class="section-4-list">
<div class="section-4-item">
<img src="flipkart_product1.webp" alt="">
<div class="section-4-item-head">helmet</div>
<div class="section-4-item-price">Under ₹989</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
<div class="section-4-item">
<img src="flipkart_product2.webp" alt="">
<div class="section-4-item-head">Poco F6 5G</div>
<div class="section-4-item-price">Under ₹33999</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
<div class="section-4-item">
<img src="flipkart_product3.webp" alt="">
<div class="section-4-item-head">Soft Toys</div>
<div class="section-4-item-price">Under ₹275</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
<div class="section-4-item">
<img src="flipkart_product4.webp" alt="">
<div class="section-4-item-head">Washing machine</div>
<div class="section-4-item-price">Under ₹36990</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
<div class="section-4-item">
<img src="flipkart_product5.webp" alt="">
<div class="section-4-item-head">Light Wall lamp</div>
<div class="section-4-item-price">From ₹799</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
<div class="section-4-item">
<img src="flipkart_product6.webp" alt="">
<div class="section-4-item-head">Toy Gun</div>
<div class="section-4-item-price">Under ₹699</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
<div class="section-4-item">
<img src="flipkart_product7.webp" alt="">
<div class="section-4-item-head">Shoes</div>
<div class="section-4-item-price">From ₹2329</div>
<div class="section-4-item-explore">Explore Now!</div>
</div>
</div>
</div>
</section>
<section class="section-5 container">
<img src="flipkart_footer1.webp" alt="">
<img src="flipkart_footer2.webp" alt="">
<img src="flipkart_footer3.webp" alt="">
</section>
<footer>
© 2007-2024 Flipkart.com
</footer>
</body>
</html>
02. CSS Code :-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f1f3f6;
}
:root {
--primary-color: #2874f0;
}
.container {
padding: 0 8px;
}
#logo1 {
margin-right: -48px;
margin-left: 143px;
}
header {
background-color: var(--primary-color);
height: 56px;
}
header .nav-container {
display: flex;
align-items: center;
height: 100%;
max-width: 1248px;
margin: 0 auto;
}
header .nav-container .logo {
display: flex;
min-width: 137px;
justify-content: flex-end;
}
header .nav-container .logo img {
width: 75px;
}
header .search {
height: 100%;
display: flex;
align-items: center;
margin-left: 12px;
}
header .search .search-container {
width: 540px;
height: 36px;
background-color: white;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 23%);
display: flex;
}
header .search .search-container input {
width: calc(100% - 32px);
padding: 16px;
outline: none;
border: none;
}
header .search .search-container button {
width: 36px;
height: 100%;
padding: 0 8px;
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color: white;
border-radius: 0 2px 2px 0;
cursor: pointer;
}
header .login {
height: 100%;
display: flex;
align-items: center;
margin: 0 20px;
}
header .login button {
width: 122px;
padding: 5px 40px;
font-size: 16px;
font-weight: 600;
color: var(--primary-color);
}
header .become-seller {
height: 100%;
display: flex;
align-items: center;
margin: 0 20px;
color: white;
font-size: 16px;
font-weight: 500;
}
header .more {
height: 100%;
display: flex;
align-items: center;
margin: 0 20px;
color: white;
font-size: 16px;
font-weight: 500;
}
header .more svg {
margin-left: 8px;
rotate: -90deg;
}
header .cart {
height: 100%;
display: flex;
align-items: center;
margin: 0 20px;
color: white;
}
header .cart svg {
margin-right: 8px;
}
.section-1 {
width: 100%;
height: 112px;
background-color: white;
box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
}
.section-1-container {
width: 1280px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-1-item {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 14px;
font-weight: 500;
}
.section-1-item img {
width: 64px;
height: 64px;
}
.section-2-container {
margin-top: 16px;
height: 280px;
background-image: url('flipkart_banner1.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.section-3-container {
margin-top: 8px;
height: 122px;
background-image: url('flipkart_banner4.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.section-4-container {
height: 100%;
margin-top: 8px;
height: 362px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-4-offers {
width: 230px;
height: 100%;
background-image: url('flipkart_banner5.jpg');
background-position: bottom;
background-repeat: no-repeat;
}
.section-4-offers-viewall {
margin-top: 132px;
width: 100%;
font-size: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
.section-4-offers-viewall button {
margin-top: 24px;
height: 40px;
background-color: var(--primary-color);
color: white;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
border: none;
border-radius: 2px;
cursor: pointer;
}
.section-4-list {
height: 100%;
width: calc(100% - 230px);
display: flex;
overflow-x: auto;
}
.section-4-item {
width: 232px;
height: 100%;
padding: 0px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.section-4-item img {
max-width: 200px;
max-height: 200px;
}
.section-4-item-head {
margin-top: 16px;
font-size: 14px;
font-weight: 500;
}
.section-4-item-price {
margin-top: 12px;
font-size: 16px;
color: #388e3c;
}
.section-4-item-explore {
opacity: 0.6;
margin-top: 12px;
font-weight: 300;
font-size: 12px;
}
.section-5 {
margin-top: 8px;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.section-5 img {
width: 33%;
}
footer {
margin-top: 26px;
background-color: white;
padding: 25px;
text-align: center;
font-size: 14px;
color: #878787;
}
OutPut :-
Download Ebooks – Click Me
Download Notes – Click Me
