Hey everyone hope you all of fine, todday we are going to learn how to create a responsive landing page using HTML and CSS from scratch. I’ve made the complete video tutorial and also I’m going to share with you the source code of the project.
A landing page is a crucial component of any website or online business. It is the first page that users see when they visit your website, and it can determine whether they stay or leave. A well-designed landing page should be visually appealing, easy to navigate, and most importantly, responsive. In this article, we will discuss how to create a responsive landing page using HTML and CSS.
Why a Responsive Landing Page is Important?
With the increasing number of mobile users, it’s important to create a website that is responsive and mobile-friendly. In fact, Google’s mobile-first indexing means that websites that are not mobile-friendly are likely to rank lower in search engine results pages. Therefore, creating a responsive landing page ensures that your website is accessible to a wider range of users, leading to better engagement and higher conversion rates.
Responsive Landing Page Using HTML and CSS
let’s look at that steps we need to follow on it to create a responsive landing page, basically, when you will design landing page you’ve an ideas about it. Then you will able to design the the professional layouts.
Step 1: Plan your layout
Before you start coding, it’s essential to plan your layout. Consider the elements you want to include on your landing page, such as the header, footer, content, and call-to-action. Sketch out a wireframe or use a prototyping tool to visualize the layout.
Step 2: Set up your HTML structure
Start by creating an HTML document and setting up the basic structure. The structure typically includes the doctype declaration, HTML, head, and body tags. In the head section, you can add the title, meta tags, and links to external files, such as stylesheets and scripts.
Step 3: Create the header
The header is typically the first thing users see when they visit your landing page. It should be visually appealing and include your logo, navigation menu, and any important information, such as your tagline or value proposition.
To create a responsive header, use CSS media queries to adjust the layout based on screen size. For example, you can use a flexbox layout for larger screens and switch to a hamburger menu for smaller screens.
Step 4: Design the hero section
The hero section is the main area of your landing page and should grab the user’s attention. It typically includes a headline, subheadline, and a call-to-action button.
To make the hero section responsive, use CSS to adjust the font size, spacing, and layout based on screen size. You can also use background images and videos to enhance the visual appeal.
Step 5: Add content sections
The content sections should provide more information about your product or service. Consider breaking up the content into smaller sections and using images, icons, or videos to make it more visually appealing.
To create responsive content sections, use CSS to adjust the layout based on screen size. For example, you can use a grid layout for larger screens and switch to a stacked layout for smaller screens.
Step 6: Include social proof
Social proof, such as testimonials or customer reviews, can help build trust and credibility. Consider including social proof on your landing page to increase conversions.
You May Also Like:
- How to Create a Coming Soon Website in HTML CSS and JavaScript
- How to Make a Portfolio Website Using HTML and CSS
- Simple Website Using HTML and CSS with Source code
- How to Upload HTML Website on Cpanel
- HTML CSS Projects for Beginners
To make social proof responsive, use CSS to adjust the layout and font size based on screen size. You can also use a slider or carousel to display multiple testimonials or reviews.
Step 7: Design the footer
The footer should include important information, such as your contact details, copyright notice, and links to your social media profiles.To create a responsive footer, use CSS to adjust the layout based on screen size. You can also use a sticky footer to keep it visible at all times.
Step 8: Test your landing page
Before launching your landing page, test it on different devices and screen sizes to ensure that it is responsive and looks good on all devices. You can use tools such as Google’s Mobile-Friendly Test to check if your landing page is mobile-friendly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<title>Responsive Landing Page in HTML CSS and JavaScript</title>
</head>
<body>
<header>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="img/logo-color.png" alt="" />
</div>
<nav>
<div class="btn">
<i class="fa fa-times close-btn"></i>
</div>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</nav>
<div class="btn">
<i class="fa fa-bars menu-btn"></i>
</div>
</div>
</div>
</header>
<section>
<video autoplay muted loop>
<source src="video/video2.mp4" type="video/mp4" />
</video>
<div class="container">
<div class="content">
<h2>Tour Your Dream</h2>
<h2>destination with</h2>
<h2>Travel.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
sed, officia quae eum iusto ratione autem eius minus, nisi
laboriosam id ullam aliquam sunt deserunt, magni natus maiores
placeat perferendis.
</p>
<button>Explore More</button>
<div class="social_icons">
<i class="fa fa-brands fa-facebook"></i>
<i class="fa fa-brands fa-twitter"></i>
<i class="fa fa-brands fa-instagram"></i>
<i class="fa fa-brands fa-pinterest"></i>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>
here is index.html first of all we need to look at that navbar, inside the navbar we are going to display the image logo, navbar links, and background color inside the navbar.
Then we need to design the hero section, inside the the hero section, we are going to use a video background and content such as text, buttons, and social sharing icons.
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:ital,wght@0,500;0,700;1,400&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "poppins";
}
header{
background: #6d67e4;
position: relative;
}
.container{
max-width: 1440px;
padding: 0 50px;
margin: 0 auto;
}
.logo img{
display: block;
object-fit: cover;
width: 30%;
}
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar nav{
display: flex;
align-items: center;
padding: 1.5rem 0;
}
.navbar nav li{
list-style: none;
margin-left: 1rem;
}
.navbar nav li a{
text-decoration: none;
color: #fff;
font-size: 1.1rem;
padding: 0.7rem 0.6rem;
border-radius: 6px;
transition: all 0.4s ease-in;
}
.navbar nav li a:hover{
background: #3498db;
color: #fff;
}
section video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.content{
display: flex;
flex-direction: column;
width: 60%;
justify-content: center;
height: 90vh;
}
.content h2{
font-size: 4.5rem;
color: #fff;
font-family: "ubuntu",sans-serif;
}
.content p{
color: #fff;
line-height: 2;
margin-top: 1rem;
}
.content button{
display: block;
margin: 2rem 0;
width: 21%;
padding: 0.7rem 0;
cursor: pointer;
font-size: 1rem;
border-radius: 4px;
border: 1px solid #ddd;
background: inherit;
color: #fff;
transition: all 0.3s ease-in-out;
}
.content button:hover,i:hover{
background: #3498db;
}
.content .social_icons{
display: flex;
justify-content: space-between;
width: 50%;
font-size: 1.9rem;
cursor: pointer;;
margin-top: 2rem;
}
.content .social_icons i{
padding: 0.6rem;
color: #fff;
border-radius: 5px;
border: 1px solid #ddd;
transition: all 0.5s ease-in-out;
}
.navbar .btn{
font-size: 1.2rem;
color: #fff;
align-items: center;
cursor: pointer;
display: none;
}
@media(max-width: 1058px){
.container{
padding: 0 25px;
}
.content h2{
font-size: 4rem;
}
.navbar nav li a{
font-size: 1rem;
}
}
@media(max-width: 902px){
.navbar .btn{
display: block;
}
.navbar nav{
position: fixed;
flex-direction: column;
min-width: 100%;
min-height: 50vh;
top: 0;
right: -100%;
background: #6d67e4;
align-items: flex-start;
justify-content: center;
}
.navbar nav.active{
right: 0;
transition: all 0.5s ease-in-out;
}
.navbar nav li{
margin: 1rem 2rem;
border-bottom: 1px solid #ddd;
padding-bottom: 1rem;
width: 100%;
}
.close-btn{
position: absolute;
top: 0;
left: 90%;
margin: 25px;
}
.content{
display: flex;
flex-direction: column;
width:100%;
justify-content: center;
height: 90vh;
align-items: center;
}
.content h2{
font-size: 3.5rem;
}
.content button{
width: 50%;
}
.content .social_icons{
justify-content: space-evenly;
width: 100%;
}
}
@media(max-width: 562px){
.content h2{
font-size: 2.5rem;
}
}here is the style.css file, you need to use that to make a responsive landing page, finally, you need to use a little bit of JavaScript to display and hide the toggle icon, let’s look at the toggle icons.
let menu = document.querySelector('nav');
let menuBtn = document.querySelector('.menu-btn');
let closeBtn = document.querySelector('.close-btn');
menuBtn.addEventListener('click',function(){
menu.classList.add('active');
})
closeBtn.addEventListener('click',function(){
menu.classList.remove('active');
})that’s to create a responsive landing page using html and CSS, hope this tutorial is helpful and beneficial for you.
Simple Landing Page HTML, CSS Code
Recently, I’ve made a Simple Landing Page using HTML and CSS I’m going to share with you complete tutorial Aslo source code. Inside the landing page’s best feature such as Light and Dark Mode, you will learn a lot of new things from it.
Hope this tutorial is helpful for you. I’m going to share the source code of the project, which you can check out below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Landing Page in HTML, CSS3 & JS</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
</head>
<body>
<!-------------header start------------- -->
<header>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="img/logo.jpg" alt="" />
<h2>Saqi</h2>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">References</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-------------header close------------- -->
<!-----------main section start--------- -->
<main>
<div class="container">
<div class="showcase">
<div class="left_side_content">
<h2>Business Woman</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus
doloremque facere aperiam molestiae exercitationem fuga deserunt
quod porro ad rerum.
</p>
<button type="button">Learn More</button>
</div>
<div class="right_side_content">
<img src="img/pngwing.com.png" alt="" />
</div>
</div>
<!-- downside -->
<div class="below_content">
<div class="social_icons">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-pinterest"></i>
</div>
<div class="dark_mode">
<i class="fa-solid fa-moon"></i>
</div>
</div>
<!-- downside -->
</div>
</main>
<!-----------main section close--------- -->
<script src="js/script.js"></script>
</body>
</html>
First of All, you need to create an index.html file inside which you need to use above mentioned code. Then you need to create a style CSS file to design the landing page.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
:root {
--primary_bg: #fff;
--color: #273746;
}
.dark {
--primary_bg: #273746;
--color: #fff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "poppins", sans-serif;
}
body {
background: var(--primary_bg);
transition: all 0.7s ease-in-out;
}
body.dark {
background: var(--primary_bg);
}
.container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
}
header {
padding: 1rem 0;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
.logo {
display: flex;
align-items: center;
}
header img {
display: block;
object-fit: cover;
width: 30%;
}
header h2 {
padding-left: 0.6rem;
font-size: 2rem;
font-weight: 600;
color: var(--color);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
display: flex;
align-items: center;
list-style: none;
}
nav ul li {
margin: 0 1.2rem;
}
nav ul li a {
text-decoration: none;
color: var(--color);
}
/* showcase */
.showcase {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
min-height: 80vh;
position: relative;
/* background: red; */
}
.showcase img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
margin-left: auto;
}
.showcase h2 {
font-size: 6rem;
font-weight: 800;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--color);
letter-spacing: 4px;
line-height: 6rem;
}
.showcase p {
font-size: 1.2rem;
padding: 2rem 0;
line-height: 2.5rem;
color: var(--color);
}
.showcase button {
display: block;
outline: none;
border: none;
cursor: pointer;
padding: 0.6rem 2rem;
border-radius: 50px;
font-size: 0.9rem;
background: var(--color);
color: var(--primary_bg);
opacity: 0.6;
transition: all 0.3s ease-in-out;
}
.showcase button:hover {
opacity: 1;
}
.below_content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.shape img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
bottom: 16%;
left: 80%;
opacity: 0.4;
position: absolute;
z-index: -1;
/* transform: translate(-190%, -80%); */
}
.social_icons,
.dark_mode {
display: flex;
align-items: center;
justify-content: center;
}
.below_content i {
background: var(--color);
font-size: 1.5rem;
cursor: pointer;
padding: 0.6rem;
margin: 0 0.5rem;
color: var(--primary_bg);
border-radius: 10%;
}
Here is the CSS file, you need to add it inside the project, once you use that, then your site will be ready, but last thing you need to use JS. JS helps us to display the dark mode.
const bodyEl = document.querySelector("body");
const toggleEl = document.querySelector(".fa-moon");
toggleEl.addEventListener("click", () => {
bodyEl.classList.toggle("dark");
if (bodyEl.classList.contains("dark")) {
toggleEl.classList.replace("fa-moon", "fa-sun");
} else {
toggleEl.classList.replace("fa-sun", "fa-moon");
}
});
Guys, recently, I made another responsive landing page using HTML and CSS. It’s a very basic landing page, inside the project are many logics that I used, you can watch the tutorial till to end I hope this is helpful for you, after watching the complete tutorial I hope you’ve learned something new from this tutorial.
If you’ve any questions/suggestions feel leave a comment below. Thanks for visiting the website have a nice day.
