CSE CYBERSECURITY

FRUIT SHOP LANDING WEBPAGE

23ITR201 & FUNDAMENTALS OF WEB DESIGN

MINI PROJECT
REPORT

Name : Kavinkumar N

Roll No : 717823Y119

TABLE OF CONTENTS
 ABSTRACT 3

1. INTRODUCTION 4

1.1. Objective 5

2. REQUIREMENTS SPECIFICATION

2.1. Requirements

3. DETAILED DESIGN

4. PROJECT IMPLEMENTATION

5.CONCLUSION

ABSTRACT
The HTML document includes a document type declaration specifying HTML5, a head section
containing metadata such as character set, viewport settings, and links to an external CSS file, and a
body section containing the main content of the webpage.
Within the body:
- Navigation bar (nav-bar) section includes the company logo and menu links for ABOUT,
VARIETIES, OUR SERVICE, and CONTACT.

- Banner section (home-sec) showcases a captivating image of apples from Kashmir with
accompanying text highlighting their freshness and organic nature.

- About section (about) provides detailed information about the company's expertise in apple
cultivation, emphasizing the unique qualities of Kashmiri apples.

- Varieties section (varieties) presents various types of apples grown by the company, each
accompanied by a description of its characteristics and ripening period.

- Our Service section (our-service) outlines the company's commitment to delivering fresh apples
promptly and ensuring customer satisfaction.

- Benefits section (benefits) features a video highlighting the health benefits of apples, embedded
via an iframe element.

- Contact section (contact) offers a form for users to make inquiries or place orders, promoting
seamless communication with the company.

The HTML code provides the structural foundation for a Fruit Shop Landing Page, effectively
organizing information about the company, its products, services, and contact options, enhancing user
engagement and facilitating interaction.

1.INTRODUCTION
1.1Objective
Our objective is to craft an engaging and seamless user experience for visitors to our Fruit Shop
Landing Page. To accomplish this, we will focus on the following aspects:

1. Navigation: Implement a user-friendly navigation bar (nav-bar) that provides easy access
to different sections of the website, including ABOUT, VARIETIES, OUR SERVICE, and
CONTACT, ensuring effortless exploration of our offerings.

2. Featured Products: Showcase our diverse range of apple varieties prominently on the
homepage (home-sec) with captivating imagery and concise descriptions, enticing visitors to
explore the unique qualities of Kashmiri apples.

3. Footer Links: Include quick links in the footer section to essential pages such as offers &
discounts, contact information, and support resources, facilitating convenient access to important
information from any page.

4. Responsive Design: Ensure the webpage is designed responsively (using CSS) to deliver a
consistent and optimized viewing experience across various devices and screen sizes, enhancing
accessibility and user satisfaction.

5. Engagement: Capture user interest through compelling content, including vivid

descriptions of our products, clear pricing information, and a visually appealing layout,
encouraging visitors to learn more about our offerings and make purchases.

6. Promotion: Highlight the benefits of our products and services, such as freshness, fast
delivery, and customer satisfaction guarantees, to promote engagement and encourage users to
explore further, ultimately leading to increased sales and customer retention.
2. REQUIREMENTS SPECIFICATION
2.1. Requirements

1. **HTML Structure**: Develop the HTML structure for the webpage following modern standards
and best practices, ensuring semantic markup and proper organization of content.

2. **Navigation Bar**: Implement a navigation bar (nav-bar) with links to various sections of the
website, including home, about, varieties, our service, and contact, facilitating easy navigation for users.

3. **Banner Section**: Design a visually appealing banner section (home-sec) featuring a call-to-
action prompting users to explore the website and a form for inputting preferences for booking apple
varieties.

4. **Featured Varieties Section**: Create a section showcasing featured apple varieties with
captivating images, variety names, descriptions, and origin details, enticing visitors to learn more about
each variety.

5. **Footer Section**: Develop a footer section containing quick links to important pages such as
offers & discounts, contact information, and support resources, enhancing user accessibility and
navigation.

6. **Responsive Design**: Ensure the webpage is responsive and mobile-friendly, utilizing CSS
media queries to provide an optimal viewing experience across various devices and screen sizes.

7. **External CSS**: Utilize an external CSS file (styles.css) to style the webpage elements
consistently and enhance its visual appeal, adhering to modern design principles.

8. **Image Optimization**: Optimize images for web use to improve page loading times and
overall performance, ensuring efficient delivery of visual content to users.

9. **Accessibility**: Ensure the webpage adheres to accessibility standards, implementing

