lOMoARcPSD|53132243

Project 222 - a ecommerce website using html css and

javascript
Compiler design (Anand International College of Engineering)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by JP Menaria ([email protected])
 lOMoARcPSD|53132243

Anand Engg College,Agra

A PROJECT REPORT
ON

E-COMMERCE MGMT.SYSTEM
Submi琀琀ed in par琀椀al ful昀椀llment of the requirement
For the award of the degree of

BACHELOR OF COMPUTER APPLICATION

SESSION(2021-24)

Under the guidance of Submi琀琀ed by:

(Mr.Amitabh Padmannbhan) Mr.Madhur Gupta

Roll No.
2100925011014

ANAND ENGINEERING COLLEGE, AGRA

AFFLIATED TO

Dr. B.R.Ambedkar University, Agra

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

Anand Engg College,Agra

A PROJECT REPORT
ON

E-COMMERCE MGMT.SYSTEM
Submi琀琀ed in par琀椀al ful昀椀llment of the requirement
For the award of the degree of

BACHELOR OF COMPUTER APPLICATION

SESSION(2021-24)

BY
MADHUR GUPTA
ROLL.NO-2100925011014

Picture of the project

Under the guidance of

(Mr.Amitabh Padmannbhan)

ANAND ENGINEERING COLLEGE, AGRA

AFFLIATED TO

Dr. B.R.Ambedkar University, Agra

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

Acknowledgement

I would like to express my sincere gra琀椀tude and regards to my

external guide Mr. Madhur Gupta for his constant inspira琀椀on,
supervision and invaluable guidance during the training . I
would also to thank Mr. Madhur Gupta of (AEC) for giving a
opportunity to con琀椀nue my training in the AEC provide the
facility.
At last I would also like to extend my sincere gra琀椀tude to all my
faculty members and specially Mr.Madhur Gupta(Amitabh
padmannabhan) for giving me valuable sugges琀椀ons.

With regards
Signature of Student :- Madhur Gupta

Name of the Project:- (Madhur Gupta)

Name of the organiza琀椀on :- (Anand engineering College)

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

Name of the External Guide: ( )

(Sign of HOD) (Sign of External Guide) (Sign of External Examinar)

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

TABLE OF THE CONTENT

 Introduc琀椀on
 Project Design
 Working of E commerce Website
 Advantage of E commerce website
 Disadvantages of E commerce Website
 Types of E commerce Website
 Bene昀椀ts
 Data Model
 Data Flow Diagram
 Implementa琀椀on
 Future Scope of this applica琀椀on
 Conclusion

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

Introduction

 E-commerce is fast gaining ground as an accepted and used business

paradigm. More and more business houses are implemen琀椀ng web sites
providing func琀椀onality for performing commercial transac琀椀ons over the
web. It is reasonable to say that the process of shopping on the web is
becoming commonplace.

 An online store is a virtual store on the Internet where customers can

browse the catalog and select products of interest. The selected items may
be collected in a shopping cart. At checkout 琀椀me, the items in the shopping
cart will be presented as an order. At that 琀椀me, more informa琀椀on will be
needed to complete the transac琀椀on. Usually, the customer will be asked to
昀椀ll or select a billing address, a shipping address, a shipping op琀椀on, and
payment informa琀椀on such as credit card number. An e-mail no琀椀昀椀ca琀椀on is
sent to the customer as soon as the order is placed.

3. Project Design
In order to design a web site, the rela琀椀onal database must be designed
昀椀rst. Conceptual design can be divided into two parts: The data model and
the process model. The data model focuses on what data should be stored
in the database while the process model deals with how the data is
processed. To put this in the context of the rela琀椀onal database, the data
model is used to design the rela琀椀onal tables. The process model is used to
design the queries that will access and perform opera琀椀ons on those tables.

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 Home Page Of Website

The First page of website are called Home page.

 Working of E commerce website

 eCommerce websites work through a series of steps, utilizing website

code, the database, and 3rd party applications such as a payment
processor or payment gateway.
 eCommerce websites use SSL certificates to secure and encrypt all
