Responsive Navbar & Banner Section | HTML CSS Coding Practices | Web Development
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:
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/popper.js@1.16.1/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:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,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;
}
Comments
Post a Comment