How to Make a Landing Page with HTML, CSS, and Bootstrap

How to Make a Landing Page with HTML, CSS, and Bootstrap

How to Make a Landing Page with HTML, CSS, and Bootstrap

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….
What are 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…..

Pre Requisites:-

The topics You should know before moving forward are the basics of HTML 5, CSS 3, and Bootstrap5.

HTML is used for making the structure of the webpage/website while to decorate the layout/style the layout we use styling tools like CSS, SCSS, Bootstrap, or Tailwind

but here we are using only CSS and Bootstrap for styling.

HTML CODE :-

Points to be noted :-You have to either install bootstrap locally or you have to insert bootstrap cdn(content-delivery network). reference

Hope you have clear idea about the basics of the HTML 5 like div,span ,classes,ids ,image and button tags.

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:

 

HTML OUTPUT:-

So here is the HTML output still something is missing it is not looking so good .Oh we forgot to style it.Let’s move forward to styling(CSS part).

CSS CODE:-

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

CSS code display:-

After applying the CSS you can see it give a new look.Now it look awesome.

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……….
Share on:

Leave a Comment