Learn how to design an effective flower shop landing page with HTML and CSS. Attract customers and increase sales with visually appealing web design.
Table of Contents
In today's digital age, having an effective landing page is crucial for the success of any online business, especially for flower shops that rely on e-commerce to sell their products. A well-designed landing page can attract potential customers, increase sales, and establish the brand's reputation.
In this blog post, we will discuss how to create a stunning flower shop landing page with HTML and CSS. HTML and CSS are essential tools for web design and development. HTML (Hypertext Markup Language) is used to create the structure and content of a web page, while CSS (Cascading Style Sheets) is used to design and layout the page.
Designing a landing page requires a good understanding of the target audience, their behavior, preferences, and needs. It also involves choosing an appropriate color scheme, typography, and imagery that represent the brand and its products. The landing page should be optimized for web and mobile viewing and be responsive to different screen sizes.
By following the steps outlined in this blog post, you will be able to create a visually appealing and user-friendly landing page for your flower shop website. The landing page will showcase your products and services effectively, attract potential customers, and increase sales.
So let's get started on designing your very own flower shop landing page with HTML and CSS!
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 flower shop.
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 starts with the usual HTML tags for defining the document type, language, and other meta information such as character encoding and viewport. The title tag inside the head tag sets the page title, and the link tag includes a stylesheet named "styles.css."
The body of the page starts with a header section containing the shop's logo, a toggle menu button for mobile devices, and navigation menus. The navigation menu has four links to different sections of the page. Below the header section, there is a hero section with a title and some introductory text.
The next section is the featured section, which includes an image, a title, some text, and a call-to-action button.
After the featured section, there is another hero section with an image and some text introducing Mom's bouquet, available in three colors.
The following section is for the services provided by the flower shop, which are categorized into three boxes, each with a title and description.
The last section of the page is about popular floral arrangements. It has two rows, each containing an image, a title, and a description of the floral arrangements.
This is the basic structure of our flower shop landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the landing page is in place, the next step is to add styling to the flower shop landing page 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 flower shop.
The stylesheet starts by importing a font from Google Fonts called Raleway with three different weights (300, 500, and 700).
Then, some global styles are defined. The box-sizing property is set to border-box, which means that an element's padding and border are included in its total width and height. The body element has a white background (#ffe9ef), black text (#090b08), and uses the Raleway font with a weight of 300. Headings have various styles defined, such as uppercase text and a font-weight of 700 for h1, uppercase text for h2, and so on.
Other styles include no text decoration for links, no bullets for unordered lists, and padding for section elements. There are also some styles for a title class, a line class, and a button class that use flexbox to align elements and apply hover effects.
The stylesheet then defines styles for the header, including a logo and a menu that toggles when a checkbox input is checked. There are styles for the hero section, which has a background image and some text, as well as the featured section, which includes an image and centered text.
This will give our flower 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/css?family=Raleway:300,500,700');
/* Global */
* {
box-sizing: border-box;
}
body{
color: #090b08;
margin: 0;
font-family: 'Raleway', sans-serif;
font-weight: 300;
background-color: #ffe9ef;
}
h1{
font-size: 1.7em;
font-weight: 700;
line-height: 1.5em;
text-transform: uppercase;
}
h2{
text-transform: uppercase;
}
h4{
font-size: .8em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
}
h6{
font-weight: 500;
}
a{
text-decoration: none;
color: #090b08;
}
ul{
list-style: none;
}
section{
padding: 5.8em 2em 0;
}
.title{
display: flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
padding-bottom: 1em;
}
.title.title-right{
justify-content: flex-end;
}
.line{
width: 3em;
height: 1px;
background-color: #000;
margin-right: 1em;
}
.line.line-right{
order: 2;
margin-right: 0;
margin-left: 1em;
}
.btn{
display: inline-block;
padding: .5em 1.5em;
border: solid 1px #090b08;
transition: all .3s ease-in;
}
.btn:hover, .btn:focus{
transform: translate(0px, -2px);
-webkit-box-shadow: 0px 10px 7px -9px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 7px -9px rgba(0,0,0,0.75);
box-shadow: 0px 10px 7px -9px rgba(0,0,0,0.75);
transition: all .3s ease-out;
}
/* Header */
header{
display: flex;
position: fixed;
width: 100%;
justify-content: space-around;
z-index: 1;
}
header:before{
content: "";
position: absolute;
background-color: #ffe9ef;
width: 100%;
height: 68%;
z-index: -1;
-webkit-box-shadow: 0px 7px 5px 0px rgba(0,0,0,0.22);
-moz-box-shadow: 0px 7px 5px 0px rgba(0,0,0,0.22);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.22);
}
.nav-brand img{
width: auto;
padding-top: 1em;
height: 7.5em;
}
.toggle-menu{
display: block;
font-size: 1.2em;
align-self: center;
cursor: pointer;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:hover ~ .toggle-menu,
input[type="checkbox"]:checked ~ .toggle-menu
{
border-bottom: solid 1px #090b08;
}
input[type="checkbox"]:checked ~ .navbar{
display: flex;
flex-direction: column;
}
.navbar{
display: none;
position: absolute;
width: 100%;
height: 100vh;
background-color: #ffe9ef;
justify-content: space-evenly;
align-items: center;
z-index: -2;
}
.menu{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 4em 0 0;
}
a.nav-link{
margin-right: 0;
}
a.nav-link:hover,
a.nav-link:active,
a.nav-link:focus{
border-bottom: solid 1.8px #090b08;
}
.menu li{
margin-top: 3em;
}
.social-menu{
display: flex;
flex-direction: row;
padding: 0;
}
.social-menu li a{
margin: 0 .5em;
padding: .5em;
}
.social-menu li a{
font-size: 1.2em;
}
.social-menu li a:hover,
.social-menu li a:active,
.social-menu li a:focus
{
border-bottom: solid 1px #000;
}
/* Hero Section */
.hero {
display: flex;
height: 100vh;
align-items: center;
background: #f5d9d6 url("https://i.postimg.cc/9fTzqwtw/flower2.png") no-repeat right bottom;
}
.her{
display: flex;
height: 100vh;
align-items: center;
background-image: url(https://img.onl/Rt8ErD);
}
.hero-img img{
display: none;
}
.hero-text{
padding: 0 2em 7.5em;
}
/* Featured Section */
#featured .image img{
width: 100%;
height: auto;
padding-bottom: 2em;
}
.text{
text-align: center;
padding-top: 1em;
padding-right: 2em;
}
.text p{
text-align: justify;
padding-bottom: 1em;
line-height: 1.4em;
}
/* Collections Section */
.box{
display: block;
position: relative;
padding: 1.3em;
background-color: #f5d9d6;
text-align: center;
margin-bottom: 2em;
}
.box-overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: solid 3px #fff;
transform: translate(8px, 8px);
transition: all 1s ease;
}
.box:last-child{
margin-bottom: 5.8em;
}
.box:hover .box-overlay,
.box:focus .box-overlay
{
transform: translate(0px, 0px) scale(0.92, 0.8);
}
/* */
.row{
clear: both;
margin-bottom: 20px;
margin: 2em 2em auto;
}
.img1{
width: 200px;
height: 200px;
object-fit: cover;
border-radius:50%;
float: right;
shape-outside:circle();
}
.img2{
float: left;
shape-outside:circle();
}
/* About Section */
#about{
background-color: #f5d9d6;
}
#abou{
background-color: #f2c4d1;
padding-bottom: 7em;
padding-top: 2em;
}
section#about{
padding-bottom: 4em;
}
#about .text{
padding-top: 0;
margin-top: 0;
padding-bottom: 1em;
}
#about .text p{
padding-bottom: 0;
text-align: left;
}
.video-wrapper{
position: relative;
padding-bottom: 40.25%; /* 16:9 */
overflow: hidden;
height: 0;
}
.video-wrapper iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.img3{
width: 600px;
height: 300px;
object-fit: cover;
border-radius: 10%;
position: relative;
}
/* Contact Section */
section#contact{
padding: 3em 2em .5em;
}
.form-wrapper:after,
.contact-wrapper:after{
display: block;
content: "";
margin: 2em auto;
border-bottom: solid 1px #dadada;
}
form{
display: flex;
}
form input:first-child{
flex: 1 0 80%;
background-color: transparent;
}
form input:last-child{
flex: 1 0 20%;
border-left: 0;
cursor: pointer;
background-color: #f5d9d6;
transition: all .25s ease;
}
#submit:hover {
background-color: #000;
color: #fff;
transition: all .25s ease;
}
input{
padding: 1em;
border: 1px solid #000;
}
.contact-wrapper .wrapper{
display: flex;
text-align: center;
flex-wrap: wrap;
}
.contact-wrapper .social-menu{
flex: 1 0 100%;
justify-content: center;
}
.contact-wrapper .social-menu li a {
font-size: 1.5em;
padding: 0;
margin: 0 1.5em 0 0;
}
.contact-wrapper a i{
width: 100%;
padding-bottom: .2em;
}
.contact-footer{
padding: 1em 0;
border: 1px solid #000;
}
.contact-footer:last-child{
border-left: 0;
}
.contact-footer:hover{
background-color: #f5d9d6;
}
.contact-tel{
flex: 1 0 50%;
}
.contact-email{
flex: 1 0 50%;
}
.copy-wrapper a{
font-weight: 700;
}
/* Responsive Style */
@media(min-width: 320px){
}
@media(min-width: 576px){
/* Global */
h1{
font-size: 2em;
}
/* Hero Section */
.hero{
background-image: none;
justify-content: center;
overflow: hidden;
padding-top: 1em;
}
.hero-img{
padding-top: 6.5em;
}
.hero-img img{
display: block;
width: 14em;
height: auto;
}
.hero-text{
padding: 0 2em;
}
/* Featured Section */
.text{
margin: 2em 2em auto;
}
/* Collections Section */
#collections .wrapper{
display: flex;
flex-wrap: wrap;
}
.box{
padding: 3.2em;
}
.box1{
flex: 1 0 47%;
margin-right: 1em;
background-image: url(https://img.onl/DgCySD);
}
.box2{
flex: 1 0 47%;
background-image: url(https://img.onl/jxRgPP);
}
.box3{
flex: 2 0 100%;
background-image: url(https://img.onl/DbMd1R);
}
/* About Section */
.video-wrapper{
margin: 0 2em;
}
}
@media(min-width: 768px){
/* Global */
.wrapper{
display: flex;
margin-bottom: 3em;
}
/* Header */
.nav-brand img{
height: 10em;
}
.toggle-menu{
display: none;
}
.navbar{
display: flex;
position: relative;
height: auto;
width: auto;
background-color: transparent;
z-index: 1;
}
.menu{
flex-direction: row;
padding: 0;
justify-content: flex-end;
}
.social-menu{
display: none;
}
.menu li{
margin-top: 0;
}
a.nav-link{
margin-right: 3em;
}
/* Featured Section */
.text{
text-align: left;
margin: 0 0 auto 4em;
}
#featured .text{
flex: 1;
order: 1;
}
#featured .image{
flex: 1 0 12em;
order: 2;
}
/* Collections Section */
#collections .wrapper{
margin: 0 4em;
}
/* About Section */
#about .wrapper{
display: block;
}
#about .text{
margin-right: 4em;
}
.video-wrapper{
margin: auto 5em;
text-align: center;
}
/* Contact Section */
#contact .wrapper{
flex-wrap: wrap;
}
.form-wrapper, .contact-wrapper{
flex: 1 0 50%;
align-self: center;
padding: 0 1em;
}
.copy-wrapper{
flex: 1 0 100%;
padding: 0 1em;
}
.form-wrapper:after,
.contact-wrapper:after{
display: none;
}
.contact-footer{
border: 0;
padding: 0;
margin: .6em auto;
text-align: left;
}
.contact-footer:hover{
background-color: transparent;
}
.contact-wrapper a i{
width: auto;
padding-right: 1em;
}
.contact-wrapper .social-menu{
display: flex;
order: 3;
justify-content: flex-start;
}
.contact-wrapper .social-menu a i{
padding-right: 0;
}
.copy-wrapper:before{
display: block;
content: "";
margin: 2em auto;
border-bottom: solid 1px #dadada;
}
}
@media(min-width: 992px){
/* Global */
section{
padding: 5.8em 7em 0;
}
.title.title-left{
margin-left: -2.5em;
}
.title.title-right{
margin-right: -2.5em;
}
.line{
width: 5.5em;
}
/* Hero Section */
.hero-img img{
width: 14.5em;
}
/* Featured Section */
#featured .image{
margin-top: -2em;
}
/* About Section */
#about .wrapper{
display: flex;
}
#about .text{
flex: 1 0 40%;
margin-right: 1em;
padding-bottom: 0;
}
.video-wrapper{
flex: 2 0 55%;
padding-bottom: 40.25%;
align-self: center;
margin: 1.4em 0;
margin-left: 10em;
}
.contact-tel{
flex-basis: 20%;
}
}
@media(min-width: 1200px){
/* Global */
h1{
font-size: 2.4em;
}
section{
padding: 5.8em 11em 0;
}
/* Hero Section */
.hero-img img{
width: 15.5em;
}
/* Featured Section */
#featured .image{
margin-top: -4em;
}
/* About Section */
#about .text{
padding-right: 3em;
padding-bottom: 0;
}
.video-wrapper{
margin: 0;
}
.hero-img{
width: 18.5em;
}
} Final Output:
Conclusion:
In conclusion, designing a flower shop landing page with HTML and CSS requires careful planning and execution to create a visually appealing and user-friendly web page. By understanding your target audience, analyzing their behavior and preferences, and using this information to design the layout, color scheme, typography, and imagery of the landing page, you can create a page that effectively showcases your products and services.
Additionally, making the landing page responsive to different screen sizes and optimizing the content and imagery for web and mobile viewing will ensure that your page is accessible and visually appealing on all devices. Testing and optimization are crucial steps in the process to ensure that the landing page is effective in attracting potential customers and increasing sales.
By following the steps outlined in this blog post, you can design and develop a stunning flower shop landing page with HTML and CSS that meets the needs of your target audience, establishes your brand's reputation, and drives e-commerce sales. Remember to continuously monitor and update your landing page to ensure that it remains relevant and effective. Thank you for reading, and we hope this blog post has been helpful in creating your very own flower shop landing page!
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 😊