transferred data. Sensitive data, including credit card information, should
never be stored within the website’s database unless the website adheres
to all mandated regulations, including PCI Compliance.
 eCommerce Websites Typically Work Like This:

1. A potential customer navigates to an eCommerce website, whether via search

engines, paid advertisements, referral traffic, etc.
2. The eCommerce website connects to its database, which contains tons of data
about the website’s categories, products, product dimensions and weight, articles and
content, images, etc. The website requests this data to dynamically render any
requested web pages.
3. After browsing the eCommerce website, a potential customer adds a product or
service to their virtual shopping cart and decides to check out.
4. The shopper completes the checkout process and finalizes the transaction.

Pros of eCommerce Websites:

 Increased market reach (global customer base).

 Reduced costs for goods, services, shipping, etc.
 Secure & encrypted transactions.

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 Shortened distribution chain.

 Faster order fulfillment.
 Better, more precise data for future sales forecasting.
 Targeted markets can be razor-focused, based on age, demographics,
interests, etc.
 The potential for anonymity.

 Cons of eCommerce Websites:

The disadvantages of eCommerce websites are few and far between, and if you work
with a reputable eCommerce website development company, are easily mitigated.
Disadvantages of eCommerce sites include:

 Customers can’t always see and touch the product in real life before
purchasing.
 Potential customers must be somewhat tech-savvy, potentially limiting
market reach.
 Less ‘personal’ shopping experiences.
 Potential for fraud, data privacy issues, etc.

 eCommerce Websites Types and Common eCommerce

Business Models

The majority of eCommerce websites on the internet are B2C retailers. However, there
are many types of eCommerce websites:

 B2B (business to business)

 B2C (business to consumer)
 C2C (consumer to consumer)
 C2B (consumer to business)
 B2A (business to public administrations)
 C2A (consumer to public administrations)

Examples of Popular eCommerce Websites:

 Amazon.com
 Walmart.com
 Target.com
 eBay.com

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 Alibaba
 Flipkart.com

 Benefits Of E commerce Website

Fast Purchase
Customer Data Insights
Reduced Cost
Product Comparison
Multiple Payments

 Data Model
A data model is a conceptual representa琀椀on of the data structures
that are required by a database. The 昀椀rst step in designing a database is to
develop an En琀椀ty-Rela琀椀on Diagram (ERD). The ERD serves as a blue print
from which a rela琀椀onal database maybe deduced. Figure 1 shows the ERD
for the project and later we will show the transforma琀椀on from ERD to the
Re la琀椀onal model

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 Data Flow Diagram

The Online Shopping System Data Flow Diagram (DFD) is like a
picture that shows how information moves in online stores. It tells us about
things like how we choose products, pay for them, and how orders get
processed. It's made of simple pictures and arrows to make it easy to
understand. By creating a context diagram for online shopping system, it
helps us see and study how online shopping works, making it simpler for
everyone.

 Customer Login and Registra琀椀on Page

With custom login and user registration forms. This

helps in giving your website a more distinctive
appearance and offers you total control over its
appearance and feel. It may therefore assist in making
your brand stand out from the competitors.

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 Add To Cart Page

The cart page of an e commerce website shows all
items that a coustmers has added to the cart. The cart
page is built by using the cart module.

 Select Payment Method

Cash on delivery
UPI Payments
Cards Payments
Etc..

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 What is eCommerce
implementation?

E Commerce implementation consists of all the

steps related to the launch, update, and
maintenance of an online store.
ECommerce allows businesses to sell products
from anywhere at any time, and it connects
businesses to new customers who were previously
unreachable due to distance and hours of
operation.
 Future Scope Of Ecommerce Website.

Ecommerce penetration rates are anticipated to

rise from 22% in 2022 to 27% in 2026. Sales of
mobile commerce will reach $3.79 trillion by 2022.
The trend toward internet buying is being led by
young people.

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

 Conclusion Of E commerce Website.

However data security and possibility of fraud

