Develop Reference

How to change the showing section with javascript

i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>

You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Why is my content not displaying after the page gets loaded?

hello i have created a loading screen for my home page, but the content doesn't display after the site has loaded. I set the console log to send message once it has loaded and I don't get any errors. Does anyone know why this is happening? Also, how can I get the loading text to fade every time it changes as well?
function timeout(ms) {
return new Promise((resolve, reject) => setTimeout(resolve, ms));
}
function loadingScreen() {
var loadingText = document.getElementById('loading-text');
loadingText.innerText = "Welcome To StudioPick."
var delay = 7000;
return timeout(delay)
.then(() => { loadingText.innerText = "Loading studios..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Almost done..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Let's get started"; return timeout(delay) })
.then(() => { loadingText.parentElement.style.display = "none" })
}
document.addEventListener('DOMContentLoaded', () => {
console.log("content has loaded.")
loadingScreen();
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
background-color: #d1d1d1 !important;
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#loading-text {
position: relative;
top: 33rem;
text-align: center;
z-index: 100 !important;
color: #ffffff;
font-size: 20px;
}
#loading {
font-size: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background: #9370db url(/dist/512x512\ Half\ Circle.gif);
background-size: 2%;
background-repeat: no-repeat;
background-position: center;
}
.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;
position: relative;
top: -130px;
}
.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;
}
.enter-site {
background-color: transparent;
color: #ffffff;
padding: 0;
border-color: #ffffff;
width: 120px;
height: 45px;
border-radius: 15px !important;
align-items: center;
justify-content: center;
position: relative;
right: -580px;
top: 50px;
z-index: 25;
}
#footer {
position: relative;
right: -15px;
top: 225px;
z-index: 20;
font-size: 12px;
}
/*---Header---*/
.sturow > * {
flex: 1;
}
/*---Studio List---*/
.stucontainer {
width: 100%;
height: 900px;
padding: 50px 80px;
}
/*---Card One---*/
/*---Star Rating 1---*/
.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 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;
right: -55px;
color: #9370db;
}
.stuLocation {
position: relative;
top: -10px;
right: -55px;
}
/*---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: -105px;
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 .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>
<div id="loading">
<div id="loading-text"></div>
</div>
<div id="page">
<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"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html"><strong>Log In</strong></a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html"><strong>Sign Up</strong></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>
<button class="enter-site" onclick="window.location.href='Index.html'"></a><strong>View
Studios</strong></button>
<footer class="mt-auto text-white-50" id="footer">
<p>#Bekaedo <br>StudioPick 2022 ©</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<!--Studio List-->
<div class="row">
<!--Studio One-->
<div class="stuOne mx-auto">
<div class="stucontainer">
<div class="card1-stack">
<!--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" id="stuImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
alt="Generic placeholder image"
style="max-width:50px; position: relative; top: 50px; left: -150px;">
<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>
<!--Studio Front Page-->
</div>
</div>
</div>
<!--Studio One-->
<!--Studio Two-->
<!--Studio Two-->
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

You are setting display: none to .loading-text, it needs to be set on its parent (#loading).
As for fading, innerText.fadeOut does nothing. I would suggest doing this with css by toggling appropriate classes with js.

Next button to change slide in html

var TIMEOUT = 6000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.next('input[class*="slide-radio"]')
.attr('checked', true);
}
}
* {
box-sizing: border-box;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
/* Navigation */
.navigation {
position: absolute;
width: 100%;
height: 100px;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.navigation-left {
margin-left: -33px;
}
.navigation-left a {
text-decoration: none;
text-transform: uppercase;
color: #333745;
font-size: 12px;
font-weight: bold;
width: 107px;
height: 30px;
border: 2px solid transparent;
border-radius: 15px;
display: inline-block;
text-align: center;
line-height: 25px;
transition: all .2s;
}
.navigation-left a:hover,
.navigation-left a:focus {
border-color: rgb(234, 46, 73);
background-color: rgba(44, 45, 47, 0);
}
.navigation-center {
margin-right: 85px;
}
.navigation-right {
display: flex;
align-items: center;
}
.login-btn {
background-color: #b8b8b9;
width: 97px;
height: 30px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
border-radius: 15px;
border: none;
color: #333745;
text-transform: uppercase;
margin-left: 20px;
transition: all .2s;
cursor: pointer;
}
.login-btn:hover {
transform: scale(1.06);
}
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Slides Background Color */
.slide-1 {
background: #fbad99;
left: 0;
}
.slide-2 {
background: #a9785c;
left: 100%
}
.slide-3 {
background: #9ea6b3;
left: 200%
}
.slide-4 {
background: #b1a494;
left: 300%;
}
.slider {
display: flex;
justify-content: flex-start;
}
.slider-content {
width: 635px;
padding-left: 100px;
}
/* Slider Inner Slide Effect */
.slider h2 {
color: #333333;
font-weight: 900;
text-transform: capitalize;
font-size: 60px;
font-weight: 300;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
margin-top: 0;
letter-spacing: 2px;
}
.slider h4 {
font-size: 22px;
font-family: "Oswald";
color: rgba(51, 51, 51, 0.349);
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider>img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slide-1>img {
right: 0;
}
.buy-now-btn {
background-color: #ea2e49;
width: 130px;
height: 50px;
border-radius: 30px;
border: none;
font-family: Montserrat;
font-size: 20px;
font-weight: 100;
color: #fff;
text-align: left;
padding-left: 35px;
position: relative;
cursor: pointer;
transition: all .2s;
}
.buy-now-btn:hover {
box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
}
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
outline: none;
}
/* Animations */
.slider h2 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s;
/* Safari */
transition-delay: 1s;
}
.slider h4 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.4s;
/* Safari */
transition-delay: 1.4s;
}
.slider>img {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.2s;
/* Safari */
transition-delay: 1.2s;
}
/* Number Pagination */
.number-pagination {
position: absolute;
bottom: 30px;
right: 100px;
font-family: "Oswald";
font-weight: bold;
}
.number-pagination span {
font-size: 30px;
color: #ea2e49;
letter-spacing: 4px;
}
.number-pagination span:after {
content: "/4";
font-size: 16px;
color: #fff;
}
/* Slider Pagger */
.slider-pagination {
position: absolute;
bottom: 30px;
width: 575px;
left: 100px;
z-index: 1000;
display: flex;
align-items: center;
}
.slider-pagination label {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: #fff;
margin: 0 10px;
cursor: pointer;
}
/* Slider Pagger Event */
.slide-radio1:checked~.slider-pagination .page1,
.slide-radio2:checked~.slider-pagination .page2,
.slide-radio3:checked~.slider-pagination .page3,
.slide-radio4:checked~.slider-pagination .page4 {
width: 14px;
height: 14px;
border: 2px solid #ea2e49;
background: transparent;
}
/* Slider Slide Effect */
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked~.slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked~.slide-1 h2,
.slide-radio2:checked~.slide-2 h2,
.slide-radio3:checked~.slide-3 h2,
.slide-radio4:checked~.slide-4 h2,
.slide-radio1:checked~.slide-1 h4,
.slide-radio2:checked~.slide-2 h4,
.slide-radio3:checked~.slide-3 h4,
.slide-radio4:checked~.slide-4 h4,
.slide-radio1:checked~.slide-1>img,
.slide-radio2:checked~.slide-2>img,
.slide-radio3:checked~.slide-3>img,
.slide-radio4:checked~.slide-4>img {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
/* Responsive */
#media only screen and (max-width: 768px) {
.slider h2 {
font-size: 20px;
}
.slider h4 {
font-size: 16px;
}
.slider-content {
padding: 0 2%
}
.number-pagination {
right: 2%;
}
.slider-pagination {
left: 2%;
}
.slider .buy-now-btn {
padding: 0 15px;
width: 90px;
height: 42px;
position: absolute;
right: 0;
bottom: 0;
margin: 0 0 100px 0;
}
.slider .buy-now-btn:after {
top: 15px;
}
.slider>img {
right: 2%;
}
.slide-1>img {
right: -110px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
</head>
<body>
<!-- Navigation -->
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<!-- Slider Pagination -->
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<!-- Slider #1 -->
<div class="slider slide-1" id="tab1">
<img src="images/model-1.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>1</span>
</div>
</div>
<!-- Slider #2 -->
<div class="slider slide-2" id="tab2">
<img src="images/model-2.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="btn" name="button" onclick="prev()">Previous</button>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>2</span>
</div>
</div>
<!-- Slider #3 -->
<div class="slider slide-3" id="tab3">
<img src="images/model-3.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>3</span>
</div>
</div>
<!-- Slider #4 -->
<div class="slider slide-4" id="tab4">
<img src="images/model-4.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>4</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
Hi,
I created a small html snippet of slideshow .I created this code using CSS and Java script .I need to know the button I created ,when we click it should move to another next slides and previous slides same as input buttons. Can it be done only using CSS or need to use JavaScript . I am newbie to JavaScript. Answer to this would be helpful .Thanks in advance

TLDR;
To answer your question:
You will need JavaScript for all your functional requirements. You can use the onclick handler to capture the click event and call a function that changes the active slide.
HTML, CSS, and JS Usage
An Overview
HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
CSS is used to control presentation, formatting, and layout.
JavaScript is used to control the behavior of different elements.

You can just use similar function to next() and use .prev instead of .next, which will make sure it will select previous sibling.
var TIMEOUT = 6000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.next('input[class*="slide-radio"]')
.attr('checked', true);
}
}
function next() {
clearInterval(interval); //To make sure it doesn't interfere when slide is manually changed
handleNext();
interval = setInterval(handleNext, TIMEOUT); //Again Set the interval
}
function prev() {
clearInterval(interval); //To make sure it doesn't interfere when slide is manually changed
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.prev('input[class*="slide-radio"]')
.attr('checked', true);
}
interval = setInterval(handleNext, TIMEOUT); //Again Set the interval
}
* {
box-sizing: border-box;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
/* Navigation */
.navigation {
position: absolute;
width: 100%;
height: 100px;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.navigation-left {
margin-left: -33px;
}
.navigation-left a {
text-decoration: none;
text-transform: uppercase;
color: #333745;
font-size: 12px;
font-weight: bold;
width: 107px;
height: 30px;
border: 2px solid transparent;
border-radius: 15px;
display: inline-block;
text-align: center;
line-height: 25px;
transition: all .2s;
}
.navigation-left a:hover,
.navigation-left a:focus {
border-color: rgb(234, 46, 73);
background-color: rgba(44, 45, 47, 0);
}
.navigation-center {
margin-right: 85px;
}
.navigation-right {
display: flex;
align-items: center;
}
.login-btn {
background-color: #b8b8b9;
width: 97px;
height: 30px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
border-radius: 15px;
border: none;
color: #333745;
text-transform: uppercase;
margin-left: 20px;
transition: all .2s;
cursor: pointer;
}
.login-btn:hover {
transform: scale(1.06);
}
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Slides Background Color */
.slide-1 {
background: #fbad99;
left: 0;
}
.slide-2 {
background: #a9785c;
left: 100%
}
.slide-3 {
background: #9ea6b3;
left: 200%
}
.slide-4 {
background: #b1a494;
left: 300%;
}
.slider {
display: flex;
justify-content: flex-start;
}
.slider-content {
width: 635px;
padding-left: 100px;
}
/* Slider Inner Slide Effect */
.slider h2 {
color: #333333;
font-weight: 900;
text-transform: capitalize;
font-size: 60px;
font-weight: 300;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
margin-top: 0;
letter-spacing: 2px;
}
.slider h4 {
font-size: 22px;
font-family: "Oswald";
color: rgba(51, 51, 51, 0.349);
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider>img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slide-1>img {
right: 0;
}
.buy-now-btn {
background-color: #ea2e49;
width: 130px;
height: 50px;
border-radius: 30px;
border: none;
font-family: Montserrat;
font-size: 20px;
font-weight: 100;
color: #fff;
text-align: left;
padding-left: 35px;
position: relative;
cursor: pointer;
transition: all .2s;
}
.buy-now-btn:hover {
box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
}
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
outline: none;
}
/* Animations */
.slider h2 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s;
/* Safari */
transition-delay: 1s;
}
.slider h4 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.4s;
/* Safari */
transition-delay: 1.4s;
}
.slider>img {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.2s;
/* Safari */
transition-delay: 1.2s;
}
/* Number Pagination */
.number-pagination {
position: absolute;
bottom: 30px;
right: 100px;
font-family: "Oswald";
font-weight: bold;
}
.number-pagination span {
font-size: 30px;
color: #ea2e49;
letter-spacing: 4px;
}
.number-pagination span:after {
content: "/4";
font-size: 16px;
color: #fff;
}
/* Slider Pagger */
.slider-pagination {
position: absolute;
bottom: 30px;
width: 575px;
left: 100px;
z-index: 1000;
display: flex;
align-items: center;
}
.slider-pagination label {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: #fff;
margin: 0 10px;
cursor: pointer;
}
/* Slider Pagger Event */
.slide-radio1:checked~.slider-pagination .page1,
.slide-radio2:checked~.slider-pagination .page2,
.slide-radio3:checked~.slider-pagination .page3,
.slide-radio4:checked~.slider-pagination .page4 {
width: 14px;
height: 14px;
border: 2px solid #ea2e49;
background: transparent;
}
/* Slider Slide Effect */
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked~.slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked~.slide-1 h2,
.slide-radio2:checked~.slide-2 h2,
.slide-radio3:checked~.slide-3 h2,
.slide-radio4:checked~.slide-4 h2,
.slide-radio1:checked~.slide-1 h4,
.slide-radio2:checked~.slide-2 h4,
.slide-radio3:checked~.slide-3 h4,
.slide-radio4:checked~.slide-4 h4,
.slide-radio1:checked~.slide-1>img,
.slide-radio2:checked~.slide-2>img,
.slide-radio3:checked~.slide-3>img,
.slide-radio4:checked~.slide-4>img {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
/* Responsive */
#media only screen and (max-width: 768px) {
.slider h2 {
font-size: 20px;
}
.slider h4 {
font-size: 16px;
}
.slider-content {
padding: 0 2%
}
.number-pagination {
right: 2%;
}
.slider-pagination {
left: 2%;
}
.slider .buy-now-btn {
padding: 0 15px;
width: 90px;
height: 42px;
position: absolute;
right: 0;
bottom: 0;
margin: 0 0 100px 0;
}
.slider .buy-now-btn:after {
top: 15px;
}
.slider>img {
right: 2%;
}
.slide-1>img {
right: -110px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
</head>
<body>
<!-- Navigation -->
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<!-- Slider Pagination -->
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<!-- Slider #1 -->
<div class="slider slide-1" id="tab1">
<img src="images/model-1.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>1</span>
</div>
</div>
<!-- Slider #2 -->
<div class="slider slide-2" id="tab2">
<img src="images/model-2.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="btn" name="button" onclick="prev()">Previous</button>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>2</span>
</div>
</div>
<!-- Slider #3 -->
<div class="slider slide-3" id="tab3">
<img src="images/model-3.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="btn" name="button" onclick="prev()">Previous</button>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>3</span>
</div>
</div>
<!-- Slider #4 -->
<div class="slider slide-4" id="tab4">
<img src="images/model-4.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>4</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js" charset="utf-8"></script>
</body>
</html>

Weird space on page with slick slider?

I'm creating a website with slick slider and have got the plugin working smoothly, but there is a weird space on the left that is causing the site to have a horizontal slider. I have tried maxing out the viewports of the containers but to no avail? Is there a way to remove this white space so that there is no horizontal slider.
$(document).ready(function(){
$('.forss').slick({
centerMode: true,
centerPadding: '0w',
slidesToShow: 3.625,
});
});
// navigation.css
body {
background-color: #5336F8;
font-family: Futura PT;
}
ul {
position: relative;
left: 3vw;
list-style-type: none;
overflow: hidden;
margin: 3vw 1vw 0 0;
background-color: transparent;
display: inline-block;
}
li {
float: right;
font-size: 1.5vw;
}
li a {
display: block;
font-weight: lighter;
float: right;
color: white;
margin: 0 0.5vw 0 0.5vw;
text-align: center;
padding: 0.75vw 2vw;
text-decoration: none;
}
li a:not(.active):hover {
background-color: white;
color: #5336F8;
border: 1px;
}
.active {
border: 1px solid white;
}
.logo {
font-family: Futura PT;
float: left;
font-size: 4vw;
margin: 2vw 5vw 0 3.5vw;
color: white;
font-weight: 550;
}
.logo:hover {
color: #5336F8;
text-shadow: 1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
// style.css
div.slick-slider {
width:100vw;
}
.forss {
display: flex;
align-items: center;
box-sizing: border-box;
}
.forss .items {
width: 30vw;
height: 35vw;
margin-top: 7vw;
}
.forss .items img {
width: 24.840625vw;
height: 31.25vw;
}
.slick-slide {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
transition:transform 0.5s ease-in-out;
}
.slick-slide:focus {
outline: none;
}
div.slick-track {
width: 100vw;
}
div.slick-center {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
transform: scale(1.15);
transition: transform 0.5s ease-in-out;
}
#arrows {
width: 1vw;
height: 1vw;
text-align: center;
position: relative;
}
.logo {
font-family: 'Futura-Normal';
font-size: 4vw;
color: white;
float: left;
margin-left: 2vw;
}
.top {
position: absolute;
mix-blend-mode: screen;
left: 0;
right: 0;
opacity: 100%;
transition: opacity 0.15s;
}
.top:hover {
opacity: 0%;
}
.bottom img {
position: relative;
left: 0;
right: 0;
}
input.prev:focus {
outline-width: 0;
}
input.next:focus {
outline-width: 0;
}
.add-on {
font-family: (var(--font));
font-size: 1.75vw;
color: white;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 1vw;
}
#inner {
position: relative;
width: 100vw;
margin-bottom: 4vw;
}
#centered {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<!--style.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1T5ZdOkN6sg2weNQkehStYX2mDo1f0ajJ">
<!--navigation.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1IgyMKG47riH_HmnHoPLH16qhI0UtnK34">
</head>
<body>
<h2 class="logo">The Lowdown.</h2>
<ul>
<li>CONTACT US</li>
<li><a class="active" href="#edition">EDITIONS</a></li>
<li>ARTICLES</li>
<li>ABOUT US</li>
<li>HOME</li>
</ul>
<div class="forss">
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
</div>
<div id="inner">
<div id="centered">
<input type="image" name="previous" src="https://i.ibb.co/dt3fngT/previous-arrow.png" class="prev" id="arrows" alt="Tool Tip"><span class="add-on"> READ ME </span><input type="image" name="next" src="https://i.ibb.co/nL7jtPS/next-arrow.png" class="next" id="arrows" alt="Tool Tip">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/custom.js"></script>
<script src="https://drive.google.com/uc?export=view&id=1jzlbwu186Lrp0yF_NIcH9Zk2tSFA2PdL"></script>

There are some issues with using the viewport width (vw) for the slideshow elements (slideshow and slide navigation). Since there is padding on the body element, the content width will include that, which forces the page width to equal (viewport width + body left padding + body right padding). I was able to remove the horizontal scrollbar by changing/adding the CSS below:
div.slick-slider {
// width:100vw;
}
#inner {
width: 100% !important;
...
}
body {
margin-left: 0;
margin-right: 0;
...
}
Note: these changes may not be reflected in the SO preview below. For some reason, I'm not seeing the updates to the .slick-slider and body CSS reflected there.
$(document).ready(function(){
$('.forss').slick({
centerMode: true,
centerPadding: '0w',
slidesToShow: 3.625,
});
});
// navigation.css
body {
background-color: #5336F8;
font-family: Futura PT;
margin-left: 0;
margin-right: 0;
}
ul {
position: relative;
left: 3vw;
list-style-type: none;
overflow: hidden;
margin: 3vw 1vw 0 0;
background-color: transparent;
display: inline-block;
}
li {
float: right;
font-size: 1.5vw;
}
li a {
display: block;
font-weight: lighter;
float: right;
color: white;
margin: 0 0.5vw 0 0.5vw;
text-align: center;
padding: 0.75vw 2vw;
text-decoration: none;
}
li a:not(.active):hover {
background-color: white;
color: #5336F8;
border: 1px;
}
.active {
border: 1px solid white;
}
.logo {
font-family: Futura PT;
float: left;
font-size: 4vw;
margin: 2vw 5vw 0 3.5vw;
color: white;
font-weight: 550;
}
.logo:hover {
color: #5336F8;
text-shadow: 1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
// style.css
div.slick-slider {
// width:100vw;
}
.forss {
display: flex;
align-items: center;
box-sizing: border-box;
}
.forss .items {
width: 30vw;
height: 35vw;
margin-top: 7vw;
}
.forss .items img {
width: 24.840625vw;
height: 31.25vw;
}
.slick-slide {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
transition:transform 0.5s ease-in-out;
}
.slick-slide:focus {
outline: none;
}
div.slick-track {
margin: 0;
}
div.slick-center {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
transform: scale(1.15);
transition: transform 0.5s ease-in-out;
}
#arrows {
width: 1vw;
height: 1vw;
text-align: center;
position: relative;
}
.logo {
font-family: 'Futura-Normal';
font-size: 4vw;
color: white;
float: left;
margin-left: 2vw;
}
.top {
position: absolute;
mix-blend-mode: screen;
left: 0;
right: 0;
opacity: 100%;
transition: opacity 0.15s;
}
.top:hover {
opacity: 0%;
}
.bottom img {
position: relative;
left: 0;
right: 0;
}
input.prev:focus {
outline-width: 0;
}
input.next:focus {
outline-width: 0;
}
.add-on {
font-family: (var(--font));
font-size: 1.75vw;
color: white;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 1vw;
}
#inner {
position: relative;
width: 100% !important;
margin-bottom: 4vw;
}
#centered {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<!--style.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1T5ZdOkN6sg2weNQkehStYX2mDo1f0ajJ">
<!--navigation.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1IgyMKG47riH_HmnHoPLH16qhI0UtnK34">
</head>
<body>
<h2 class="logo">The Lowdown.</h2>
<ul>
<li>CONTACT US</li>
<li><a class="active" href="#edition">EDITIONS</a></li>
<li>ARTICLES</li>
<li>ABOUT US</li>
<li>HOME</li>
</ul>
<div class="forss">
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
</div>
<div id="inner">
<div id="centered">
<input type="image" name="previous" src="https://i.ibb.co/dt3fngT/previous-arrow.png" class="prev" id="arrows" alt="Tool Tip"><span class="add-on"> READ ME </span><input type="image" name="next" src="https://i.ibb.co/nL7jtPS/next-arrow.png" class="next" id="arrows" alt="Tool Tip">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/custom.js"></script>
<script src="https://drive.google.com/uc?export=view&id=1jzlbwu186Lrp0yF_NIcH9Zk2tSFA2PdL"></script>

