Web Designing

Landing Page Web Design with Bootstrap 4

Hi guys, here I come with my latest tutorial on how to design a landing page with bootstrap 4.

I will let you walk through all the steps one by one and in the end, you will have a good looking web page.

Step 1:

Create a folder and inside this folder, you will have to create two files; one is index.html and the 2nd is “styles.css”.

Step 2:

Now add the following code to your index.html file.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- Font Awesome Kit -->
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <!-- JQuery and Bootstyrap Script File-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>Prolonged Worker | Landing Page </title>
</head>

<body>
    
    
    <!--Content-->

</body>

</html>

Step 3:

Let’s write the code for it now.

Put the following code inside body tag.

  <!-- Hero Box-->
    <section id="sec-1">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="herobox-title">
                        <h1>Airways Travel</h1>
                        <p>Best tour and travel services all around the world</p>
                    </div>

                </div>
            </div>
        </div>
    </section>

Now open the CSS file and we will be writing the CSS for section 1.

body {
    padding: 0px;
    margin: 0px;
}

#sec-1 {
    background:
        /* top, transparent red, faked with gradient */
        linear-gradient(rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0.45)),
        /* bottom, image */
        url(bg.jpg);
    background-size: cover;
    background-position: center center;
    height: 100vh;
    padding: 0;
    margin: 0;
}
.herobox-title {
    margin-top: 30%;
    color: #fff;
}

.herobox-title h1 {
    font-size: 55px;
}

Great we have designed the section 1 of the landing page!

Step 4:

Now, let’s jump to the next section.

Web Design

You can see, there are two parts of that section; one is heading and the other is the package boxes.

Remember you can use images of your choice.

 <!-- Packagees-->
    <section id="packages">
        <div class="container">
            
            <!-- Heading Div -->
            <div class="row">
                <div class="col-md-12 text-center txt-title">
                    <h1><i class="fas fa-suitcase-rolling"></i> Our Upcoming Trips</h1>
                </div>
            </div>
            <!-- Packges -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card-columns">
                        <!-- Box 1 -->
                        <div class="card">
                            <img class="card-img-top" src="img/img1.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Pakistan</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>
                        <!-- Box 2 -->
                        <div class="card">
                            <img class="card-img-top" src="img/img2.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Paris</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>
                        <!-- Box 3-->
                        <div class="card">
                            <img class="card-img-top" src="img/img3.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Newyork</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>
                        <!-- Box 4-->
                        <div class="card">
                            <img class="card-img-top" src="img/img4.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">China</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>
                        <!-- Box 5-->
                        <div class="card">
                            <img class="card-img-top" src="img/img5.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Spain</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>
                        <!--Box 6-->
                        <div class="card">
                            <img class="card-img-top" src="img/img6.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Netherland</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>



                    </div>
                </div>
            </div>

        </div>

    </section>

You can see we’re repeating the same code for the boxes.

Let us have a quick look at the following code that defines how that package box code actually works.

<!-- Box 1 -->
                        <div class="card">
                            <img class="card-img-top" src="img/img1.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Pakistan</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Coming Soon...</h6>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                <div class="text-right">
                                    <a href="#" class="card-link">View</a>
                                    <a href="#" class="card-link">Book Now</a>
                                </div>
                            </div>
                        </div>

You can see, we ‘re using Bootstrap cards for the packages box.

You can modify the contents as needed.

Step 4:

Now open the style.css file and write the styling for the packages box section.

#packages .card .card-link {
    color: #fff;
    background-color: #238efa;
    padding: 8px 20px;
    border-radius: 20px;
}

#packages .card .card-link:hover {
    opacity: 0.8;
}

.card img {
    height: 250px;
}

Step 5:

It turns for the services section now. We will divide the boxes into three equal columns and make them look perfect as shown in the image below.

Web Design

Here is the code for the services section:

    <!-- Services-->
    <section id="services">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center txt-title">
                    <h1><i class="fas fa-sync-alt"></i> Our Great Services</h1>
                </div>
            </div>
            <div class="row">
                <!-- Box 1-->
                <div class="col-md-4 text-center">
                    <div class="t-box">
                        <div class="icon">
                            <i class="fas fa-ticket-alt"></i>
                        </div>

                        <h3>Easy Booking</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                    </div>
                </div>
                <!-- Box 2-->
                <div class="col-md-4 text-center">
                    <div class="t-box">
                        <div class="icon">
                            <i class="fas fa-plane-departure"></i>
                        </div>

                        <h3>Flights</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                    </div>
                </div>
                <!-- Box 3-->
                <div class="col-md-4 text-center">
                    <div class="t-box">
                        <div class="icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>

                        <h3>Destination</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                    </div>
                </div>
            </div>
        </div>

    </section>

Same as section 2 (Package Section), we’re using the same styling for the boxes inside the section element.

Let’s add the styling for the section so the things can become clearer to you.

#services {
    margin: 40px 0px;
}

.t-box {
    background-color: #f2efe4;
    padding: 50px 20px;
}

.t-box .icon {
    background-color: #238efa;
    width: 100px;
    height: 100px;
    border-radius: 45px;
    margin: auto;
    margin-bottom: 4px;
}

.t-box .icon i {
    color: #fff;
    font-size: 45px;
    line-height: 100px;
}
.txt-title {
    margin: 45px auto;
}

Step 6:

Now, we need to insert the navigation bar and footer into the page. Let’s add them one by one

Navbar:

Put the navbar code inside the body tag. Make sure the nav bar code is written before the section HTML code.

    <!--Navbar-->
    <div id="nav-div" class="container-fluid">
        <nav id="navbar" class="navbar navbar-expand-lg navbar-dark mynav">
            <a class="navbar-brand" href="#">
                Airways
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbar-list-2">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Tours</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Who are we?</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

Navbar CSS:

#nav-div {
    position: absolute;
    z-index: 1;
}

#navbar {
    padding: 10px 90px;
    width: 100%;
}

#nav-div nav.navbar-nav {
    text-align: right;
}

.nav-item{
    margin:5px;
}

Great!

Now your web should look like:

NavBar

Footer:

Let’s write the footer code.

<!--Footer -->
    <footer>
        <div class="footer-bottom">

            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <p>Copyright © 2019 Prolonged Worker | Design by <a href="https://www.cawoy.com" class="m-link-color">Cawoy</a></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

Footer CSS:

.footer-bottom {
    background-color: #2b2827;
    color: #f7f2f0;
    padding: 10px;
}
.m-link-color,
.m-link-color:hover {
    color: #ff4900;
}

The Footer should look like :

Web Design

Now let’s add the media queries so that your design could look best on the small devices.

@media only screen and (max-width: 600px) {
    #navbar {
        margin: 0;
        background-color: black;
    }

    #nav-div {
        margin: 0;
        padding: 0;
        width: 100%;
        position: fixed;
        z-index: 1;
    }

    .herobox-title {
        margin-top: 50%;
    }

    #services .col-md-4 {
        margin: 4px;
    }
}

Well Done! You have designed your landing page!

Would you like to share it with your fellows or friends? I’d appreciate it!

Tags

Leave a Reply

Back to top button
Close
Close

Adblock Detected

Please whitelist our site from the adblocker to read the content.