Learn how to create a beautiful and functional fruit shop landing page using HTML and CSS. This guide covers the basics of web design and provides tips for optimizing user experience.
Table of Contents
Creating a stunning fruit shop landing page is essential for attracting and converting visitors into customers. In today's digital age, having a website is a must for any business, and having a well-designed landing page is crucial for making a great first impression. A landing page is a standalone web page designed to capture a visitor's attention and persuade them to take a specific action, such as making a purchase or signing up for a newsletter.
A fruit shop landing page should be visually appealing and easy to navigate, with clear calls to action and product showcases. A well-designed landing page can increase sales and boost your business's online presence. In this guide, we'll show you how to design a beautiful and functional fruit shop landing page using HTML and CSS, the basic building blocks of web design. By the end of this article, you'll have the knowledge and tools you need to create a stunning fruit shop landing page that will attract and convert visitors into loyal customers.
Let's start making an amazing responsive fruit shop landing page using HTML, and CSS step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our fruit shop landing page.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The code begins with the <!DOCTYPE html> tag that specifies the document type and version of HTML used. The <html lang="en"> tag is used to define the language of the document as English.
Within the <head> tag, the title of the page is set as "Fruit Shop Landing Page" and the character set is defined as UTF-8. The viewport meta tag is used to ensure that the website is rendered correctly on different devices. Additionally, the code includes a link to an external stylesheet named styles.css.
The <body> tag contains the visible content of the web page. It starts with a <header> tag, which contains a company logo and a navigation bar. The company logo is linked to the home-sec section of the page. The navigation bar contains links to different sections of the website, including "ABOUT," "VARIETIES," "OUR SERVICE," and "BENEFITS."
The <main> tag contains the main content of the web page, divided into different sections using the <section> tag. The first section is the home-sec section, which includes an eye-catching image of apples and a text section that describes the company's products. It also includes a button to buy the products.
The second section is the about section, which describes the company's background and expertise in growing and selling apples. The section includes a photo of a man plucking apples from a tree.
The third section is the varieties section, which lists different types of apples sold by the company. Each apple type is presented in a separate tile, with a photo of the apple and a brief description of its taste, size, and when it is available.
This is the basic structure of our fruit shop website using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the fruit shop website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our fruit shop landing page.
The code first imports two fonts, Montserrat and Open Sans, from the Google Fonts API. It then sets the root element to have a font size of 10 pixels, uses the Open Sans font for the body of the website, and sets some other common CSS properties.
The #header section defines the style for the header of the website, which is positioned at the top of the page and is sticky (i.e., stays in place even as the user scrolls down). The header uses the Montserrat font and has a white background with some padding and a box shadow.
The nav section defines the style for the navigation links in the header. These links are aligned to the right of the header and have a font size of 1.6rem. The @media rule specifies that if the screen width is less than 800 pixels, the links should be centered and the font size reduced to 1.4rem.
The flexible, home-sec, eye-grabber, eye-grabber h1, eye-grabber h2, eye-grabber-img, btn, section-heading, and sec-content-div sections define the styles for various other parts of the website, such as the main content section, headings, and buttons.
The @media rules specify how these styles should be adjusted for different screen sizes. For example, if the screen width is less than 800 pixels, the home-sec section should have a flex-flow of column wrap and a maximum width of 100%.
This will give our fruit shop landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,800;1,600&display=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;
} Final Output:
Conclusion:
In today's digital age, having a stunning fruit shop landing page is essential for attracting and converting visitors into customers. A landing page is a powerful tool for any business looking to make a great first impression and increase sales. By following the steps outlined in this guide, you can create a beautiful and functional fruit shop landing page using HTML and CSS.
Remember that the key to a successful landing page is to keep it simple and focused on the user experience. Use clear calls to action, showcase your products, and make it easy for visitors to navigate and find what they're looking for. With the right design and user experience, your fruit shop landing page can increase sales and boost your online presence.
Creating a stunning fruit shop landing page is an ongoing process, and it's important to continually monitor and update your page to ensure it's meeting your business goals. By incorporating user feedback and analyzing your page's performance, you can make informed decisions about how to optimize and improve your landing page over time.
In conclusion, a well-designed fruit shop landing page can be a game-changer for your business. By following the tips and techniques outlined in this guide, you can create a landing page that is not only visually stunning but also effective in converting visitors into customers. Start designing your fruit shop landing page today and watch your business grow!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
