HTML element scroll down until a specific value - javascript

Code:
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
height: 10vh;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}
<!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="style/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
<title>Tets</title>
</head>
<body>
<!-- Nav Boostrap -->
<section class="position-absolute">
<ul class="nav nav-fill fixed-top nav-null-color" id="menu">
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Corporate</a>
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Used Machinery</a>
</li>
<li class="nav-item">
<img src="" id="logo" alt="logo">
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Services</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link text-white" href="#">Customer Area</a>
</li> -->
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Sign In/Register</a>
</li>
</ul>
</section>
<!-- About Us -->
<section id="about" class="corporate text-center">
<div class="screen-center">
<h1 class="text-dark">About us</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<h3>gsfgdfgdfgdg</h3>
<p>fsdfgsdgdsfgsdfgsdfg</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-2 scroll-spy" id="">
<div class="d-flex flex-column ml-5 mt-5 spy-menu">
<h4>Corporate</h4>
<a class="nav-link text-dark underline" href="#top"> About Us</a>
<a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
<a class="nav-link text-dark underline" href="#careers">Careers Title</a>
<a class="nav-link text-dark underline" href="#contact">Contact Us</a>
</div>
<input type="text" id="prueba" value="">
<input type="text" id="prueba2" value="">
</div>
<div class="col-10">
<!-- Worlwide -->
<section id="worldwide" class="worldwide text-center">
<h1 class="mt-5 mb-5">Worldwide</h1>
<div class="container">
<div class="row justify-content-between">
<div class="col ml-5">
<ul class="list-group">
<li class="list-group-item active">dfgdfgdfgdfg</li>
<li class="list-group-item">dfgdfgdfg</li>
<li class="list-group-item">dfdfdgd</li>
<li class="list-group-item">dfgdf</li>
<li class="list-group-item">e-mail: jdfgdfgdfg</li>
<li class="list-group-item">Tel :dfgdfgdg‹</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">dfgdfgd</li>
<li class="list-group-item">Cdfgdfg</li>
<li class="list-group-item">2dfgdfgn</li>
<li class="list-group-item">dfgdfga</li>
<li class="list-group-item">SdfgdfgN</li>
<li class="list-group-item">e-mail: dfgdfgdfg</li>
<li class="list-group-item">dfgdgdfg</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">OdfgdfgK</li>
<li class="list-group-item">fgdfgdg
<li class="list-group-item">email: gffhfgfgh</li>
<li class="list-group-item">Tel: +fhghfg9</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Ogfghfhhu </li>
<li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
<li class="list-group-item">rdgrgg</li>
<li class="list-group-item">email: rdgdrgds</li>
<li class="list-group-item">Tel.: drgdgrgdrg</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Careers Title -->
<section id="careers" class="careers">
<div class="screen-center">
<h1 class="text-dark">Careers Title</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<p>drgdrgdrgdrgdrgdg</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact">
<div class="screen-center">
<h1 class="text-dark">Contact Us</h1>
<div class="container">
<div class="row justify-content-center blank">
<div class="col-4">
<form>
<div class="form-group">
<input type="text" class="form-control mt-3" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company">
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>Albania</option>
<option>Angola</option>
<option>Argelia</option>
<option>Argentina</option>
<option>Armenia</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile">
</div>
</form>
</div>
<div class="col-4">
<form>
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
</div>
<button type="button" class="btn btn-outline-warning btn-lg">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="container mt-3 mb-3">
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Company</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">About Us</a>
<a class="nav-link text-dark underline" href="#">Offices</a>
<a class="nav-link text-dark underline" href="#">News Media</a>
<a class="nav-link text-dark underline" href="#">Contact</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-cogs" aria-hidden="true"></i></span>
<h4 class="ml-3">drgdrgdy</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdgy</a>
<a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
<a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Contact</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>Worldwide Contact</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">Legal</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">Legal Information</a>
<a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">gggggg</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">rgdgdrg</a>
<a class="nav-link text-dark underline" href="#">fthgdrgd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Language</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>English</option>
<option>Spanish</option>
<option>German</option>
<option>Italian</option>
<option>Russian</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Account</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
<a class="nav-link text-dark underline" href="#">drgdg</a>
<a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
<a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
</li>
</ul>
</div>
<div class="col">
<img src="img/youtube.png" id="youtube" alt="youtube">
</div>
</div>
</div>
</section>
<!-- jQuery first, then Popper.js, then Bootstrap 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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
$('#prueba').val(window.scrollY);
if ($('.scroll-spy').offset().top > 2500) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
</script>
</body>
</html>
What i'm trying to do is to fix the problem of the lateral menu that when you scroll down it superimpose the footer. I try to fix this with JQuery by changing the position property to relative when it overpass an especific value of the scroll, and that works correctly. I also wanted to give it back the sticky property when the scroll value is less than the limit one, but it dosen't work correctly. Do you know what I am missing? Thank you for your help.


