We Keep Coding

Laravel layout keep the nav link with different background

I am making a dashboard. It has a layout included in all the dashboard pages and it contains links. I need to specify the active page link with different background.
I wrote the code below to do this, but when I click on a link it reloads the page to go to the requested page and layout is refreshed and everything returns to default.
What is the easiest way to handle this?
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
$('.sidebar-link').removeClass('active');
$(this).addClass('active');
});
});
.sidebar {
width: 250px;
height: 100vh;
background-color: #9E852D;
}
.main {
width: 100%;
height: 100vh;
background-color: #FFF;
}
.exit-dashboard {
width: 30px;
height: 30px;
position: fixed;
right: 0;
top: 610px;
background-color: #B79B3A;
color: #FFF;
z-index: 9999999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/40a844b83b.js" crossorigin="anonymous"></script>
#yield('styles')
<div class="exit-dashboard d-flex justify-content-center align-items-center">
<a href="{{ route('home') }}" class="a-reset">
<i class="fa-solid fa-globe"></i>
</a>
</div>
<div class="d-flex">
<div class="sidebar">
<div class="sidebar-img text-center pt-5">
<img src="{{ asset('images/location-hover-icon.png') }}" class="w-50">
</div>
<div class="sidebar-links pt-5">
<div class="row flex-column">
<a href="#" class="a-reset">
<a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
</div>
</a>
<a href="{{ route('dashboard.october.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity October</h6>
</div>
</a>
<a href="{{ route('dashboard.october.chillout.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">Chillout October</h6>
</div>
</a>
<a href="{{ route('dashboard.rashikma.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">Ras El Hikma</h6>
</div>
</a>
</a>
</div>
</div>
</div>
<div class="main p-5">
<h3 class="text-white nexa-bold pb-4">#yield('tab-title')</h3>
<div>
#yield('content')
</div>
</div>
</div>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dashboard_layout.js') }}"></script>
#yield('scripts')

You can use the Route facade to check the active route. It will check if the active route is the same, and will return true or false, using which we can make a ternary condition.
<a href="#" class="a-reset">
<a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
<div class="{{Route::is('dashboard.newcairo.interests') ? 'active' : 'sidebar-link'}} py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
</div>
</a>
</a>

Set my Bootstrap navbar links to be active (with pure JavaScript)

I'm trying to make my navbar links turn active when clicked. I imagine I'd do this by adding the active class when being clicked; however, I'm not sure how to stop the current active link from being active. Also, I'm not sure
let links = document.querySelectorAll('.nav-link');
links.addEventListener('click', function() {
this.classList.add('active');
});
Also, I have this for making the link active; however, I can't get it to run after the html runs, so it doesn't work.
https://jsfiddle.net/ysejr17L/2/
TL;DR
don't know how to make JS find the currently active link and remove it's active class
code for making clicked link active loads before HTML, so it doesn't work

Check out this snippet:
let links = document.querySelectorAll('.nav-link');
for(let i=0; i<links.length; i++){
links[i].addEventListener('click', function() {
for(let j=0; j<links.length; j++)
links[j].classList.remove('active');
this.classList.add('active');
});
}
body {
background: linear-gradient(0.1turn, #673fa6, #e1f5f8, #f6c43c);
}
nav {
opacity: 0.8;
}
.text-shadow {
text-shadow: 5px 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="styles/style.css">
<title>Justice Dunn</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="node_modules/bootstrap-icons/icons/kanban-fill.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Justice Dunn
</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">
<a class="nav-link active" href="#bg1">Home</a>
<a class="nav-link" href="#bg2">Background</a>
<a class="nav-link" href="#bg3">Hobbies</a>
<a class="nav-link" href="#bg4">Achievements</a>
<a class="nav-link" href="#bg5">The Future</a>
<a class="nav-link" href="#bg6">Gallery</a>
</div>
</div>
</nav>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg1">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-shadow display-3">Hello!</h1>
<p class="text-center text-shadow h4">I'm Justice Dunn, a 19-year-old developer in Cheyenne, Wyoming.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg2">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Background</h1>
<p class="text-center text-black mt-3 h5">I decided that I wanted to become a developer for a few reasons.</p>
<p class="text-center text-black mt-3 h5">I've always been a creative person, and I've always enjoyed problem solving. Being a developer just seems to be an occupation that naturally incorporates both of those things.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg3">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Hobbies</h1>
<p>Writing Music</p>
<p>Digital Art</p>
<p>3D Modeling</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg4">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Achievements</h1>
<p class="text-center h5 mt-3">I don't have a lot of life experience yet, so I'd say my greatest achievement was getting accepted into the Array apprenticeship program!</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg5">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">The Future</h1>
<p class="text-center h5 mt-3">After this Array apprenticeship, I want to begin developing apps and write, record, and produce an album.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg6">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Gallery</h1>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS and local JS -->
<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>
<script src="/scripts/script.js"></script>
</body>
</html>
We are adding click event listener to each element of class .nav-link which at first remove .active class from all the elements and then add class .active to the element which is clicked.

You could try this also without using a loop on each load.
document.body.addEventListener('click', function(e) {
if(e.target.className==='nav-link'){
document.getElementsByClassName('nav-link active')[0].classList.remove('active');
e.target.classList.add('active');
}
});
body {
background: linear-gradient(0.1turn, #673fa6, #e1f5f8, #f6c43c);
}
nav {
opacity: 0.8;
}
.text-shadow {
text-shadow: 5px 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="styles/style.css">
<title>Justice Dunn</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="node_modules/bootstrap-icons/icons/kanban-fill.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Justice Dunn
</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">
<a class="nav-link active" href="#bg1">Home</a>
<a class="nav-link" href="#bg2">Background</a>
<a class="nav-link" href="#bg3">Hobbies</a>
<a class="nav-link" href="#bg4">Achievements</a>
<a class="nav-link" href="#bg5">The Future</a>
<a class="nav-link" href="#bg6">Gallery</a>
</div>
</div>
</nav>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg1">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-shadow display-3">Hello!</h1>
<p class="text-center text-shadow h4">I'm Justice Dunn, a 19-year-old developer in Cheyenne, Wyoming.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg2">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Background</h1>
<p class="text-center text-black mt-3 h5">I decided that I wanted to become a developer for a few reasons.</p>
<p class="text-center text-black mt-3 h5">I've always been a creative person, and I've always enjoyed problem solving. Being a developer just seems to be an occupation that naturally incorporates both of those things.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg3">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Hobbies</h1>
<p>Writing Music</p>
<p>Digital Art</p>
<p>3D Modeling</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg4">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Achievements</h1>
<p class="text-center h5 mt-3">I don't have a lot of life experience yet, so I'd say my greatest achievement was getting accepted into the Array apprenticeship program!</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg5">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">The Future</h1>
<p class="text-center h5 mt-3">After this Array apprenticeship, I want to begin developing apps and write, record, and produce an album.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg6">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Gallery</h1>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS and local JS -->
<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>
<script src="/scripts/script.js"></script>
</body>
</html>

Bootstrap 4 - I can't stretch background image in div

I'm trying to make a website, which is using just screen space.
Logo is in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch.
My problem is that images, which are set as a background of the col-sm-4 div are not showing and their height is set to 0px (I tried !important). The code is not reacting on height in % or background-size - cover. How can I make these images precisely on page with same height on every resolution?
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body {
height: 100% !important;
width: 100% !important;
}
body {
background: grey !important;
}
header {
height: 15% !important;
}
.Menu {
height: 5% !important;
}
.Images {
height: 80% !important;
}
/*Header*/
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
.col-sm-4 {
border: solid 1px #9f0000;
}
.Images {
}
.image {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<main class="container-fluid p-0">
<header class="row Logo no-gutters">
<div class="col-sm-3">
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
</div>
</header>
<div class="row Menu no-gutters">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row Images no-gutters">
<div class="col-sm-4 image" id="image00"></div>
<div class="col-sm-4 image" id="image01"></div>
<div class="col-sm-4 image" id="image02"></div>
<div class="col-sm-4 image" id="image10"></div>
<div class="col-sm-4 image" id="image11"></div>
<div class="col-sm-4 image" id="image12"></div>
<!-- <div class="col-sm-4">
<img class="image" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-sm-4">
<img class="image" src="./images/park.jpg" alt="Park">
</div>
<div class="col-sm-4">
<img class="image" src="./images/tunnel.jpg" alt="Tunnel">
</div>
<div class="col-sm-4">
<img class="image" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-sm-4">a
<img class="image" src="./images/park.jpg" alt="Park">
</div>
<div class="col-sm-4">
<img class="image" src="./images/tunnel.jpg" alt="Tunnel">
</div> -->
</div>
</main>
</body>
</html>

The easiest way is to set a min-height using vh units (% of viewport height) on the .image DIV...
https://www.codeply.com/go/iFDwwGDmKi
.image {
background-image: url("..");
min-height: 45vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Edit:
To have the images fill the remaining page height, w/o scrolling, set flex-grow and overflow hidden on the .Images container.
.Images {
flex-grow: 1;
overflow-y:hidden;
}
https://www.codeply.com/go/iFDwwGDmKi (updated)

You just need to add the native Bootstrap 4 class img-fluid to your images like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<main class="container-fluid p-0">
<header class="row Logo no-gutters">
<div class="col-sm-3 mx-auto">
<header>
<img class="logo d-block img-fluid mx-auto" src="https://placehold.it/120x60" alt="Logo" />
</header>
</div>
</header>
<div class="row Menu no-gutters">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row Images no-gutters">
<div class="col-sm-4 image" id="image00">
<img class="img-fluid" src="https://placeimg.com/640/480/arch">
</div>
<div class="col-sm-4 image" id="image01">
<img class="img-fluid" src="https://placeimg.com/640/480/animals">
</div>
<div class="col-sm-4 image" id="image02">
<img class="img-fluid" src="https://placeimg.com/640/480/nature">
</div>
<div class="col-sm-4 image" id="image10">
<img class="img-fluid" src="https://placeimg.com/640/480/people">
</div>
<div class="col-sm-4 image" id="image11">
<img class="img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-sm-4 image" id="image12">
<img class="img-fluid" src="https://placeimg.com/640/480/any">
</div>
</div>
</main>

As pointed out by Temani Afif, you didn't specify any parent with a specific height. Specify the height in your .image class instead of 100%, i.e. height: 200px;

How do I use ScrollSpy?

I've been trying to build my website and I'd really like to have some font awesome glyphs on my page that fade in when I scroll. The thing is that I do not really understand Spyscroll or how to use it.
Here is my code, perhaps anyone could help me out.
#section2{
position: absolute;
top: 105%;
}
html {
}
p{
color: white;
}
.servicetitle{
color: white;
}
.btn-light{
color:white;
}
#onzespecialiteiten {
text-align: center;
margin-top: -5%;
}
<!DOCTYPE html>
<html lang="en" style="height: 200%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Exodius Webdesign</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; border: none;" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="color: #ffffff" class="navbar-brand" href="#myPage">Exodius Webdesign</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class=""><a style="color: #ffffff" href="#about">ABOUT</a></li>
<li class=""><a style="color: #ffffff" href="#services">SERVICES</a></li>
<li class=""><a style="color: #ffffff" href="#portfolio">PORTFOLIO</a></li>
<li class=""><a style="color: #ffffff" href="#pricing">PRICING</a></li>
<li class=""><a style="color: #ffffff" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</head>
<body id="myPage" data-spy="scroll" data-target="col-md-3 col-sm-6" data-offset="60" style="background-color: #293B4D; height: 200%">
<!-- Content van home -->
<h1 style="margin-top: 15%; margin-left: 55%; color: white; font-family: 'Titillium Web', sans-serif;" >Exodius Webdesign</h1>
<p style="margin-top: 1%; margin-left: 30%; text-align: center; color: white; font-family: 'Dosis', sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<img src="images/logotransparant.png" alt="logo" height="560" width="960" style="margin-left: -5%; margin-top: -12%">
<!-- Dit is de button en de section waarnaar die naartoe scrollt -->
Lees meer
<div id="section2">
<section></section>
</div>
<!-- Dit is het blauwe vlak -->
<div class="jumbotron" style="margin-top: 5%; height: 790px; background-color: #3692D0">
<div style="margin: 10%; text-align: center" class="row">
<p id="onzespecialiteiten">Onze Specialiteiten</p>
<hr width="25%" style="margin-left: 38%; margin-top: 2%"><br><br><br><br>
<div class="col-md-3 col-sm-6" >
<div class="w3-container w3-center w3-animate-zoom" >
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Webdesign</strong>
</h4>
<p>Wij bouwen binnen één week een website met Wordpress of Bootstrap</p>
Lees Meer
</div>
</div>
<div class="col-md-3 col-sm-6" >
<div class="w3-container w3-center w3-animate-zoom" style="animation-delay: 0.1s;">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Photoshop</strong>
</h4>
<p>Wij kunnen vrijwel met alle Photoshop opdrachten overweg</p>
Lees Meer
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="w3-container w3-center w3-animate-zoom" style="animation-delay: 0.12s;">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Webshops</strong>
</h4>
<p>Wij kunnen met Wordpress CMS complete Webshops bouwen</p>
Lees Meer
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="w3-container w3-center w3-animate-zoom" style="animation-delay: 0.13s;">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$("#buttonn").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
</body>
</html>

Check this one link and the next videos, you will get the idea
https://www.youtube.com/watch?v=K2qjgCRkmt8&index=47&list=PL6n9fhu94yhXd4xnk-j5FGhHjUv1LsF0V

Using multiple (owl) carousel on a single page

I have been looking at ways on google to use multiple carousel on a single page and yet did not find any of the solutions working for me. Can anyone of you please help.
Here is the code:
HTML
<!-- Carousel 1 -->
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
I have named the carousel as as owl-demo and owl-demo-1
Javascript
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){owl.trigger('owl.next');})
$(".prev").click(function(){owl.trigger('owl.prev');})
});
On JsFiddle

Updated code should look like this: https://jsfiddle.net/wtg76spd/1/
JavaScript:
$(document).ready(function() {
$("#owl-demo, #owl-demo-1").each(function() {
$(this).owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
// Custom Navigation Events
$(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
$(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});
CSS (just first line changed):
//before
#owl-demo .item{
//after
#owl-demo .item, #owl-demo-1 .item{
//class "owl-demo" would do better in this case
1) Use .each() instead of copying code.
2) It'd be better to use class instead of #owl-demo and #owl-demo-1 - let's say you had not 2 but 100 sliders. Would you still give them IDs? However I didn't change it in example.
3) I used closest() and find() methods for next/prev buttons. This way I have 2 callback functions instead of 4.

$(document).ready(function(){
$('.course-carousel').owlCarousel({
items:3,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
$('.video-carousel').owlCarousel({
items:1,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
});
body {
color: #828bb2;
font-family: "Roboto",sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.625em;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family: "Playfair Display",serif;
color: #222;
line-height: 1.2em;
margin-bottom: 0;
margin-top: 0;
font-weight: 900;
}
.home-banner-area {
background: url('../images/home-banner.png') no-repeat;
background-size: cover;
background-position: center center;
max-height: 1200px;
}
.container{
max-width:1140px;
}
.default-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9;
}
.col-link{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: #fff;
padding: 20px;
}
.banner-lt-content {
font-family: 'Playfair Display', serif;
font-size: 48px;
line-height: 1em;
font-weight: 900;
}
.feature-area .container-fluid {
padding-left: 50px;
}
.feature-area{
margin-top:-110px;
}
.mt-20{
margin-top:20px;
}
.mb-40{
margin-bottom:40px;
}
.mb-20{
margin-bottom:20px;
}
.mt-30{
margin-top:30px;
}
.ml-20{
margin-left:20px;
}
.feature-item {
margin: 30px 0;
border-right: 1px solid rgba(130,139,178,.2);
padding-right: 20px;
}
.fa-book,.fa-trophy,.fa-desktop{
font-size:30px;
}
.feature-item h4 {
font-size: 18px;
margin-bottom: 20px;
}
.section-gap {
padding: 120px 0;
}
.section-title p {
margin-bottom: 0;
max-width: 620px;
}
.section-title h2 {
font-size: 42px;
color: #222;
margin-bottom: 20px;
}
.popular-course-area .container-fluid {
max-width: 1140px;
padding-left: 15px;
}
.owl-carousel .owl-item{
padding:10px !important;
}
.course-heading{
font-family: 'Playfair Display', serif;
width:100%;
color:#000;
text-align:justify;
margin:15px 0px;
font-size:21px;
}
.owl-carousel .owl-item:hover .course-heading{
color:#7c32ff;
}
.video-area{
background: url('../images/video-area-bg.webp') no-repeat;
background-position-x: center;
}
.section-gap-bottom{
padding-bottom:120px;
}
.section-title p{
margin-bottom:0;
max-width:620px;
}
.video-area .video-left {
padding-bottom: 151px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>College theme</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Eclipse</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link col-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">FACULTY</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">CONTACT US</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section class="home-banner-area">
<div class="container">
<div class="row justify-content-center fullscreen align-items-center" style="height:820px;">
<div class="col-lg-5 col-md-8 home-banner-left">
<h1 class="text-white banner-lt-content">Take the first step to learn with us</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one
greater leap forward than the building and launch of the space
telescope known as the Hubble.</p>
</div>
<div class="offset-lg-2 col-lg-5 col-md-12 home-banner-right">
<img src="images/banner-image.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<section class="feature-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-book"></i>
<div class="ml-20">
<h4>New Classes</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-trophy"></i>
<div class="ml-20">
<h4>Top Courses</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-desktop"></i>
<div class="ml-20">
<h4>Full E-Books</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="popular-course-area section-gap">
<div class="container-fluid">
<div class="row justify-content-center section-title">
<div class="col-lg-12">
<h2>Popular Courses<br/> Available Right Now</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="owl-carousel course-carousel owl-theme">
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="video-area section-gap-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="section-title text-white">
<h2 class="text-white">
Watch Our Teacher<br/>in Live Action
</h2>
<p>
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
<div class="offset-lg-1 col-md-6 video-left">
<div class="owl-carousel video-carousel owl-theme">
<div class="single-video">
<div class="video-part">
<img src="images/video-overlay-image.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script> -->
<script src="js/all.min.js"></script>
<script src="js/fontawesome.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/main.js"></script>
</body>
</html>