How to create Flipkart replicate using HTML CSS – Clone
By VANSHIKA PALIn online shopping, The Flipkart site is absolutely a true example of an easy platform-friendly shopping platform with less time consumption and free shipping quality.
If you want to create a remarkably effortless site of Flipkart, then you can simply use HTML and CSS. HTML and CSS are the languages used in the creation of static web pages. This blog will be helpful to you in the most efficient manner.
This tutorial will guide you step by step to recreate the fundamental aspects of Flipkart’s interface.
Getting Started
To start, create a new folder for the project. Inside this folder, establish two essential files: ‘index.html’ to define the structure of Flipkart’s replicate and ‘style.css’ to design it with Flipkart’s very on visual style.
Building the Structure:
In ‘index.html’, let’s start defining the basic structure of the Flipkart.
The ‘index.html’ file should include the basic structure of the webpage, including the header, all the sections and footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipkart Replica</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://static-assets-web.flixcart.com/www/promos/new/20150528-140547-favicon-retina.ico" type="image/x-icon">
</head>
<body>
<!--header-->
<header>
<div class="nav-container">
<div class="logo">
<img src="https://static-assets-web.flixcart.com/fk-p-linchpin-web/fk-cp-zion/img/flipkart-plus_8d85f4.png" alt="">
</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 1-->
<section class="section-1">
<div class="section-1-container">
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/178cf5a874cd697a.png?q=100" alt="">
Top Offers
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/e2268d56d09df684.png?q=100" alt="">
Mobiles & Tablets
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/6e3e1efa83bc56c3.png?q=100" alt="">
Electronics
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/b3e1225e6bda1c9e.png?q=100" alt="">
TVs & Appliances
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/a11d5d13e54bf964.png?q=100" alt="">
Fashion
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/5f09b2d254acb48a.png?q=100" alt="">
Beauty
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/5972d5da375c81c7.png?q=100" alt="">
Home & Furniture
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/1cfc2d91f717510a.png?q=100" alt="">
Flights
</div>
<div class="section-1-item">
<img src="https://rukminim1.flixcart.com/fk-p-flap/128/128/image/d154c0b4d536c1cf.png?q=100" alt="">
Grocery
</div>
</div>
</section>
<!--section 2-->
<section class="section-2 container">
<div class="section-2-container"></div>
</section>
<!--section 3-->
<section class="section-3 container">
<div class="section-3-container"></div>
</section>
<!--section 4-->
<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="https://rukminim1.flixcart.com/image/400/400/l1tmf0w0/stuffed-toy/2/c/q/3-feet-printed-foot-teddy-bear-stuffed-toys-latest-teddy-bear-90-original-imagdazpzwhhvkhu.jpeg?q=70" alt="">
<div class="section-4-item-head">Soft Toy</div>
<div class="section-4-item-price">Under ₹299</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
<div class="section-4-item">
<img src="https://rukminim1.flixcart.com/image/400/400/kn0n6a80/remote-control-toy/i/t/l/mini-racing-4-channel-radio-control-rc-car-miss-chief-original-imagfs8264ewfmnw.jpeg?q=70" alt="">
<div class="section-4-item-head">Remote Control Toys</div>
<div class="section-4-item-price">Min 50% Off</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
<div class="section-4-item">
<img src="https://rukminim1.flixcart.com/image/400/400/l51d30w0/television/1/k/j/-original-imagfsyu8nrz5gzg.jpeg?q=70" alt="">
<div class="section-4-item-head">Top Smart TVs</div>
<div class="section-4-item-price">Buy Now</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
<div class="section-4-item">
<img src="https://rukminim1.flixcart.com/image/400/400/khuvxjk0-0/mouse/l/t/6/zeb-transformer-m-zebronics-original-imafxrugfftphbkk.jpeg?q=70" alt="">
<div class="section-4-item-head">Gaming Mouse</div>
<div class="section-4-item-price">From ₹299</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
<div class="section-4-item">
<img src="https://rukminim1.flixcart.com/image/400/400/kpft18w0/action-figure/w/l/m/iron-man-pvc-solar-bobble-head-in-standing-position-avenger-red-original-imag3njyfnkyaskf.jpeg?q=70" alt="">
<div class="section-4-item-head">Toys</div>
<div class="section-4-item-price">Under ₹499</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
<div class="section-4-item">
<img src="https://rukminim1.flixcart.com/image/400/400/knoxnrk0/curtain/y/m/z/d-1-door-c-1-rod-pocket-flipkart-smartbuy-original-imag2azekmj26zfb.jpeg?q=70" alt="">
<div class="section-4-item-head">Home Accessories</div>
<div class="section-4-item-price">From ₹499</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
<div class="section-4-item">
<img src="https://rukminim1.flixcart.com/image/400/400/jn3hocw0/microphone/d/c/e/boya-by-m1-3-5mm-electret-condenser-microphone-with-1-4-adapter-original-imaf9v2jhhakavks.jpeg?q=70" alt="">
<div class="section-4-item-head">Wired Mics</div>
<div class="section-4-item-price">30% Off</div>
<div class="section-4-item-explore">Explore Now</div>
</div>
</div>
</div>
</section>
<!--section 5-->
<section class="section-5 container">
<img src="https://rukminim1.flixcart.com/fk-p-flap/960/960/image/d78dda604e158c5c.jpg?q=50" alt="">
<img src="https://rukminim1.flixcart.com/fk-p-flap/960/960/image/6e9e6f6130cddc96.jpg?q=50" alt="">
<img src="https://rukminim1.flixcart.com/fk-p-flap/960/960/image/2073732fc5e1fef2.jpg?q=50" alt="">
</section>
<!--footer-->
<footer>
Made In India by Vanshika
</footer>
</body>
</html>Designing the Webpage (Flipkart clone):
The replication of Flipkart begins with crafting it’s complete appearance in ‘style.css’.
@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: #2847f0;
}
.container {
padding: 0 8px;
}Then start designing the header i.e. the navigation bar of the webpage.
/* header */
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;
}
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;
}Next proceed towards the designing of all the sections included in the webpage.
/* section 1 */
.section-1 {
width: 100%;
height: 122px;
background-color: white;
box-shadow: 0 1px 1px 0 rgb(0 0 0 /16%);
}
.section-1-container {
width: 1200px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-1-item {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 500;
}
.section-1-item img{
width: 64px;
height: 64px;
}
/* section 2 */
.section-2-container {
margin-top: 16px;
height: 200px;
background-image: url('https://rukminim1.flixcart.com/fk-p-flap/3376/560/image/0735712fe84c602d.jpg?q=50');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* section 3 */
.section-3-container{
margin-top: 8px;
height: 122px;
background-image: url('https://rukminim1.flixcart.com/fk-p-flap/2848/246/image/d56a3ed6d200038a.jpg?q=50');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* section 4 */
.section-4-container {
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('https://rukminim1.flixcart.com/fk-p-flap/278/278/image/1e483f8045ec13a8.jpg?q=90');
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: 0 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 */
.section-5 {
margin-top: 8px;
display: flex;
justify-content: space-between;
}
.section-5 img {
width: 33%;
}At the end, let’s design its footer.
footer {
margin-top: 26px;
background-color: white;
padding: 25px;
text-align: center;
font-size: 14px;
color: #878787;
}Output Preview
For a preview of the Flipkart replica, click the link below-
Leave a Reply