Flipkart_project
Flipkart Project
I made this front-end copy of Flipkart.
So, I like to share this with you all.
Front-end structure of flipkart is made by the help of HTML 5, CSS.
You can see in this video, the structure of website.
I have created a Flipkart.html file in this I have written these codes or syntax.
The code of front-end of the flipkart project is given below :-
<!Doctypehtml>
<html>
<head>
<title>Flipkart</title>
</head>
<body bgcolor="#F1F3F6">
<table border="0" width="100%" bgcolor="#2874F0">
<tr>
<td align="right"><img src="Flipkart_plus.jpg",width="device" height="device"></td>
<td><input type="text" placeholder="Search for products, brands and more"></td>
<th><font color="white">Login</font></th>
<th><font color="white">More</font></th>
<th><img src="cart.jpg"></th>
</tr>
</table>
<table border="0" width="100%" bgcolor="white">
<tr>
<th width="11.111111111111111%">Electronics</th>
<th width="11.111111111111111%">TVs & Appliances</th>
<th width="11.111111111111111%">Men</th>
<th width="11.111111111111111%">Women</th>
<th width="11.111111111111111%">Baby & Kids</th>
<th width="11.111111111111111%">Home & Furniture</th>
<th width="11.111111111111111%">Sports, Books & More</th>
<th width="11.111111111111111%">Flights</th>
<th width="11.111111111111111%">Offer Zone</th>
</tr>
</table>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0;
background: #e6e6e6;
}
.showSlide {
display: none
}
.showSlide img {
width: 136%;
}
.slidercontainer {
max-width: 1000px;
position: relative;
margin: left;
}
.left, .right {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115, 0.8);
}
.content {
color: #eff5d4;
font-size: 30px;
padding: 8px 12px;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
</style>
</head>
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="Slider_Image_1.jpg" />
<div class="content"></div>
</div>
<div class="showSlide fade">
<img src="Slider_Image_2.jpg" />
<div class="content"></div>
</div>
<div class="showSlide fade">
<img src="Slider_Image_3.jpg" /> <div class="content"></div>
</div>
<div class="showSlide fade">
<img src="Slider_Image_4.jpg" /> <div class="content"></div>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">?</a>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
<br>
<table border="0" width="100%" bgcolor="white">
<tr>
<td colspan="8"><h3>Mobile Phones</h3><hr></td>
<tr>
<th width="11.111111111111111%" height="30" colspan="1">vivo y15</th>
<th width="11.111111111111111%" height="30" colspan="1">Asus zenfone max m2 3gb</th>
<th width="11.111111111111111%" height="30" colspan="1">Easy phone royale</th>
<th width="11.111111111111111%" height="30" colspan="1">Motorola razr</th>
<th width="11.111111111111111%" height="30" colspan="1">Motorola one power price</th>
<th width="11.111111111111111%" height="30" colspan="1">iphone</th>
<th width="11.111111111111111%" height="30" colspan="1">xiaomi redmi 6 pro</th>
<tr>
<th><img src="file:///D:/DILNAZ_%20JAMAL/My_folder/My_Paractise.html/Flipkart_Project/Images/Mobile_Phones/Mobile.jpg" width="80%"></th>
<th><img src="file:///D:/DILNAZ_%20JAMAL/My_folder/My_Paractise.html/Flipkart_Project/Images/Mobile_Phones/Mobile_2.jpg" width="80%"></th>
<th><img src="Mobile_Asus_Zone_Fone_Max.jpg" width="80%"></th>
<th><img src="Mobile_Easy_Royale.jpg" width="80%"></th>
<th><img src="Mobile_Motorola.jpg" width="80%"></th>
<th><img src="Mobile_Motorola_2.jpg" width="80%"></th>
<th><img src="MOBILE_PHONE.jpg" width="80%"></th>
</tr>
</table><br>
<table border="0" width="100%" bgcolor="white">
<tr>
<td colspan="8"><h3>Laptops</h3><hr></td>
<tr>
<th width="11.111111111111111%" height="30" colspan="1">dell 3595 laptop</th>
<th width="11.111111111111111%" height="30" colspan="1">ipad magic keyboard</th>
<th width="11.111111111111111%" height="30" colspan="1">dell core i9 laptop</th>
<th width="11.111111111111111%" height="30" colspan="1">dell inspiron 5490 i7</th>
<th width="11.111111111111111%" height="30" colspan="1">dell inspiron 14 5000 5481</th>
<th width="11.111111111111111%" height="30" colspan="1">dell windows 8 laptop</th>
<th width="11.111111111111111%" height="30" colspan="1">macbook pro 15 retina 2013</th>
<tr>
<th><img src="Laptop_1.jpg" width="80%"></th>
<th><img src="Laptop_2_(Apple).jpg" width="80%"></th>
<th><img src="Laptop_3.jpg" width="80%"></th>
<th><img src="Laptop_4.jpg" width="80%"></th>
<th><img src="Laptop_5.jpg" width="80%"></th>
<th><img src="Laptop_6.jpg" width="80%"></th>
<th><img src="Laptop_7_(Apple).jpg" width="80%"></th>
</tr>
</table><br>
<table border="0" width="100%" bgcolor="white">
<tr>
<td colspan="8"><h3>Fashionable schools, colleges & tution bags</h3><hr></td>
<tr>
<th width="11.111111111111111%" height="30" colspan="1">bag for girl</th>
<th width="11.111111111111111%" height="30" colspan="1">college bags in india</th>
<th width="11.111111111111111%" height="30" colspan="1">backpack</th>
<th width="11.111111111111111%" height="30" colspan="1">middle school backpacks </th>
<th width="11.111111111111111%" height="30" colspan="1">Backpack</th>
<th width="11.111111111111111%" height="30" colspan="1">Backpack</th>
<th width="11.111111111111111%" height="30" colspan="1">garment bag</th>
<tr>
<th><img src="Bag_1.jpg" width="80%"></th>
<th><img src="Bag_2.jpg" width="80%"></th>
<th><img src="Bag_3.jpg" width="80%"></th>
<th><img src="Bag_4.jpg" width="80%"></th>
<th><img src="Bag_5.jpg" width="80%"></th>
<th><img src="Bag_6.jpg" width="80%"></th>
<th><img src="Bag_7.jpg" width="80%"></th>
</tr>
</table><br>
<table border="0" width="100%" bgcolor="white">
<tr>
<td colspan="8"><h3>Mens Cloths</h3><hr></td>
<tr>
<th width="11.111111111111111%" height="30" colspan="1">topo designs trucker jacket</th>
<th width="11.111111111111111%" height="30" colspan="1">leather Cloths</th>
<th width="11.111111111111111%" height="30" colspan="1">mens latest fashion</th>
<th width="11.111111111111111%" height="30" colspan="1">formal wear</th>
<th width="11.111111111111111%" height="30" colspan="1">clothes for boys</th>
<th width="11.111111111111111%" height="30" colspan="1">baby clothes for boys</th>
<th width="11.111111111111111%" height="30" colspan="1">boy summer kids dress</th>
<tr>
<th><img src="Men_cloth_1.jpg" width="80%"></th>
<th><img src="Men_cloth_2.jpg" width="80%"></th>
<th><img src="Men_cloth_3.jpg" width="80%"></th>
<th><img src="Men_cloth_4.jpg" width="80%"></th>
<th><img src="Men_cloth_5.jpg" width="80%"></th>
<th><img src="Men_cloth_6.jpg" width="80%"></th>
<th><img src="Men_cloth_7.jpg" width="80%"></th>
</tr>
</table>
<br>
<table border="0" width="100%" bgcolor="white">
<tr>
<td colspan="8"><h3>Teddy Bears</h3><hr></td>
<tr>
<th width="11.111111111111111%" height="30" colspan="1">Cute teddy bear</th>
<th width="11.111111111111111%" height="30" colspan="1">Sky blue teddy bear</th>
<th width="11.111111111111111%" height="30" colspan="1">Teddy bear</th>
<th width="11.111111111111111%" height="30" colspan="1">Pink teddy bear</th>
<th width="11.111111111111111%" height="30" colspan="1">Pink teddy cute teddy bear</th>
<th width="11.111111111111111%" height="30" colspan="1">Giant teddy bear</th>
<th width="11.111111111111111%" height="30" colspan="1">xl teddy bear</th>
<tr>
<th><img src="Teddy_Bear_1.jpg" width="80%"></th>
<th><img src="Teddy_Bear_2.jpg" width="80%"></th>
<th><img src="Teddy_Bear_3.jpg" width="80%"></th>
<th><img src="Teddy_Bear_4.jpg" width="80%"></th>
<th><img src="Teddy_Bear_5.jpg" width="80%"></th>
<th><img src="Teddy_Bear_6.jpg" width="80%"></th>
<th><img src="Teddy_Bear_7.jpg" width="80%"></th>
</tr>
</table>
</body>
</html>
Great work Dilnaz...keep it up..👍
ReplyDeleteThank you!
Delete