How To Create HTML CSS Js Bootstrap Responsive Hero Page With Free Source Code By Indian Coding Wala

HTML Source Code :-

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

<head>
<meta charset="utf-8">
<title>Om Restaurant By Indian Coding Wala</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Nunito:wght@600;700;800&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container-xxl bg-white p-0">
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="container-xxl position-relative p-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<img src="https://www.pngall.com/wp-content/uploads/12/Indian-Cuisine-Background-PNG.png" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0 pe-4">
<a class="nav-item nav-link active">Home</a>
<a class="nav-item nav-link">About</a>
<a class="nav-item nav-link">Service</a>
<a class="nav-item nav-link">Menu</a>
<a class="nav-item nav-link">Restaurant</a>
<a class="nav-item nav-link">Contact</a>
</div>
<a href="" class="btn btn-primary py-2 px-4">Booking Form</a>
</div>
</nav>
<div class="container-xxl py-5 bg-dark hero-header mb-5">
<div class="container my-5 py-5">
<div class="row align-items-center g-5">
<div class="col-lg-6 text-center text-lg-start">
<h1 class="display-3 text-white animated slideInLeft">Enjoy Our<br>Om Restaurant</h1>
<p class="text-white animated slideInLeft mb-4 pb-2">
Om Restaurant is a fictional name, so there is no specific information available about a restaurant with that exact name. However, I can provide you with some general information about restaurants.</p>
<a href="" class="btn btn-primary py-sm-3 px-sm-5 me-3 animated slideInLeft">About Us</a>
</div>
<div class="col-lg-6 text-center text-lg-end overflow-hidden">
<img class="img-fluid" src="https://www.pngall.com/wp-content/uploads/12/Indian-Cuisine-Background-PNG.png" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="main.js"></script>
</body>

</html>

CSS Source Code :-

:root {
--primary: #FEA116;
--light: #F1F8FF;
--dark: #0F172B;
}

.ff-secondary {
font-family: 'Pacifico', cursive;
}

.fw-medium {
font-weight: 600 !important;
}

.fw-semi-bold {
font-weight: 700 !important;
}

.back-to-top {
position: fixed;
display: none;
right: 45px;
bottom: 45px;
z-index: 99;
}
#spinner {
opacity: 0;
visibility: hidden;
transition: opacity .5s ease-out, visibility 0s linear .5s;
z-index: 99999;
}

#spinner.show {
transition: opacity .5s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}

.btn {
font-family: 'Nunito', sans-serif;
font-weight: 500;
text-transform: uppercase;
transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
color: #FFFFFF;
}

.btn-square {
width: 38px;
height: 38px;
}

.btn-sm-square {
width: 32px;
height: 32px;
}

.btn-lg-square {
width: 48px;
height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
border-radius: 2px;
}

.navbar-dark .navbar-nav .nav-link {
position: relative;
margin-left: 25px;
padding: 35px 0;
font-size: 15px;
color: var(--light) !important;
text-transform: uppercase;
font-weight: 500;
outline: none;
transition: .5s;
}

.sticky-top.navbar-dark .navbar-nav .nav-link {
padding: 20px 0;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: var(--primary) !important;
}

.navbar-dark .navbar-brand img {
max-height: 60px;
transition: .5s;
}

.sticky-top.navbar-dark .navbar-brand img {
max-height: 45px;
}

@media (max-width: 991.98px) {
.sticky-top.navbar-dark {
position: relative;
}

.navbar-dark .navbar-collapse {
margin-top: 15px;
border-top: 1px solid rgba(255, 255, 255, .1)
}

.navbar-dark .navbar-nav .nav-link,
.sticky-top.navbar-dark .navbar-nav .nav-link {
padding: 10px 0;
margin-left: 0;
}

.navbar-dark .navbar-brand img {
max-height: 45px;
}
}

@media (min-width: 992px) {
.navbar-dark {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 999;
background: transparent !important;
}

.sticky-top.navbar-dark {
position: fixed;
background: var(--dark) !important;
}
}

.hero-header {
background: linear-gradient(rgba(15, 23, 43, .9), rgba(15, 23, 43, .9)), url(https://www.pngall.com/wp-content/uploads/12/Indian-Cuisine-Background-PNG.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.hero-header img {
animation: imgRotate 50s linear infinite;
}

@keyframes imgRotate {
100% {
transform: rotate(360deg);
}
}

.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, .5);
}

JS Source Code :-

(function ($) {
"use strict";

// Spinner
var spinner = function () {
setTimeout(function () {
if ($('#spinner').length > 0) {
$('#spinner').removeClass('show');
}
}, 1);
};
spinner();


// Initiate the wowjs
new WOW().init();

// Sticky Navbar
$(window).scroll(function () {
if ($(this).scrollTop() > 45) {
$('.navbar').addClass('sticky-top shadow-sm');
} else {
$('.navbar').removeClass('sticky-top shadow-sm');
}
});


// Dropdown on mouse hover
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 992px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});


// Back to top button
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function () {
$('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
return false;
});

// Facts counter
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 2000
});

// Modal Video
$(document).ready(function () {
var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);

$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})

$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})
});

// Testimonials carousel
$(".testimonial-carousel").owlCarousel({
autoplay: true,
smartSpeed: 1000,
center: true,
margin: 24,
dots: true,
loop: true,
nav : false,
responsive: {
0:{
items:1
},
768:{
items:2
},
992:{
items:3
}
}
});

})(jQuery);