INSTITUTE OF

PROFESSIONAL STUDIES
AND RESEARCH

Project
E-COMMERCE WEB

Submitted By:
NAME ROLL
NUMBER

1
 CERTIFICATE
This is to certify that SHAKTI PRASAD NANDA with Roll
No:2104000622071028, & UDAYA SHARMA Roll No:
2104000622071032 are Bonafede student. They have done the
project work titled “E-COMERCES WEB under my supervision in
in partial fulfillment of the requirement as a project for BCA. This is
an original piece of work and it has not been submitted anywhere
else.

Their found to be very regular, sincere, hardworking

students and have undertaken a lot of trouble for the
completion of project.

Signature
(PROJECT GUIDE)

2
 DECLARATION
We declare that this written submission represents our ideas in
our own words and where other’s ideas or words have been
included, we have adequately cited and referenced the original
sources. We also declare that we have adhered to all principles
of academic honesty and integrity and have not
misrepresented or fabricated or falsified any idea/fact/source
in our submission. We understand that any violation of the
above will cause for disciplinary action by the University and
can also evoke penal action from the sources which have not
been properly cited or from whom proper permission has not
been taken when needed.

Signature :
Roll No :

Signature :
Roll No :

Signature :
Roll No :

3
 ACKNOWLEDGEMENT

All that is written or mentioned in this sheet will hardly be

adequate in return for the amount of help and cooperation, we
have received from all the people who contribute to make this
project a reality. We are grateful for each one of them.

First of all, we wish to express our sincere thanks to Bibhu

Prasad Bhoi our project guide in this undertaking, who was
always there for me to offer help in all possible ways. He
provided assistance which resulted in successful completion of
the project with in the allotted time.

Thank You

Signature

4
 REPORT OF APPROVAL

This project report entitled “E-COMERCES WEB”

Submitted by SHAKTI PRASAD NANDA with Roll
No:210400062207102 & UDAYA SHARMA Roll No:
2104000622071032 is approved for the degree of Bachelor of
Computer Applications (BCA) Of Utkal University, BBSR.

5
TABLE OF CONTENTS

 Introduction
 Objectives
 Analysis and Design
 Analysis
 Design
 Domain specific synthesis
 Unit selection synthesis
 Use case diagram
 Graph
 Implementations
 Coding
 Html
 Testing
 Output
 Future scope
 Conclusion

6
 ABSTRACT

The exponential growth of e-commerce has reshaped the global

marketplace, redefining the way consumers interact with
businesses and purchase goods and services. In response to this
digital revolution, the development of an effective e-commerce
website has become essential for businesses seeking to thrive in
the online ecosystem. This abstract presents an overview of our
project aimed at creating a dynamic and user-centric e-
commerce website poised to capitalize on emerging trends and
meet the evolving needs of consumers.
Our project encompasses a holistic approach to website
development, integrating cutting-edge technologies, innovative
design principles, and strategic marketing strategies to deliver a
compelling and seamless shopping experience. Central to our
approach is the emphasis on user engagement and satisfaction,
achieved through intuitive navigation, visually appealing
layouts, and streamlined checkout processes.
Key features of our e-commerce website include robust product
catalog management, personalized recommendations based on
user behaviour and preferences, secure payment processing,
and efficient order fulfilment systems. Leveraging responsive
design techniques, we ensure optimal performance across
devices, enabling users to seamlessly transition between
desktops, tablets, and smartphones.

7
Moreover, our project prioritizes the integration of analytics
tools and data-driven insights to inform decision-making and
drive continuous improvement. By harnessing the power of
data analytics, we aim to optimize marketing campaigns,
enhance product discovery, and maximize conversion rates,
ultimately fostering long-term customer loyalty and retention.
In addition to front-end functionality, our project emphasizes
the importance of scalability, security, and performance
optimization in the back-end infrastructure. Through the
implementation of robust server architecture, database
management systems, and content delivery networks, we strive
to deliver a reliable and responsive user experience, even under
high traffic conditions.
Overall, our e-commerce website represents a comprehensive
solution designed to empower businesses to thrive in the digital
marketplace. By embracing innovation, agility, and customer-
centricity, we remain committed to driving success and
delivering value in an ever-evolving landscape.
Keywords: E-commerce, Website Development, User
Experience, Personalization, Analytics, Responsive Design,
Scalability, Security.

8
 INTRODUCTION

In today's digital age, the landscape of commerce is undergoing

a profound transformation, driven by the proliferation of e-
commerce. With the increasing prevalence of internet
connectivity and the growing preference for online shopping,
businesses are increasingly recognizing the importance of
establishing a robust presence in the digital realm. At the heart
of this digital revolution lies the e-commerce website – a virtual
storefront that serves as the gateway to a world of products
and services.
The introduction of an e-commerce website marks a pivotal
moment for any business, offering unparalleled opportunities
for growth, expansion, and customer engagement. By
leveraging the power of technology and the reach of the
internet, businesses can transcend geographical boundaries and
tap into new markets with ease. Moreover, an e-commerce
website provides a platform for businesses to showcase their
offerings, interact with customers, and drive sales in a dynamic
and interactive manner.
However, the development and implementation of an effective
e-commerce website present a myriad of challenges and
complexities. From designing an intuitive user interface to
implementing secure payment processing systems, businesses
must navigate a host of considerations to ensure the success of
their online venture. Moreover, in an increasingly competitive

9
marketplace, businesses must constantly innovate and adapt to
meet the evolving needs and preferences of consumers.
In this context, this introduction serves as a precursor to a
comprehensive exploration of e-commerce website
development. By examining key principles, strategies, and best
practices, businesses can gain valuable insights into the process
of creating a successful e-commerce website. From
conceptualization to launch, this exploration will cover various
aspects of website development, including design, functionality,
optimization, and marketing.
Ultimately, the goal of this introduction is to provide businesses
with a roadmap for navigating the complexities of e-commerce
website development. By understanding the fundamental
principles and strategies that underpin successful online
ventures, businesses can embark on their e-commerce journey
with confidence and clarity. In doing so, they can unlock the full
potential of the digital marketplace and position themselves for
sustained growth and success in the years to come.

10
Objectives

