AZURE BREEZE - A PERFUME E-COMMERCE WEB APPLICATION

VAC PROJECT REPORT

Submitted by

ARSHIYA SAMREEN K 111924CW01003

DELFIE DERIL 111924CW01007

KAMALINI D 111924CW01022

LOGARAKSHIKA A 111924CW01024

BACHELOR OF TECHNOLOGY

In

COMPUTER SCIENCE AND BUSINESS SYSTEMS

S.A. ENGINEERING COLLEGE, CHENNAI – 600077

(Autonomous – Institute Level Research Centre – Affiliated to Anna University)

ANNA UNIVERSITY: CHENNAI - 600 025

SEPTEMBER 2025

i
 BONAFIDE CERTIFICATE

Certified that this project report “AZURE BREEZE – A PERFUME E- E-COMMERCE

WEB APPLICATION” is the bonafide work of “ARSHIYA SMAREEN K (111924CW01003),
DELFIE DERIL (111924CW01007), KAMALINI D (111924CW01022), LOGARAKSHIKA A
(111924CW01024)”, who carried out the project work under my supervision.

SIGNATURE SIGNATURE

Dr. ANTONIDOSS A., Mrs. S. MANODHIYA,

HEAD OF THE DEPARTMENT SUPERVISOR

Professor Assistant Professor

Department of Computer Science and Department of Computer Science and

Business Systems Engineering Business Systems Engineering

S.A. Engineering College, S.A. Engineering College,

Poonamallee-Avadi Main Road, Poonamallee-Avadi Main Road,
Thiruverkadu Post, Thiruverkadu Post,
Chennai - 600 077 Chennai - 600 077

ii
 ABSTRACT

This website project is created to showcase the collection of premium perfumes offered by
Azure Breeze. This site aims to provide visitors with an easy-to-navigate and visually appealing
presentation of the products, highlighting their unique fragrances, ingredients, and designs. The
main focus of the website is to demonstrate product details through high-quality images, descriptive
text, and interactive features such as category browsing and search functionality. This project is
also designed to give users a clear understanding of the brand’s philosophy and the quality
standards maintained in crafting each perfume. Here, we present the website structure, including
product pages, navigation layout, and visual design elements, to offer an engaging online
experience. The experiments carried out during the development to ensure responsiveness, loading
speed, and user-friendliness are documented, and the outcomes are reflected on the website. In
conclusion, this website serves as a digital platform for fragrance enthusiasts and potential
customers to explore, learn about, and experience Azure Breeze perfumes seamlessly.

iii
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ABSTRACT iii

LIST OF FIGURES vi

LIST OF ABBREVIATIONS vii

1 INTRODUCTION 1

ABOUT THE PROJECT

2 LITERATURE SURVEY 2

2.1 STUDY OF EXISTING WEBSITES 2

2.2 REVIEW OF TECHNOLOGIES 3

3 SYSTEM IMPLEMENTATION 4

3.1 IMPLEMENTATION 4

4 SYSTEM DESIGN 5

4.1 SYSTEM ARCHITECTURE 5

4.2 SYSTEM OVERVIEW 7

4.3 FILE STRUCTURE 7

5 CONCLUSION AND FUTURE WORK 9

5.1 CONCLUSION 9

5.2 FUTURE WORK

6 APPENDIX 11

6.1 SOURCE CODE 11

7 REFERENCES 28

iv
 LIST OF FIGURES

FIGURE NO NAME OF THE FIGURE PAGE NO

4.1.1 System Architecture 11

4.1.2 Data Flow Diagram 12

vi
 LIST OF ABBREVIATIONS

[Link] ABBREVATION EXPANSION

1 HTML Hypertext Markup Language

2 CSS Cascading Style Sheets

General Data Protection Regulation

3 GDPR

4 TLS Transport Layer Security

5 UI User Interface

6 VS Visual Studio

7 HTTPS HyperText Transfer Protocol Secure

8 CMS Content Management System

9 PWA Progressive Web App

10 UX User Experience

11 AR Augmented Reality

vii
 CHAPTER 1

INTRODUCTION

