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:-

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;
}