1. Expand Market Reach: The primary objective of an e-

commerce website is to extend the reach of a business
beyond physical limitations. By establishing an online
presence, businesses can tap into global markets and reach
customers irrespective of geographical boundaries.
2. Increase Sales and Revenue: One of the key goals of an e-
commerce website is to drive sales and generate revenue.
By providing a convenient and accessible platform for
customers to browse and purchase products or services,
businesses can capitalize on consumer demand and
maximize sales opportunities.
3. Enhance Customer Experience: A crucial objective of an e-
commerce website is to deliver a seamless and enjoyable
shopping experience for customers. By offering intuitive
navigation, personalized recommendations, and
streamlined checkout processes, businesses can enhance
customer satisfaction and foster loyalty.
4. Build Brand Awareness and Reputation: An e-commerce
website serves as a digital storefront for a business,
providing an opportunity to showcase its brand identity and
values. By creating a compelling and visually appealing
website, businesses can build brand awareness and
establish a positive reputation in the minds of consumers.
5. Drive Customer Engagement and Retention: Another
objective of an e-commerce website is to engage customers
and encourage repeat purchases. Through features such as
email marketing, loyalty programs, and customer reviews,
11
 businesses can foster ongoing relationships with customers
and incentivize them to return for future transactions.
6. Optimize Operational Efficiency: An e-commerce website
aims to streamline various aspects of business operations,
including inventory management, order processing, and
customer support. By integrating backend systems and
automation tools, businesses can improve efficiency,
reduce costs, and scale their operations effectively.
7. Gather Data and Insights: An e-commerce website
provides valuable data and insights into customer
behaviour, preferences, and trends. By leveraging analytics
tools and tracking metrics such as website traffic,
conversion rates, and customer demographics, businesses
can gain actionable insights to inform strategic decision-
making and optimize performance.
8. Stay Competitive: In today's competitive marketplace,
having an e-commerce website is essential for businesses
to stay relevant and competitive. By embracing digital
technologies and staying abreast of industry trends,
businesses can position themselves for success and
differentiate themselves from competitors.

12
 ANALYSIS AND DESIGN

Analysis of E-commerce Website Design:

1. User Interface (UI):
 Evaluate the overall layout, navigation, and visual

hierarchy of the website.

 Assess the ease of finding products, categories, and

important information.
 Consider the clarity of calls-to-action (CTAs) and the

intuitiveness of user interactions.

2. Visual Design:
 Analyse the use of colours, typography, and imagery to

create a visually appealing aesthetic.

 Evaluate consistency in design elements across different

pages and sections of the website.

 Consider the alignment of visual elements with the brand

identity and target audience preferences.

3. Responsiveness and Mobile Compatibility:
 Test the website's responsiveness across various devices

and screen sizes.

 Evaluate the usability and functionality of the website on

mobile devices, including smartphones and tablets.

 Consider the implementation of mobile-specific features

and optimizations to enhance the mobile user experience.

4. Product Presentation:
 Assess the effectiveness of product listings in showcasing

key details, images, and pricing information.

 Evaluate the use of product images and videos to provide

a comprehensive understanding of the products.

13
  Consider the organization of product categories and filters
to facilitate easy browsing and search.
5. Checkout Process:
 Analyse the checkout flow and assess the number of steps

required to complete a purchase.

 Evaluate the clarity of instructions and form fields during

the checkout process.

 Consider the availability of guest checkout options and

the integration of secure payment gateways.

6. Personalization and Recommendations:
 Evaluate the implementation of personalized product

recommendations based on user behaviour and

preferences.
 Assess the effectiveness of cross-selling and upselling

strategies in enhancing the shopping experience.

 Consider the use of user accounts and profiles to

customize the shopping journey for individual users.

7. Accessibility and Usability:
 Assess the website's accessibility features, including

keyboard navigation, screen reader compatibility, and

text alternatives for images.
 Evaluate the overall usability of the website for users with

diverse abilities and disabilities.

 Consider adherence to web accessibility standards and

guidelines, such as WCAG (Web Content Accessibility

Guidelines).
8. Performance and Loading Speed:
 Test the website's loading speed and performance across

different devices and network conditions.

 Evaluate the optimization of images, scripts, and other

assets to minimize page load times.

14
  Consider the implementation of caching mechanisms,
content delivery networks (CDNs), and other performance
optimizations.
9. Security:
 Assess the implementation of security measures to

protect user data, including SSL encryption, secure

payment gateways, and data encryption.
 Evaluate the presence of security badges and trust signals

to reassure users about the safety of their transactions.

 Consider adherence to industry standards and

regulations, such as PCI DSS (Payment Card Industry Data

Security Standard).
10. Feedback and Reviews:
 Analyze the integration of customer reviews and ratings

to provide social proof and build trust.

 Evaluate the usability of feedback forms and mechanisms

for capturing user feedback and suggestions.

 Consider the responsiveness of the website to user

feedback and the implementation of improvements based

on user input.

Overall, a comprehensive analysis of the design of an e-commerce

website involves assessing various aspects related to user
experience, visual design, functionality, accessibility, performance,
security, and user feedback. By conducting a thorough evaluation,
businesses can identify strengths, weaknesses, and opportunities
for improvement to optimize the design and enhance the overall
effectiveness of their e-commerce website.

15
16
Domain-specific Synthesis:

Domain-specific synthesis of an e-commerce website involves the

integration of domain knowledge and specialized expertise to
create a tailored solution that meets the unique needs and
challenges of the e-commerce industry. Here's how domain-specific
synthesis can be applied to various aspects of an e-commerce
website:

1. Market Analysis and Research:

 Conduct thorough market research to identify target

audience demographics, preferences, and behaviour.

 Analyse industry trends, competitor strategies, and

market dynamics to inform decision-making.

 Synthesize market insights to develop a strategic

positioning and competitive advantage for the e-

commerce website.
2. Product Selection and Merchandising:
 Utilize domain expertise to curate a compelling product

assortment that aligns with target audience preferences

and market demand.
 Apply merchandising strategies such as product

categorization, cross-selling, and upselling to maximize

sales and customer satisfaction.
 Synthesize product data and inventory management

techniques to optimize product availability and fulfilment