appropriate HTML attributes and providing alternative text for images to make the content accessible to
individuals with disabilities.

10. **Cross-Browser Compatibility**: Test the webpage across different web browsers (e.g.,
Chrome, Firefox, Safari) to ensure compatibility and consistent display, enhancing user experience
across various platforms.
11. **SEO Considerations**: Implement basic SEO practices such as using descriptive titles, meta
tags, and relevant keywords to improve search engine visibility and increase organic traffic to the
website.
12. **Validation**: Validate the HTML code using appropriate tools to ensure compliance with
W3C standards and identify any syntax errors, ensuring the integrity and reliability of the webpage's
codebase.

3. DETAILED DESIGN
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Shop Landing Page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header id="header">
<div class="header-content-div">
<a href="#home-sec">
<img
src="https://i.ibb.co/KsztxWq/logo1.png"
alt="Company Logo" id="header-img"
/></a>
<nav id="nav-bar">
<a href="#about" class="nav-link">ABOUT</a>
<a href="#varieties" class="nav-link">VARIETIES</a>
<a href="#our-service" class="nav-link">OUR SERVICE</a>
<a href="#benefits" class="nav-link">BENEFITS</a>
</nav>
</div>
</header>
<main>
<section id="home-sec" class="flexible home-sec">
<div class="eye-grabber-img">
<img src="https://i.ibb.co/T4czpqY/apples-red-fresh-mellow-juicy-perfect-whole-on-
whitedesk.jpg" alt="Image of Apples" />
</div>
<div class="eye-grabber">
<h1>Fresh, Crispy, Heavenly.</h1>
<h2>
 100% Organic, vivid varieties of apples grown in Kashmir aka The
Heaven of Earth.
</h2>
<button class="btn" onclick="window.location.href = '#contact';">
Buy Now
</button>
</div>
</section>
<section id="about" class="sec-padding">
<h3 class="section-heading">ABOUT US</h3>
<div class="sec-content-div flexible">
<p>
We are a group of people with decades of experience in growing and
selling apples. We know what a good apple looks like and how they
are grown. This essential fruit requires a temperate climate, loamy
soil that is rich in organic matter apart from needing proper drainage
and aeration facilities. Lucky for us we live in Kashmir which is
proudly known as paradise of earth is also home to temperate fruits
like apple for which the state is very famous across globe. The main
factor which influence temperate fruit bearing trees is soil, climate
and environment which are highly favorable and unparalleled in the
province of Kashmir. Kashmiri apples a unique look, taste, flavor,
size and color. </p>
<img src="https://i.ibb.co/SyKVC8M/about-img.jpg" alt="A man plucking apples from the
tree" />
</div>
</section>
<section id="varieties" class="sec-padding">
<h3 class="section-heading">VARIETIES</h3>
<div class="sec-content-div flexible">
<div class="tile">
<img src="https://i.ibb.co/t2x706V/amber.jpg" alt="photo of amber apples" />
<h4>Amber</h4>
<p>
This red, medium-sized fruit becomes fully ripe in mid-October. It
is mostly grown in Shopian and Kulgam.
</p>
</div>
<div class="tile">
<img
src="https://i.ibb.co/H4Cnh7v/american-trel.png"
alt="photo of american trel apples"
/>
<h4>American Trel</h4>
 <p>
A small, rounded, very crispy and sweet fruit variety that ripens
in mid-September.
</p>
</div>
<div class="tile">
<img src="https://i.ibb.co/jTDgqYB/red-delicious.png" alt="photo of red delicious apple" />
<h4>Red Delicious</h4>
<p>
A very popular and widely cultivated variety of apple that ripens
in mid-September. Its flesh is greenish white, grainy and juicy. </p>
</div>
<div class="tile">
<img src="https://i.ibb.co/MSvg1QN/maharaja.png" alt="photo of Maharaej apples" />
<h4>Maharaej</h4>
<p>
A large apple with red and green color. It tastes a bit sour but
sweetens with time and is available by late October. </p>
</div>
<div class="tile">
<img src="https://i.ibb.co/zVR1LB2/hazal.png/" alt="photo of Hazratbael apples" />
<h4>Hazratbael</h4>
<p>
A quickly perishable variety that ripens in early July. It is the
oldest variety of apples cultivated in the valley and is mostly
consumed domestically
</p>
</div>
<div class="tile">
<img src="https://i.ibb.co/BNFrnZn/golden.png" alt="photo of Golden Delicious apples" />
<h4>Golden Delicious</h4>
<p>
A variety with comparatively longer shelf life, it is crispy,
juicy and has thick greenish-white flesh which turns golden upon
ripening. It is available till January.
</p>
</div>
</div>
</section>
<section id="our-service" class="sec-padding">
<h3 class="section-heading">OUR SERVICE</h3>
<div class="sec-content-div">
<div class="bars">
<div class="icon-container">
 <img src="https://i.ibb.co/w6H542X/Fresh.png" alt="" />
