Group: G31

FLORAFIESTA
(Product Landing Page- Bouquets)

A MINI PROJECT REPORT

Submitted by
Group:

ANVI PURI, 2410993123,

ARSHIYA KHULLAR, 2410993130,
AARYAMAN PRATAP SINGH,
2410333086

in partial fulfillment for the award of the

degree of

BACHELEOR OF ENGINEERING
in

CSE-AI

CHITKARA UNIVERSITY
CHANDIGARH-PATIALA NATIONAL HIGHWAY
RAJPURA (PATIALA) PUNJAB-140401 (INDIA)
SEPTEMBER, 2024

Front End Engineering-I 24CSE0102

 Group: G31

ABSTRACT
Overview:

FLORAFIESTA is a product landing page for a bouquet shop, designed to engage

visitors and drive purchases through effective user experience.

Challenges Addressed:

 Responsive Design: Utilized Flexbox and min-height for optimal readability across
various devices.
 Navigation: Enhanced font sizes and colour contrast for clarity.
 Aesthetic Appeal: Chose a cohesive colour palette and inviting backgrounds.
 Accessibility: Varied font sizes and applied colour coding.

Methodology:

Leveraged CSS, Flexbox, and a clear navbar design to create an adaptive and user-friendly
layout.

Key Features:

 Responsive layout
 Scalable font sizes
 Clear and optimized navigation
 Consistent aesthetics

Conclusions:

The project successfully improves user experience through responsive design.

Recommendations for future work include user testing for further enhancements.

Takeaways:

Key insights include the importance of design flexibility, aesthetic impact, and
consistency.

Front End Engineering-I 24CSE0102

 Group: G31

TABLE OF CONTENTS

Sr.no Section Page

no
1. Introduction 3

2. Problem 3
Statement

3. Technical Details 4

4. Key Features 5

5. Project 6
Highlights

6. Results 6-15

7. Conclusion 16

8. References/Links 17
used

Front End Engineering-I 24CSE0102

 Group: G31

1.1 INTRODUCTION

THE TITLE OF OUR PROJECT IS “PRODUCT LANDING PAGE”

AND THE NAME OF OUR PAGE IS “FLORAFIESTA” WHICH IS A
BOUQUET (PRODUCT) SHOP PAGE.

THE PURPOSE OF A PRODUCT LANDING PAGE IS TO

CAPTIVATE VISITORS, GENERATE INTERESTS AND
ULTIMATELY DRIVE THEM TOWRADS MAKING PURCHASE.
ITS GOAL IS TO CONVERT VISITORS INTO CUSTOMERS BY
EFFECTIVELY COMMUNICATING THE PRODUCT’S UNIQUE
SELLING POINT AND PROVIDING A USER EXPERIENCE THAT
ENCOURAGES THEM TO BUY THE PRODUCT.

THE TEAM MEMBERS ARE:

ANVI PURI
ARSHIYA KHULLAR
AARYAMAN PRATAP SINGH

1.2 PROBLEM STATEMENTS

FOLLOWING LISTED ARE THE AREAS THAT THE PROJECT

AIMS TO SOLVE:

1.2.1 RESPONSIVE DESIGN – MANY USERS ACCESS

WEBSITE FROM DEVICES OF VARYING SCREEN SIZES
(MOBILES, TABLETS, DESKTOPS), WE MADE THIS
INTERFACE USING “flexbox” AND BY SETTING “min-
height” (ALLOWS SECTION TO FILL VIEWPORT,
ENHANCING READABILITY ON DIFFERENT DEVICES).

1.2.2 NAVIGATION – TEXT CAN BE HARD TO READ IF

COLORS AND SIZES ARE NOT PROPERLY CHOSEN, SO
WE HAVE SET THE FONT SIZES WITH REM UNITS
AND ADEQUATE COLOR CONTRASTS.

1.2.3 AESTHETIC APPEAL – BACKGROUND IMAGES AND

COLORS ARE CHOSEN TO CREATE AN INVITING
ATMOSPHERE.

Front End Engineering-I 24CSE0102

 Group: G31

1.2.4 READABILITY AND ACCESSIBLITY – COLOR

CODING AND VARIES FONT SIZES.

1.2.5 BACKGROUND INFORMATION AND RESEARCHES:

1) RESPONSIVE WEB DESIGN PRINCIPLES
2) USER EXPERIENCE
3) ACCESSIBILITY STANDARDS
4) VISUAL DESIGN AND COLOR THEORY

1.3 TECHNICAL DETAILS

BRIEF OVERVIEW OF THE TECHNOLOGIES AND

METHODS USED ARE:

1.3.1 CSS – CASCADING STYLE SHEETS

1.3.2 DESIGN PRINCIPLE – FLEXBOX LAYOUT

(display: flex) VIEWPORT UNITS (INCLUDE height
AND width)

1.3.3 BOX MODEL – BOX SIZING (box sizing: border-

box;)

1.3.4 FONT FAMILY – FONTS USED (Georgia, Times

New Roman, Comic Sans MS, Aboreto, Verdana,
Geneva, Tahoma) FONT SIZE (font-size:)

1.3.5 NAVIGATION DESIGN - NAVBAR STYLES

1.3.6 BACKGROUND AND VISUAL EFFECTS –

BACKGROUND IMAGES

1.4 KEY FEATURES

Front End Engineering-I 24CSE0102

 Group: G31

1.4.1 FLEXBOX – USING display:flex; ON BODY AND