are s琀椀ll a major concern.
Many people hesitate to send our important and
sensi琀椀ve data such as Credit card number over
the internet.
They fear that data may be intercepted by third
party who might misuse it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="web.css">

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<script src="https://kit.fontawesome.com/f30fac2c61.js"
crossorigin="anonymous"></script>
<link
href="https://fonts.googleapis.com/css2?
family=Abril+Fatface&family=Catamaran:wght@200&family=Courg
ette&family=Edu+TAS+Beginner:wght@700&family=Lato:wght@300;
900&family=Mukta:wght@700&family=Mulish:wght@300&family=Ope
n+Sans&family=PT+Sans:ital,wght@1,700&family=Poppins:wght@3
00&family=Raleway:wght@100&family=Roboto&family=Roboto+Cond
ensed:wght@700&family=Roboto+Slab&display=swap"
rel="stylesheet">

</head>
<body>
<div class="container">
<nav>
<div class="logo">
<h1>Trends</h1>
</div>
<ul>
<li>
<a id="home" onclick="homes()">Home</a>
<a id="shop"
onclick="shops()">Shops</a>
<a id="blog" onclick="blogs()">Blog</a>
<a id="about"
onclick="abouts()">About</a>
<a id="contact"
onclick="contacts()">Contact</a>
<i class="fa-sharp fa-solid fa-cart-
shopping"></i>

</li>
</ul>
</nav>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<!-- mainpage -->

<div class="main">
<div class="mainText">
<h2>Trends</h2>
<h1 class="top">Super Value Deals</h1>
<h1>On All Products</h1>
<p>Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Nisi</p>
<button>Explore</button>
</div>
<img src="images.jpg" alt="">
</div>

<!--card -->

<div class="trend">
<div class="head">
<h1>Trends <span>Men's Wear</span></h1>
</div>
<div class="card">
<div class="crd">
<img src="shrt.jpg" alt=""
onclick="show(this)">
<div class="crdText">
<h2>Cutton Trending Shirt's</h2>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-
stroke"></i> <br>
<button>Add to Cart</button>
</div>
</div>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<div class="crd">
<img src="shirt6.jpg" alt=""
onclick="show(this)">
<div class="crdText">
<h2>Cutton Trending Shirt's</h2>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-
stroke"></i> <br>
<button>Add to Cart</button>
</div>
</div>
<div class="crd">
<img src="shrt3.jpg" alt=""
onclick="show(this)">
<div class="crdText">
<h2>Cutton Trending
Shirt's</h2>
<i class="fa-solid fa-
star"></i>
<i class="fa-solid fa-
star"></i>
<i class="fa-solid fa-
star"></i>
<i class="fa-solid fa-
star"></i>
<i class="fa-solid fa-star-
half-stroke"></i> <br>
<button>Add to Cart</button>
</div>
</div>
</div>
</div>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<!-- Women Card -->

<div class="trend" id="trendSec">

<div class="head">
<h1>Trends <span>Women's Wear</span></h1>
</div>
<div class="card">
<div class="crd">
<img src="w3.webp" alt=""
onclick="show(this)">
<div class="crdText">
<h2>Trending Girl Top's</h2>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-
stroke"></i> <br>
<button>Add to Cart</button>
</div>
</div>

<div class="crd">
<img src="w5.jpg" alt=""
onclick="show(this)">
<div class="crdText">
<h2>Trending Girl Top's</h2>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-
stroke"></i> <br>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<button>Add to Cart</button>
</div>
</div>

<div class="crd">
<img src="w6.webp" alt=""
onclick="show(this)">
<div class="crdText">
<h2>Trending Girl Top's</h2>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-
stroke"></i> <br>
<button>Add to Cart</button>
</div>
</div>
</div>
</div>

<!-- about us -->

<div class="about">

<div class="aboutus">
<h1>#KnowUs</h1>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.</p>
</div>

<div class="me">
<img src="gg.jpg" alt="">
<div class="aboutText">
<h1>Who we are ?</h1>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<p>Lorem ipsum dolor, sit amet