processes.
3. User Experience Design:
 Leverage domain-specific knowledge of user behaviour

and psychology to design intuitive user interfaces and

navigation flows.
17
  Apply principles of user-cantered design to create a
seamless and engaging shopping experience that
resonates with the target audience.
 Synthesize feedback from usability testing and user

research to iteratively refine the user experience and

address pain points.
4. Security and Compliance:
 Integrate domain-specific security measures and best

practices to safeguard sensitive customer data and secure

transactions.
 Ensure compliance with industry regulations such as PCI

DSS, GDPR, and CCPA to protect user privacy and maintain

trust.
 Synthesize security audits, vulnerability assessments, and

penetration testing to identify and mitigate potential risks

and vulnerabilities.
5. Technology Stack and Infrastructure:
 Select and configure a technology stack that aligns with

the scalability, performance, and security requirements of

the e-commerce website.
 Leverage domain-specific knowledge of web development

frameworks, database management systems, and cloud

infrastructure to optimize site performance.
 Synthesize load testing, caching strategies, and content

delivery networks (CDNs) to ensure reliable and

responsive website delivery.
6. Marketing and Customer Engagement:
 Develop targeted marketing strategies leveraging domain

expertise in digital marketing channels such as SEO, SEM,

social media, and email marketing.
18
  Implement customer engagement tactics such as
personalized recommendations, loyalty programs, and
retargeting campaigns to drive conversions and retention.
 Synthesize analytics data, A/B testing results, and

customer feedback to optimize marketing efforts and

continuously improve ROI.
7. Logistics and Fulfilment:
 Utilize domain-specific knowledge of supply chain

management and logistics to optimize order fulfilment

processes, inventory management, and shipping logistics.
 Integrate with third-party logistics (3PL) providers,

shipping carriers, and order management systems to

streamline operations and improve efficiency.
 Synthesize real-time tracking, inventory forecasting, and

demand planning to ensure timely delivery and customer

satisfaction.

By synthesizing domain-specific expertise across these key areas,

businesses can develop an e-commerce website that not only
meets the functional requirements but also delivers a superior user
experience, drives sales and revenue, and positions the brand for
long-term success in the competitive e-commerce landscape.

19
Unit Selection Synthesis:
Unit selection synthesis involves assembling and integrating
individual components or units to create a cohesive and
functional e-commerce website. Here's how the process of unit
selection synthesis can be applied to various components of an
e-commerce website:

1. Content Management System (CMS):

 Select a CMS platform such as WordPress, Shopify, or

Magento based on the specific requirements of the e-

commerce website.
 Evaluate factors such as ease of use, customization

options, scalability, and integration capabilities.

 Choose plugins, themes, and extensions to enhance

functionality and meet specific business needs, such as

product management, SEO optimization, and content
publishing.
2. E-commerce Platform:
 Choose an e-commerce platform such as

WooCommerce, BigCommerce, or Shopify for

managing product listings, inventory, and transactions.
 Evaluate features such as product catalog

management, order processing, payment gateways,

and shipping options.
 Select plugins, extensions, and integrations to extend

the platform's functionality and integrate with third-

party services such as payment processors, shipping
carriers, and analytics tools.
3. User Interface Components:
20
  Select UI components such as navigation menus,
product grids, carousels, and forms to create a visually
appealing and intuitive user interface.
 Choose design frameworks such as Bootstrap, Material

Design, or Tailwind CSS to streamline UI development

and ensure consistency across different pages and
devices.
 Customize UI components to align with the brand

identity, user experience goals, and accessibility

standards.
4. Database Management System (DBMS):
 Choose a DBMS such as MySQL, PostgreSQL, or

MongoDB to store and manage product data, user

information, and order details.
 Evaluate factors such as data scalability, reliability,

security, and performance to ensure efficient handling

of website data.
 Optimize database schema design, indexing strategies,

and query optimization techniques to improve website

performance and responsiveness.
5. Payment Processing and Security:
 Select payment gateways such as PayPal, Stripe, or

Square to securely process online transactions and

accept various payment methods.
 Integrate SSL encryption, PCI DSS compliance, and

other security measures to protect sensitive customer

data and prevent fraud.
 Implement security features such as two-factor

authentication, CAPTCHA verification, and anti-fraud

21
 detection to enhance website security and
trustworthiness.
6. Analytics and Tracking Tools:
 Choose analytics tools such as Google Analytics, Mix

panel, or Kiss metrics to track website traffic, user

behaviour, and conversion metrics.
 Integrate tracking codes, event tracking, and custom

dimensions to capture relevant data points and

insights.
 Configure dashboards, reports, and alerts to monitor

website performance, identify trends, and make data-

driven decisions for optimization.
7. Content Delivery Network (CDN):
 Select a CDN provider such as Cloudflare, Akamai, or

Amazon CloudFront to improve website performance

and reliability by caching static content and serving it
from distributed edge servers.
 Configure CDN settings, caching rules, and cache

invalidation strategies to optimize content delivery and

reduce latency.
 Monitor CDN usage, bandwidth consumption, and

cache hit rates to ensure cost-effective and efficient

content delivery.
By carefully selecting and integrating these units, businesses
can create a robust and feature-rich e-commerce website that
meets the functional requirements, delivers a seamless user
experience, and achieves business objectives such as increased
sales, customer satisfaction, and brand loyalty.
22
Use case diagram:

23
Graph:

24
 IMPLEMENTATION

Modules Description:
1. User Authentication and Management Module:
 Implementation of user registration, login, and profile
management functionalities.
 Integration with authentication mechanisms such as

email verification and password hashing for security.

 Implementation of user roles and permissions for

different types of users (e.g., customers, sellers,

admins).
2. Product Management Module:
 Implementation of CRUD (Create, Read, Update,

Delete) operations for managing products.

 Integration with a database to store product

information such as name, description, price, and

inventory.
 Implementation of product categories, tags, and

attributes for organization and filtering.

3. Shopping Cart and Checkout Module:
 Implementation of features to add/remove products

to/from the shopping cart.

 Integration with a database to store cart items and

quantities.
 Implementation of the checkout process, including

shipping address, payment method selection, and

order confirmation.
4. Order Management Module:

25
  Implementation of functionalities to view and manage
