E Commerce

You go to: https://replit.com/~

We need 4 html files

index.html

account.html

products.html

Copy and paste the following elements in the body html.

index.html

<!DOCTYPE html>

<head>

<title>Wardrobe | Fashion Trends</title>

<link

rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

/>

</head>

<body>

<img src="images/logo.png" alt="" width="125px"

/></a>

</div>

<nav>

<li><a href="products.html">Products</a></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

<li><a href="account.html">Account</a></li>

</ul>

</nav>

<a href="cart.html"

><img src="images/cart.png" alt="" width="30px" height="30px"

/></a>

</div>

<nav>

<li><a href="products.html">Products</a></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

<li><a href="account.html">Account</a></li>

</ul>

</nav>

</div>

</h1>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />

Voluptas rerum maiores animi officiis

</p>

<a href="" class="btn">Explore Now →</a>

</div>

</div>

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

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>

Fashion Trends/h4>

</div>

</div>

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

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse

quae ex sequi praesentium fuga voluptatem placeat voluptates odio

rerum.

</p>

</div>

<h3>Sean Parker</h3>

</div>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse

quae ex sequi praesentium fuga voluptatem placeat voluptates odio

rerum.

</p>

</div>

<h3>Michel Joe</h3>

</div>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse

quae ex sequi praesentium fuga voluptatem placeat voluptates odio

rerum.

</p>

</div>

<h3>Kaily Jenner</h3>

</div>

</div>

</div>

</div>

</div>

</div>

<h3>Download Our App</h3>

<p>

Download App for Android <br />

and ios mobile phone

</p>

</div>

<p>

Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit.

Porro, eum?

</p>

</div>

<h3>Useful Links</h3>

<ul>

<li>Coupons</li>

<li>Return Policy</li>

<li>Join Affiliate</li>

</ul>

</div>

<h3>Follow us</h3>

<ul>

<li>Facebook</li>

<li>Twitter</li>

<li>Instagram</li>

<li>YouTube</li>

</ul>

</div>

<hr />

</div>

</body>

</html>

account.html

<!DOCTYPE html>

<head>

<title>Accounts - Wardrobe</title>

</head>

<body>

</div>

<nav>

<li><a href="products.html">Products</a></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

<li><a href="account.html">Account</a></li>

</ul>

</nav>

</div>

<span>Login</span>

</div>

<button type="submit" class="btn">Login</button>

<a href="">Forgot Password</a> <br />

<br />

<a href="">Not Registered Yet ?</a>

</form>

</div>

<h3>Download Our App</h3>

<p>

Download App for Android <br />

and ios mobile phone

</p>

</div>

<p>Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit. Porro, eum?</p>

</div>

<h3>Useful Links</h3>

<ul>

<li>Coupons</li>

<li>Return Policy</li>

<li>Join Affiliate</li>

</ul>

</div>

<h3>Follow us</h3>

<ul>

<li>Facebook</li>

<li>Twitter</li>

<li>Instagram</li>

<li>YouTube</li>

</ul>

</div>

<hr />

</div>

</body>

</html>

products.html

<!DOCTYPE html>

<head>

<title>All Products - Wardrobe</title>

</head>

<body>

</div>

<nav>

<li><a href="products.html">Products</a></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

<li><a href="account.html">Account</a></li>

</ul>

</nav>

</div>

<h2>All Products</h2>

<option value="">Default Sorting</option>

<option value="">Sort by Price</option>

<option value="">Sort by Popularity</option>

<option value="">Sort by Rating</option>

<option value="">Sort by sales</option>

</select>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

<h4>Fashion Trends</h4>

</div>

</div>

</div>

<h3>Download Our App</h3>

<p>

Download App for Android <br />

and ios mobile phone

</p>

</div>

<p>Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit. Porro, eum?</p>

</div>

<h3>Useful Links</h3>

<ul>

<li>Coupons</li>

<li>Return Policy</li>

<li>Join Affiliate</li>

</ul>

</div>

<h3>Follow us</h3>

<ul>

<li>Facebook</li>

<li>Twitter</li>

<li>Instagram</li>

