Skip to main content

Create a simple landing page using HTML & CSS - scoobcode

A landing page is the most important thing for businesses. Here I show you how to create a simple landing page for your businesses. It is simple and easy to learn. For this project, I used HTML & CSS.

To watch the full video tutorial Click here

Output

Landing page

Source code

👉 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>Simple landing page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<b>LOGO</b>
</div>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blogs</a>
<a href="#">Contact</a>
</nav>
</header>
<section>
<h1>
Welcome to the world
</h1>
<div class="btn">
<input type="button" value="Join">
<input type="button" value="Read more">
</div>
</section>
<footer>
<b>Copyright 2021 &copy - develop by Scoobcode</b>
</footer>
</body>
</html>

👉 CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
    background-image: linear-gradient(rgb(0,0,0,0.4), rgb(0,0,0,0.4)), url(bg.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
}

/* Header here  */

header{
    display: flex;
    justify-content: space-around;
    padding: 20px;
}
header b{
    font-size: 30px;
    color: white;
}

header a{
    font-size: 20px;
    color: white;
    padding: 5px 20px;
    position: relative;
    top: 8px;
}
header a:hover{
    background-color: white;
    color:black;
    border-radius: 5px;
}

/* section here  */

section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
section h1{
    font-size: 50px;
    color: white;
}

section .btn{
    margin-top: 20px;
}
section input{
    padding: 10px 20px;
    margin: 0px 10px;
    font-size: 18px;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
section input:hover{
    background-color: white;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}

/* footer here  */
footer{
    text-align: right;
    color: white;
    padding: 10px 30px;
}

You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.

Comments

Popular posts from this blog

Add preloader animation on website just some step of code (HTML, CSS, JavaScript) - scoobcode

Preloader is a unique feature for a website, this gives a professional look to a website. Here in this blog, I will share my code, where you going to learn how to add a preloader animation effect in just some line of HTML, CSS, and JavaScript code. Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Full video tutorial:  https://youtu.be/7KNABcF-xz0 Output Preloader animation After preloader Source code 👉  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>Simple landing page</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div id="preloader"></div>     </div>     <header>

Create NavBar using HTML & CSS (flexbox) - scoobcode

The navigation bar is the most important part of a webpage or website. There have many ways to make a beautiful navbar. Here in this blog,  we are going to learn some basic use of flexbox. How to create a navbar using flexbox property in CSS. I've also uploaded the full tutorial video you can check the video. Click here to watch the video. To start the code we need a code editor or IDE. Here I use  Visual studio code  (recommended) for my coding. To download  Visual studio code   click here Here is the output Tips Press ! to get Emmet Abbreviation (Work in Visual studio code) Source code      HTML code <!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>NavBar</title>     <link rel="stylesheet" href=&quo