MenuBar problems showing css html

Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me! The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video. I think you will understand it perfectly when you try it.
<!--JavaScript-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
});
function toggleMenu(x) {
x.classList.toggle('openMenu');
}
</script>
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/*Menu Bar*/
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
}
nav .logo {
display: inline-block;
width: 25%;
padding: 0 5px;
line-height: 80px;
font-size: 24px;
transition: all 0.3s;
text-align: center;
}
nav.black .logo {
color: #fff;
}
nav a {
display: inline-block;
width: 12.5%;
line-height: 80px;
color: #151515;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
text-align: center;
vertical-align: top;
}
nav.black a {
color: #fefefe;
}
nav a:focus {
outline: none;
}
nav a.active {
background: #E2472F;
color: #fff;
border-radius: 6px;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(img/lol.jpg);
background-size: cover;
background-position: center;
}
/* Hamburger icon */
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
width: 35px;
height: 5px;
background-color: #fefefe;
margin: 6px 0;
transition: all 0.4s;
}
.openMenu .hamburger .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.openMenu .hamburger .bar2 {
opacity: 0;
}
.openMenu .hamburger .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*Media*/
#media(max-width: 860px) {
nav {
background: rgba(0, 0, 0, 0.8);
padding: 0 20px;
color: #fefefe;
overflow: hidden;
}
.logo {
position: fixed;
top: 0;
}
nav a {
width: 100%;
line-height: calc((100vh - 80px) / 6);
transform: translateY(80px);
visibility: hidden;
}
.openMenu a {
color: #fefefe;
visibility: visible;
}
.hamburger {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.openMenu {
height: 100vh;
}
.slider {
width: 100%;
height: 23%;
}
section.sec1 {
width: 100%;
height: 30%;
}
article#video{
width: 100%;
}
video{
width: 100%;
}
aside{
border-bottom:#e8491d 3px solid;
width: 100%;
height: 250px;
}
aside#welcometext{
font-family: cursive;
width: 100%;
height: 76%;
}
aside#New{
font-family: serif;
height: 100%;
width: 100%;
}
}
/*Slideshow*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider {
overflow: hidden;
height: 450px%;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slidy infinite;
}
#keyframes slidy{
0% {
left: 0%;
}
10% {
left: 0%;
}
12% {
left: -100%;
}
22% {
left: -100%;
}
24% {
left: -200%;
}
34% {
left: -200%;
}
36% {
left: -300%;
}
46% {
left: -300%;
}
48% {
left: -400%;
}
58% {
left: -400%;
}
60% {
left: -300%;
}
70% {
left: -300%;
}
72% {
left: -200%;
}
82% {
left: -200%;
}
84% {
left: -100%;
}
94% {
left: -100%;
}
96% {
left: 0%;
}
}
/*Welcome*/
article{
float: left;
margin: 0 auto;
width: 23%;
height: auto;
}
#welcometext{
float: right:
margin: 0 auto;
width: 100%;
height: auto;
border-bottom:#e8491d 3px solid;
height: 38%;
}
#News1{
margin-left: 5%;
width: 52%;
height: 7%;
display: inline-flex;
}
section.News{
border-bottom:#e8491d 3px solid;
height: 100%;
}
aside#New{
padding: 27%;
height: 100%;
width: 100%;
font-family: cursive;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title> Landschaft </title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!--Body-->
<body>
<div class="wrapper">
<nav>
<div class="hamburger" onclick="toggleMenu(this.parentNode);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
><a href="about.html">СЪБИТИЯ</a
><a href="index.html">ПЪТЕКИ</a
><a href="index.html">ФОРУМ</a
><a href="index.html">ВРЪЗКИ</a
><a class="active" href="index.html">ВХОД</a>
</nav>
<!--Section - Slideshow-->
<section class="sec1"></section>
<section class="content">
<div class="slider">
<figure>
<div class="slide">
<img src="img/slideshow1.jpg">
</div>
<div class="slide">
<img src="img/slideshow2.jpg">
</div>
<div class="slide">
<img src="img/slideshow3.jpg">
</div>
<div class="slide">
<img src="img/slideshow4.jpg">
</div>
<div class="slide">
<img src="img/slideshow5.jpg">
</div>
</figure>
</div>
</section>
<!--Section Welcome Video-->
<section class="Welcome">
<article id="video">
<video width="295" height="238" controls autopl>
<source src="video.mp4" type="video/mp4">
</video>
</article>
<aside id="welcometext">
<h2><center>Welcome</center></h2>
<center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
</aside>
</section>
<!--Section News-->
<section class="News">
<article id="News1">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
</article>
<aside id="New">
<p> dsadas das </p>
</aside>
</section>
</div>
</body>
</html>

Adding a z-index rule to your nav element solved the problem on my end.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
z-index: 100;
}
Here is a little read on the subject

Give your header/nav a z-index:
nav {z-index:100}
Z-index positions your content in front-back space. The higher the value the closer to the front the element will be.