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

Leave a Reply

Your email address will not be published.