</div>
<div class="txt-container">
<h5>Fresh</h5>
<p>We deliver fresh apples with a 100% guarantee of freshness.</p>
</div>
</div>
<div class="bars">
<div class="icon-container">
<img src="https://i.ibb.co/FKNq4Qr/delivered.png" alt="" />
</div>
<div class="txt-container">
<h5>Fast</h5>
<p>
We deliver your orders as fast as possible, delivery procedure
begins as soon as apple is plucked from tree.
</p>
</div>
</div>
<div class="bars">
<div class="icon-container">
<img src="https://i.ibb.co/HHQK1wV/happy.png" alt="" />
</div>
<div class="txt-container">
<h5>Satisfying</h5>
<p>
We guarantee 100% customer satisfaction. We do our best to make
your purchase experience smooth. But if we mess up somehow you
will get compensated for every inconvenience. </p>
</div>
</div>
</div>
</section>
<section id="benefits" class="sec-padding">
<h3 class="section-heading">BENEFITS</h3>
<div class="sec-content-div flexible">
<iframe
id="video"
width="560"
title="Benefits of Apple"
height="315"
src="https://www.youtube.com/embed/W_JOJNztrnI"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-
inpicture"
 allowfullscreen
></iframe>
</div>
</section>
<section class="sec-padding" id="contact">
<h3 class="section-heading">CONTACT</h3>
<div class="sec-content-div flexible">
<h6>To make an order or just to know more contact us :</h6>
<form
id="form"
action=" "
method="POST"
>
<input
type="email"
name="email"
id="email"
placeholder="Your Email Address"
required />
<input type="submit" class="btn" id="submit" value="Know More" />
</form>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>

