Welcome 🎊to code with the random blog…Today in this blog we are learning how to make homepage landing page website by using HTML and CSS…

First, you must know what is homepage and landing page….

The home page is the default or front page of a site. It is the first page that visitors see when they load a URL. and the Land page is standalone page design for a specific campaign.

In digital marketing assert the Land page and Homepage both are important.

So let’s start creating the Homepage and Landing page…..

So as we are using BOOTSTRAP 5 and CSS 3 for styling you should atleast go through the BOOTSTARP 5 docs to know how to use bootstrap for styling.BOOSTRAP Link

To create landing page we want to use container py-5(py means “padding” in bootsrap and 5 stands for space index reference) in div class.Then button class will be toogle and id and  class will be nav toogle(reference).Here we want to list the Product and Service.

In this, we want to add h1,div, button class of exploring then after We want to add img class.

<div class="d-flex">
<div class="header-left">
<h1 class="mt-5 mb-3">Title of the page</h1>
<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="my-5">
<button class="btn btn-outline-light rounded-0 btn-lg">Explore more <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div>
<img class="img-fluid position-absolute" src="https://cdn.pixabay.com/photo/2020/12/18/00/43/business-5840870_960_720.png" />
</div>
</div>
</div>

</header>

Now our Code is done let’s check how’s our layout looks like.

You Might Like This:

• Advance Multi Step Form
• Responsive Flat Pricing Card
• Password Generator
• QR Code generator using JavaScript

 

HTML OUTPUT:-

 

In this you can see that we have design the HTML code and arrange properly with the help of  CSS the website with look responsive….

Hope your basic concepts of CSS 3 is clear.You have proper idea of  css selectors of classes and ids.

Concepts like border-box,flex-box ,positioning of elements and styling the childs with the help of parents(nth-child property).

body {
    font-family: "Poppins", sans-serif;
}
header {
    color: #fff;
    min-height: 30rem;
    background: linear-gradient(#6d84ad, #99a8c7) no-repeat;
}
h1,
h2,
h3,
h4 {
    font-weight: 900;
}
h1 {
    font-size: 4rem;
}
header img {
    right: 0;
}
button {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    outline: none;
}
.header-left {
    max-width: 40rem;
}
.header-img {
    right: 0;
}
.navbar {
    padding-top: calc(34px + 15px);
    background-position: center center;
    background-size: cover;
    background-color: blue;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    justify-content: space-between;
    align-items: center;
}
.nav-toggle {
    width: 25px;
    height: 20px;
    position: relative;
    span {
        display: block;
        height: 3px;
        background: white;
        position: absolute;
        border-radius: 5px;
        transition: all ease 250ms;
        &:nth-child(1) {
            top: 0;
            left: 0;
            width: 100%;
        }
        &:nth-child(2) {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 75%;
        }
        &:nth-child(3) {
            bottom: 0;
            left: 0;
            width: 100%;
        }
    }
}
nav ul {
    margin: 0;
    margin-left: 1.5rem;
}
nav li {
    display: inline;
    padding: 1rem;
}

Finally our Homepage or Landing Page using HTML,CSS and Bootstrap.You can see the output of css which the website is making for business……

Hope you like the blog…

Hope you liked the content /blog If you want such more blogs which can be helpful for you then share it with your friends.If you are facing any problem relate to the blog or you are unable to understand any code then please feel free to contact us through comment box.

THANKYOU……….