Responsive Navbar & Banner Section | HTML CSS Coding Practices | Web Development

Responsive Navbar & Banner Section with Source Code

I have built a Responsive Navbar & Banner Section by applying the bootstrap concepts which i have learned till now. Here in this post i am sharing you the Code.

Actually the assignment is to build a Navbar & Banner Section as shown in the images. We need to achieve the design as close as possible.

Refer to the below images.

The following images illustrate all device sizes, from extra small to extra large.

Extra Small (Size < 576px), Small (Size >= 576px) :

Medium (Size >= 768px):

Large (Size >= 992px) and Extra Large (Size >= 1200px):

Resources
Use the image URLs given below.

Design Tool Logo:

https://res.cloudinary.com/dpbsuuxme/image/upload/v1657702336/landing-section-design-logo-img_iur1ro.png

Background Image:

https://res.cloudinary.com/dpbsuuxme/image/upload/v1657702512/landing-section-bg_xrotvx.png

CSS Colors used:

#0C0521

#FFDDA9

HTML Code

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div class="fluid-container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-nav">
            <a class="navbar-brand" href="#"><img class="nav-logo" src="https://res.cloudinary.com/dpbsuuxme/image/upload/v1657702480/landing-section-design-logo-img_psljcb.png" alt="" /></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                    <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Pricing</a>
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </div>
            </div>
        </nav>
        <div id="bannerSection" class="p-3 d-flex flex-column justify-content-center">
            <div class="text-center">
                <h1 class="">The most <span class="h1-span">flexible</span> web design tool</h1>
                <p>We've done it carefully and simply
                    Combined with the ingredients makes for
                    |beautiful landings. It is the tool you need to</p>
                <button class="button" type="submit">Sign Up</button>
            </div>

        </div>

    </div>
</body>

</html>

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:[email protected];700&family=Lobster&family=Monoton&family=Open+Sans:ital,[email protected],400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,[email protected],400;0,700;1,700&family=Playfair+Display:ital,[email protected],400;0,700;1,700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,[email protected],400;0,700;1,700&family=Work+Sans:ital,[email protected],400;0,700;1,700&display=swap');

.nav-logo {
    height: 35px;
}

.bg-nav {
    background-color: #0c0521;
}

#bannerSection {
    background-image: url('https://res.cloudinary.com/dpbsuuxme/image/upload/v1657702512/landing-section-bg_xrotvx.png');
    height: 100vh;
    background-size: cover;
}

#bannerSection h1 {
    color: white;
    font-size: 35px;
}

#bannerSection p {
    color: white;
    font-size: 16px;
}

.button {
    color: black;
    background-color: #FFDDA9;
    height: 40px;
    width: 140px;
    border-radius: 20px;
    border-width: 0px;
}

.h1-span {
    color: #FFDDA9;
}

Related Posts

CCBP Static Website Coding Assignment 2 Solution | Yoga Page

Hi CCBP Learners, I have added my code for the Yoga Page here in this post to help you in solving your assignment question. In this assignment,…

CCBP Static Website Coding Assignment 1 Solution | Foundations Page

Hi CCBP friends, Are you are facing problem in solving your assignment 1 of Static Website. I here to help you, I have added my code below….

Favorite Stores Page | CCBP Static Website Coding Assignment 1 Solution

Hi CCBP Learners, to help you in solving your Assignment 1 of Static Website. Here in this article i am posting my Code of the Favorite Stores…

Leave a Reply

Your email address will not be published. Required fields are marked *