E-commerce is one of the fastest-growing domains, transforming how people shop and interact
with brands. Perfumes, in particular, represent a unique product segment that is both luxurious and
accessible. With the increasing shift toward digital platforms, there is a growing demand for
elegant, responsive, and user-friendly websites that can replicate the real-world shopping
experience. The aim of this project is to develop Azure Breeze – Purest Perfumes, a responsive
web application that showcases perfumes and allows users to browse collections, view details,
explore categories, and read reviews. The current scope of the project is limited to front- end
development using HTML, CSS, and simple JavaScript for interactivity.

The website includes sections for top perfumes, types of perfumes, reviews, and brand
information, while future enhancements may involve integrating a backend database, shopping
cart, user authentication, and secure payment systems to transform the site into fully functional e-
commerce application. The objectives of the project are to design a visually appealing website for
a perfume brand, to provide product details, images, and customer reviews in an organized manner,
to ensure smooth and responsive navigation across devices, and to simulate the experience of
browsing perfumes in an online shopping environment.

The Azure Breeze website has been designed with a clean layout and modern styling to engage
users. It features a Home Page, a Top Perfumes Section, and dedicated pages for Night, Floral,
Fresh, Woody, and Oriental perfumes, each highlighting selected products with images and
prices. A Review Section adds credibility by displaying customer feedback, while the About Us
and Contact Information pages build brand trust. Interactive elements such as search functionality,
hover effects, and collapsible details and reviews enhance user engagement. In conclusion,
this project demonstrates how basic web technologies can be effectively utilized to create
a professional e-commerce website. It not only highlights the importance of aesthetics and
usability in front-end design but lays a foundation for future development into a complete
commercial system. This project not only lays the foundation for future development into a
complete commercial system but also serves as an example of how creativity and technology can
merge to elevate brand presence in the online marketplace.

1
 CHAPTER 2

LITERATURE SURVEY

This chapter presents a review of existing perfume brand websites and the technologies used to
develop them. The study focuses on Dior, Gucci, and Chanel, which are leading global perfume brands.
Their websites provide insights into design standards, user experience, and technical implementation
that can be applied to the proposed project, Azure Breeze.

2.1 Study of Existing Websites Dior

The Dior website adopts a minimalistic design with high visual appeal. Large banner images,
premium typography, and well-structured navigation make the user experience smooth. The website
emphasizes storytelling through visuals, ensuring that the brand identity is communicated effectively.

Gucci

Gucci’s website focuses on modern layouts and interactivity. Products are displayed with hover
effects and zoom features. Customer recommendations are highlighted, which adds credibility. The
navigation is intuitive, helping users quickly browse perfumes by type and collection.

Chanel
The Chanel website reflects luxury and elegance through simple layouts, high-quality
product images, and subtle animations. Perfumes are categorized clearly, and product pages
include customer reviews, which influence purchase decisions.
Common Observations
 High visual appeal and clean design
 Easy navigation and well-organized categories.
 Review and recommendation sections to build trust.
 Mobile responsiveness across devices.

2
2.2 Review of Technologies

HTML5 and CSS3

HTML5 and CSS3 are the fundamental technologies used for developing the structure and styling of
the website.
 HTML5 is responsible for creating the layout and defining the structural elements of the
webpage, such as the header, navigation bar, and hero section.
 CSS3 enhances the visual appearance by providing styling, animations, and responsive design
features, ensuring that the website adapts smoothly across various screen sizes and devices. The HTML
structure of the project includes essential components, such as the navigation menu and hero section. The header
contains the website logo and navigation links such as Home, Top Perfumes, Types, Reviews, and About Us.
The hero section is designed to attract users’ attention with a tagline, “Natural,
Organic, Sustainable,” and a call-to-action button labeled Shop Now. This structure ensures easy navigation and
an appealing layout that engages users effectively.
CSS3 Styling
The hero section is styled using CSS3 to create a visually captivating appearance. Flexbox is used
to center the content both vertically and horizontally, while background images and overlay effects are
applied for an elegant look. The color scheme and text animations enhance the user interface, providing
a modern and professional appearance.
For instance, an overlay with reduced opacity (rgba(0,0,0,0.4)) is added to the background image to
improve text readability. The hero title (h1) is styled with a large font size and an entrance animation for
a smooth visual effect.
Additionally, media queries are implemented to ensure responsiveness. The layout automatically
adjusts to different screen sizes such as tablets and mobile phones by modifying font sizes, wrapping
elements, and resizing images. This guarantees an optimal viewing experience on all devices.
JavaScript Functionality
JavaScript is used to introduce interactivity into the website. One key feature is the ability to toggle
product details and user reviews dynamically without reloading the page.
These functions enhance user engagement by allowing sections of the webpage to expand or
collapse with a single click. It provides a smoother and more interactive browsing experience for users
exploring product details or reading reviews.

