Latest Bootstrap 5.3.3 Responsive Navbar Footer & Hero Section Using Advance Bootstrap CSS
<!-- un comments link -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Latest Bootstrap 5.3.3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->
</head>
<body>
<!-- start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse shadow-sm container" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"><img src="https://codekarnedo.com/malinLogo.png" height="60" class="p-0 mr-5"></a>
<ul class="navbar-nav me-auto mb-1 mb-lg-0">
<li class="nav-item">
<a class="nav-link rounded mx-1 active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link rounded mx-1" href="about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link rounded mx-1" href="product">All Product</a>
</li>
<li class="nav-item">
<a class="nav-link rounded mx-1" href="gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link rounded mx-1" href="contact-us">Contact Us</a>
</li>
</ul>
<div class="d-flex" role="search">
<ul class="navbar-nav me-auto mb-1 mb-lg-0">
<li class="nav-item float-end">
<a class="nav-link bg-seoondary mx-1"href="">Register</a>
</li>
<li class="nav-item float-end">
<a class="nav-link bg-seoondary mx-1"href="">Login</a>
</li>
<ul class="navbar-nav me-auto mb-1 mb-lg-0">
</div>
</div>
</div>
</nav>
<!-- end nav -->
<!-- hero -->
<div class="bg-dark text-secondary px-4 py-4 text-center">
<div class="container">
<div class="py-2">
<h1 class="display-4 fw-bold text-white">Latest Bootstrap 5.3.3 Responsive Navbar Footer & Hero Section</h1>
<div class="col-lg-12 mx-auto p-3">
<p class="fs-4 mb-5 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing versions of Lorem Ipsum</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Register</button>
<button type="button" class="btn btn-outline-light btn-lg px-4">Login</button>
</div>
</div>
</div>
</div>
</div>
<!-- hero end -->
<!-- footer -->
<section class="shadow-sm border-top">
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-md-5 offset-md-1 mb-3">
<h5>About Website</h5>
<img src="https://codekarnedo.com/malinLogo.png" height="60" class="p-0 mr-5">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing versions of Lorem Ipsum</p>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Quick Link</h5>
<ul class="nav flex-column">
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary btn-outline-info">Home</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Product</h5>
<ul class="nav flex-column">
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Product</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Apple</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Banana</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Orange</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Other Link</h5>
<ul class="nav flex-column">
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-1"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p class="text-center m-auto d-flex">© Copyright 2024 New Web Development All Rights Reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#">
<svg class="bi" width="24" height="24">
<use xlink:href="#twitter"></use>
</svg>
</a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#">
<svg class="bi" width="24" height="24">
<use xlink:href="#instagram"></use>
</svg>
</a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#">
<svg class="bi" width="24" height="24">
<use xlink:href="#facebook"></use>
</svg>
</a>
</li>
</ul>
</div>
</footer>
</div>
</section>
<!-- end fotter -->
</body>
</html>
empty
empty
Comments (0 )
Leave A Comment