<li>YouTube</li>

</ul>

</div>

<hr />

</div>

</body>

</html>

script.js

var menuBtn = document.getElementById("menuBtn");

var sideNav = document.getElementById("sideNav");

var menu = document.getElementById("menu");

//sideNav.style.right== "-250px";

menuBtn.onclick = function () {

if (sideNav.style.right == "-250px") {

sideNav.style.right = "0";

menu.src = "";

} else {

sideNav.style.right = "-250px";

menu.src = "";

}

};

function openImg(element) {

window.open(element.src);

}

//var t= document.getElementById("text").innerHTML;

var i = 0;

var t = "Give yourself \n a new Style this year!";

function typing() {

if (i < t.length) {

document.getElementById("text").innerHTML += t.charAt(i);

i++;

setTimeout(typing, 100);

}

typing();

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: "Poppins", sans-serif;

}

body img {

border-radius: 12px;

}

.navbar {

display: flex;

align-items: center;

padding: 20px;

padding-top: 30px;

}

nav {

flex: 1;

text-align: right;

}

nav ul {

display: inline-block;

list-style-type: none;

}

nav ul li {

display: inline-block;

margin-right: 30px;

}

a {

text-decoration: none;

color: #555;

}

p {

color: #555;

}

.container {

max-width: 1300px;

margin: auto;

padding-left: 25px;

padding-right: 25px;

}

.row {

margin-top: 50px;

display: flex;

align-items: center;

flex-wrap: wrap;

justify-content: space-around;

}

.col-2 {

flex-basis: 50%;

min-width: 300px;

}

.col-2 img {

max-width: 100%;

padding: 50px 0;

}

.col-2 h1 {

font-size: 50px;

line-height: 60px;

margin: 25px 0;

}

.btn {

display: inline-block;

background: #da70d6;

color: #fff;

padding: 8px 20px;

margin: 30px 0;

border-radius: 5px;

transition: background 0.5s;

}

.btn:hover {

background-color: #563434;

color: #fff;

}

.header {

background: radial-gradient(#fff, #ffd6d6);

}

.header .row {

margin-top: 20px;

}

.categories {

margin: 70px 0;

}

.col-3 {

flex-basis: 30%;

min-width: 250px;

margin-bottom: 30px;

}

.col-3 img {

width: 100%;

}

.small-container {

max-width: 1080px;

margin: auto;

padding-left: 25px;

padding-right: 25px;

}

.col-4 {

flex-basis: 25%;

padding: 10px;

min-width: 200px;

margin-bottom: 50px;

transition: transform 0.5s;

}

.col-4 img {

width: 100%;

height: 280px;

}

.title {

text-align: center;

margin: 0 auto 80px;

position: relative;

line-height: 60px;

color: #555;

}

.title::after {

position: absolute;

bottom: 0;

width: 80px;

height: 5px;

border-radius: 5px;

background: #da70d6;

content: "";

left: 50%;

transform: translateX(-50%);

}

h4 {

color: #555;

font-weight: normal;

}

.col-4 p {

font-size: 14px;

}

.rating .fa {

color: #da70d6;

}

.col-4:hover {

transform: translateY(-5px);

}

.testimonial {

padding-top: 100px;

}

.testimonial .col-3 {

text-align: center;

padding: 40px 20px;

box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);

cursor: pointer;

transition: transform 0.5s;

}

.testimonial .col-3 img {

width: 50px;

margin-top: 20px;

border-radius: 50%;

}

.testimonial .col-3:hover {

transform: translateY(-10px);

}

.fa.fa-quote-left {

font-size: 34px;

color: #da70d6;

}

.col-3 p {

font-size: 12px;

margin: 12px 0;

color: #777;

}

.testimonial .col-3 h3 {

font-weight: 600;

color: #555;

font-size: 16px;

}

.brands {

margin: 100px auto;

}

.col-5 {

width: 160px;

}

.col-5 img {

width: 100%;

cursor: pointer;

filter: grayscale(100%);

}

.col-5 img:hover {

filter: grayscale(0);

}

/* footer */