You see, you are checking $('.scroll-spy').offset().top, and make $('.scroll-spy').css('top', '1800px'); after 2500px offset. So after that the offset of $('.scroll-spy') will always be 1800. Better to check the offset of something else, like window.scrollY.
<script>
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
$('#prueba').val(window.scrollY);
if (window.scrollY > 2500) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
</script>
UPDATED
But the best solution will be the one with no concert digits. Rewrites a script a bit. And in template added align-items-start in .scroll-spy parent
<div class="row align-items-start">
<div class="col-2 scroll-spy" id="">
and in CSS removed height from .scroll-spy. Please look the Snippet below.
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
let scrollSpyHeight = $('.scroll-spy').outerHeight();
let footerOffsetTop = $('.footer').offset().top;
let windowTop = jQuery(window).scrollTop();
$('#prueba').val(window.scrollY);
if ($('.scroll-spy').offset().top > (footerOffsetTop-scrollSpyHeight)) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}
<!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">
<!-- jQuery first, then Popper.js, then Bootstrap 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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
<title>Tets</title>
</head>
<body>
<!-- Nav Boostrap -->
<section class="position-absolute">
<ul class="nav nav-fill fixed-top nav-null-color" id="menu">
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Corporate</a>
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Used Machinery</a>
</li>
<li class="nav-item">
<img src="" id="logo" alt="logo">
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Services</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link text-white" href="#">Customer Area</a>
</li> -->
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Sign In/Register</a>
</li>
</ul>
</section>
<!-- About Us -->
<section id="about" class="corporate text-center">
<div class="screen-center">
<h1 class="text-dark">About us</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<h3>gsfgdfgdfgdg</h3>
<p>fsdfgsdgdsfgsdfgsdfg</p>
</div>
</div>
</div>
</section>
<div class="row align-items-start">
<div class="col-2 scroll-spy" id="">
<div class="d-flex flex-column ml-5 mt-5 spy-menu">
<h4>Corporate</h4>
<a class="nav-link text-dark underline" href="#top"> About Us</a>
<a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
<a class="nav-link text-dark underline" href="#careers">Careers Title</a>
<a class="nav-link text-dark underline" href="#contact">Contact Us</a>
</div>
<input type="text" id="prueba" value="">
<input type="text" id="prueba2" value="">
</div>
<div class="col-10">
<!-- Worlwide -->
<section id="worldwide" class="worldwide text-center">
<h1 class="mt-5 mb-5">Worldwide</h1>
<div class="container">
<div class="row justify-content-between">
<div class="col ml-5">
<ul class="list-group">
<li class="list-group-item active">dfgdfgdfgdfg</li>
<li class="list-group-item">dfgdfgdfg</li>
<li class="list-group-item">dfdfdgd</li>
<li class="list-group-item">dfgdf</li>
<li class="list-group-item">e-mail: jdfgdfgdfg</li>
<li class="list-group-item">Tel :dfgdfgdg‹</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">dfgdfgd</li>
<li class="list-group-item">Cdfgdfg</li>
<li class="list-group-item">2dfgdfgn</li>
<li class="list-group-item">dfgdfga</li>
<li class="list-group-item">SdfgdfgN</li>
<li class="list-group-item">e-mail: dfgdfgdfg</li>
<li class="list-group-item">dfgdgdfg</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">OdfgdfgK</li>
<li class="list-group-item">fgdfgdg
<li class="list-group-item">email: gffhfgfgh</li>
<li class="list-group-item">Tel: +fhghfg9</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Ogfghfhhu </li>
<li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
<li class="list-group-item">rdgrgg</li>
<li class="list-group-item">email: rdgdrgds</li>
<li class="list-group-item">Tel.: drgdgrgdrg</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Careers Title -->
<section id="careers" class="careers">
<div class="screen-center">
<h1 class="text-dark">Careers Title</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<p>drgdrgdrgdrgdrgdg</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact">
<div class="screen-center">
<h1 class="text-dark">Contact Us</h1>
<div class="container">
<div class="row justify-content-center blank">
<div class="col-4">
<form>
<div class="form-group">
<input type="text" class="form-control mt-3" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company">
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>Albania</option>
<option>Angola</option>
<option>Argelia</option>
<option>Argentina</option>
<option>Armenia</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile">
</div>
</form>
</div>
<div class="col-4">
<form>
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
</div>
<button type="button" class="btn btn-outline-warning btn-lg">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="container mt-3 mb-3">
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Company</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">About Us</a>
<a class="nav-link text-dark underline" href="#">Offices</a>
<a class="nav-link text-dark underline" href="#">News Media</a>
<a class="nav-link text-dark underline" href="#">Contact</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-cogs" aria-hidden="true"></i></span>
<h4 class="ml-3">drgdrgdy</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdgy</a>
<a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
<a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Contact</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>Worldwide Contact</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">Legal</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">Legal Information</a>
<a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">gggggg</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">rgdgdrg</a>
<a class="nav-link text-dark underline" href="#">fthgdrgd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Language</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>English</option>
<option>Spanish</option>
<option>German</option>
<option>Italian</option>
<option>Russian</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Account</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
<a class="nav-link text-dark underline" href="#">drgdg</a>
<a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
<a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
</li>
</ul>
</div>
<div class="col">
<img src="img/youtube.png" id="youtube" alt="youtube">
</div>
</div>
</div>
</section>
</body>
</html>