3
 CHAPTER 3

SYSTEM IMPLEMENTATION

3.1 Implementation
The Azure Breeze – Purest Perfumes web application was built using HTML, CSS, and JavaScript.
HTML5 provides the page structure, CSS3 handles styling with gradients, animations, and responsive layouts,
while JavaScript adds interactivity such as toggling product details and customer reviews.
The site includes multiple pages for different perfume categories: Night, Floral, Fresh, Woody,
and Oriental, along with a review section and homepage. Each page features interactive product
cards, smooth navigation, and responsive design, creating a user-friendly browsing experience.
This includes:
1. CSS Styling ([Link]) – Defines the overall layout, background gradients, navigation bar,
product card design, responsiveness, hover effects, and animations.
2. .Homepage ([Link]) – Contains the hero image, navigation menu, types of
perfumes, about section, and footer
3. Night Perfumes Page ([Link]) – Showcases a collection of night perfumes with details and
reviews.
4. Woody Perfumes Page ([Link]) – Displays woody perfumes with expandable product
information and reviews.
5. Fresh Perfumes Page ([Link]) – Contains fresh perfume products with interactive product
cards.
6. Floral Perfumes Page ([Link]) – Includes floral perfumes presented with images and
pricing details.
7. Oriental Perfumes Page ([Link]) – Displays oriental perfumes with expandable details
and reviews.
8. Review Page ([Link]) – Allows customers to read different feedback on perfumes.

4
 CHAPTER 4

SYSTEM DESIGN

4.1 System Architecture

The prototype system of Azure Breeze – A Perfume E-Commerce Web Application is designed
to provide an engaging and elegant perfume browsing experience. The architecture focuses on
simplicity, responsiveness, and modularity to ensure smooth navigation and scalability for future e-
commerce integration.
When users visit the Home Page, they can explore various sections like Top Perfumes, Types,
Reviews, and About Us. Each section provides relevant details such as product names, prices, reviews,
and company information. The system currently supports browsing and reviewing features without
online payment or ordering modules, keeping the prototype lightweight and educational
Key Highlights:
 User-friendly and visually appealing interface.

 Organized product categorization (Night, Floral, Fresh, Woody, Oriental).

 Interactive browsing and keyword-based search.

 Modular structure allowing future integration of shopping cart and payment gateways.

Fig.4.1.1 System Architecture

5
Prototype System Flow:
The prototype’s operation is based on a simple and intuitive flow that allows smooth interaction
between users and the web interface:
Home Page ([Link]):

 Acts as the landing page and entry point of the system.

 Displays the brand logo, navigation menu, and featured perfumes.

Navigation Menu (Header):

 Provides links to all major pages, Top Perfumes, Types, Reviews, and About.
Product Pages:

 Each category page (e.g., Night, Floral, Woody, Oriental) presents a curated collection of
perfumes with expandable details and reviews.
Search Box:

 Allows users to look up perfumes quickly using keywords.

Review Page:

 Displays authentic customer feedback to enhance credibility.

Outcome:

Users can seamlessly browse products, view descriptions and reviews, and navigate through
perfume categories, simulating the online shopping experience in a prototype form.

Fig 4.1.2 System Overview

6
 4.2 System Overview
The Azure Breeze prototype follows a three-layer architecture that separates
presentation, logic, and data components to ensure maintainability and scalability
1. Presentation Layer (Front-End)

 Developed using HTML5, CSS3, and JavaScript.

 Provides the interactive and responsive interface.
 Implements modern design principles with pastel and plum color themes for brand identity.

