Hello everyone, you can learn how to create a Delivery App Landing Page using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Delivery App Landing Page
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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="style.css">
<title>Delivery Website Landing Page- Coding Power</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="text">
<h1>Home Delivery <span>From Stores Near You</span></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<button type="button">Download App</button>
</div>
<div class="photo">
<img src="images/image-1.svg" alt="">
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Heebo', sans-serif;
}
body{
width: 80%;
margin: 0 auto;
}
.navbar{
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 0;
}
.navbar .logo{
width: 150px;
}
.navbar .logo img{
width: 100%;
}
.navbar .links ul{
list-style: none;
display: flex;
}
.navbar .links ul li{
margin-left: 35px;
}
.navbar .links ul li a{
text-decoration: none;
color: rgba(0, 0, 0, 0.6);
font-size: 18px;
}
.navbar .links ul li a:hover{
color: #E8505B;
}
.container{
padding-top: 50px;
display: flex;
align-items: center;
width: 100%;
}
.container .text{
width: 50%;
}
.container .text h1{
font-size: 55px;
font-weight: 600;
}
.container .text h1 span{
font-weight: 400;
}
.container .text p{
width: 85%;
font-size: 17px;
margin: 25px 0;
color: rgba(0, 0, 0, 0.6);
}
.container .text button{
padding: 15px 30px;
font-size: 20px;
border: none;
outline: none;
border-radius: 8px;
background: #E8505B;
color: white;
cursor: pointer;
transition: 0.2s;
}
.container .text button:hover{
background: #bb444c;
}
.container .photo{
width: 50%;
}
.container .photo img{
width: 520px;
} That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