SECTIONS ALLOWS FOR FLEXIBLE AND
ADAPTIVE LAYOUT THAT ADJUSTS TO
VARIOUS SCREEN SIZES.

1.4.2 FONT SIZING – THE ROOT FONT SIZE ALLOWS

FOR EASIER SCALING WITH rem UNITS
THROUGHOUT CSS.

1.4.3 NAVBAR DESIGN – THIS DIRECTLY

ADDRESSES THE ISSUE OF USER FINDING IT
DIFFICULT TO NAVIGATE THE WEBSITE.

1.4.4 COLOR SCHEME – CAREFUL SELECTION OF

COLORS IMPROVES READABILITY AND
GUIDING USERS THROUGH CONTENT
EFFECTIVELY.

1.4.5 BACKGROUND AND VISUAL EFFECTS –

BACKGROUND IMAGES.

1.4.6 UNIVERSAL SELECTOR – (*) RESETS

MARGINS AND PADDING, ENSURING
CONSISTENCY ACROSS ALL THE ELEMENTS.

1.4.7 TEXT CONTRAST – BY USING CONTRASTING

COLORS OFR TEXT AND BACKGROUND AND
MAINTAINING SUFFICIENT PADDING.

1.5 PROJECT HIGHLIGHTS

FOLLOWING ARE THE CODE SNIPPETS AND THEIR

RESPECTIVE RESULTS HIGHLIGHTING THE GRADUAL
PROGRESS OF THE PROJECT:

MAKING OF HOME PAGE:

CODE SNIPPET 1:
MAKING THE NAV BAR AND ADDING LOGO

Front End Engineering-I 24CSE0102

 Group: G31

RESULT 1:

Front End Engineering-I 24CSE0102

 Group: G31

CODE SNIPPET 2:
ADDING LINKS AND SIGN UP OPTIONS ON NAV BAR

RESULT 2:

Front End Engineering-I 24CSE0102

 Group: G31

CODE SNIPPET 3:
ADDING A BACKGROUND IMAGE:

RESULT 3:

CODE SNIPPET 4:
ADDING TEXT ON OUR HOME
PAGE

Front End Engineering-I 24CSE0102

 Group: G31

RESULT 4:

CODE SNIPPET 5:
ENABLING NAV HOVER

RESULT 5:

Front End Engineering-I 24CSE0102

 Group: G31

MAKING OF PRODUCT PAGE:

CODE SNIPPET 6:
MAKING THE NAV BAR:

Front End Engineering-I 24CSE0102

 Group: G31

RESULT 6:

CODE SNIPPET 7:
ADDING LINKS TO NAV BAR:

Front End Engineering-I 24CSE0102

 Group: G31

RESULT
7:

CODE SNIPPET 8:
ADDING A BACKGROUND IMAGE:

Front End Engineering-I 24CSE0102

 Group: G31

RESULT 8:

CODE SNIPPET 9:
ADDING TEXT :

RESULT 9:

Front End Engineering-I 24CSE0102

 Group: G31

CODE SNIPPET 10:

ADDING AND STYLING THE PRODUCT PLACARD AND SHOP
BUTTON:

Front End Engineering-I 24CSE0102

 Group: G31

RESULT 10:

1.7 CONCLUSION

THE KEY POINTS OF THE PROJECT ARE:

1.7.1 RESPONSIVE LAYOUT – THE USE OF FLEXBOX.

1.7.2 ROOT FONT SIZE – ENABLES A FLEXIBLE AND

ADAPTIVE DESIGN THAT ADJUSTS OVER
DIFFERENT SCREENS.

1.7.3 CLEAR NAVIGATION – THE NAVBAR IS STYLED

FOR CLARITY AND VISIBILITY.

1.7.4 AESTHETICS – FONT SIZES AND COLOR

CONTRATS.

1.7.5 STYLING – A UNIVERSAL SELECTOR RESETS

MARGINGS AND PADDINGS AND AVOIDS

Front End Engineering-I 24CSE0102

 Group: G31

LAYOUT INCONSISTENCIES.

1.7.6 BACKGROUND MANAGEMENT.

THE TEAM’S MAIN TAKEAWAYS FROM THE EXPERIENCE ARE:

1) LEARNING IMPORTANCE OF FLEXIBILITY.
2) AESTHETIC CONSIDERATIONS MATTER.
3) LEARNING CONSISTENT STYLING.
4) LEARNING DESIGN PRINCIPLES.

1.8 REFERENCES AND LINKS USED

1. MDN WEB DOCS:

THE MODZILLA DEVELOPER NETWORK OFFERS
COMPREHENSIVE DOCUMENTATION FOR HTML,
CSS, AND JAVASCRIPT.

2. TOOLS:
 VISUAL STUDIO CODE:

A POPULAR CODE EDITOR WITH NUMEROUS

EXTENSIONS FOR WEB DEVELOPMENT.

 GITHUB REPOSITORIES:

Front End Engineering-I 24CSE0102

 Group: G31

EXPLORE GITHUB FOR OPEN-SOURCE PROJECTS

RELATED TO PRODUCT LANDING PAGE TO GAIN
INSIGHTS OR INSPIRATION.

THESE RESOURCES WILL EQUIP YOU WITH THE

KNOWLEDGE AND TOOLS NEEDED TO SUCCESSFULLY
DEVELOP YOUR PRODUCT LANDING PAGE.

Front End Engineering-I 24CSE0102

 Group: G31

Front End Engineering-I 24CSE0102

 Group: G31

Front End Engineering-I 24CSE0102

 Group: G31

Front End Engineering-I 24CSE0102