2. Application Layer (Logic)

 Handles navigation, category switching, and interactivity.

 JavaScript manages toggling of details and reviews, as well as dynamic content updates.
 Future versions can integrate backend logic for real-time updates and transactions.

3. Data Layer (Static / Expandable)

 Currently consists of static perfume data in HTML/JavaScript objects.
 Can be expanded to connect with a JSON file or database for scalability and
data persistence.

Design Principle:

A clean separation of layers ensures that future upgrades, such as adding AI-based
recommendations or product databases, can be implemented with minimal changes.

4.3 File Structure:

The project structure is organized for clarity and reusability:

File Name Description

[Link] Main home page and navigation hub.

[Link] Customer review section.

[Link], [Link], [Link], Category-specific perfume pages.

[Link], [Link]

7
 Stylesheet defining layout, theme colors
[Link]

Contains JavaScript for interactivity

[Link] (toggle, search, etc.).

Design Principles:
 Responsive: Works efficiently on desktop, tablet, and mobile screens.
 Simple: Minimalist navigation and intuitive structure.
 Thematic: Maintains a consistent brand identity using plum/pastel tones.
 Interactive: Expandable product details and dynamic elements enhance user engagement.

8
 CHAPTER 5

CONCLUSION AND FUTURE WORK

5.1 Conclusion
The development of the Azure Breeze perfume website has been aimed at creating a user- friendly,
visually appealing, and secure platform that reflects the brand’s identity and premium positioning in the
fragrance market. Through careful design choices, integration of modern web technologies, and attention
to responsive layouts, the website provides an engaging experience for users to explore and learn about
the exclusive collection of perfumes. The platform not only serves as a digital storefront but also as a
representation of the brand’s philosophy of elegance, innovation, and quality. In addition, the report
highlights the structured process behind the website’s design and implementation, ensuring performance
optimization, accessibility, and ease of navigation across devices. By documenting the workflow, design
decisions, and development strategies, this paper offers valuable insights for researchers and developers
interested in building similar digital platforms for luxury products. As outlined in the future enhancement
section, there remains significant potential for extending the platform with advanced features such as AI-
driven recommendations, AR-based virtual trials, subscription models, and certificate-based security
frameworks. These improvements will further strengthen the website’s role as a secure, scalable, and
interactive digital ecosystem for both fragrance enthusiasts and customers. In conclusion, the Azure
Breeze website serves as a foundation for combining aesthetic design, modern technology, and brand
storytelling, while leaving ample scope for innovation and future expansion.

5.2 Future Work

In future iterations of the Azure Breeze website, we plan to introduce a suite of enhancements under
the working name Azure Scent-Cloud to further elevate user experience, security, and business
scalability. Azure Scent-Cloud will implement advanced personalization features, including a fragrance
quiz, AI-driven scent recommendations, and preference-based product suggestions, to help customers
discover perfumes tailored to their tastes. Augmented reality ‘try-on’ previews and short guided scent
stories will allow users to engage with fragrances more interactively. On the commerce side, we will add
subscription boxes, sample-ordering, one-click checkout, multi- currency support, and deeper integrations

9
with popular payment gateways and inventory systems to streamline purchase and fulfillment. From a
technical and security perspective, the platform will adopt robust measures such as TLS/HTTPS
everywhere, certificate-based authentication for administrative access, end-to-end encryption for
sensitive customer data, and GDPR-compliant data handling policies to protect user privacy and
reduce insider risks. Operational improvements will include a headless CMS for faster content updates,
internationalization for multilingual support, progressive web app (PWA) capabilities for offline-like
mobile experiences, performance optimizations for faster load times, and analytics-driven A/B testing to
continuously refine the UI/UX. Finally, sustainability and brand storytelling features, detailed ingredient
sourcing, refill programs, and carbon-offset options will be introduced to reinforce Azure Breeze’s
commitment to ethical luxury. Together, these enhancements aim to transform the website from a
product showcase into a secure, personalized, and scalable digital perfume ecosystem

10
 CHAPTER 6
APPENDIX

6.1 Source code

HTML5 & CSS3
HTML5 provides the structure, while CSS3 is used for styling and responsiveness.
HTML Structure (Navigation & Hero Section):
<header>