consectetur adipisicing Dolorum corrupti consequuntur sunt
ipsam aperiam vel magni sequi eos sit amet consectetur
adipisicing Dolorum corrupti consequuntur sunt ipsam
aperiam vel magni sequi eos atque nam maxime dolorem fuga,
rem eum iure quidem! Illo corporis, asperiores ipsum
excepturi voluptates necessitatibus consectetur odit omnis
hic praesentium autem, officiis dignissimos assumenda
saepe.</p>
</div>
</div>
</div>

<!-- contact -->

<div class="contact">

<div class="contactus">
<h1>#Let's Connect</h1>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.</p>
</div>

<div class="contactMe">
<div class="contactText">
<h1>Visit Our Office or Contact
<br>
Us Today</h1>
<p>Address : Dablin Park, England,
New york.</p>
<p>Contact :
[email protected]</p>
<p>Number : 999999000011</p>
</div>
<img src="map1.jpg" alt="">
</div>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<div class="form">
<h1>Connect with Us. Fill Form</h1>
<input type="text" placeholder="Enter
Email"> <br>
<input type="text" placeholder="Enter
Email"> <br>
<input type="text" placeholder="Enter
Email"> <br>
<input type="text" placeholder="Enter
Email"> <br>
<input type="text" placeholder="Enter
Email"> <br>
<button>Submit</button>

</div>
</div>

<!-- cart -->

<div class="cart">
<img id="newImg" src="" alt="">
<div class="cartText">
<h1>Trends Offer : Trending Shop <br>
Now</h1>
<h2>Special Price</h2>
<h2>$11</h2>
<p>Trending boys and girls Cloths
Trending Boys Cloths
Mens regular fit shirt
$44
Size:- L,M XL,xxl
Free delivery </p>
<p>Best price and Best Deal and
Best cloths</p>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<p>Best price and Best Deal and

Best cloths</p>
<div class="btn">
<button>Buy Now</button>
<button onclick="addCart()">Add to
Cart</button>
</div>
<button class="back">Back</button>

</div>
</div>

<!-- blogs -->

<div class="trends">
<div class="head">
<h1>Trends <span>Men's Wear</span></h1>
</div>
<div class="card">
<div class="blog">
<img src="t5.jpg" alt="">
<div class="blogText">
<h2>Trending Boys Cloths</h2>
<p>Mens regular fit shirt
$2
Size:- L,M XL,xxl
Free delivery
</p>
<a
href="https://influencermarketinghub.com/best-fashion-
blogs/">Read More</a>
</div>
</div>

<div class="blog">

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<img src="t2.jpg" alt="">

<div class="blogText">
<h2>Trending Girls Cloths</h2>
<p>Trending Boys Cloths
Mens regular fit shirt
$2
Size:- L,M XL,xxl
Free delivery</p>
<a
href="https://www.apetogentleman.com/">Read More</a>
</div>
</div>
</div>
</div>

<!-- Letter -->

<div class="letter">
<div class="letterText">
<h1>Sign Up for NewsLetter</h1>
<p>Lorem ipsum, dolor sit amet consectetur
adipisicing elit.</p>
</div>
<div class="inp">
<input type="text" placeholder="Enter
Email">
<button>Sign Up</button>
</div>
</div>

<!-- Footer -->

<div class="footer">
<div class="footerText">
<h2>Trends</h2>
<p>Service </p>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<p>Customer</p>
<p>Satisfaction</p>
<p></p>

</div>
<div class="footerText">
<h2>About US</h2>
<p>Adrress : Near Raja ki mandi Agra <br>
consectetur adipisicing <br>
Perferendis, excepturi alias.</p>
<p>Service</p>
<p>Customer</p>
<p>Satisfation</p>

</div>
<div class="footerText">
<h2>Contect</h2>
<p>9989003229</p>
<p>Customer</p>
<p>Comming up</p>
<p>New Arrival</p>

</div>
<div class="footerText">
<h2>Trending</h2>
<p>Service</p>
<p>Customer</p>
<p>Shops</p>
<p></p>

