ads_header

Create Landing Page Free HTML CSS


Hello friends, in this post I will create a simple Landing Page using HTML and CSS

Landing Page is a website page that is first visited by visitors. If the landing page you make is more attractive, the more users will visit your website, and of course this will make your website traffic higher and your income will increase.





And in this tutorial I will give a simple landing page example, but it still looks elegant like the screenshot below.



Before that I needed to prepare two images as background and as a logo that I saved in the img folder in my project.


Now, open your favorite text editor, then create the index.html and style.css files save in the same folder as the "img" folder

Now, open the index.html file and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
            <nav>
                <div class="logo">
                    <a href="index.html"><img src="img/NM.png"></a>
                </div>
                <ul>
                    <li><a href="#about-us">contact us</a></li>
                    <li><a href="#review-movie">reviews</a></li>
                    <li><a href="#watch-movie">watch now</a></li>
                    <li><a href="#genre-movie">genre</a></li>
                    <li><a href="#">login</a></li>
                </ul>
            </nav>

            <div class="deskripsi">
                <img src="img/NM.png"><br><br>
                <p>
                    CHANGE YOUR DESK INTO CINEMA
                    <P>MORE THAN ONE MILLION MOVIE WITH HD QUALITY</P>
                </p>
                <a href="#genre-movie"><i class="fa fa-angle-double-down"></i></a>
            </div>    
    </div>
</body>
</html>

the above code consists of:
  1. Nav Bar inside is a navigation menu and logo
  2. Banner background with a brief description and logo
  3. The down arrow button for the page below it
Now, open the style.css file and enter the following code


html,
*{
    box-sizing: border-box;
}

body {
    margin: 0;
    background-image: url(img/bg.jpg);
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}

.container {
    width: auto;
}

.container {
    width: auto;
}

nav {
    position: absolute;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
}

nav .logo {
    float: left;
    font-size: 17px;
    color: white;
    padding: 15px;
    margin-left: 30px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 5px;

}

.logo img{
    border-radius: 5px;
    width: 120px;
    height: 30px;
}

nav ul {
    float: right;
    list-style: none;
    margin-right: 30px;
}

nav ul li {
    display: inline-flex;
    margin: 0 5px;
    font-size: 15px;
    color: white;
    text-transform: uppercase;
    border-radius: 6px;
    text-align: center;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
}

nav ul li:hover {
    background-color: crimson;
}

nav ul li:nth-child(5) {
    background-color: crimson;
}

.deskripsi {
    position: absolute;
    width:45%;
    height: 68% ;
    top: 200px;
    left: calc(50% - 22.5%);
    text-align: center;

}

.deskripsi i:hover{
    opacity: 1;
}

.deskripsi i{
    position: absolute;
    bottom: 0;
    color: white;
    opacity: .5;
    text-decoration: none;
    font-size: 40px;
}

.deskripsi h1 {
    font-family: 'Raleway', sans-serif;
    color: white;
    font-weight: 1000;
    letter-spacing: 10px;
    font-size: 90px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    width: 50%;
}

.deskripsi p {
    line-height: 30px;
    width: auto;
    font-size: 15px;
    letter-spacing: 3px;
    font-family: 'Roboto', sans-serif;
    color: #f5f5f5;
    margin: 0;
}

.deskripsi img {
    opacity: .9;
    width: 600px;
    height: 150px;
}

Save all files and run the index.html file.

Powered by Blogger.