<div class="align">

<img src="[Link]" alt="Azure Breeze Logo">

<nav>

<ul class="list">

<li><a href="#">Home</a></li>

<li><a href="#top-perfumes">Top Perfumes</a></li>

<li><a href="#perfume-types">Types</a></li>

<li><a href="[Link]">Reviews</a></li>

<li><a href="#about">About Us</a></li>

</ul>

</nav>

</div>

</header>

<section class="hero">

<div class="container">

<h1>Natural, Organic, Sustainable</h1>

11
<p>Discover perfumes crafted with love for you and the planet.</p>

<a href="#" class="btn">Shop

Now</a>

</div>

</section>

CSS Styling (Hero Section):

.hero {
display:
flex;
align-items:
center; justify-
content: center;
text-align: center;
min-height: 100vh;

background: url('[Link]') no-repeat center

center/cover; color: white;
position: relative;

.hero::befor
e { content: "";
position:
absolute; inset:
0;
background: rgba(0,0,0,0.4); /* dark overlay */

.hero h1 {

font-size: 3rem;

animation: popIn 2.5s ease

forwards;

12
 JavaScript
JavaScript is used to add interactivity, such as toggling product details and reviews.

Toggle Function:
function toggleDetails(button) {

const details = [Link];

[Link] = ([Link] === "none") ? "block" : "none";

function toggleReviews(button) {

const reviews = [Link];

[Link] = ([Link] === "none") ? "block" : "none";

This ensures that users can expand or hide product information dynamically without reloading the
page.

Media Queries
Media queries make the design responsive across different
devices. @media (max-width: 768px) {
.hero h1 {

font-size: 2rem;

.list {

flex-wrap:
wrap; gap:
15px;
}

.produ
ct-card
img {
height:
auto;
}

13
1. Night Perfumes Page ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Breeze - Purest Perfumes</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="align">
<img src="[Link]" alt="Azure Breeze Logo"/>
<nav>
<ul class="list">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Night Perfumes</a></li>
<li><a href="[Link]">Floral Perfumes</a></li>
<li><a href="[Link]">Fresh Perfumes</a></li>
<li><a href="[Link]">Woody Perfumes</a></li>
<li><a href="[Link]">Oriental Perfumes</a></li>
</ul>
</nav>
</div>
</header>
<section
class="products">
<div
class="container">
<h2>Top Night Perfumes</h2>
<div class="product-grid">

<div class="product-card">
<img

14
src="[Link]

ai- [Link]" alt="Kisuki Eau de Parfum"/>

<h3>Sage Dubai night EPD golden series</h3>
<p>Company - Sage Dubai</p>
<p class="product-type"><i>Type: Night Perfume</i></p>
<button class="btn-small" onclick="toggleDetails(this)">View Details</button>
<div class="details" style="display: none; margin-top: 10px;">
<p><strong>Sizes Available:</strong> 50ml, 90ml</p>
<p><strong>Prices:</strong> ₹3500, ₹6000</p>
<button class="btn-small" onclick="toggleReviews(this)">See Reviews</button>
<div class="reviews" style="display: none; margin-top: 10px;">
<p><strong>Aarti M.</strong>: ★★★★★ – "Lovely scent, veryrefreshing."</p>

<p><strong>Rahul P.</strong>: ★★★★☆ – "Good but expected more longevity."</p>

<p><strong>Sneha T.</strong>: ★★★★★ – "Highly recommend this perfume!"</p>
</div>
</div>
</div>

2. Fresh Perfumes Page ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Breeze - Purest Perfumes</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="align">
<img src="[Link]" alt="Azure Breeze Logo"/>
<nav>
<ul class="list">
<li><a href="[Link]">Home</a></li>
15
 <li><a href="[Link]">Night Perfumes</a></li>
<li><a href="[Link]">Floral Perfumes</a></li>
<li><a href="[Link]">Fresh Perfumes</a></li>
<li><a href="[Link]">Woody Perfumes</a></li>
<li><a href="[Link]">Oriental Perfumes</a></li>
</ul>
</nav>
</div>
</header>
<section class="products">
<div class="container">
<h2>Top Fresh Perfume</h2>
<div class="product-grid">

<div class="product-card">
<img src="[Link]
alt="Kisuki Eau de Parfum"/>
<h3>FREGRANTO Fresh Diva Perfume For Women</h3>
<p>Company - fresh diva</p>
<p class="product-type"><i>Type: fresh Perfume</i></p>
<a href="#" class="btn-small">View Price</a>
</div>

3. Woody Perfumes Page ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Breeze - Purest Perfumes</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>

16
 <div class="align">
<img src="[Link]" alt="Azure Breeze Logo"/>
<nav>
<header>
<div class="align">
<img src="[Link]" alt="Azure Breeze Logo"/>

<div class="product-card">
<img
src="[Link]
L/17/ffXCxtHE_724045ab205b425b9395bd1236c67560.jpg" alt="Kisuki Eau de Parfum"/>
<h3>Midnight Bloom- Perfume and body mist</h3>
<p>Company - Aqualogica</p>
<p class="product-type"><i>Type: Night Perfume</i></p>
<button class="btn-small" onclick="toggleDetails(this)">View Details</button>
<div class="details" style="display: none; margin-top: 10px;">
<p><strong>Sizes Available:</strong> 50ml, 90ml</p>
<p><strong>Prices:</strong> ₹3500, ₹6000</p>
<button class="btn-small" onclick="toggleReviews(this)">See Reviews</button>
<div class="reviews" style="display: none; margin-top: 10px;">
<p><strong>Aarti M.</strong>: ★★★★★ – "Lovely scent, veryrefreshing."</p>

<p><strong>Rahul P.</strong>: ★★★★☆ – "Good but expected more longevity."</p>

<p><strong>Sneha T.</strong>: ★★★★★ – "Highly recommend this perfume!"</p>
</div>
</div>
</div>
<div class="product-card">
<img src="[Link]
7c8bb8/fyprod/wrkr/products/pictures/item/free/original/000000000491332240/MQCKAW4x
D- 000000000491332240_4.jpg" alt="Kisuki Eau de Parfum"/>
<h3>Black Opium Eau De Parfum</h3>
<p>Company - Yves Saint Laurent</p>
<p class="product-type"><i>Type: Night Perfume</i></p>
<button class="btn-small" onclick="toggleDetails(this)">View Details</button>
<div class="details" style="display: none; margin-top: 10px;">
17
 <p><strong>Sizes Available:</strong> 50ml, 90ml</p>
<p><strong>Prices:</strong> ₹3500, ₹6000</p>
<button class="btn-small" onclick="toggleReviews(this)">See Reviews</button>

<div class="reviews" style="display: none; margin-top: 10px;">

<p><strong>Aarti M.</strong>: ★★★★★ – "Lovely scent, veryrefreshing."</p>

<p><strong>Rahul P.</strong>: ★★★★☆ – "Good but expected more longevity."</p>

<p><strong>Sneha T.</strong>: ★★★★★ – "Highly recommend this perfume!"</p>

</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<center>
<div class="container">
<div class="footer-content">
<div class="footer-section">
function toggleReviews(button) {
const reviewsDiv =
[Link]; if
([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";
}
}
</script>
</body>
</html>

18
4. Floral Perfumes Page ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Azure Breeze - Purest Perfumes</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="align">
<img src="[Link]" alt="Azure Breeze Logo"/>
<nav>
<ul class="list">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Night Perfumes</a></li>
<li><a href="[Link]">Floral Perfumes</a></li>
<li><a href="[Link]">Fresh Perfumes</a></li>
<li><a href="[Link]">Woody Perfumes</a></li>
<li><a href="[Link]">Oriental Perfumes</a></li>
</ul>
</nav>
</div>
</header>
<section
class="products">
<div
class="container">
<h2>Top floral Perfumes</h2>
<div class="product-grid">

19
 <div class="product-card">
<img src="[Link] alt=
"Kisuki Eau de Parfum"/>
<h3>White floral</h3>
<p>Company - fraganote</p>
<p class="product-type"><i>Type: Floral Perfume</i></p>
<a href="#" class="btn-small">View Price</a>
</div>
<div class="product-card">
<img src="[Link]
content/uploads/images/issue246/[Link]" alt="Kisuki Eau de Parfum"/>

<h3>Garder fresh floral perfume</h3>

<p>Company - Dake</p>
<p class="product-type"><i>Type: Floral Perfume</i></p>
<a href="#" class="btn-small">View Price</a>
</div>
<div class="product-card">
<img
src="[Link]
20 24/10/10/81d0c3df-d85d-4dbe-b25a-dc5e1ed4751e1728580023822-HVNLY-Women-Blossom-
Long- [Link]" alt="Kisuki Eau de Parfum"/>
<h3>Bloosom premium long-lasting floral fruity and vibrant perfume</h3>
<p>Company - HVNYL</p>
<p class="product-type"><i>Type: Floral Perfume</i></p>
<a href="#" class="btn-small">View Price</a>
</div>
</div>
</div>
</section>
<footer>
<center>
<div class="container">
<div class="footer-content">
20
 <div class="footer-section">
<h3>Contact Us</h3>
<p>Email: support@[Link]</p>
<p>Phone: +91 7896547897</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<p><a href="#">Facebook</a> | <a href="#">Instagram</a> | <a
href="#">Twitter</a></p>
</div>
</div>
<p class="footer-bottom">&copy; 2025 azurebreeze. All rights reserved.</p>
</div>
</div>
</cente
r>
</footer>

</body>
</html>

5. Oriental Perfumes Page ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Breeze - Purest Perfumes</title>
<link rel="stylesheet" href="[Link]">

</head>
<body>
<header>
<div class="align">
<img src="[Link]" alt="Azure Breeze Logo"/>
21
 <nav>
<ul class="list">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Night Perfumes</a></li>
<li><a href="[Link]">Floral Perfumes</a></li>
<li><a href="[Link]">Fresh Perfumes</a></li>
<li><a href="[Link]">Woody Perfumes</a></li>
<li><a href="[Link]">Oriental Perfumes</a></li>
</ul>
</nav>
</div>
</header>

<section
class="products">
<div
class="container">
<h2>Top Oriental Perfumes</h2>
<div class="product-grid">

<div class="product-card">
<img
src="[Link]
_1.1/w_1020/[Link]">
<h3>COCO EAU DE PARFUM SPRAY</h3>
<p>Company - Chanel</p>
<p class="product-type"><i>Type:Oriental Perfume</i></p>
<button class="btn-small" onclick="toggleDetails(this)">View Details</button>
<div class="details" style="display: none; margin-top: 10px;">
<p><strong>Sizes Available:</strong> 50ml, 90ml</p>
<p><strong>Prices:</strong> ₹3500, ₹6000</p>
<button class="btn-small" onclick="toggleReviews(this)">See Reviews</button>
<div class="reviews" style="display: none; margin-top: 10px;">
<p><strong>Aarti M.</strong>: ★★★★★ – "Lovely scent, veryrefreshing."</p>

<p><strong>Rahul P.</strong>: ★★★★☆ – "Good but expected more longevity."</p>

<p><strong>Sneha T.</strong>: ★★★★★ – "Highly recommend this perfume!"</p>

22
</div>
</div>
</div>
<div class="product-card">
<img src="[Link]
<h3>Oriental Woody fragrance</h3>
<p>Company - Shay</p>
<p class="product-type"><i>Type: Oriental Perfume</i></p>
<button class="btn-small" onclick="toggleDetails(this)">View Details</button>

<div class="details" style="display: none; margin-top: 10px;">

<p><strong>Sizes Available:</strong> 50ml, 90ml</p>
<p><strong>Prices:</strong> ₹3500, ₹6000</p>

<button class="btn-small" onclick="toggleReviews(this)">See Reviews</button>

<div class="reviews" style="display: none; margin-top: 10px;">
<p><strong>Aarti M.</strong>: ★★★★★ – "Lovely scent, veryrefreshing."</p>

<p><strong>Rahul P.</strong>: ★★★★☆ – "Good but expected more longevity."</p>

<p><strong>Sneha T.</strong>: ★★★★★ – "Highly recommend this perfume!"</p>

</div>
</div>
</div>
<div class="product-card">
<img src="[Link]
<h3>Long-Lasting Eau De Parfum with Chocolate, Amber & Woody Notes</h3>
<p>Company - Adilqadri Shanaya</p>
<p class="product-type"><i>Type: Oriental Perfume</i></p>
<button class="btn-small" onclick="toggleDetails(this)">View Details</button>
<div class="details" style="display: none; margin-top: 10px;">
<p><strong>Sizes Available:</strong> 50ml, 90ml</p>
<p><strong>Prices:</strong> ₹3500, ₹6000</p>
<button class="btn-small" onclick="toggleReviews(this)">See Reviews</button>
<div class="reviews" style="display: none; margin-top: 10px;">
<p><strong>Aarti M.</strong>: ★★★★★ – "Lovely scent, veryrefreshing."</p>
<p><strong>Rahul P.</strong>: ★★★★☆ – "Good but expected more longevity."</p>
23
 <p><strong>Sneha T.</strong>: ★★★★★ – "Highly recommend this perfume!"</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<center>
<div class="container">

<div class="footer-content">
<div class="footer-section">
<h3>Contact Us</h3>
<p>Email: support@[Link]</p>
<p>Phone: +91 7896547897</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<p><a href="#">Facebook</a> | <a href="#">Instagram</a> | <a
href="#">Twitter</a></p>
</div>
</div>
<p class="footer-bottom">&copy; 2025 azurebreeze. All rights reserved.</p>
</div>
</div>
</cente
r>
</footer>
<script>
function toggleDetails(button) {
const detailsDiv = [Link];

if ([Link] === "none") {

[Link] = "block";

24
 } else {
[Link] = "none";
}
}

function toggleReviews(button) {
const reviewsDiv =
[Link]; if
([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";

}
}
</script>
</body>
</html>

6. Review Page ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Azure Breeze - Reviews</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<!-- Header -->
<header>
<div class="align">
<div class="logo">
<img src="[Link]" alt="Azure Breeze Logo" />
</div>
25
<nav>
<ul class="list">
<li><a href="[Link]"><h2>Home</h2></a></li>
<li><a href="[Link]"><h2>Top Perfumes</h2></a></li>
<li><a href="[Link]"><h2>Types</h2></a></li>
<li><a href="[Link]"><h2>Review</h2></a></li>
<li><a href="[Link]"><h2>About Us</h2></a></li>
</ul>
</nav>
<div class="search-box">
<input type="text" placeholder="Search perfumes..." />
<button>Search</button>
</div>

</div>
</header>

<!-- Reviews Section -->

<section class="products">
<div class="container">
<h2>Customer Reviews</h2>
<div class="product-grid">
<div class="product-card">
<h3>⭐⭐⭐⭐⭐Excellent Fragrance!</h3>
<p>"This perfume smells amazing and lasts all day. Highly recommended!"</p>
<p><em>- Sarah W.</em></p>
</div>
<div class="product-card">
<h3>⭐⭐⭐⭐ Good but Strong</h3>
<p>"The scent is beautiful but a bit strong for daily wear."</p>
<p><em>- Michael T.</em></p>
</div>
<div class="product-card">
<h3>⭐⭐⭐⭐⭐Perfect Gift!</h3>
<p>"I bought this for my sister and she absolutely loved it. Great packaging and scent."</p>
<p><em>- Emily R.</em></p>
26
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Contact Us</h3>
<p>Email: support@[Link]</p>
<p>Phone: +91 7896547897</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<p><a href="#">Facebook</a> | <a href="#">Instagram</a> | <a href="#">Twitter</a></p>
</div>
</div>
<p class="footer-bottom">&copy; 2025 Azure Breeze. All rights reserved.</p>
</di
v>
</fo
oter>
</body>
</html>

27
 CHAPTER 7

REFERENCES

[1] W3Schools, “HTML & CSS Documentation”

[2] MDN Web Docs, “JavaScript Tutorials”

[3] Dior Official Perfume Site

[4] Gucci Official Perfume Site

[5] Chanel Official Perfume Site

[6] FreeCodeCamp, “Responsive Web Design Tutorials”.

[7] Bootstrap Documentation, “Responsive Layout Concepts”.

28