</div>
</div>
<!--Qr code image-->
<img src="qr_code_barcode.jpg" alt="">

</div>

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

<script src="web.js"></script>

</body>
</html>

*{
margin: 0%;
padding: 0%;
font-family: 'Roboto', sans-serif;
}
body{
background-color: #eeee;

}
nav{
display: flex;
justify-content: space-between;
background-color: #eeee;
padding: 17px;
box-shadow: 0px 2px 2px 2px rgb(162, 162, 162);
}
nav .logo{
margin-left: 22px;
font-size: 24px;
}
ul{
margin-right: 45px;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

margin-top: 7px;
}
nav ul li{
list-style: none;
}
ul li a{
margin-inline: 22px;
font-size: 20px;
}
ul li i{
font-size: 22px;
}
ul li #home{
color: rgb(5, 167, 167);
}
ul li a:hover{
border-bottom: 2px solid black;
cursor: pointer;
}
ul li i:hover{
color: gray;
cursor: pointer;
}
.main{
display: flex;
justify-content: space-around;
}
.main .mainText{
margin-top: 144px;

}
.mainText h1{
font-size: 50px;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

.mainText .top{
color: rgb(4, 138, 138);
}
.mainText button{
width: 145px;
height: 40px;
background-color: rgb(4, 140, 140);
border: none;
font-size: 22px;
color: white;
margin-top: 24px;
}
.mainText p{
margin-top: 12px;
}
.mainText button:hover{
border: 3px solid rgb(3, 128, 128);
background-color: transparent;
color: rgb(2, 121, 121);
}
.head h1{
text-align: center;
padding: 33px;
margin-top: 32px;
}
.head span{
color: rgb(2, 164, 164);
}
.card{
display: flex;
justify-content: center;
}
.card .crd{
width: 300px;
height: 500px;
background-color: #fff;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

margin-inline: 11px;

}
.crd img{
width: 85%;
padding: 22px;
border-radius: 31px;

}
.crdText{
margin-left: 16px;
padding: 8px;
}
.crdText button{
width: 110px;
height: 33px;
border: none;
background-color: rgb(5, 141, 141);
color: white;
font-size: 19px;
margin-top: 11px;
}
.crdText i{
color: rgb(255, 149, 0);
}
.blog{
display: flex;
justify-content: center;
width: 500px;
height: 300px;
background-color: #fff;
margin-inline: 22px;
border-radius: 11px;

}
.blog:hover{

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

transition: 0.6s ease;

width: 520px;
height: 320px;
}
.blog img{
padding: 22px;
width: 85%;
}
.blogText{
padding: 12px;
margin-top: 33px;
}
.blogText a{
width: 130px;
padding: 4px;
height: 18px;
background-color: rgb(4, 136, 136);
color: white;
font-size: 18px;
border-radius: 5px;
position: relative;
top: 33px;
}
.letter{
display: flex;
justify-content: space-between;
color: white;
background-color:rgb(2, 2, 66);
padding: 43px;
}
.inp{
display: flex;
}
.inp input{
width: 330px;
height: 33px;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

outline: none;
font-size: 18px;
border: none;
}
.inp button{
width: 100px;
height: 33px;
background-color: rgb(2, 173, 173);
color: white;
border: none;
}
.footer{
display: flex;
justify-content: center;
padding: 53px;
}
.footer .footerText{
margin-inline: 85px;
}
.footerText p{
margin-top: 11px;
}
.about{
display: none;
}
.aboutus{
background-color: rgb(1, 1, 42);
color: white;
padding: 56px;
font-size: 19px;
}
.me{
display: flex;
justify-content: center;
width: 700px;
background-color: #fff;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

padding: 33px;
margin-left: 18%;
margin-top: 7%;
}
.me img{
width: 50%;
}
.contact{
display: none;
}
.contactus{
background-color: rgb(1, 1, 42);
color: white;
padding: 56px;
font-size: 19px;
}

.contactMe{
display: flex;
justify-content: center;
width: 1000px;
margin-top: 5%;
background-color: #fff;
margin-left: 10%;

}
.contactMe img{
width: 55%;
}

.contactText{
padding: 22px;
width: 600px;
}
.contactText p{
margin-top: 12px;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

}
.form{
text-align: center;
margin-top: 5%;
padding: 22px;
}
.form input{
width: 300px;
padding: 5px;
height: 27px;
margin-top: 11px;
}
.form button{
width: 300px;
height: 36px;
background-color: rgb(2, 54, 54);
color: white;
font-size: 22px;
border: none;
margin-top: 22px;

}
.fullPage{

display: flex;
justify-content: center;
display: none;
margin-top: 22px;
}
.fullPage .cartText{
padding: 22px;
margin-top: 33px;
}
.cartText p{
margin-top: 11px;
}

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

.cartText .btn button{

width: 140px;
height: 40px;
background: rgb(247, 133, 2);
color: white;
border: none;
font-size: 22px;
margin-top: 22px;
}
.btn button:hover{
background-color: rgb(253, 173, 25);
cursor: pointer;
}
.cartText h2{
margin-top: 11px;
}
.relode{
background-color: rgb(3, 75, 75);
color: white;
width: 140px;
height: 34px;
border: none;
font-size: 22px;
margin-top: 22px;
}
.relode:hover{
background-color: rgb(4, 141, 141);
cursor: pointer;

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

let card = document.querySelector(".trend");

let card2 = document.getElementById("trendSec");
let about = document.querySelector(".about");
let contact = document.querySelector(".contact");

console.log(card)
let blog = document.querySelector(".trends");
let mainPage = document.querySelector(".main");

function homes(){
mainPage.style.display="flex";
card.style.display="block";
card2.style.display="block";
blog.style.display="block";

document.getElementById("blog").style.color="black"
document.getElementById("home").style.color="black"
document.getElementById("shop").style.color="rgb(2, 173,
173)"
document.getElementById("contact").style.color="black"
}
function shops(){
mainPage.style.display="none";
blog.style.display="none";
about.style.display="none";
card.style.display="block";
card2.style.display="block";

document.getElementById("blog").style.color="black"
document.getElementById("home").style.color="rgb(2, 173,
173)"
document.getElementById("shop").style.color="black"
document.getElementById("contact").style.color="black"

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

}
function blogs(){
mainPage.style.display="none";
card.style.display="none";
card2.style.display="none";
blog.style.display="block";

document.getElementById("blog").style.color="rgb(2,
173, 173)"
document.getElementById("home").style.color="black"
document.getElementById("shop").style.color="black"
document.getElementById("contact").style.color="black"
}