orders placed by customers.
 Integration with a database to store order details such

as products, quantities, prices, and shipping

information.
 Implementation of order status tracking and

notifications to users about order updates.

5. Payment Processing Module:
 Integration with payment gateways such as PayPal,

Stripe, or Braintree to facilitate secure online

payments.
 Implementation of payment APIs to handle payment

transactions and verify payment status.

 Implementation of error handling and fallback

mechanisms for failed transactions.

6. Search and Navigation Module:
 Implementation of search functionality to allow users

to find products based on keywords, categories, or

filters.
 Integration with search engines or indexing systems to

optimize search performance.

 Implementation of navigation features such as menus,

breadcrumbs, and filters for easy browsing.

7. Recommendation and Personalization Module:
 Implementation of personalized product

recommendations based on user behaviour, purchase

history, and preferences.

26
  Integration with recommendation algorithms and
machine learning models to generate relevant product
suggestions.
 Implementation of features such as Wishlist’s, saved

items, and personalized offers to enhance the

shopping experience.
8. Content Management Module:
 Implementation of CMS (Content Management

System) functionalities to manage static pages, blog

posts, and promotional content.
 Integration with a database to store and retrieve

content assets such as images, videos, and text.

 Implementation of content editing and publishing

workflows for administrators.

9. Analytics and Reporting Module:
 Integration with analytics tools such as Google

Analytics or Mix panel to track website traffic, user

behaviour, and conversion metrics.
 Implementation of custom analytics dashboards and

reports to monitor key performance indicators (KPIs)

and business metrics.
 Implementation of data visualization tools to present

analytics data in a clear and actionable format.

10. Admin Dashboard and Management Module:
 Implementation of an administrative dashboard to

manage website settings, users, products, and orders.

 Integration with CRUD functionalities for managing

website content, configurations, and settings.

27
  Implementation of security features such as role-based
access control (RBAC) and audit logs for administrative
actions.
By implementing these modules, an e-commerce website can
provide a comprehensive set of features and functionalities to
users, administrators, and other stakeholders, facilitating
efficient and secure online transactions and enhancing the
overall shopping experience.

Tools used:

● HTML

● CSS

● JAVA SCRIPT

28
 Code: INDEX
<!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="https://fonts.googleapis.com/css2?
family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
.body {
border: 12px dashed black;
background-color: rgb(252, 0, 42);
}
.logo {
font-size: 1.5rem;
color: #333;
text-decoration: none;
}
.nav-links {
list-style: none;
display: flex;
align-items: center;
}
.nav-item {
margin-right: 20px;
text-decoration: none;
color: #333;
transition: color 0.3s ease;
}
.nav-item:hover {
color: #6c5ce7; }
.flower-card {
width: 30%;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
background-color: #e0e7ac;
margin: 1%;}
@media (max-width: 768px) {
.flower-card {
29
 width: 100%; } }
.flower-image {
width: 100%;
height: auto; }
.flower-name {
font-weight: bold;
margin: 10px 0;
}
.flower-price {
margin-bottom: 10px; }
.add-to-cart-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
}
.main {
margin-top: ;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0% 4% 0% 2%;
width: 100%;}
.slide {
animation-name: example; }
@keyframes example {
0% {
transform: translate(-100%) }
100% {
transform: translate(0); } }
.home {
width: 100%;
height: 50rem;
border: 2px dashed black;
margin-top: 2%;
background-color: #6c5ce7;
background-size: cover;
background-position: center;
position: relative; }
.home .slides-container .slide {
display: flex;
30
 color: white;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
display: none;
margin: 10%;
margin-left: 60%; }
.home .slides-container .slide.active {
display: flex;}
.home .slides-container .slide .content {
flex: 1 1 40rem;
animation: fadeLeft .4s linear .4s backwards; }
.home .slides-container .slide .content span {
color: #000;
font-size: 2.5rem; }
.home .slides-container .slide .content h3 {
font-size: 6rem;
color: #222;
padding: .5rem 0;
}
.home .slides-container .slide .img {
flex: 1 1 40rem;
margin: 3rem 0;
}
.home .slides-container .slide .img img {
width: 100%;
animation: fadeUp .4s linear; } .home #next-slide,
.home #prev-slide {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 5rem;
width: 5rem;
line-height: 5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border: 0.1rem solid rgba(0, 0, 0, 0.7);
text-align: center;
background: var(--color);
font-size: 2rem;
color: #fff;
cursor: pointer; }* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
31
 box-sizing: border-box;
outline: none;
border: none;
text-transform: capitalize;
text-decoration: none;
transition: .2s linear }
.btn {
margin-top: 1rem;
display: inline-block;
padding: .8rem 3rem;
background: var(--color);
color: black;
font-size: 1.7rem;
cursor: pointer;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border: 0.1rem solid rgba(0, 0, 0, 0.7); }
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
.btn:hover {
background: #222;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.home #next-slide:hover,
.home #prev-slide:hover {
color: #fff;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.home #next-slide,
.home #prev-slide {
background-color: black;
}
.home #prev-slide {
left: 2rem; }
.home #next-slide {
right: 2rem; }
@media screen and (max-width: 900px) {
.navbar {
display: none;
flex-direction: column;
position: fixed;
top: 60px;
32
 left: 0;
width: 100%;
background-color: #941d576a;
border: 1px solid #941d576a;
z-index: 1000;
}
}
.navbar {
background-color: rgb(195, 50, 50);
opacity: 0.9;
;
position: fixed;
/* Other navbar styles */
}
.flower-card:nth-child(1) {
background-color: #f0f8ff;
/* Light blue */
}
.flower-card:nth-child(2) {
background-color: #ffebe6;
/* Light pink */
}

.flower-card:nth-child(3) {
background-color: #f5f5f5;
/* Light gray */
}
.flower-card {
background: radial-gradient(circle at center, #fff 0%, #ddd 70%);
}
.review {
background-color: #f2f2f2;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.flower-card {
width: 100px; }

.rcs {
width: 45%;
margin: 3%;
}
33
 }
