(VJ Fashion store) E-Commerce website project
E-Commerce Project
VJ Fashion Store
Front-end structure of this E-Commerce website is made by the by the help of HTML 5, CSS.
You can watch the video of the structure of website on this link :-
https://youtu.be/MU_9ZEsYI10
I have created a VJ.html file in this I have written these codes or syntax :-
1. VJ.html syntax:-
<!DOCTYPE html>
<html>
<body>
<title>www.VJ_Fashion_Store.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="Demo.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=150px"; width="1349px" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th>
<td><a href="Demo.html"><img src="logo_of_VJ_2.jpg" alt="VJ Fashion Store" style="width:120px"></a></td><th><h1><i>Welcome to our VJ Faishion Store</i></h1></th>
</tr>
</table>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/w3css/3/w3.css">
<body>
<!-- Slide Show -->
<section>
<img class="mySlides" src="E-Commerce_1.jpg"
style="width:100%">
<img class="mySlides" src="E-Commerce_2.jpg"
style="width:100%">
<img class="mySlides" src="E-Commerce_3.jpg"
style="width:100%">
<img class="mySlides" src="E-Commerce_4.jpeg"
style="width:100%">
<img class="mySlides" src="E-Commerce_5.png"
style="width:100%">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<table>
<tr>
<td><h2>Girls hand bags</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Hand_Bag_1.jpeg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Hand_Bag_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Hand_Bag_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Hand_Bag_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Hand_Bag_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Men's wear</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Cloth_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Cloth_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Cloth_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Cloth_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Cloth_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 399</h3></th><th><h3>Rs. 299</h3></th><th><h3>Rs. 199</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Men's jeans</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Jeans_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Jeans_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Jeans_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Jeans_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Mens_Jeans_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 499</h3></th><th><h3>Rs. 199</h3></th><th><h3>Rs. 149</h3></th><th><h3>Rs. 249</h3></th><th><h3>Rs. 149</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Women's wear</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Womens_Clothes_1.jpeg" width="259" height="330"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Womens_Clothes_2.jpg" width="259" height="330"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Womens_Clothes_3.jpg" width="259" height="330"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Womens_Clothes_4.jpg" width="259" height="260"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Womens_Clothes_5.jpg" width="259" height="260"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 499</h3></th><th><h3>Rs. 199</h3></th><th><h3>Rs. 149</h3></th><th><h3>Rs. 249</h3></th><th><h3>Rs. 149</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Makeup kit</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Make_up_kit_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Make_up_kit_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Make_up_kit_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Make_up_kit_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Make_up_kit_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0spx solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: white;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 1999</h3></th><th><h3>Rs. 1499</h3></th><th><h3>Rs. 1299</h3></th><th><h3>Rs. 999</h3></th><th><h3>Rs. 1699</h3></th>
</tr>
</table>
<table>
<tr>
<th>Top Stories:Brand Directory<br>MOST SEARCHED FOR ON VJ FASHION STORE :- <br><br></th>
</tr>
</table>
<table>
<td>CLOTHING:Men Shirts, Men T-Shirts, Jeans, Raincoat, Men Suits, Men Trousers, Mens Blazers, Saree, Dresses, Skirts, Designer Salwar Suits, Designer Kurtis, Men Kurta, Gym Wear, Party Dresses, Palazzo, Suits, Gloves, Nighty Dresses, Western Dress, Gowns, Sherwani, Girls Clothes, Salwar Suits, Tops, Lehenga Dress, Materials Kurtis, Designer Sarees, Summer Dresses Leggings, Designer Blouses, Kids Clothing, Blouse Designs, Banarasi Sarees, Silk Sarees, Cotton Sarees, ShortsBlouse, Long Skirts, Palazzo, Joggers, SuitInner wear Sports, Wear Cap Chanderi, Sarees Linen, Sarees Paithani, Sarees, Sharara Suits ,Salwar, Sarees, Pajamas, Dhoti Kurta, Manyavar Kurtas, Jackets, Western Wear, Sleep wear, Clothing Kids, Winter Wear, Georgette Sarees, Trunks Sweat shirts, Home Wear, Sweaters</td>
</table>
</body>
</html>
2. Mens_wear_menu.html syntax:-
<!Doctype html>
<html>
<head>
<title>www.mens_wear.com</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=100px"; width="100%" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th><h1>Men's wears</h1></th>
</tr>
</table>
<table>
<tr>
<td><h2>Shirts</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_6.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_7.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_8.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_9.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Clothes_10.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Jeans</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="/Men's_Jeans_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_6.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src=Men's_Jeans_7.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_8.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_9.jpg" width="259" height="300"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="Men's_Jeans_10.jpg" width="259" height="300"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
</body>
</html>
3. women's_wear.html syntax:-
<!Doctype html>
<html>
<head>
<title>www.women's_wear.com</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=100px"; width="100%" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th><h1>Women's wear</h1></th>
</tr>
</table>
<table>
<tr>
<td><h2>kurti</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_6.jpg" width="259" height="320"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_7.jpg" width="259" height="320"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_8.jpg" width="259" height="320"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_9.jpg" width="259" height="320"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_cloth_10.jpg" width="259" height="320"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Stoles</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_6.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_7.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_8.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_9.jpg" width="259" height="300"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="women's_stole_10.jpg" width="259" height="300"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
</body>
</html>
4. kids_menu.html syntax:-
<!Doctype html>
<html>
<head>
<title>www.kids_wear.com</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=100px"; width="100%" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th><h1>Kids wears</h1></th>
</tr>
</table>
<table>
<tr>
<td><h2>Woolen clothes</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_6.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_7.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_8.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_9.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_10.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Summer Clothes</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_11.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_12.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_13.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_14.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_15.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_16.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_17.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_18.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_19.jpg" width="259" height="300"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="kids_cloth_20.jpg" width="259" height="300"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
</body>
</html>
5. Toys_menu.html syntax:-
<!Doctype html>
<html>
<head>
<title>www.toys.com</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=100px"; width="100%" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th><h1>Toys</h1></th>
</tr>
</table>
<table>
<tr>
<td><h2>Boy toys</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_6.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_7.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src=boy_toy_8.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_9.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_toy_10.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Girls toys</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt=" need strong net" src="girls_toy_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_6.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_7.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_8.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_9.jpg" width="259" height="300"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_toy_10.jpg" width="259" height="300"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
</body>
</html>
6. Bags_menu.html syntax:-
<!Doctype html>
<html>
<head>
<title>www.kids_wear.com</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=100px"; width="100%" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th><h1>Bags</h1></th>
</tr>
</table>
<table>
<tr>
<td><h2>Boys bags</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#1"><img border="0" alt="need strong net" src="boys_bag_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_6.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_7.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_8.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_9.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="boys_bag_10.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Girls bags</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_6.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_7.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_8.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_9.jpg" width="259" height="300"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="girls_bag_10.jpg" width="259" height="300"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
</body>
</html>
7. Foot_wear_menu.html syntax:-
<!Doctype html>
<html>
<head>
<title>www.footwear.com</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=100px"; width="100%" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th><h1>Foot wears</h1></th>
</tr>
</table>
<table>
<tr>
<td><h2>Boys footwear</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_6.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_7.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt=need strong net" src="boy_footwear_8.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_9.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="boy_footwear_10.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table>
<tr>
<td><h2>Girls footwear</h2><td>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_1.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_2.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_3.jpg" width="259" height="259"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_4.jpg" width="259" height="259"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_5.jpg" width="259" height="259"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
<table style= "border-width: 0px">
<tr>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_6.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_7.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_8.jpg" width="259" height="300"></a></th></th>
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_9.jpg" width="259" height="300"></a></th></th
<th><th><a href="#"><img border="0" alt="need strong net" src="girl_footwear_10.jpg" width="259" height="300"></a></th></th>
</tr>
</table>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: centre;
padding: 0sspx;
}
tr:nth-child() {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
</style>
</head>
<body>
<th><h3>Rs. 450</h3></th><th><h3>Rs. 399</h3></th><th><h3>Rs. 499</h3></th><th><h3>Rs. 349</h3></th><th><h3>Rs. 299</h3></th>
</tr>
</table>
</body>
</html>
8. Login.html syntax:-
<!Doctype html>
<html>
<title>www.login.com</title>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<style>
.topnav-right {
float: right;
}
</style>
<div class="navbar">
<a class="active" href="VJ.html"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-font"></i>About</a>
<a href="Mens_wear_menu.html"><i class="fa fa-fw fa-#"></i>Mens</a>
<a href="women's_wear.html"><i class="fa fa-fw fa-#"></i>Womens</a>
<a href="kids_menu.html"><i class="fa fa-fw fa-#"></i>Kids</a>
<a href="Toys_menu.html"><i class="fa fa-fw fa-#"></i>Toys</a>
<a href="Bags_menu.html"><i class="fa fa-fw fa-#"></i>Bags</a>
<a href="Footwear_menu.html"><i class="fa fa-fw fa-#"></i>Foot wears</a>
<div class="topnav-right">
<a href="#"><i class="fa fa-fw fa-h-square"></i> Help</a>
<a href="Login.html"><i class="fa fa-fw fa-user"></i> Login</a>
<a href="#"><i class="fa fa-fw fa-shopping-cart"></i>Cart</a>
</div>
</div>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>
<table style="background-color:#d9d9d9" height=150px"; width="1349px" >
<tr>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<th>
<td><img src="logo_of_VJ_2.jpg" alt="VJ Fashion Store" style="width:120px"></td><td><h1>Login</h1></td>
</tr>
</table>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-img {
/* The image used */
background-image: url("Form_image.jpg");
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Add styles to the form container */
.container {
position: right;
right: 0;
margin: 20px;
max-width: 450px;
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit button */
.btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="bg-img">
<form action="Login_successfuly.html" class="container">
<h1>Login</h1>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter name" name="name" required>
<label for="email"><b>E-Mail</b></label>
<input type="text" placeholder="Enter e-mail" name="email" required>
<label for="Password"><b>Password</b></label>
<input type="password" placeholder="Enter password" name="password" required>
<label for="Phone no."><b>Phone no.</b></label>
<input type="text" placeholder="Enter phone number" name="Phone no." required>
<label for="Country"><b>Country</b></label>
<input type="text" placeholder="Enter country" name="Country" required>
<label for="State"><b>State</b></label>
<input type="text" placeholder="Enter State" name="State" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
</body>
</html>
9. Login_successfuly.html syntax:-
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 5px solid #009300;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th><img src="file:///D:/DILNAZ_%20JAMAL/My_folder/My_Paractise.html/E-COMMERCE/Nav_images/Green_tick_2.jpg"><br><h1>Congratulations!</h1><br><h2>You have login successfully.</h2></th>
</tr>
</table>
</body>
</html>
Comments
Post a Comment