function abouts(){
mainPage.style.display="none";
card.style.display="none";
card2.style.display="none";
blog.style.display="none";
about.style.display="block";

document.getElementById("blog").style.color="black"
document.getElementById("home").style.color="black"
document.getElementById("shop").style.color="black"
document.getElementById("contact").style.color="black"
document.getElementById("about").style.color="rgb(2,
173, 173)"

}
function contacts(){
mainPage.style.display="none";
card.style.display="none";
card2.style.display="none";
blog.style.display="none";
about.style.display="none";
contact.style.display="block"

Downloaded by JP Menaria ([email protected])

 lOMoARcPSD|53132243

document.getElementById("blog").style.color="black"
document.getElementById("home").style.color="black"
document.getElementById("shop").style.color="black"
document.getElementById("contact").style.color="black"
document.getElementById("about").style.color="black"
document.getElementById("contact").style.color="rgb(2,
173, 173)"

function show(img){
let newImg = document.getElementById("newImg");
console.log(img);
newImg.src=img.src;

mainPage.style.display="none";
card.style.display="none";
card2.style.display="none";
blog.style.display="none";
about.style.display="none";
contact.style.display="none"
document.querySelector(".cart").style.display="flex"
}

function addCart(){
alert("Added To Cart");
location.reload()
}

Downloaded by JP Menaria ([email protected])