Develop Reference

card not scrolling through stack properly

I have a set of stacked cards displayed on my home page. When I click the buttons to scroll through them they pop up on the header and mess up the whole page's styling.
Also, how can I remove the white box from behind my cards as well?
Screenshot:
var $card = $('.card1');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function() {
var prependList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function() {
prependList();
}, 150);
});
$('.prev').click(function() {
var appendToList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}
}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function() {
appendToList();
}, 150);
});
body {
background-color: #E5E5E5 !important;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370DB !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.col-md-5 {
margin: auto;
}
.card-title {
text-align: center;
font-weight: 800;
font-size: 22px;
}
.card-text {
text-align: center;
font-weight: 800;
margin-top: -75px;
}
::-webkit-input-placeholder {
font-weight: bold;
}
:-moz-placeholder {
font-weight: bold;
}
:-ms-input-placeholder {
font-weight: bold;
}
/*---Star Rating---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Card One---*/
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
left: -65px;
color: #9370DB;
}
.card1 .roomB {
position: relative;
left: 5px;
color: #ffffff;
}
.card1 .roomC {
position: relative;
left: 5px;
color: #ffffff;
}
.stuLocation {
position: relative;
top: -10px;
left: -65px;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: -50px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -30px;
left: -60px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -7px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer {
width: 100%;
height: 900px;
background-color: #fff;
padding: 50px 80px;
}
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #C01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover>.buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover>.buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></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">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></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" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html">Log In</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next Studio</strong></h1>
<div class="row">
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<div class="row">
<div class="stuList mx-auto">
<div class="stucontainer">
<div class="card1-stack">
<a class="buttons prev" href="#">
</a>
<ul class="card-list">
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://images.adsttc.com/media/images/5d1b/e492/284d/d1b1/8300/00a1/large_jpg/feature_-_FFX_SDC_01.jpg?1562109025');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomC mb-2"><strong>Room C</strong></h6>
</div>
</div>
</div>
</div>
</li>
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://www.unifiedmanufacturing.com/blog/wp-content/uploads/2021/02/Nightbird-Recording-Studios-Pandemic.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomB mb-2"><strong>Room B</strong></h6>
</div>
</div>
</div>
</div>
</li>
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width:50px">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1" class="btn"><i class="fas fa-heart"></i></Button>
</div>
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
</div>
</div>
</li>
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
</div>
</div>
</div>
</section>

To remove the background color try removing background-color: #fff; from .stucontainer class
.stucontainer {
width: 100%;
height: 900px;
// background-color: #fff;
padding: 50px 80px;
}
and to prevent scrolling to the top you can swap the anchor elements with button elements
<!-- <a class="buttons prev" href="#"><</a> -->
<button class="buttons prev"><</button>
...
<!-- <a class="buttons next" href="#">></a> -->
<button class="buttons next">></button>
to stop the cards from getting added at the top swap this line
// $('ul').prepend($slicedCard);
$('.card-list').prepend($slicedCard);
this will stop the card from being added to the navbar ul element

Getting Cards to fit in body properly

I have a page where a video is playing in the hero inside of the header with the navbar. I want to scroll down to my row of cards, but when I brought my code over from another page the styling got messed up. how can I make my cards display properly under this header without messing up the styling of the header and body? I have provided a screenshot and my code. Thanks!:
The card that I want to display under my header:
var $card = $('.card1');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function() {
var prependList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function() {
prependList();
}, 150);
});
$('.prev').click(function() {
var appendToList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}
}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function() {
appendToList();
}, 150);
});
body {
background-color: #E5E5E5 !important;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370DB !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.col-md-5 {
margin: auto;
}
.card-title {
text-align: center;
font-weight: 800;
font-size: 22px;
}
.card-text {
text-align: center;
font-weight: 800;
margin-top: -75px;
}
::-webkit-input-placeholder {
font-weight: bold;
}
:-moz-placeholder {
font-weight: bold;
}
:-ms-input-placeholder {
font-weight: bold;
}
/*---Star Rating---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: 410px;
}
.btns2 {
position: relative;
top: -50px;
left: 410px;
}
.btns3 {
position: relative;
top: -50px;
left: 410px;
}
.btns4 {
position: relative;
top: -50px;
left: 410px;
}
.btns5 {
position: relative;
top: -50px;
left: 410px;
}
.btns6 {
position: relative;
top: -50px;
left: 410px;
}
/*---Card One---*/
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
left: -65px;
color: #9370DB;
}
.card1 .roomB {
position: relative;
left: 5px;
color: #ffffff;
}
.card1 .roomC {
position: relative;
left: 5px;
color: #ffffff;
}
.stuLocation {
position: relative;
top: -10px;
left: -65px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -75px;
left: -25px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -6px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer {
width: 100%;
height: 900px;
background-color: #fff;
padding: 50px 80px;
}
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #C01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover>.buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover>.buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>StudioPick</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></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">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></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" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html">Log In</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<!-- The header content -->
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next Studio</strong></h1>
<div class="row">
<!---Search--->
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<!---Zipcode-->
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<!---Sort----->
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<!---Filter--->
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<div class="row">
<div class="stuList mx-auto">
<!--Studio List-->
<div class="stucontainer">
<div class="card1-stack">
<!---Button for scroll-->
<a class="buttons prev" href="#">
</a>
<!---Button for scroll-->
<ul class="card-list">
<!--Studio Room 2-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://images.adsttc.com/media/images/5d1b/e492/284d/d1b1/8300/00a1/large_jpg/feature_-_FFX_SDC_01.jpg?1562109025');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomC mb-2"><strong>Room C</strong></h6>
</div>
</div>
</div>
</div>
</li>
<!--Studio Room 2-->
<!--Studio Room 1-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://www.unifiedmanufacturing.com/blog/wp-content/uploads/2021/02/Nightbird-Recording-Studios-Pandemic.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomB mb-2"><strong>Room B</strong></h6>
</div>
</div>
</div>
</div>
</li>
<!--Studio Room 1-->
<!--Studio Front Page-->
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width:50px">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1" class="btn"><i
class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
</li>
<!--Studio Front Page-->
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
<!--Studio One-->
</div>
</div>
</div>
</section>
<script src="./cardstack.js"></script>
</body>
</html>

How to make a collapsed side that shrink content box

$(function(){
$('#hamburgerMenu').on("click", function(){
$(this).toggleClass('collapsed').promise().done(function(){
$(".app").addClass("expanded_container--container");
});
$("#app_navigation").toggleClass("expanded");
});
});
main nav {
position: fixed;
z-index: 99;
left: 0;
top: 60px;
height: 100%;
width: 80px;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 0px;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1 0 auto;
outline: none;
overflow-y: hidden;
overflow-x: hidden;
-webkit-transition: width 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
transition: width 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.expanded {
width: 215px;
}
.hamburger-mobile {
display: none;
}
.nav-items {
margin: 0;
padding: 70px 0 20px 0;
width: 100%;
height: 100%;
list-style: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.item-wrapper {
width: 215px;
height: 50px;
box-sizing: border-box;
text-align: left;
display: flex;
align-items: center;
overflow-x: hidden;
word-wrap: no-wrap;
min-width: 0;
color: #darkGrey;
font-size: 18px;
margin-left: 5px;
}
.item-wrapper:hover {
cursor: pointer;
background-color: rgba(71, 71, 71, 0.05);
color: #428aff;
}
.item-wrapper i {
width: 75px;
text-align: center;
}
.profile {
height: 60px;
}
.profile > img {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5px 15px;
}
.selected {
border-left: 4px solid #428aff;
color: #428aff;
}
.selected i {
margin-left: -4px;
}
show {
transform: translateX(0px);
}
/* Hamburger */
.icon-bar {
background-color: #474747;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
transition: opacity, transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
.hamburger-menu {
display: block;
cursor: pointer;
position: fixed;
padding: 10px;
top: 79px;
left: 19px;
z-index: 999;
transition: transform;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
/*.hamburger-menu:hover {
background-color: rgba(0, 0, 0, .2);
border-radius: 50%;
}*/
.hamburger-menu:hover > .icon-bar {
background-color: #428aff;
}
.hamburger-menu:not(.collapsed) {
transform: translateX(150px);
}
.hamburger-menu:not(.collapsed) .icon-bar:nth-child(1) {
transform: translateY(4.5px) rotate(-45deg) scaleX(0.5);
}
.hamburger-menu:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
/*transform: translateX(-10px);*/
}
.hamburger-menu:not(.collapsed) .icon-bar:nth-child(3) {
transform: translateY(-1px) rotate(45deg) scaleX(0.5);
}
/* ./Hamburger */
/* Media queries */
#media screen and (max-width: 768px) {
main {
height: 50px;
width: 100%;
}
.hamburger-menu {
display: none;
}
.hamburger-mobile {
cursor: pointer;
position: fixed;
padding: 10px;
top: 8;
left: 0;
z-index: 999;
transition: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
display: block;
}
.hamburger-mobile:hover > .icon-bar {
background-color: #428aff;
}
.hamburger-mobile:not(.collapsed) .icon-bar:nth-child(1) {
transform: translateY(6px) rotate(-45deg);
}
.hamburger-mobile:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.hamburger-mobile:not(.collapsed) .icon-bar:nth-child(3) {
transform: translateY(-6px) rotate(45deg);
}
/* ./Hamburger */
.expanded-mobile {
height: 100%;
}
.item-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.nav-items {
overflow-y: hidden;
}
.selected {
border: none;
}
.selected > i {
margin-left: 0;
}
}
/*--------------------------------------------------------------
# App shrink-content container
--------------------------------------------------------------*/
div.app {
-webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;;
transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.shrink_container--container {
margin-left: 215px;
}
.expanded_container--container {
margin-left: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" >
<body>
<main id="main">
<div class="app shrink_container--container">
<nav id="app_navigation" class="expanded">
<ul class="nav-items">
<div class="item-wrapper" onclick="toggleSelected()">
<i class="far fa-calendar-alt"></i> Item 1
</div>
<div class="item-wrapper selected" onclick="toggleSelected()">
<i class="far fa-address-card"></i> Item 2
</div>
<div class="item-wrapper" onclick="toggleSelected()">
<a href="/ayschange/buy-or-sell">
<i class="far fa-envelope"></i> Achat
</a>
</div>
<div class="item-wrapper profile" onclick="toggleSelected()">
<a href="/ayschange/accounts/?action=logout">
<i class="fas fa-sign-out-alt"></i> Transactions
</a>
</div>
<div class="item-wrapper profile" onclick="toggleSelected()">
<a href="/ayschange/accounts/?action=logout">
<i class="fas fa-sign-out-alt"></i> Rapports
</a>
</div>
<div class="item-wrapper profile" onclick="toggleSelected()">
<a href="/ayschange/accounts/?action=logout">
<i class="fas fa-sign-out-alt"></i> Déconnexion
</a>
</div>
</ul>
</nav>
<div class="hamburger-menu" id="hamburgerMenu" onclick="toggleMenu()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="hamburger-mobile collapsed" id="hamburgerMobile" onclick="toggleMobile()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</div>
</main>
</body>
</html>
I have a side navbar that has an init size of 80px when the page is loaded and when I toggle it to expand to the size of 215px, it does but the container to right doesn't shrink, I don't know what I am missing in my js code, I didn't want to copy all the code but my main issue is with the js code can anyone help me, please
JS
$(function(){
$('#hamburgerMenu').on("click", function(){
$(this).toggleClass('collapsed').promise().done(function(){
$(".app").addClass("expanded_container--container");
});
$("#app_navigation").toggleClass("expanded");
});
});
CSS
.expanded {
width: 215px;
}
.shrink_container--container {
margin-left: 215px;
}
.expanded_container--container {
margin-left: 80px;
}
HTML
<div>
<nav id="app_navigation" class="expanded">
<ul class="nav-items">
<div class="item-wrapper">
<i class="far fa-calendar-alt"></i> Item 1
</div>
</ul>
</nav>
<div class="app shrink_container--container">
</div>
</div>

Problem to overlay content when hamburger icon is pressed on mobile

I want my navbar to cover the whole screen when the hamburger menu is pressed on smaller screens.
I added the .pushclass (see the jquery and css) to fire when the .navbar-toggle-icon is pushed.
for some reason I can't find out why it is not working and in addition to that problem, the Jquery that makes the navbar sticky on scroll is not working after I added the function to fire the .push class.
So as my code stands now it is not giving me the full screen navbar on mobile and the navbar is no longer sticky on scroll.
i've spent most of the day trying to find a fix for this but with out any luck.
Can someone please held me here?
here is a fiddle to the code
$(window).scroll(function(){
var stickyNav = $('.nav-header'),
scroll = $(window).scrollTop();
if (scroll >=100)
{stickyNav.addClass('sticky');
$('.nav-header').css("margin-top", "0");
}
else {stickyNav.removeClass('sticky');
$('.nav-header').css("margin-top", "1vh");
}
});
$(document).ready(function(){
$('.bg-img').each(function() {
var $el = $(this).find('> img');
if ($el.length > 0) {
$(this).css('background-image', 'url(' + $el.attr('src') + ')');
}
});
$('.navbar-toggler-icon').on('click', function(e) {
if (!$('html').hasClass('push')) {
$('html').addClass('push');
} else {
$('html').removeClass('push');
};
e.preventDefault();
console.log('its alive');
});
});
/* $background_color_2: rgba(0, 0, 0, 0);
*/
body {
color: #4b4b4b;
}
nav {
padding: 20px 0 20px;
margin-bottom: 20px;
margin-top: 20px;
}
figure {
margin: 0;
}
.bg-img {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-img > img {
display: none;
}
.header-row {
background-color: #c2002d;
border-bottom: 1px solid #d3d3d3;
}
.bg-banner {
background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 15vh;
border-left: 5px solid #fff;
}
.banner-logo {
background-color: #c2002d;
padding: 20px;
}
.banner-logo a.brand-text {
text-decoration: none;
font-size: 2em;
color: #fff;
}
.nav-header {
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
z-index: 10000;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#media (min-width: 768px) {
.nav-wrapper {
margin-top: 10vh;
border: none;
border-bottom: 1px solid #d3d3d3;
}
}
.navbar {
padding: 0;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
}
.navbar-custom .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
color: #4b4b4b;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #3b3b3b;
}
.nav-item.active .nav-link {
color: #c2002d;
}
.nav-item::after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: '';
background-color: #c2002d;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover::after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover::after {
opacity: 0;
}
.nav-item {
position: relative;
margin-left: 50px;
transition: all 200ms linear;
}
.navbar-brand > img {
display: block;
}
#media (max-width: 767px) {
.push {
overflow: hidden;
height: 100%;
}
.push body {
overflow: hidden;
height: 100%;
}
.push .navbar-toggler-icon::before {
opacity: 0;
}
.push .navbar-toggler-icon::after {
top: 8px;
}
.push .navbar-toggler-icon span::before {
top: 8px;
}
.push .navbar-toggler-icon span::before .push #nav-wrapper {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.content {
min-height: 100vh;
order: 2;
padding-top: 5vh;
}
#media (min-width: 1200px) {
.content {
margin-left: 200px;
margin-right: 200px;
}
}
.box-item {
/* height: 7vh;
*/
margin-bottom: 10px;
max-width: 100vw;
padding: 17px 36px 7px 17px;
background: #fff;
border: 1px solid lightgray;
transition: all 0.3s ease;
}
.box-item > .descr {
flex-grow: 1;
}
.box-item > .descr header {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
}
.box-item > .descr header::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 3px;
border-bottom: 1px solid;
}
.box-item > .descr header h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
}
.box-item > .descr p {
margin-bottom: 0;
font-size: 0.8rem;
}
.box-item > .descr a {
transition: none;
}
.box-item > .descr a:hover {
color: inherit;
}
.box-item > .descr a:focus {
color: inherit;
}
.box-item > .descr footer {
margin-top: 0px;
text-align: right;
}
.box-item > .descr .see-more {
position: relative;
bottom: 6px;
font-size: 12px;
line-height: 1px;
}
.box-item:hover {
background-color: #c2002d;
color: #fff;
}
.box-item:hover > .descr .see-more::before {
color: inherit;
}
.box-item:focus {
background-color: #c2002d;
color: #fff;
}
.box-item:focus > .descr .see-more::before {
color: inherit;
}
.box-item > .bg-img {
border: 1px solid lightgray;
margin-bottom: 10px;
/* max-height: 80px;
*/
}
#media (max-width: 767px) {
.box-item {
padding: 20px;
}
.box-item > .bg-img {
padding-bottom: 40%;
}
}
#media (min-width: 768px) {
.box-item {
display: -ms-flexbox;
display: -webkit-flex;
}
.box-item > * {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-item > .bg-img {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
margin-right: 28px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<div class="container-fluid">
<div class="row header-row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<div class="container-fluid nav-header" id="nav-wrapper">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-custom navbar-expand-md ">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#"> home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Collections</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
</nav> <!-- Navabar Handrit Ends -->
</div>
</div>
</div>
<div class="container d-flex w-100">
<div class="col content">
<div class="row inst-spacer">
<div class="col-lg-12 col-xl-12 ">
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
</div>
<!-- / col -->
</div>
</div>
</div>
<footer>
#Footer
</footer>
</body>

If I understand your question correctly you want the .nav-bar to fill the view port height when you are on smaller devices. If that's what you want then all you need is to add this to your css.
.navbar-nav{
min-height: 100vh;
}
then you don't need the .push class and the Jquery function for the .push class. It is just complicating things.
I don't follow what you are saying about the .sticky it seems to be ok. But perhaps you want to post another question regarding that issue.
Here is a working snippet for you with the added .navbar-nav class.
$(window).scroll(function(){
var stickyNav = $('.nav-header'),
scroll = $(window).scrollTop();
if (scroll >=100)
{stickyNav.addClass('sticky');
$('.nav-header').css("margin-top", "0");
}
else {stickyNav.removeClass('sticky');
$('.nav-header').css("margin-top", "1vh");
}
});
$(document).ready(function(){
$('.bg-img').each(function() {
var $el = $(this).find('> img');
if ($el.length > 0) {
$(this).css('background-image', 'url(' + $el.attr('src') + ')');
}
});
});
/* $background_color_2: rgba(0, 0, 0, 0);
*/
body {
color: #4b4b4b;
}
nav {
padding: 20px 0 20px;
margin-bottom: 20px;
margin-top: 20px;
}
figure {
margin: 0;
}
.bg-img {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-img > img {
display: none;
}
.header-row {
background-color: #c2002d;
border-bottom: 1px solid #d3d3d3;
}
.bg-banner {
background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 15vh;
border-left: 5px solid #fff;
}
.banner-logo {
background-color: #c2002d;
padding: 20px;
}
.banner-logo a.brand-text {
text-decoration: none;
font-size: 2em;
color: #fff;
}
.nav-header {
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
z-index: 10000;
}
.navbar-nav{
min-height: 100vh;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#media (min-width: 768px) {
.nav-wrapper {
margin-top: 10vh;
border: none;
border-bottom: 1px solid #d3d3d3;
}
}
.navbar {
padding: 0;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
}
.navbar-custom .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
color: #4b4b4b;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #3b3b3b;
}
.nav-item.active .nav-link {
color: #c2002d;
}
.nav-item::after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: '';
background-color: #c2002d;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover::after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover::after {
opacity: 0;
}
.nav-item {
position: relative;
margin-left: 50px;
transition: all 200ms linear;
}
.navbar-brand > img {
display: block;
}
#media (max-width: 767px) {
.push {
overflow: hidden;
height: 100%;
}
.push body {
overflow: hidden;
height: 100%;
}
.push .navbar-toggler-icon::before {
opacity: 0;
}
.push .navbar-toggler-icon::after {
top: 8px;
}
.push .navbar-toggler-icon span::before {
top: 8px;
}
.push #navbarDropdown {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.content {
min-height: 100vh;
order: 2;
padding-top: 5vh;
}
#media (min-width: 1200px) {
.content {
margin-left: 200px;
margin-right: 200px;
}
}
.box-item {
/* height: 7vh;
*/
margin-bottom: 10px;
max-width: 100vw;
padding: 17px 36px 7px 17px;
background: #fff;
border: 1px solid lightgray;
transition: all 0.3s ease;
}
.box-item > .descr {
flex-grow: 1;
}
.box-item > .descr header {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
}
.box-item > .descr header::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 3px;
border-bottom: 1px solid;
}
.box-item > .descr header h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
}
.box-item > .descr p {
margin-bottom: 0;
font-size: 0.8rem;
}
.box-item > .descr a {
transition: none;
}
.box-item > .descr a:hover {
color: inherit;
}
.box-item > .descr a:focus {
color: inherit;
}
.box-item > .descr footer {
margin-top: 0px;
text-align: right;
}
.box-item > .descr .see-more {
position: relative;
bottom: 6px;
font-size: 12px;
line-height: 1px;
}
.box-item:hover {
background-color: #c2002d;
color: #fff;
}
.box-item:hover > .descr .see-more::before {
color: inherit;
}
.box-item:focus {
background-color: #c2002d;
color: #fff;
}
.box-item:focus > .descr .see-more::before {
color: inherit;
}
.box-item > .bg-img {
border: 1px solid lightgray;
margin-bottom: 10px;
/* max-height: 80px;
*/
}
#media (max-width: 767px) {
.box-item {
padding: 20px;
}
.box-item > .bg-img {
padding-bottom: 40%;
}
}
#media (min-width: 768px) {
.box-item {
display: -ms-flexbox;
display: -webkit-flex;
}
.box-item > * {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-item > .bg-img {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
margin-right: 28px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<header>
<div class="container-fluid">
<div class="row header-row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<div class="container-fluid nav-header" id="nav-wrapper">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-custom navbar-expand-md ">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#"> home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Collections</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
</nav> <!-- Navabar Handrit Ends -->
</div>
</div>
</div>
<div class="container d-flex w-100">
<div class="col content">
<div class="row inst-spacer">
<div class="col-lg-12 col-xl-12 ">
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
</div>
<!-- / col -->
</div>
</div>
</div>
<footer>
#Footer
</footer>
</body>

How to fade in and out both at one time in CSS

body {
background-image: url("back.jpg");
background-attachment: fixed;
font-family: 'Open Sans', serif;
color: white;
}
#container {
height: 1000px;
}
/* HEADER WITH NAV BAR AND LOGIN SNIPPET */
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: auto;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.login-parent:hover #loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
/*----------------------*/
/* MAIN BODY */
#main{
position: relative;
height: 100%;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 0px;
bottom: 100px;
}
#box {
position: relative;
height: 100%;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgba(255,255,255,0.4);
top: 140px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px rgba(0,0,0,0.4);
}
/*---------------*/
/* SLIDER */
.slider {
max-width: 100%;
height: 500px;
margin: 20px auto;
position: absolute;
top: 130px;
left: 0px;
right: 0px;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url("1.jpg")no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
background: url("2.jpeg")no-repeat center;
background-size: cover;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
background: url("3.jpg")no-repeat center;
background-size: cover;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
/*-----------------*/
/* FOOT AREA FIXED */
#foot {
position: fixed;
height: 80px;
width: 100%;
background-color: #333;
right: 0px;
left: 0px;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Le Meridian | A home away from home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement" placeholder="UserId / email">
<br>
<br>
<input type="password" name="password" id="loginelement" placeholder="Password">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<div id="foot">
<p align="Center">
Windsor Place, New Delhi, New Delhi, 110001, India
</p>
</div>
</div>
</body>
</html>
I was making a CSS image slideshow but I can't make pic 1 fade out and pic 2 fades in both in 1 animation..please help
I want that the fade goes smooth i.e. as the fade out of the first picture should exactly start with the fade-in of the second

i think you don't need multiple slide div for different background, use just one
<div class="slider">
<div class="slide1"></div>
</div>
and css
.slide1 {
position: absolute;
width: 300px;
height: 200px;
background: url("https://unsplash.it/200/300") no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
#keyframes fade {
0% {
background: url("1.jpg") no-repeat center;
}
33.333% {
background: url("2.jpg") no-repeat center;
}
66.666% {
background: url("3.jpg") no-repeat center;
}
100% {
background: url("1.jpg") no-repeat center;
}
}