.footer {

background: #000;

color: #8a8a8a;

font-size: 14px;

padding: 60px 0 20px;

}

.footer p {

color: #8a8a8a;

}

.footer h3 {

color: #fff;

margin-bottom: 20px;

}

.footer-col-1,

.footer-col-2,

.footer-col-3,

.footer-col-4 {

min-width: 250px;

margin-bottom: 20px;

}

.footer-col-1 {

flex-basis: 30px;

}

.footer-col-2 {

flex: 1;

text-align: center;

}

.footer-col-2 img {

width: 180px;

margin-bottom: 20px;

background-color: white;

border-radius: 50%;

}

.footer-col-3,

.footer-col-4 {

flex-basis: 12%;

text-align: center;

}

ul {

list-style-type: none;

}

.app-logo {

margin-top: 20px;

}

.app-logo img {

width: 140px;

}

.footer hr {

border: none;

background: #b5b5b5;

height: 1px;

margin: 20px 0;

}

.copyright {

text-align: center;

}

.menu-icon {

width: 28px;

margin-left: 20px;

display: none;

}

/* All Products */

.row-2 {

justify-content: space-between;

margin: 100px auto 50px;

}

select {

padding: 10px;

border: 1px solid #da70d6;

box-shadow: 5px 5px 5px #da70d6;

}

select:focus {

color: rgb(141, 38, 138);

}

.page-btn {

margin: 0 auto 80px;

}

.page-btn span {

text-align: center;

line-height: 40px;

display: inline-block;

width: 40px;

height: 40px;

border: 1px solid #da70d6;

margin-left: 10px;

cursor: pointer;

}

.page-btn span:hover {

background: #da70d6;

color: #fff;

}

/* Cart Items Details */

.cart-page {

margin: 30px auto;

}

table {

width: 100%;

border-collapse: collapse;

}

.cart-info {

display: flex;

flex-wrap: wrap;

}

th {

text-align: left;

padding: 5px;

color: #fff;

background: #da70d6;

font-weight: normal;

}

td {

padding: 10px 5px;

}

td input {

width: 40px;

height: 30px;

padding: 5px;

}

td a {

color: #da70d6;

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 #da70d6;

width: 100%;

max-width: 400px;

}

td:last-child {

text-align: right;

}

th:last-child {

text-align: right;

}

/* Account Page */

.account-page {

padding: 50px 0;

background: radial-gradient(#fff, #ffd6d6);

}

.form-container {

background: #fff;

width: 300px;

height: 350px;

position: relative;

text-align: center;

padding: 20px 0;

margin-top: -90px;

overflow: hidden;

border-radius: 5px;

box-shadow: 5px 5px 10px #da70d6;

}

.form-container span {

font-weight: bold;

padding: 0 10px;

color: #555;

cursor: pointer;

width: 100px;

display: inline-block;

font-size: 24px;

}

.form-btn {

display: inline-block;

}

.form-container form {

max-width: 300px;

padding: 0 20px;

position: absolute;

top: 90px;

transition: transform 1s;

}

form input {

width: 100%;

height: 30px;

margin: 10px 0;

padding: 0 10px;

border: 1px solid #ccc;

}

form .btn {

width: 100%;

border: none;

cursor: pointer;

margin: 10px;

}

form a {

font-size: 12px;

padding-top: 50px;

}

#sideNav {

transition: 0.5s;

line-height: 80px;

width: 170px;

height: 100%;

position: fixed;

/*right: 0;*/

/*later*/

right: -250px; /*initially hidden*/

top: 0;

background: #da70d6;

z-index: 2;

/* later after menu icon*/

padding-top: 100px;

padding-left: 10px;

color: white;

background: linear-gradient(rgba(243, 115, 211, 0.1), #da70d6);

}

#sideNav ul {

color: white;

}

#menuBtn {

width: 50px;

height: 50px;

background: #da70d6;

text-align: center;

position: fixed;

right: 10px;

top: 5px;

border-radius: 3px;

z-index: 3;

cursor: pointer;

}

#menuBtn img {

width: 20px;

margin-top: 15px;

}