Related

How can I change the image when hovering over a link?

Greetings how to implement this menu. Its trick is that when the mouse is on the link of a certain product, this product is displayed above.
My attempts to implement this functionality:
$(document).ready(function() {
var $img = $('.card-img-top'),
dsrc = $img.attr('src');
$('.list-group li a').hover(function() {
var $this = $(this).addClass('hover');
$img.attr('src', $this.data('image'));
}, function() {
$(this).removeClass('hover');
$img.attr('src', dsrc);
});
});
.card {
border: none;
margin: 0px 30px 0px 0px;
}
.card-img-top {
border-radius: 0;
height: 230px;
width: 370px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.card-block {
margin-top: 20px;
}
.link a {
text-decoration: none;
color: #212529;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="py-4">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<img src="https://www.koemmerling.com/cms16/files/Fenster-Haustueren-Verteiler.jpg?h=246" class="card-img-top" id="first">
<div class="card-block">
<h5 class="card-title fw-bold">Оконные и дверные системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="https://www.koemmerling.com/cms16/files/38_System-88-MD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="https://www.koemmerling.com/cms16/files/5_System-76-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="https://www.koemmerling.com/cms16/files/1_System-70-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://www.koemmerling.com/cms16/files/KOEMMERLING-PremiPlan-Verteiler-Produkte.jpg?h=246" class="card-img-top" alt="...">
<div class="card-block">
<h5 class="card-title fw-bold">Пороговые системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://www.koemmerling.com/cms16/files/Schiebesysteme-Verteiler.jpg?h=246" class="card-img-top" alt="...">
<div class="card-block">
<h5 class="card-title fw-bold">Раздвижные системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>
</div>
</div>
I would be extremely grateful if anyone could help me figure out how to do this.
<div class="card">
<img src="/Schiebesysteme-Verteiler.jpeg" class="card-img-top" alt="...">
<div class="card-block">
<h5 class="card-title fw-bold">Раздвижные системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>

$img is all the top images. You should just change the image in the same .card group.
You can't use a global variable for the previous image, since it's different for each image. Save it in another data() variable.
$(document).ready(function() {
$('.list-group li a').hover(function() {
console.log("hover");
var $this = $(this).addClass('hover');
var $img = $this.closest(".card").find(".card-img-top");
$img.data("orig-src", $img.attr("src"));
$img.attr('src', $this.data('image'));
}, function() {
console.log("remove");
var $this = $(this).removeClass('hover');
var $img = $this.closest(".card").find(".card-img-top");
$img.attr('src', $img.data("orig-src"));
});
});
.card {
border: none;
margin: 0px 30px 0px 0px;
}
.card-img-top {
border-radius: 0;
height: 230px;
width: 370px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.card-block {
margin-top: 20px;
}
.link a {
text-decoration: none;
color: #212529;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="py-4">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<img src="https://www.koemmerling.com/cms16/files/Fenster-Haustueren-Verteiler.jpg?h=246" class="card-img-top" id="first">
<div class="card-block">
<h5 class="card-title fw-bold">Оконные и дверные системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="https://www.koemmerling.com/cms16/files/38_System-88-MD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="https://www.koemmerling.com/cms16/files/5_System-76-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="https://www.koemmerling.com/cms16/files/1_System-70-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://www.koemmerling.com/cms16/files/KOEMMERLING-PremiPlan-Verteiler-Produkte.jpg?h=246" class="card-img-top" alt="...">
<div class="card-block">
<h5 class="card-title fw-bold">Пороговые системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://www.koemmerling.com/cms16/files/Schiebesysteme-Verteiler.jpg?h=246" class="card-img-top" alt="...">
<div class="card-block">
<h5 class="card-title fw-bold">Раздвижные системы</h5><br>
<ul class="list-group list-group-flush">
<li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
<li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
<li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
</ul>
</div>
</div>
</div>
</div>

this refer to the target element (the link). You want to get from there to the correct image, so you need to go up to the closest common parent, then find the image.
$(document).ready(function() {
$('.list-group li a').hover(function() {
var $this = $(this).addClass('hover');
var $img = $(this).closest(".card").find('.card-img-top');
$img.attr('src', $this.data('image'));
}, function() {
// to revert use same logic, only save the value as attribute `data-old-src` or something
});
});

Keep List in the sidebar on same line after collapse

I recently used an open-source code for creating Sidebar to implement to my Website.
I'm trying to do 2 things mainly to it. The first thing I wanted to be "collapsed onLoad", I tried doing it myself but the content of it stayed out of the sidebar. The second problem I'm facing is "Keeping the icons on the same line of the content", I want the icons when the sidebar is collapsed to be on the same line of the list when it's open.
$(document).ready(function() {
// Hide submenus
$('#body-row .collapse').collapse('hide');
// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');
// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$('.menu-collapsed').toggleClass('d-none');
$('.sidebar-submenu').toggleClass('d-none');
$('.submenu-icon').toggleClass('d-none');
$('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
// Treating d-flex/d-none on separators with title
var SeparatorTitle = $('.sidebar-separator-title');
if (SeparatorTitle.hasClass('d-flex')) {
SeparatorTitle.removeClass('d-flex');
} else {
SeparatorTitle.addClass('d-flex');
}
// Collapse/Expand icon
$('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group -->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 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>

I have made the necessary changes.
$(document).ready(function() {
// Hide submenus
$("#body-row .collapse").collapse("hide");
// Collapse/Expand icon
$("#collapse-icon").addClass("fa-angle-double-left");
// Collapse click
$("[data-toggle=sidebar-colapse]").click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$(".menu-collapsed").toggleClass("d-none");
$(".sidebar-submenu").toggleClass("d-none");
$(".submenu-icon").toggleClass("d-none");
$("#sidebar-container").toggleClass("sidebar-expanded sidebar-collapsed");
$("#push-medown").toggleClass("open");
// Collapse/Expand icon
$("#collapse-icon").toggleClass("fa-angle-double-left fa-angle-double-right");
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px;
opacity: 0;
}
#push-medown.open {
opacity: 1;
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-collapsed d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group-->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class=" w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted align-items-center d-flex" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 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>
👉 Check it in action on codepen

Full screen slider with materialize css, next and previous buttons with materialize js methods

I have been using Materialize CSS for the first time and I'm experiencing an error while I'm working with fullscreen slider.
I'm trying to add next and previous buttons which is not working. And also the next to the slider is div is getting hidden behind the sliders. I cannot add padding because there is the height of the slider is responsive.
Following is the code I'm working on
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="screen">
.middle-indicator {
position: absolute;
top: 50%;
z-index: 1000;
}
.middle-indicator-text {
font-size: 4.2rem;
}
a.middle-indicator-text {
color: white !important;
}
.content-indicator {
width: 64px;
height: 64px;
background: none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.indicators {
visibility: hidden;
}
</style>
</head>
<body>
<div class="navbar-fixed white-text">
<ul id='about' class='dropdown-content orange accent-2'>
<li>About Us</li>
<li class="divider" tabindex="-1"></li>
<li>Why RNR?</li>
</ul>
<ul id='projects-main' class='dropdown-content orange accent-2'>
<li>First Project</li>
<li class="divider" tabindex="-1"></li>
<li>Pheonix project of projects and project </li>
</ul>
<nav class="orange">
<div class="nav-wrapper container">
Logo
<i class="material-icons white-text">menu</i>
<ul class=" orange right hide-on-med-and-down">
<li class="active"><a class="white-text" href="sass.html"> <span>Home </span></a></li>
<li><a class="dropdown-trigger white-text" href='#' data-target='about'>About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger white-text" href='#' data-target='projects-main'>Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
<li><a class="white-text" href="collapsible.html">Javascript</a></li>
<li><a class="white-text" href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav orange" id="mobile-nav">
<li><a class="white-text" href="sass.html">Home</a></li>
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header white-text" style="padding: 0px 32px !important">About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="amber accent-4 collapsible-body">
<ul>
<li><a class="white-text" href="#!">About Us</a></li>
<li><a class="white-text" href="#!">Why RNR?</a></li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="amber accent-4 collapsible-body">
<ul>
<li><a class="white-text" href="#!">First</a></li>
<li><a class="white-text" href="#!">Second</a></li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Gallery<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul class="amber accent-4">
<li><a class="white-text" href="#!">First</a></li>
<li><a class="white-text" href="#!">Second</a></li>
<li><a class="white-text" href="#!">Third</a></li>
<li><a class="white-text" href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="white-text" href="collapsible.html">Events</a></li>
<li><a class="white-text" href="mobile.html">Contact</a></li>
<div class="row">
<div class=" container footer white col s12 center-align valign-wrapper" style="height: 100px; position: absolute; bottom: 60px;">
Follow us:
</div>
</div>
</ul>
<div class="slider fullscreen" data-indicators="true" >
<div class="slider-fixed-item center middle-indicator">
<div class="left">
<a href="" onclick="prev();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
class="material-icons left middle-indicator-text">chevron_left</i></a>
</div>
<div class="right">
<a href="" onclick="next();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
class="material-icons right middle-indicator-text">chevron_right</i></a>
</div>
</div>
<ul class="slides">
<li class="slider-item">
<img src="https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="slider-item">
<img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="slider-item">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col m6 s12">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 410px"alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col m6 s12">
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'right',
draggable: true,
inDuration: 250,
outDuration: 200,
onOpenStart: null,
onOpenEnd: null,
onCloseStart: null,
onCloseEnd: null,
preventScrolling: true
});
var collapsibleElem = document.querySelector('.collapsible');
var collapsibleInstance = M.Collapsible.init(collapsibleElem, {});
var dropdownElems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(dropdownElems, {
alignment:'right',
constrainWidth:false,
coverTrigger:false});
var sliderElems = document.querySelectorAll('.slider');
var instances = M.Slider.init(sliderElems, {indicators: false, interval:'5'});
window.next = function() {
var sliderElem = document.querySelector('.slider');
var l = M.Slider.getInstance(sliderElem);
l.next(1);
}
window.prev = function() {
var sliderElem = document.querySelector('.slider');
var l = M.Slider.getInstance(sliderElem);
l.prev(1);
}
});
</script>
</body>
</html>
TIA
Best Regards,
Manoj.

OK I figured it out, I should add # in a href, if not the page will keep reloading with every click.

How to fix: Navbar styling issue

The following is the code for the navbar on https://www.vimaldevelopers.com/vimalproject0/residential-projects-mumbai/vimalprojects.html
Checked the bootstrap version on the bad navbar page and it is 3.3.7
<div class="col-lg-9 col-md-5 col-sm-6 col-xs-12 toll-col-mob">
<div style="background: #85B540!important; width: 95rem; height: 2rem; ">
<div class="hotlines text-white">Contact No.
0222-8981111
<!-- 1 800 212 8888 -->
</div>
</div>
<div style="background: #18191b!important; padding-top: 15px">
<nav class="toplinks">
<ul>
<li>Vimal Developers</li>
<li class="drop-drown-menu clearfix">
projects
<ul class="dropdown-content menu-show">
<li>
Residential
</li>
<li>
Commercial
</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
I want to make it look like the main page on https://www.vimaldevelopers.com. This page is using v4.
This is what the above code looks like (the bad navbar) :
This is how I want it to look like :
Someone please save my day!

try this :::
.toll-col-mob {
width:100%;
}
.toplinks ul {
display: flex;
justify-content: center;
color: #fff;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
}

U don't need navbar in column structure. Try with this code. Hope can help you.
<body style="padding: 0; margin: 0;">
<div class="toll-col-mob">
<div style="background: #85B540!important; height: 2rem; " >
<div class="hotlines text-white">Contact No.
0222-8981111
<!-- 1 800 212 8888 -->
</div>
</div>
<div style="background: #18191b!important; padding-top: 15px">
<nav class="toplinks">
<ul>
<li>Vimal Developers</li> /
<li class="drop-drown-menu clearfix">
projects</span>
<ul class="dropdown-content menu-show">
<li>
<a href="#" class="" >Residential</a>
</li>
<li>
<a href="#" class="" >Commercial</a>
</li>
</ul>
</li> /
<li>Contact Us</li>
</ul>
</nav>
</body>

I think in your second div "width" will be 100%
<div style="background: #85B540!important; width: 100%; height: auto;" >
and please explain little bit more if it doesn't work.

Try this:
body{
padding:0;
margin:0;
}
<div class="">
<div style="background: #85B540!important; width: 100vw; height: 2rem" >
<div class="hotlines text-white ">Call:
0222-8981111
</div>
</div>
<div style="background: #18191b!important; padding-top: 15px">
<nav class="toplinks">
<ul>
<li>Vimal Developers</li> /
<li class="drop-drown-menu clearfix">
projects</span>
<ul class="dropdown-content menu-show">
<li>
<a href="#" class="" >Residential</a>
</li>
<li>
<a href="#" class="" >Commercial</a>
</li>
</ul>
</li> /
<li>Contact Us</li>
</ul>
</nav>
</div>

Floating for menu items is not working

I'm an amateur and I'm practicing. But when I code this I can't get the margin right for menu items.
This is my project:
body {
background: #f5f5f5;
}
.top-f{
font-size: .9rem;
}
.h1brand{
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1{
margin: 10px 0;
}
.nav-icon{
margin: 0 0;
}
.logo span{
color: #50d8af;
}
.logo:hover{
text-decoration: none;
}
.nav-menu ul li a{
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu{
min-width: 15rem;
}
.dropdown-menu a:hover{
background: #9fcdff;
}
.background-img{
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor{
color: #0c2e8a;
}
.headcolor2{
color: #50d8af;
}
.btn{
border-radius: 0px;
}
.mc{
text-align: center;
align-content: center;
}
.navbar-toggler{
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3">
<i class="fa fa-phone text-secondary"></i>
<span class="ml-2 text-secondary">09905645285</span>
</li>
<li class="list-inline-item mr-3">
<i class="fas fa-envelope text-secondary"></i>
<span class="ml-2 text-secondary">parsaking#example.com</span>
</li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary">
<i class="fab fa-twitter"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-facebook-f"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-instagram"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-google-plus-g"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="row">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo col-xl-6 col-lg-6 float-left">
<h1 class="h1brand ">Reve
<span>al</span>
</h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse col-xl-6 col-lg-6 " id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--start section offer-->
<div class="container-fluid">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making
<span class="headcolor2">your ideas </span>
<br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Can you help me to make xl and lg float right and responsive, please?
I tried everything to solve this problem but I failed every time.
And it's reveral theme, made with bootstrap.
It wants more text from me and I'm not very good in English. Oh, how can I tell?
I don't know much about CSS and HTML and this is a disaster.
Thanks a lot.

I have made some changes in your structure to make it aligned. As of now your navbar is aligned. Please confirm if it solves your problem.
body {
background: #f5f5f5;
}
.top-f {
font-size: .9rem;
}
.h1brand {
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1 {
margin: 10px 0;
}
.nav-icon {
margin: 0 0;
}
.logo span {
color: #50d8af;
}
.logo:hover {
text-decoration: none;
}
.nav-menu ul li a {
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown-menu a:hover {
background: #9fcdff;
}
.background-img {
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor {
color: #0c2e8a;
}
.headcolor2 {
color: #50d8af;
}
.btn {
border-radius: 0px;
}
.mc {
text-align: center;
align-content: center;
}
.navbar-toggler {
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3"><i class="fa fa-phone text-secondary"></i><span class="ml-2 text-secondary">09905645285</span></li>
<li class="list-inline-item mr-3"><i class="fas fa-envelope text-secondary"></i><span class="ml-2 text-secondary">parsaking#example.com</span></li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-google-plus-g"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo">
<h1 class="h1brand ">Reve<span>al</span></h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--start section offer-->
<div class="container">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making <span class="headcolor2">your ideas </span><br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Categories

Resources