CSS CODE :
@import
url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,800;1,600&di
splay=swap"); @import
url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
:root { font-
size: 10px;
font-family: "Open Sans", sans-serif;
margin: 0; padding: 0; box-sizing:
border-box; scroll-behavior: smooth;
} body
{ margin:
0; padding:
0; } #header
{
 height: max-content;
font-family: "Montserrat", sans-serif;
width: 100%;
background-color: white;
padding: 1rem 0;
position: sticky; z-index:
99; top: 0; left: 0;
box-shadow: 0 6px 31px -2px rgba(0, 0, 0, 0.1);
}
@media (max-width: 800px) {
#header { text-align: center;
height: auto;
}
} .header-content-div
{ max-width:
95rem; width: auto;
margin: 0 auto;
}
@media (max-width: 991px) { .header-content-
div {
max-width: 75rem;
}
}
#header-img
{ height: 5rem;
width: auto;
}
@media (max-width: 800px) {
#header-img { height: 4rem;
} } nav
{ position:
relative; top:
0.8rem; float:
right; font-size:
1.6rem; font-
weight: 500;
padding: 1.5rem
0; }
@media (max-width: 800px) {
nav { position: static;
float: none; font-size:
1.4rem;
padding: 0.5rem 1rem;
}
} .nav-link { text-
decoration: none;
color: #333; margin:
0 0.5rem; padding: 0
0.6rem; transition:
border-bottom 0.2s;
}
@media (max-width: 475px) {
.nav-link
{ margin: 0
0.2rem; padding: 0
0.2rem; font-size:
1.2rem;
}
} .nav-link:hover { color:
#e23d3d; border-bottom: 2px solid
#e23d3d;
} .nav-link:active
{ color:
#f84848; } .flexible
{ display: flex; flex-
flow: row wrap;
justify-content: center;
align-content: center;
text-align: center; }
.home-sec { font-family:
"Montserrat", sans-serif;
background-color: #ffffff; text-align:
start; min-height: 60rem; height:
auto; margin: 0 auto 5rem auto;
justify-content: start;
max-width: 95rem; color:
#333;
}
@media (max-width: 800px) {
.home-sec { flex-flow:
column wrap;
max-width: 100%;
}
} .eye-grabber
{ flex: 1;
padding: 0 2rem;
}
@media (max-width: 800px) {
 .eye-grabber { max-width:
max-content; padding-
bottom: 8rem;
}
}
.eye-grabber h1 { font-
size: 5rem; line-height:
1.5; font-weight: 600;
}
.eye-grabber h2 { font-
size: 2.4rem; font-
weight: 500; color:
#666;
}
.eye-grabber-img {
flex: 1;
}
@media (max-width: 800px) { .eye-grabber-
img {
width: 100%;
}
}
.eye-grabber-img img { max-
width: 100%;
} .btn { border: none; font-
size: 2rem; border-radius:
0.4rem; padding: 2rem;
background-color: #e23d3d;
color: #fafafa;
outline: 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.2s;
}

.btn:hover {
background-color: #f84848;
cursor: pointer; }
.btn:active
{ transform:
scale(0.9);
}
.section-heading { font-
size: 2.5rem;
 font-family: "Montserrat", sans-serif; font-
weight: 500;
line-height: 1.2;
margin: 0; padding:
5rem 0 5rem 0; text-
align: center;
}
.sec-content-div { font-size:
2rem; text-align: start;
padding: 0 2rem 5rem 2rem;
width: auto;
justify-content: space-around;
max-width: 95rem; margin: 0
auto;
}
.sec-padding {
padding: 8rem 0 10rem 0;
} #about
{
background-color: #fafafa;
}
#about img { max-width:
100%; height: auto;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 6px 31px -2px rgba(0, 0, 0, 0.1);
} #varieties
{
background-color: #e3e3e3;
}
.tile {
background-color: #fafafa;
height: 40rem; width:
25rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 0.5rem; transition: all 0.2s; padding: 1.5rem; margin:
1.5rem;
}
@media (max-width: 680px) {
.tile {
width: auto; max-
width: 100%; min-
width: 20rem; margin:
1.5rem auto; height: auto;
}
}
.tile img { width:
100%; max-width:
48rem; border-radius:
0.5rem;
} .tile h4 { font-
size: 2rem; font-
weight: 600;
padding: 1rem 0;
color: #e23d3d;
margin: 0; }
.tile p { font-size:
1.6rem; padding:
0; margin: 0; }
.tile:hover
{ transform:
scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.19), 0 16px 16px rgba(0, 0, 0, 0.23); }
#our-service {
background-color: #ee6f57;
} .bars { height: max-content;
display: flex; flex-flow: row
wrap; justify-content: space-
between; align-content: flex-
start; margin: 2rem; width:
100%;
}
@media (max-width: 990px) {
.bars {
flex-flow: column wrap;
}
.icon-container
{ margin: 0 2.5rem;
}
}
.bars .icon-container {
max-width: 10rem;
flex: 1;
}
.icon-container img { max-
height: 100%; max-width:
100%;
}
.bars .txt-container {
flex: 2; padding:
3rem;
}
.txt-container h5
{ font-size: 4rem;
font-weight: 500;
padding: 0; margin:
0;
font-family: "Montserrat", sans-serif;
}
.txt-container p { font-
size: 2.3rem;
} #benefits
{
background-color: #f84848;
}
#benefits iframe
{ outline: 0; border:
none; width:100%;
border-radius: 0.4rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.19), 0 16px 16px rgba(0, 0, 0, 0.23);
} #contact {
background-color: #cb3737;
color: #fafafa;
}
#contact h6 { font-
size: 3rem; font-
weight: 500;
} input[type="email"] {
border: none; outline:
0; font-size: 2rem;
border-radius: 0.4rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding: 2rem;
}
@media (max-width: 520px) {
#contact h6 { font-size:
2rem;
}
#contact input[type="submit"],
#contact input[type="email"]
{ margin: 1rem 1rem 0 1rem;
} } footer { font-size:
1.4rem; background-color:
#ce2f2f; text-align: center;
padding: 2rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fafafa;
} footer a { color:
#e3e3e3; text-
decoration: none;
}

4.PROJECT IMPLEMENTATION
4.CONCLUSION
The provided HTML and CSS code successfully implements a dynamic and visually engaging Fruit
Shop Landing Page. It effectively organizes content with clear navigation, engaging banner sections,
informative varieties showcase, and convenient footer links. Leveraging HTML5 semantic tags
enhances accessibility and SEO while CSS styling ensures a visually appealing layout and
responsiveness across devices.

While the code serves as a solid foundation, there are opportunities for further enhancements. These
include refining accessibility features, optimizing for SEO, and conducting thorough cross-browser
testing to ensure compatibility across various platforms. Overall, the code lays a strong groundwork for
creating an immersive and user-friendly online platform for showcasing premium Kashmiri apple
products.