.jpg "Flipkart clone using html and css") |
| Flipkart clone using html and css |
In this article, we given a Flipkart clone using html css as a project with the complete source code. In this project, we created a flipkart clone project which looks like a real flipkart website. It is only a frontend not complete website. It is created in html and css, so thats the frontend structure and design for learning.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Flipkart clone using html css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Flipkart-clone.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Flipkart clone using html css source code
Here we given a html and css source code of Flipkart clone project as given -
HTML
In html, we added a structure like navbar and body. we added images through the links and added the text like product names and price. Linked a css file to design the structure. Copy the given html code and paste it into index.html file.
<!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="https://static-assets-web.flixcart.com/www/promos/new/20150528-140547-favicon-retina.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</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="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 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>
</divCSS
In css, we styled a structure with css properties to design and position the items at perfect side like a flipkart. Copy the given css code and paste it into style.css file.
@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;
}
/* header */
header {
background-color: var(--primary-color);
height: 56px;
}
header .nav-container{
display: flex;
/* justify-content: space-between; */
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 */
.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 */
.section-2-container {
margin-top: 16px;
height: 280px;
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 {
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('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: 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 */
.section-5 {
margin-top: 8px ;
display: flex;
justify-content: space-between;
}
.section-5 img {
width: 33%;
}
/* footer */
footer {
margin-top: 26px;
background-color: white;
padding: 25px;
text-align: center;
font-size: 14px;
color: #878787 ;
}Output
Check the output of Flipkart clone project -
Run the code -
To run the code, we given a online compiler where you can paste the code and check the preview.
Click here - HTML CSS JS ONLINE COMPILER
Also see this -
Hope this helps you to know about Flipkart clone using html and css with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects