Learn how to create a responsive product landing page with HTML and CSS that can boost your sales. Follow our best practices and tips for an effective design.
Table of Contents
Welcome to our tutorial on how to boost your sales with a responsive HTML and CSS product landing page. A product landing page is a standalone web page, created specifically for the purpose of promoting and selling a single product. It's an essential part of any e-commerce website, as it provides all the information a potential customer needs to make a purchase decision.
One of the key factors in the success of a product landing page is its responsiveness. With the proliferation of mobile devices, it's crucial that your page looks and functions just as well on a smartphone as it does on a desktop computer. That's where HTML and CSS come in. HTML (HyperText Markup Language) is the standard markup language for creating web pages, and CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML. Together, these technologies allow you to create a professional, mobile-friendly product landing page that will engage and convert your visitors.
In this tutorial, we'll show you how to use HTML and CSS to build a responsive product landing page that will help you increase your sales. We'll cover everything from layout and design to functionality and optimization.
Let's start making an amazing product landing page Using HTML, and CSS step by step.
Design and Created by: Ann
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 HTML code for a product landing page. The HTML <!DOCTYPE html> declaration indicates that this is an HTML5 document. The <html> element represents the root of an HTML document. The lang attribute on the <html> element specifies the language of the document.
The <head> element contains metadata about the document, such as the title and any external stylesheets or scripts. The <title> element specifies the title of the page, which is displayed in the browser's title bar or tab. The <meta> element with a charset attribute specifies the character encoding for the document, and the <meta> element with a viewport attribute specifies the width of the viewport, which is the area of the browser window that is used to display the webpage.
The <body> element contains the content of the webpage. The <header> element represents a group of introductory or navigational aids, and the <main> element represents the main content of the webpage. The <footer> element represents a footer for the webpage.
Other common HTML elements that you might see in a product landing page include <h1> (level 1 heading), <p> (paragraph), <img> (image), <ul> (unordered list), <li> (list item), <div> (division or section), <form> (form), <input> (form input), <button> (button), and <a> (hyperlink).
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
I hope that helps to clarify the HTML code! Let me know if you have any further questions.
Step 2 (CSS Code):
Next, we will create our CSS file. This CSS code styles and layouts the elements of a responsive product landing page. In this file, we will use some basic CSS rules to create our product landing page. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our product 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: 500;
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;
}
.hero-img img{
display: none;
}
.hero-text{
padding: 0 2em 7.5em;
}
/* Featured Section */
#featured .image img{
width: 100%;
height: auto;
}
.text{
text-align: center;
padding-top: 1em;
}
.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);
}
/* About Section */
#about{
background-color: #f5d9d6;
}
section#about{
padding-bottom: 5.8em;
}
#about .text{
padding-top: 0;
margin-top: 0;
padding-bottom: 2em;
}
#about .text p{
padding-bottom: 0;
text-align: left;
}
.video-wrapper{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
overflow: hidden;
height: 0;
}
.video-wrapper iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/* 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;
}
.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;
}
.box2{
flex: 1 0 47%;
}
.box3{
flex: 2 0 100%;
}
/* About Section */
.video-wrapper{
margin: 0 2em;
}
}
@media(min-width: 768px){
/* Global */
.wrapper{
display: flex;
}
/* 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 4em;
}
/* 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.contact-footer:hover i{
}
.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: 33.25%;
align-self: center;
margin: 1.4em 0;
}
.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;
}
} Final Output:
Conclusion:
In conclusion, a well-designed, responsive product landing page can significantly boost your online sales. By following the best practices and tips outlined in this blog post, you can create a landing page that effectively communicates your product's value proposition and enhances the user experience. Remember to keep it simple, optimize for conversions, and consider the user experience to create a landing page that drives sales and grows your customer base. With these insights, you can start designing a landing page that effectively promotes your product and generates more revenue.
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 😊