.contact-form {
width: 100%;
margin-top: 10%;
background-color: #f9f9f9
}
.form-group input {
width: 60%;
}
.about-us {
background-color: #f0f0f0;
}
.abt-us-container p {
color: #333; }
.abt-us-container p:hover {
color: #606060;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
}
.card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.rcs {
width: 20%;
height: 30%;
background-color: #96cc85;
margin: 5%; }
.review {
flex-direction: column;
background-color: #de9471;
}
.contact-form {
width: 100%;
margin-top: 10%;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
34
 }
.contact-form h2 {
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group textarea {
height: 150px;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
/* About Us Section Styles */
.about-us {
padding: 50px 0;
background-color: #f9f9f9;
border: 2px solid gray;
background-color: #cac6c6;
}
.about-us .abt-us-container {
35
 width: 80%;
margin: auto;
text-align: center;
display: flex;
} .inp {
width: 2rem; }
.about-us h2 {
margin-bottom: 30px;
font-size: 2rem;
color: #333; }
.about-us h2 {
margin-bottom: 20px;
line-height: 1.6;
color: #666;
font-weight: bolder;
font-size: xx-large; }
.abtp {
margin: 2%; }.
.review {
background-color: #f2f2f2;
padding: 20px;
margin-top: 20px;
}
.review textarea,
.review input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.review button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.review button:hover {
background-color: #0056b3;
}
.contact .icons-container {
display: grid;
36
 grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
gap: 1.5rem;
}
.contact .icons-container .icons {
text-align: center;
border: 0.1rem solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
padding: 2rem;
}
.contact .icons-container .icons i {
height: 6rem;
width: 6rem;
line-height: 6rem;
font-size: 2.5rem;
background: var(--color);
color: #fff;
border-radius: 50%;
}
.contact .icons-container .icons h3 {
color: #222;
font-size: 2rem;
padding: 1rem 0;
}
.contact .icons-container .icons p {
color: #222;
font-size: 1.5rem;
line-height: 2;
}
.contact .row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
}
.contact .row form {
padding: 2rem;
border: 0.1rem solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
flex: 1 1 40rem;
}
.contact .row form h3 {
font-size: 2.5rem;
padding-bottom: 1rem;
color: #222;
37
 }
.contact .row form .inputBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact .row form .inputBox .box,
.contact .row form textarea {
padding: 1rem 1.2rem;
font-size: 1.6rem;
border: 0.1rem solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
color: #222;
text-transform: none;
margin: .7rem 0;
}
.contact .row form textarea {
width: 100%;
height: 15rem;
resize: none;
}
Copy code .navbar {
position: static;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.Tulips {
background-color: #6c5ce7;
}
.navigation {
display: flex;
flex-direction: row;
margin-left: 29.555%;
width: 100%;
margin-top: 1%;
}
.nav-links li {
margin: 1%;
}

.nav-links {
width: 100%;
38
}
.c-name {
margin-left: 46%;
margin-top: 5%;
}
.best-seller {
margin: 4% 0% 0px 4%;
font-size: xxx-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
table {
border-collapse: collapse;
width: 40%;
margin-left: 20%;
background-color: #f5f5f5;
}
th,
td {
padding: 8px;
text-align: center;
}
.shop-table {
display: none;
}
.shop:hover+.shop-table {
display: block;
}
.shop:hover+.shop-table {
border: 1px dashed blue;
}
.nav-container {
position: sticky;
}
.like-btn .feather-heart {
stroke: #ccc;
/* default color */
}
.like-btn.liked .feather-heart {
stroke: red;
/* color when liked */
}
.btn:hover {
color: white;
}
39
 .grid-sec {
display: flex;
flex-direction: row;
width: 100%;
}
.grid-sec .sec {
margin: 3%;
}
.grid-sec a {
text-decoration: none;
color: black;
display: block;
font-size: 15px;
margin: 5%;
}
.sub-btn {
display: flex;
flex-direction: row;
margin-top: 4%;
}
.sub-btn input {
border: 3px solid rgb(197, 89, 50);
border-radius: 3px;
}
.sub-btn button {
color: white;
background-color: #e87325;
}
.sub-btn-section {
margin-top: 6%;
margin-left: 4%;
}
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: ;
margin-left: 80%;
margin-bottom: 2%;
bottom: 23px;
right: 28px;
40
 width: 280px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width input fields */
.form-container input[type=text],
.form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}

41
 /* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
.row {
margin-top: 10%;
}
.sec a:hover {
border: 2px black;
transform: scale(1.7);
text-decoration: underline;
}
</style>
</head>

<body>
<div class="nav-container">
<div class="nav-container">
<div class="c-name">
<a href="#" class="logo">
<h1 style="font-weight: 1000;">Phoolwala </h1>
</a>
</div>
<div class="navigation">
<ul class="nav-links">
<li><a href="index2.html#main" class="nav-item">
<h1>Home</h1>
</a></li>

<div class="shop">
<li><a href="index2.html#main" class="nav-item ">
<h1>Shop</h1>
</a></li>
</div>
<li><a href="#" class="nav-item">
<h1>About Us</h1>
</a></li>
<li><a href="cart.html" class="nav-item"><span
class="material-symbols-outlined icon"
42
 class="carticon">shopping_cart</span></a></li>
<li><a href="#" class="nav-item">
<h1>Contact</h1>
</a></li>
<li><a href="registerform.html" class="nav-item">
<h1>Sign-In</h1>
</a></li>
<li><a href="loginform.html" class="nav-item">
<h1>Login</h1>
</a></li>
</ul>
</div>
<div class="shop-table">
<table>
<tr>
<th>Popular Flowers</th>
<th>Plants </th>
<th>Occasions</th>
</tr>
<tr>
<td>Roses</td>
<td>Orchids </td>
<td>Birthday</td>
</tr>
<tr>
<td>Sunflower</td>
<td>Bulb Garden</td>
<td>Get well </td>
</tr>
<tr>
<td>Tulips</td>
<td>Peace Lilies</td>
<td>Anniversary</td>
</tr>
<tr>
<td>Lilies</td>
<td>Money Trees</td>
<td>Baby</td>
</tr>
<tr>
<td>Orchids</td>
<td>Calla Lilies</td>
<td>More</td>
</tr>
43
 <tr>
<td>Daisies</td>
<td>Rose Plants</td>
</tr>
<tr>
<td>All Flowers</td>
<td>Bonsai Trees</td>
</tr>
</table>
</div>
</div>
<section class="home" id="home">
<div class="slides-container">
<div class="slide active">
<div class="content">
<span>Order Online </span>
<h3>Upto 60% off</h3>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="img">

</div>
</div>
<div class="slide">
<div class="content">
<span>Customize Ordering</span>
<h3>upto 80% off</h3>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="img">
<img decoding="async" src="">
</div>
</div>

<div class="slide">
<div class="content">
<span>Fast Delivery</span>
<h3>upto 80% off</h3>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="img">
<img decoding="async" src="">
</div>
</div>
44
 </div>
<div id="next-slide" class="fas fa-angle-right" onclick="next()">
<span class="material-symbols-outlined">
arrow_forward_ios
</span>
</div>
<div id="prev-slide" class="fas fa-angle-left" onclick="next()">
<span class="material-symbols-outlined">
arrow_back_ios
</span>
</div>
</section>
<h1 class="best-seller"><b>Best Seller</b> </h1>
<div class="main" id="main" style="display: flex;">

<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405161442/
Rose1.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>

<div class="flower-card">
<img class="flower-image"
45
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405161937/Rose2.png
" alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405162041/
Rose3.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
46
 </path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405162447/
Rose4.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405162707/
Rose5.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">
<button class="add-to-cart-btn" onclick="addToCart(10)">Add
to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
47
 height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163251/
Rose6.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163432/
Rose7.png"
alt="Flower Image">
<div class="flower-name"
48
 style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163524/
Rose8.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
49
 </div>
</div>
<div class="flower-card">
<img class="flower-image"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163618/
Rose9.png"
alt="Flower Image">
<div class="flower-name"
style="font-size: 20px; font-weight: bold;">Rose</div>
<div class="flower-price" style="font-size: 18px;">10Rs</div>
<div class="action-buttons">

<button class="add-to-cart-btn" onclick="addToCart(10)">Add

to Cart</button>
<button class="like-btn" onclick="likeFlower()">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-heart">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
</button>
</div>
</div>
<div class="flower-card">
<img class="flower-image" alt="Flower Image">
<div class="flower-name">Alstroemeria</div>
<div class="flower-price"><img src="" alt="">10Rs</div>
<button class="add-to-cart-btn" onclick="addToCart(10)">Add to
Cart</button>
</div>
</div>
<div class="review" style="display: flex;">
<div class="container">
<h2>Customer Reviews</h2>

<textarea id="reviewInput"
placeholder="Write your review..."></textarea>
<input type="text" id="nameInput" placeholder="Your Name">
<button onclick="submitReview()">Submit Review</button>
50
 </div>
</div>
<div id="reviewContainer" style="display: flex;">
/div>
<section class="about-us">
<h2 style="margin-left: 20px;"><b>About Phoolwala</b></h2>
<div class="abt-us-container">
<div class="grid-sec">
<div class="sec" id="sec1">
<h2>Policy Info</h2>
<a href="#">Terms & Conditions</a>
<a href="#">Privacy Policy</a>
<a href="#">Disclaimer</a>
<a href="#">Terms of Use</a>
</div>
<div class="sec" id="sec2">
<h2>ABOUT COMPANY</h2>
<a href="#">About-us</a>
<a href="#">Connect to team</a>
<a href="#">Careers</a>
<a href="#">News Room</a>
</div>
<div class="sec" id="sec3">
<h2>NEED HELP ?</h2>
<a href="#">Contact-Us</a>
<a href="#">FAQ</a>
</div>
<div class="sub-btn-section">
<h1 style="width: 100%;">Suscribe</h1>
<div class="sub-btn"><input type="email" name="" id=""
placeholder="Email"><button
type="submit">SUMBIT</button></div>
</div>
</div>
<div class=""></div>
</div>
</section>
<hr>
<div class="row">
<button class="open-button" onclick="openForm()">Ask Any
Queries</button>
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>Ask Query</h1>
51
 <label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email"
required>
<label for="psw"><b>write your querie</b></label>
<input type="text" placeholder="how to buy?" name="psw"
required>
<button type="submit" class="btn">Sumbit</button>
<button type="button" class="btn cancel"
onclick="closeForm()">Close</button>
</form>
</div>
<script>
function submitReview() {
var reviewText = document.getElementById("reviewInput").value;
var name = document.getElementById("nameInput").value;
if (!reviewText.trim() || !name.trim()) {
alert("Please enter both your name and review.");
return; }
var reviewContainer = document.getElementById("reviewContainer");
var card = document.createElement("div");
var h1 = document.createElement("h1");
var p = document.createElement("p");
card.appendChild(h1);
card.appendChild(p);
h1.innerHTML = "<strong>" + name;
card.className = "card";
p.innerHTML = ":</strong> " + reviewText;
card.classList.add("rcs")
reviewContainer.appendChild(card);
// Clear input fields after submitting review
document.getElementById("reviewInput").value = "";
document.getElementById("nameInput").value = "";
}
let totalPrice = 0;
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector("#menu-btn");
const slides = document.querySelectorAll(".home .slides-container .slide");
const header = document.querySelector(".header");
let index = 0;

// JavaScript to toggle the

// visibility of the navigation menu
document.addEventListener("DOMContentLoaded",
function () {
52
 const hamburger = document.getElementById("hamburger");
const navbar = document.querySelector(".navbar");
hamburger.addEventListener("click", function () {
navbar.classList.toggle("active");
});
});
window.addEventListener("scroll", () => {
navbar.classList.remove("active");
});
function showSlide(nextIndex) {
slides[index].classList.remove("active");
index = (nextIndex + slides.length) % slides.length;
slides[index].classList.add("active");
function next() {
showSlide(index + 1);
}
function prev() {
showSlide(index - 1);
}
function likeFlower() {
var likeBtn = document.querySelector('.like-btn');
likeBtn.classList.toggle('liked');
}
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
</body>

</html>

53
Code: INDEX2
//login form it is linked with index2.html that is the main page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
height: 100% ;
background-color: rgb(230, 230, 225);
}
.container{
width: 30%;
height: 70%;
align-self: center;
margin: 10%;
margin-left: 34%;
background-color: white;
display: flex;
align-items: center;
align-content: center;
border-radius: 3%;
flex-direction: column;
}
.header{
display: flex;
flex-direction: row;
}
.form{
align-items: center;
align-content: center;
align-self: center;
text-align: center;
}
54
input{
width: 40%;
margin-top: 5%;
height: 2em;
border-radius: 6px;
background-color: rgb(247, 247, 255);
border: 1px solid white;
padding: 1%;
}
.footer{
margin-top: 5%;
margin-bottom: 10%;
display: flex;
flex-direction: column;
}
.check-box{
display: flex;
flex-direction: row;
margin-left: 18%;
margin-top: 6%;
}
.sign-up-btn{
width: 50%;
background-color: black;
color: white;
border-radius: 5px;
margin-left: 34%;
height: 2.4em;
margin-bottom: 10%;
}
.sign-up-btn:hover{
cursor: pointer;
}
a{
text-decoration: none;
}
.foot{
display: flex;
flex-direction: row;
justify-content: space-around;
55
 }
</style>
</head>
<body>
<div>
<div class="container">
<p id="login-message" style="display: none;">Logging in...</p>
<div class="header">
<div><img src="" alt=""></div>
<div><h1 style="font-weight: 1000;"><header >Phoolwala</header></h1></div>
</div>
<div class="form">
<div>
<span>
<h1>
Sign In
</h1>
</span>
<span>
Login and stay connected
</span>
</div>
<div>
<form action="">
<input type="email" style="width: 80%;" placeholder="Email">
<input type="password" placeholder="password" style="width: 80%;">
<div class="foot">
<div class="check-box"> <input type="checkbox" name="" id="" required
style="width: 11%;"><span style="margin-top: 5%;">Remember Me </span></div>
<div style="margin-top: 7.5%; "> <a href="#">Forget Password?</a></div>
</div>
</form>
</div>
</div>
<div class="footer">
<button type="sumbit" class="sign-up-btn" onclick="showLoginMessage()">
Sign In
</button>
<span>
Create an Account <b><a href="registerform.html">Sign Up</a></b>
56
 </span>

</div>
</div>
</div>
<script>
function showLoginMessage() {
event.preventDefault();
document.getElementById("login-message").style.display = "block";
setTimeout(function () {
window.location.href = "index2.html";
}, 2000);
}
</script>
</body>
</html>

57
Code: registerform.html
//registerform.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
height: 100% ;
background-color: rgb(230, 230, 225);
}
.container{
width: 30%;
height: 70%;
align-self: center;
margin: 10%;
margin-left: 34%;
background-color: white;
display: flex;
align-items: center;
align-content: center;
border-radius: 3%;
flex-direction: column;
}
.header{
display: flex;
flex-direction: row;
}
.form{
align-items: center;
align-content: center;
align-self: center;
text-align: center;
}
input{
width: 40%;
margin-top: 5%;
height: 2em;
border-radius: 6px;
58
 background-color: rgb(247, 247, 255);
border: 1px solid white;
padding: 1%;
}
.footer{
margin-top: 5%;
margin-bottom: 10%;
display: flex;
flex-direction: column;
}
.check-box{
display: flex;
flex-direction: row;
margin-left: 18%;
margin-top: 6%;
}
.sign-up-btn{
width: 50%;
background-color: black;
color: white;
border-radius: 5px;
margin-left: 34%;
height: 2.4em;
margin-bottom: 10%;
}
.sign-up-btn:hover{
cursor: pointer;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="header">
<div><img src="" alt=""></div>
<div><h1><header>Phoolwalla
</header></h1></div>
</div>
<div class="form">
<div>
<span>
<h1>
Sign Up
59
 </h1>
</span>
<span>
create your account
</span>
</div>
<div>
<form action="">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="email" style="width: 80%;" placeholder="Email">
<input type="password" placeholder="password">
<input type="password" placeholder="Confirm Password">
<div class="check-box"> <input type="checkbox" name="" id="" required
style="width: 11%;"><span style="margin-top: 5%;">I have read the terms and condition
</span></div>
</form>
</div>
</div>
<div class="footer">
<button type="sumbit " class="sign-up-btn">
Sign Up
</button>
<span style="margin-left: 1em;">
Already have an Account <b><a href="loginform.html">Sign in</a></b>
</span>
</div
</div>
</div>
</body>
</html>

60
 Code: INDEX 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Cart Checkout</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
}
.cart, .checkout-form {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 20px;
margin: 10px;
}
.cart h2, .checkout-form h2 {
margin-top: 0;
}
.cart ul {
padding: 0;
}
.cart ul li {
list-style: none;
}

.checkout-form label {
display: block;
margin-bottom: 5px;
61
 }

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form textarea,
.checkout-form select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.checkout-form button {
background-color: #6c5ce7;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.checkout-form button:hover {
background-color: #5a3ec8;
}

</style>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Cart Checkout</title>
<link rel="stylesheet" href="styles.css">
<script>
function handleSubmit(event) {
event.preventDefault();

document.getElementById('checkout-form').style.display
62
= 'none';
 document.getElementById('thank-you-message').style.display = 'block';
}
</script>
</head>
<body>
<header>
<h1>Checkout</h1>
</header>
<div class="container">
<div class="cart">
<h2>Cart Summary</h2>
<ul>

</ul>

</div>
<div id="checkout-form" class="checkout-form">
<h2>Shipping Information</h2>
<form action="#" method="POST" onsubmit="handleSubmit(event)">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<label for="payment">Payment Method:</label>
<select id="payment" name="payment" required>
<option value="credit">Credit Card</option>
<option value="paypal">PayPal</option>
<option value="cash">Cash on Delivery</option>
</select>
<button type="submit">Place Order</button>
</form>
</div>
<div id="thank-you-message" style="display: none;">
<h2>Thank you for ordering!</h2>
<p>Your order has been placed successfully.</p>
</div>
</div>
63
 <script>
// Function to handle adding items to cart
function addToCart(price) {
// Add the price of the selected flower to the total price
totalPrice += price;

// Update the cart summary with the new total price

const cartSummary = document.querySelector('.cart ul');
cartSummary.innerHTML += `<li>Price: ${price} Rs</li>`;
}

// Function to handle submitting the review

function submitReview() {
// Your existing code
}
</script>
</body>
</html>

64
 Code: MAP

<!DOCTYPE html>
<html>
<head>
<!-- Loading map API -->
<script src=
"https://maps.googleapis.com/maps/api/js">
</script>

<script>
function GFG() {
var CustomOp = {
center:
new google.maps.LatLng(28.502212, 77.405603),
zoom: 17,
};

// Map object
var map =
new google.maps.Map(document.getElementById("DivID"), CustomOp);
var marker = new google.maps.Marker({
position:
new google.maps.LatLng(28.502211, 77.405512),
map: map,
});
}
</script>
</head>
<!-- load map -->
<body onload="GFG()">
<center>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id="DivID"
style="width: 400px;
height: 300px;">
</div>
</center>
</body>
</html>

65
Testing:

● In this phase, we want to test our code and debug it if necessary.

● After debugging, We have to do corrections to the code and run

it.

● And now it will display the results and we are moving to the
next phase.

66
The Voice Processing Module

The Voice Processing Module In this module text is converted

to speech. The output of OCR is the text, which is stored in a
file (speech. txt). Here, Festival software is used to convert
the text to speech. Festival is an open source Text To Speech
(TTS) 7,8 system, which is available in many languages. In this
project, English TTS 9–11system is used for reading the text.

67
Output

68
69
 FUTURE SCOPE
The future scope of an e-commerce website encompasses potential
advancements and opportunities that can further enhance its
functionality, user experience, and impact in the digital marketplace.
Here are some areas of future growth and development for e-
commerce websites:

1. Enhanced Personalization: E-commerce websites will continue to

invest in advanced algorithms and machine learning techniques to
deliver highly personalized shopping experiences. This includes
real-time product recommendations, customized marketing
messages, and tailored user interfaces based on individual
preferences and behavior.
2. Augmented Reality (AR) and Virtual Reality (VR): The integration
of AR and VR technologies will enable e-commerce websites to
offer immersive shopping experiences, allowing customers to
visualize products in their physical space before making a
purchase. This can enhance product understanding, reduce
returns, and increase customer engagement.
3. Voice Commerce: With the rise of voice-enabled devices and
virtual assistants, such as Amazon Alexa and Google Assistant, e-
commerce websites will increasingly support voice-based
shopping experiences. Users will be able to search for products,
place orders, and receive personalized recommendations using
natural language commands.
4. Blockchain Technology: Blockchain technology holds promise for
enhancing security, transparency, and trust in e-commerce
transactions. E-commerce websites may adopt blockchain-based
solutions for secure payment processing, supply chain
management, and counterfeit prevention, leading to increased
consumer confidence and reduced fraud.

70
5. Artificial Intelligence (AI) in Customer Service: AI-powered
chatbots and virtual assistants will play a more prominent role in
customer service on e-commerce websites. These AI-driven tools
will provide instant support, answer queries, resolve issues, and
guide users through the shopping journey, improving efficiency
and user satisfaction.
6. Social Commerce: Social media platforms will continue to evolve
as important channels for e-commerce, blurring the lines between
social networking and online shopping. E-commerce websites will
integrate more seamlessly with social media platforms, enabling
users to discover and purchase products directly within their
social feeds.
7. Sustainability and Ethical Practices: E-commerce websites will
increasingly prioritize sustainability, environmental responsibility,
and ethical sourcing in their operations. This includes offering eco-
friendly products, implementing green packaging solutions, and
promoting fair trade practices, aligning with growing consumer
demand for ethical consumption.
8. Omnichannel Integration: E-commerce websites will further
integrate with offline channels such as brick-and-mortar stores,
pop-up shops, and mobile commerce platforms to provide a
seamless omnichannel shopping experience. Customers will be
able to browse, purchase, and return products across multiple
touchpoints, enhancing convenience and flexibility.
9. Hyper-Personalization with Big Data: E-commerce websites will
leverage big data analytics to gain deeper insights into customer
behavior, preferences, and trends. This data-driven approach will
enable hyper-personalization at scale, allowing businesses to
anticipate individual needs, segment audiences effectively, and
deliver targeted marketing campaigns.
10. Cross-Border Expansion: As globalization continues to
accelerate, e-commerce websites will expand their reach into new
international markets. This includes
71
localization efforts such as
 multi-language support, currency conversion, and region-specific
product offerings, as well as compliance with diverse regulatory
frameworks and cultural sensitivities.

Overall, the future scope of e-commerce websites is characterized by

innovation, integration of emerging technologies, and a relentless
focus on enhancing the customer experience. By embracing these
trends and opportunities, e-commerce websites can stay ahead of the
curve and continue to thrive in the dynamic digital landscape.

72
 Conclusion:
In conclusion, the evolution of e-commerce websites has
revolutionized the way businesses operate and consumers shop
in the digital age. From humble beginnings to sophisticated
platforms, e-commerce websites have become indispensable
tools for businesses to reach global markets, expand their
customer base, and drive sales and revenue. Throughout this
journey, we have witnessed remarkable advancements in
technology, user experience design, and business strategies that
have shaped the e-commerce landscape.
Today, e-commerce websites offer a plethora of features and
functionalities aimed at delivering seam less and personalized
shopping experiences for users. From intuitive user interfaces to
secure payment processing, from personalized product
recommendations to omnichannel integration, e-commerce
websites continue to innovate and adapt to meet the evolving
needs and preferences of consumers.
Looking ahead, the future of e-commerce websites holds even
greater promise, with advancements in technologies such as
artificial intelligence, augmented reality, and blockchain poised
to further transform the way we shop online. As businesses
embrace these opportunities and continue to prioritize
customer-centricity, sustainability, and ethical practices, e-
commerce websites will play an increasingly integral role in
shaping the future of retail.
In conclusion, e-commerce websites have become essential
engines of commerce, connecting businesses and consumers in
73
a digital marketplace that knows no bounds. As we embark on
this journey of innovation and growth, let us continue to push
the boundaries of what is possible, empower businesses to
thrive, and elevate the online shopping experience for
consumers worldwide.

74
75