Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 76

Willow’s Apparel

Documentation

Group Members Contribution:


Balbaboco, Dionisio – CSS Design, Documentation and Video Compilation
Baltar, Nelenia – About Us Code
Manuel, Shane Danielle – Main Menu / Home Page Code, Add To Cart / Shop
Merin, John Carlo – Register / LOGIN Code
Taal, Redick Jake – Interface design and Layout
Tadeo, Michael Jude – Contact Us
Website account LOGIN / Register
About Willow’s Apparel

Contact us
Willow’s Apparel Product
Website’s Home Page
SOURCE CODE
About us
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 200px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
.page-btn{
margin: 0 auto 80px;;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover{
background: #ff523b;
color: #fff;
}
.dev{
width: 200px;
margin-top: 20px;
border-radius: 50%;
}

</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron bg-info">
<div class="fluid-container">
<div class="row">
<div class="col-6">
<h1>Fashion is like eating,<br> you shouldn't stick to the same menu</h1><br>
<a href="products.html" class="btn1 btn-primary rounded-pill btn-lg">Explore Now
&#8658;</a>
</div>
<div class="col-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
</div>
</div>
</div>
<!-- Web Devs -->
<div class="container">
<h2 class="title">Meet our Team</h2>
<div class="row">
<div class="col-6 col-md-4">
<img class="dev img-fluid" src="images\member-1.jpg">
<h5>Redick Jake Taal</h5>
</div>
<div class="col-6 col-md-4">
<img class="dev img-fluid" src="images\member-2.jpg">
<h5>Nel Nia Baltar</h5>
</div>
<div class="col-6 col-md-4">
<img class="dev img-fluid" src="images\member-3.jpg">
<h5>Balbaboco Dionisio</h5>
</div>
<div class="col-6 col-md-4">
<img class="dev img-fluid" src="images\member-4.jpg">
<h5>Shane Danielle Manuel</h5>
</div>
<div class="col-6 col-md-4">
<img class="dev img-fluid" src="images\member-5.jpg">
<h5>John Carlo Merin</h5>
</div>
<div class="col-6 col-md-4">
<img class="dev img-fluid" src="images\member-6.jpg">
<h5>Michael Jude Tadeo</h5>
</div>
</div>
<br>
</div>

<!-- footer -->


<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

Templates
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
.page-btn{
margin: 0 auto 80px;;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover{
background: #ff523b;
color: #fff;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>

<div class="jumbotron bg-info">


<div class="fluid-container">
<div class="row">
<div class="col-6">
<h1>Fashion is like eating,<br> you shouldn't stick to the same menu</h1><br>
<a href="products.html" class="btn1 btn-primary rounded-pill btn-lg">Explore Now
&#8658;</a>
</div>
<div class="col-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
</div>
</div>
</div>

<!-- footer -->


<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

Shop
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
.page-btn{
margin: 0 auto 80px;;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover{
background: #ff523b;
color: #fff;
}.cart-page{
margin: 80px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
.cart-info{
display: flex;
flex-wrap: wrap;
}
th{
text-align: left;
padding: 5px;
color: #fff;
background: #ff523b;
font-weight: normal;
}
td{
padding: 10px 5px;
}
td input{
width: 40px;
height: 30px;
padding: 5px;
}
td a{
color:#ff523b;
font-size: 12px;
}
td img{
width: 80px;
height: 80px;
margin-right: 10px;
}
.total-price{
display: flex;
justify-content: flex-end;
}
.total-price table{
border-top: 3px solid #ff523b;
max-width: 400px;
}
td:last-child{
text-align: right;
}
th:last-child{
text-align: right;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>

<div class="jumbotron bg-info">


<div class="fluid-container">
<div class="row">
<div class="col-6">
<h1>Fashion is like eating,<br> you shouldn't stick to the same menu</h1><br>
<a href="products.html" class="btn1 btn-primary rounded-pill btn-lg">Explore Now
&#8658;</a>
</div>
<div class="col-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="container">
<div class="row">
<div class="col-12">
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>
<div class="cart-info">
<img class="img-fluid" src="images\buy-1.jpg">
<div>
<p>Red Printed T=Shirt</p>
<small>Price: $50.00</small>
<br>
<a href="">Remove</a>
</div>
</div>
</td>
<td><input type="number" value="1"></td>
<td>$50.00</td>
</tr>
<tr>
<td>
<div class="cart-info">
<img class="img-fluid" src="images\buy-2.jpg">
<div>
<p>Black Shoes</p>
<small>Price: $75.00</small>
<br>
<a href="">Remove</a>
</div>
</div>
</td>
<td><input type="number" value="1"></td>
<td>$75.00</td>
</tr>
<tr>
<td>
<div class="cart-info">
<img class="img-fluid" src="images\buy-3.jpg">
<div>
<p>Grey Joggin Pants</p>
<small>Price: $75.00</small>
<br>
<a href="">Remove</a>
</div>
</div>
</td>
<td><input type="number" value="1"></td>
<td>$75.00</td>
</tr>
</table>
</div>
</div>
<div class="total-price">
<table>
<tr>
<td>Subtotal</td>
<td>$200.00</td>
</tr>
<tr>
<td>Tax</td>
<td>$35.00</td>
</tr>
<tr>
<td>Total</td>
<td>$230.00</td>
</tr>
</table>
</div>
</div>

<!-- footer -->


<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-


KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

MainMenu
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron bg-info">
<div class="fluid-container">
<div class="row">
<div class="col-6">
<h1>Fashion is like eating,<br> you shouldn't stick to the same menu</h1><br>
<a href="products.html" class="btn1 btn-primary rounded-pill btn-lg">Explore Now
&#8658;</a>
</div>
<div class="col-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
</div>
</div>
</div>
<!-- categories -->
<div class="container">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="images\category-1.jpg" alt="category-1">
</div>
<div class="col-4">
<img class="img-fluid" src="images\category-2.jpg" alt="category-1">
</div>
<div class="col-4">
<img class="img-fluid" src="images\category-3.jpg" alt="category-1">
</div>
</div>
</div>
<br>
<h2 class="title">Featured Products</h2>
<br>
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<a href="Product-1.html"><img class="img-fluid" src="images\product-1.jpg"></a>
<a href="Product-1.html"><h4>Product 1</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-2.html"><img class="img-fluid" src="images\product-2.jpg"></a>
<a href="Product-2.html"><h4>Product 2</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-3.html"><img class="img-fluid" src="images\product-3.jpg"></a>
<a href="Product-3.html"><h4>Product 3</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-4.html"><img class="img-fluid" src="images\product-4.jpg"></a>
<a href="Product-4.html"><h4>Product 4</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>

<h2 class="title">Latest Products</h2>


<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<a href="Product-5.html"><img class="img-fluid" src="images\product-5.jpg"></a>
<a href="Product-5.html"><h4>Product 5</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-6.html"><img class="img-fluid" src="images\product-6.jpg"></a>
<a href="Product-6.html"><h4>Product 6</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-7.html"><img class="img-fluid" src="images\product-7.jpg"></a>
<a href="Product-7.html"><h4>Product 7</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-8.html"><img class="img-fluid" src="images\product-8.jpg"></a>
<a href="Product-8.html"><h4>Product 8</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<br>
<div class="col-6 col-md-3">
<a href="Product-9.html"><img class="img-fluid" src="images\product-9.jpg"></a>
<a href="Product-9.html"><h4>Product 9</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-10.html"><img class="img-fluid" src="images\product-10.jpg"></a>
<a href="Product-10.html"><h4>Product 10</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-11.html"><img class="img-fluid" src="images\product-11.jpg"></a>
<a href="Product-11.html"><h4>Product 11</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-12.html"><img class="img-fluid" src="images\product-12.jpg"></a>
<a href="Product-12.html"><h4>Product 12</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>

<br>
<!-- offer -->
<div class="jumbotron">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
<div class="col-12 col-md-6">
<img class="img-fluid" src="images\exclusive.png" class="offer-img">
</div>
<div class="col-12 col-md-6">
<h1>Exclusively Available on Willow Apparels</h1>
<p>Smart Band</p>
<small>Mi Smart Band 4 will track your heart rate, calories burned and more. as you
climb mountain roads or dash around the city. Whether you're doing high-speed battle rope
training or an aerobic battle rope workout, Mi Smart Band 4 will track your heart rate, calories
burned and more.</small><br/>
<br>
<a href="" class="btn1 btn-primary rounded-pill btn-lg">Buy Now &#8658;</a>
</div>
</div>
</div>
</div>
<!-- testimonial -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images\user-1.png" alt="Card image cap">
<div class="card-body">
<i class="fa fa-quote-left"></i>
<h5 class="card-title">Sean Parker</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-
in to additional content. This content is a little bit longer.</p>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images\user-2.png" alt="Card image cap">
<div class="card-body">
<i class="fa fa-quote-left"></i>
<h5 class="card-title">Mike Smith</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-
in to additional content. This content is a little bit longer.</p>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images\user-3.png" alt="Card image cap">
<div class="card-body">
<i class="fa fa-quote-left"></i>
<h5 class="card-title">Mable Pines</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-
in to additional content. This content is a little bit longer.</p>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- sponsors -->
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<img src="images\logo-godrej.png">
</div>
<div class="col-6 col-md-3">
<img src="images\logo-oppo.png">
</div>
<div class="col-6 col-md-3">
<img src="images\logo-coca-cola.png">
</div>
<div class="col-6 col-md-3">
<img src="images\logo-paypal.png">
</div>
</div>
</div>
<br>
<br>
<!-- footer -->
<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-


KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

Contact Us
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
.page-btn{
margin: 0 auto 80px;;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover{
background: #ff523b;
color: #fff;
}
.contact{
width: 100%;
height: 100vh;
}
.head{
background-color: darkmagenta;
border-radius: 5px;
margin-top: -40px;
box-shadow: -2px 8px 25px 7px rgba(196,47,199,0.4);
-webkit-box-shadow: -2px 8px 25px 7px rgba(196,47,199,0.4);
-moz-box-shadow: -2px 8px 25px 7px rgba(196,47,199,0.4);
}
.effect-1{
border: 0;
outline: none;
width: 100%;
padding: 7px 0;
border-bottem: 1px solid #ccc;
}
.effect-1 ~ .Focus-border{
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color:darkmagenta;
transition: 0.4s;
}
.effect-1:focus ~ .Focus-border{
width: 100%;
transition: 0.4s;
left: 0;
}
.btn1{
background-color:darkmagenta;
color: white;
outline: none;
border: none;
border-radius: 5px;
height: 40px;
width: 145px;
}.btn1:hover{
box-shadow: -2px 8px 25px 7px rgba(196,47,199,0.4);
-webkit-box-shadow: -2px 8px 25px 7px rgba(196,47,199,0.4);
-moz-box-shadow: -2px 8px 25px 7px rgba(196,47,199,0.4);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>

<div class="jumbotron bg-info">


<div class="fluid-container">
<div class="row">
<div class="col-6">
<h1>Fashion is like eating,<br> you shouldn't stick to the same menu</h1><br>
<a href="products.html" class="btn-primary rounded-pill btn-lg">Explore Now
&#8658;</a>
</div>
<div class="col-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
</div>
</div>
</div>
<!-- contact us -->
<div class="container-fluid">
<div class="container-fluid py-5">
<div class="row">
<div class="col-12 col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="head text-center text-white">
<h3>Contact Us</h3>
</div>

</div>

</div>
<div class="form py-3">
<div class="form-row my-5">
<div class="col-6">
<input type="text" class="effect-1" placeholder="First Name">
<span class="Focus-border"></span>
</div>
<div class="col-6">
<input type="text" class="effect-1" placeholder="Last Name">
<span class="Focus-border"></span>
</div>
</div>
<div class="form-row pb-4">
<div class="col-12">
<input type="text" class="effect-1" placeholder="Email Address">
<span class="Focus-border"></span>
</div>
</div>
<div class="form-row pt-5">
<div class="col-12">
<input type="text" class="effect-1" placeholder="Youre Message">
<span class="Focus-border"></span>
</div>
</div>
<div class="form-row pt-4">
<div class="col-6">
<p><input type="checkbox"> I'm not a Robot </p>
</div>
<div class="ofset-2 col-4">
<button class="btn1">Send Message</button>
</div>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>
<!-- footer -->
<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-


KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

All Products
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
.page-btn{
margin: 0 auto 80px;;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover{
background: #ff523b;
color: #fff;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>

<div class="jumbotron bg-info">


<div class="fluid-container">
<div class="row">
<div class="col-6">
<h1>Fashion is like eating,<br> you shouldn't stick to the same menu</h1><br>
<a href="products.html" class="btn1 btn-primary rounded-pill btn-lg">Explore Now
&#8658;</a>
</div>
<div class="col-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
</div>
</div>
</div>
<!-- title and sort -->
<div class="container">
<div class="row">
<div class="col-6">
<h2>All Products</h2>
</div>
<div class="col-6" style="text-align: right;">
<select>
<option>Default Sorting</option>
<option>Sort By Price</option>
<option>Sort By Popularity</option>
<option>Sort by Rating</option>
<option>Sort by Sale</option>
</select>
</div>
</div>
</div>
<!-- Products -->
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<a href="Product-1.html"><img class="img-fluid" src="images\product-1.jpg"></a>
<a href="Product-1.html"><h4>Product 1</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-2.html"><img class="img-fluid" src="images\product-2.jpg"></a>
<a href="Product-2.html"><h4>Product 2</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-3.html"><img class="img-fluid" src="images\product-3.jpg"></a>
<a href="Product-3.html"><h4>Product 3</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-4.html"><img class="img-fluid" src="images\product-4.jpg"></a>
<a href="Product-4.html"><h4>Product 4</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
</div>

<div class="row">
<div class="col-6 col-md-3">
<a href="Product-5.html"><img class="img-fluid" src="images\product-5.jpg"></a>
<a href="Product-5.html"><h4>Product 5</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-6.html"><img class="img-fluid" src="images\product-6.jpg"></a>
<a href="Product-6.html"><h4>Product 6</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-7.html"><img class="img-fluid" src="images\product-7.jpg"></a>
<a href="Product-7.html"><h4>Product 7</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-8.html"><img class="img-fluid" src="images\product-8.jpg"></a>
<a href="Product-8.html"><h4>Product 8</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
</div>

<div class="row">
<div class="col-6 col-md-3">
<a href="Product-9.html"><img class="img-fluid" src="images\product-9.jpg"></a>
<a href="Product-9.html"><h4>Product 9</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-10.html"><img class="img-fluid" src="images\product-10.jpg"></a>
<a href="Product-10.html"><h4>Product 10</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-11.html"><img class="img-fluid" src="images\product-11.jpg"></a>
<a href="Product-11.html"><h4>Product 11</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-6 col-md-3">
<a href="Product-12.html"><img class="img-fluid" src="images\product-12.jpg"></a>
<a href="Product-12.html"><h4>Product 12</h4></a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="page-btn">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>&#8658;</span>
</div>

</div>

<!-- footer -->


<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-


KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

Accounts
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<style media="screen">
.jumbotron{
background: radial-gradient(#ffffff, #809bff);
}
.rating .fa{
color: #FFD700;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.Copyright{
text-align: center;
}
.page-btn{
margin: 0 auto 80px;;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover{
background: #ff523b;
color: #fff;
}.form-container{
background: #fff;
width: 300px;
height: 400px;
position: relative;text-align: center;
padding: 20px 0;
margin: auto;
box-shadow: 0 0 20px 0px rgba(0.0.0.0.1);
overflow: hidden;
}
.form-container span{
font-weight: bold;
padding: 0 10px;
color: #555;
cursor: pointer;
width: 100px;
display: inline-block;
}
.form-btn{
display: inline-block;
}
.form-container form{
max-width: 300px;
padding: 0 20px;
position: absolute;
top: 130px;
transition: transform 1s;
}
form input{
width: 100%;
height: 30px;
margin: 10px 0;
padding: 0 10px;
border: 1px solid #ccc;
}
form .btn1{
width: 100%;
border: none;
cursor: pointer;
margin: 10px 0;
}
form .btn1:focus{
outline: none;
}#LoginForm{
left: -300px;
}
#RegForm{
left: 0;
}
form a{
font-size: 12px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="MainMenu.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="AllProducts.html">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact-Us.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Accounts.html">Account</a>
</li>
<li class="nav-item">
<a href="Shop.html"><img src="images\cart.png" alt="cart icon" width="30px"
height="30px"></a>
</li>
</ul>
</div>
</nav>

<div class="jumbotron bg-info">


<div class="fluid-container">
<div class="row">
<div class="col-12 col-md-6">
<img class="img-fluid" src="images\image1.png" alt="background image">
</div>
<div class="col-12 col-md-6">
<div class="form-container">
<div class="form-btn">
<span onclick="login()">Login</span>
<span onclick="register()">Register</span>
<hr id="Indicator">
</div>
<form id="LoginForm" action="Login.php" method="post">
<input type="text" placeholder="Username" id="Username" name="Username">
<input type="password" placeholder="Password" id="Password" name="Password">
<button type="submit"class="btn1">Login</button>
<a href="">Forgot Password</a>
</form>

<form id="RegForm" action="Register.php" method="post">


<input type="text" placeholder="Username" id="txtName" name="txtName">
<input type="text" placeholder="Email" id="txtEmail" name="txtEmail">
<input type="password" placeholder="Password" id="txtPassword"
name="txtPassword">
<input type="submit" class="btn1">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->

<!-- footer -->


<div class="fluid-container pl-3 pt-3 pr-3 bg-dark text-white">
<div class="row justify-content-xs-center">
<div class="col-6 col-md-3">
<h3>Download Our App</h3>
<p>Download our app for android and ios mobile phones</p>
<div class="app-logo">
<img src="images\play-store.png">
<img src="images\app-store.png">
</div>
</div>
<div class="col-6 col-md-3">
<img src="images\logo-white.png">
<p>Sample text Sample text Sample text.</p>
</div>
<div class="col-6 col-md-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 - Willow Apparels</p>
<br>
</div>
<script>
var LoginForm = document.getElementById('LoginForm');
var RegForm = document.getElementById('RegForm');
var Indicator = document.getElementById('Indicator');

function register(){
RegForm.style.transform = "translateX(0px)";
LoginForm.style.transform = "translateX(0px)";
Indicator.style.transform = "translateX(100px)";
}
function login(){
RegForm.style.transform = "translateX(300px)";
LoginForm.style.transform = "translateX(300px)";
Indicator.style.transform = "translateX(0px)";
}
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus
vfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76P
VCmYl" crossorigin="anonymous"></script>

</body>
</html>

You might also like