In this blog post, you'll learn how to create a simple website landing page using HTML and CSS. This tutorial covers all the basics, from creating the basic layout to adding images, text, and a call to action.
By the end of this tutorial, you'll have a working landing page that you can use to promote your products or services. we going to make this simple website using HTML and CSS. I have already shared blog on landing page website with registration form and dark and light mode.
Background Image Credit :
Photo by Giovanni Vardan: https://www.pexels.com/photo/colorful-sand-13371419/It’s going to be a single page website. With full screen width and height. It's not responsive but you can make it by using css media query.
So, what’s in website. It includes:
- Background image.
- Navbar with logo text and menu lists (like home, services, about, contact).
- In centre of the page. Title text, description, input field for email, and some buttons.
Video Tutorial of simple Landing Page Design:
Website Using HTML and CSS.
File structure:
- Create one folder.
- Open it in your code editor
- Create two files in that folder with name index.html and index.css.
Let's create simple website landing page using HTML and CSS step by step.
Step 1: Create basic structure of html.
So first create basic structure of html in html file and link css file with html file through link tag.
HTML
<!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>Website</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
*{
padding: 0px;
margin: 0px;
}
Step 2: Add background.
First, we are going to add background. For background, I have used one image. Image is added through css. See the below css.
HTML
<div class="container">
</div>
CSS
.container{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgb(0 0 0 / 30%) , rgb(0 0 0 / 40%)) , url(image/image.jpg);
background-position: center;
background-size: cover;
}
Output:
Step 3: Add navigation bar.
Now after the background image. Let’s add a navigation bar inside the div tag with a class value container. In the Navigation bar we are going to add logo text (you can also add logo image in img tag) and menu options.
Also read: How to create an animated navigation menu using HTML, CSS and JavaScript.
HTML
<div class="navbar">
<h1>MakeTechStuff</h1>
<ul>
<li><a href="#">Home</a><span style="width:100%;"></span></li>
<li><a href="#">Services</a><span></span></li>
<li><a href="#">About</a><span></span></li>
<li><a href="#">Contact</a><span></span></li>
</ul>
</div>
CSS
.container .navbar{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px auto;
padding: 40px 0px;
}
.navbar h1{
color: #fff;
font-size: 40px;
cursor: pointer;
}
.navbar ul{
display: flex;
}
.navbar ul li{
list-style: none;
margin: 0px 25px;
position: relative;
}
.navbar ul li span{
position: absolute;
width: 0%;
height: 3px;
background-color: #00fbff;
left: 0px;
bottom: -8px;
border-radius: 100px;
transition: 0.2s;
}
.navbar ul li:hover span{
width: 100%;
}
.navbar ul li a{
color: #fff;
text-decoration: none;
font-size: 25px;
}
As you can see in the li tag, I have added span tag, that’s because of hover effects on list items (li tag). On hover li tag, that span tag width goes from 0% to 100%. See the css for span tag in css file.
Output:
Step 4: Add some text in the centre of the page.
So now let’s add some text in the centre of the page. I have added that text box (div tag with class value description_box) after the navigation bar (div tag with class value navbar which we created above) in the html file. See the below css code how I placed it in the centre.
You can add your own text, like on what topic you are designing the page. I have simply just written 'learn web development' as a main text and below it, I have added some description text.
HTML
<div class="description_box">
<h3>Learn Web Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat itaque animi deserunt perspiciatis voluptates reiciendis doloribus facilis explicabo aspernatur illo.</p>
</div>
CSS
.container .description_box{
margin-top: 50px;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
color: #fff;
text-align: center;
}
.description_box h3{
font-size: 60px;
}
.description_box p{
font-size: 20px;
margin: 20px 0px;
}
Output:
Step 5: Add email box.
Below the text, inside the description_box class value. let's add input field for email. Means those want to learn web development can submit their email id.
Also read: Create login and registration form using HTML, CSS and simple JavaScript.
HTML
<form action="#">
<div class="input_box">
<input type="text" placeholder="Email Id">
<button type="submit">Submit</button>
</div>
</form>
CSS
.description_box form .input_box{
width: 80%;
background-color: #ffffff21;
margin: 0px auto;
padding: 5px;
border-radius: 200px;
display: flex;
}
.description_box form .input_box input{
font-size: 20px;
color: #fff;
padding: 10px 20px;
background-color: transparent;
border: none;
outline: none;
width: 100%;
}
.description_box form .input_box button{
font-size: 20px;
border-radius: 200px;
padding: 5px 40px;
font-weight: bold;
cursor: pointer;
background-color: #00fbff;
}
Output:
Step 6: Add Buttons.
So after that I have added some (two) buttons. One to learn more and another for blogs (Explore blogs). And also added hover effects on this button.
On the first button (Learn More). I have added inline css for background colour and text colour on its anchor tag.
Also read: CSS button hover effects.
HTML
<div class="button_box">
<button type="button"><a href="#" style="background-color: #00fbff; color: #000;">Learn More</a></button>
<button type="button"><a href="#">Explore Blogs</a></button>
</div>
CSS
.description_box .button_box{
width: 100%;
}
.description_box .button_box button{
font-size: 25px;
background-color: transparent;
border: 2px solid #00fbff;
border-radius: 200px;
margin: 30px 15px;
overflow: hidden;
}
.description_box .button_box button a{
text-decoration: none;
font-weight: bold;
color: #fff;
padding: 10px 40px;
display: block;
transition: 0.2s;
}
.description_box .button_box button a:hover{
background-color: #00fbff;
color: #000;
}
Output:
You may like:
- How to create a web page with dark and light mode functionality using HTML, CSS and JavaScript.
- How to create a web page with registration form using HTML, CSS and JavaScript.
- How to create an animated menu items selection in navigation menu using HTML, CSS and JavaScript.
Final code:
So that’s how you can make a website using html and css. If you have any question or suggestion you can write in the comment section.
Share your thoughts.