Develop Reference

I don't know how to add this type of slider to my site

I have a problem on the site, I do not know how to add this type of slider to my site, I have never used java script, so could you please help me
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fbf9f1;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fbf9f1;;
/*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
position: fixed;
width: 100%;
z-index: 99;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fbf9f1;;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #fbf9f1;;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
color: green;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
color: green;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.icons {
/* display:block; */
display: flex;
gap: 20px;
float: right;
padding: 16px;
margin-right: 50px;
align-items:center;
/* clear:both; */
}
ion-icon {
font-size: 25px;
}
.search {
border: none;
background-color: #fbf9f1;
}
.search::placeholder {
font-size: 19px;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: center;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.slider {
position: relative;
width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
transform: translateY(40%);
}
.slider input[name="switch"] {
display: none;
}
.switch {
position: absolute;
left: 0;
bottom: 10px;
text-align: center;
width: 100%;
z-index: 1;
}
.switch label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 0px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #738290;
}
#btn1:checked~.switch label[for="btn1"] {
background-color: white;
}
#btn2:checked~.switch label[for="btn2"] {
background-color: white;
}
#btn3:checked~.switch label[for="btn3"] {
background-color: white;
}
.slider-inner {
overflow: hidden;
}
.slides {
width: 500%;
transition: all 0.5s;
position: relative;
}
.slides .slide-wrapper {
width: 680px;
height: 340px;
float: left;
}
#btn1:checked~slider-inner slides {
transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
transform: translate(-680px);
}
#btn3:checked~.slider-inner .slides {
transform: translate(-1360px);
}
/* Code For Your Question */
.slides .slide-wrapper {
background-size: cover;
background-repeat: no-repeat;
}
.slides .slide-wrapper:nth-child(1){
background-image: url('https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp');
}
.slides .slide-wrapper:nth-child(2){
background-image: url('https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp');
}
.slides .slide-wrapper:nth-child(3){
background-image: url('https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp');
}
.m1{
color: #2a6049;
transform: translateX(3%);
}
.m2{
color: green;
font-size: 31px;
transform: translateX(3%);
}
.m3{
transform: translateX(19%);
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
font-size: 20px;
}
.m3:hover{
background-color: #2a6049;
}
div.mini-text{
text-align: center;
transform: translateY(160%)
}
h1{
color: green;
}
.Ls:hover{
color:green;
}
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<meta charset="UTF-8">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<header class="header">
Fresh market
<input class="menu-btn" type="checkbox" id="menu-btn" />
<link rel="stylesheet" href="styles.css">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
<div class="icons">
<input class="search" placeholder="Search.." type="text">
<ion-icon name="search-outline"></ion-icon>
<p class="Ls">Login</p>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-icon name="bag-handle-outline"></ion-icon>
</div>
</ul>
</header>
<div class="slider">
<input type="radio" name="switch" id="btn1" checked>
<input type="radio" name="switch" id="btn2">
<input type="radio" name="switch" id="btn3">
<div class="switch">
<label for="btn1"></label>
<label for="btn2"></label>
<label for="btn3"></label>
</div>
<div class="slider-inner">
<div class="slides">
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp" /> -->
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp" /> -->
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp" /> -->
</div>
</div>
</div>
</div>
<div class = "mini-text">
<h1>Weekly Deals</h1>
<h3>I'm a paragraph. Click here to add your own text and edit me.<h3>
</div>
</body>
</html>
here is such a slider, but I don't even know how to add it, please help
it has very simple styles, but I don't have enough experience to add this slider to the site

Adding multiple dropdown menu's next to each other using JS, HTML and CSS

I am trying to get multiple dropdown menu's next to each other, however I am running into a problem. I have the two categories I want to have as dropdown in the header, however only 1 of them seems to work. With the non-working dropdown menu nothing happens when I click on it.
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>

querySelector will pick up the first matching element, whereas querySelectorAll will get a collection of all matching elements. You need to iterate through the elements to apply the listener. This solution clears out any open nav menus when the other is clicked. Also, it makes use of the [...] spread operator to iterate through elements. I added a new class navitem so that each submenu would show where it should.
let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
[...list].forEach(el => el.classList.remove('newlist')); // reset
e.target.parentNode.querySelector('.list').classList.toggle('newlist');
// this also works
//e.target.nextElementSibling.classList.toggle('newlist');
}
[...click].forEach(el => el.addEventListener("click", showSub));
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.navitem {
width: 150px;
display: inline-block;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class='navitem'>
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
<div class='navitem'>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>
</div>

The way querySelector works, is it returns the first matching DOM element. In your case, because you use the click class for both buttons, the listener is only attached to the first one. Check out relevant documentation (at the return value header).
In this case I would suggest either using two classes and adding listeners to both separately, or accessing both buttons using someting like:
let clicks = document.querySelectorAll('.click');
for (let click of clicks) {
click.addEventListener("click",()=>{
list.classList.toggle('newlist');
});
}

You need a forEach to address every button-list pair.
I believe the below code solves your JavaScript issues. Adjust the CSS as needed (I have changed the original HTML a little).
let drops = document.querySelectorAll('.drop');
drops.forEach(function(drop) {
let click = drop.querySelector('.click');
let list = drop.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.drop {
width: 150px;
float: right;
padding: 0 5px;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 100%;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
margin-top: 1px;
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class="drop">
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
<div class="drop">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
</div>
</div>
</div>

Javascript File works for one HTML file but not the other

I have a JS file linked to my index.HTML file that works fine but it will not work for other .HTML file. Why is this. They elements I needs Javascript to apply to are the same and only have added ID tags on some of them. As I understand it, that should cause no issues as they have the same class name.
below are the first and second HTML files along with the JS file.
What am I missing here? I thought you could link to the same JS file as long as the HTMLs are the same and have a script tag to link to the JS file. Please help.
Working HTML File:
<script src="js/scripts.js"></script>
<title>Test 1</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu">
Home
About Us
Products
Services
Training & Support
Contact Us
Careers
<div class="dropdown">
Log-in
<div class="dropdown-content">
<h4>Account Number</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
Not working HTML File:
<script src="js/scripts.js"></script>
<title>test file 2</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu" id="cNavbar-menu">
Home
<div class="dropdown">
Log-in
<div class="dropdown-content">
<h4>Account Name</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
JavaScript:
var form = document.getElementById('formData');
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});
$(".goTop").click(function () {
scroll(0, 0);
});
$(".menu-toggle").click(function () {
$(this).toggleClass("active");
$(".navbar-menu").toggleClass("active");
});
This is the code i've moved to it's own file. the Html file and JS have been unchanged.
.navbar {
position: fixed;
background-color: transparent;
width: 100%;
padding: 30px 0;
top: 0;
z-index: 999;
transition: 0.3s linear;
}
.inner-width {
max-width: 1300px;
margin: auto;
padding: 0 20px;
}
.navbar .inner-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 500px;
height: 44px;
background-image: url(../images/Full\ Logo\ white.png);
background-repeat: no-repeat;
background-size: contain;
z-index:9999;
}
.menu-toggle {
background: none;
width: 30px;
border: none;
cursor: pointer;
position: relative;
outline: none;
z-index: 999;
display: none;
}
.menu-toggle span {
display: block;
height: 3px;
background-color: #fff;
margin: 6px 0;
position: relative;
transition: 0.3s linear;
}
.navbar-menu a {
color:#f1f1f1;
font-size: 15px;
font-weight: 500;
margin-left: 20px;
transition: 0.2s linear;
}
.navbar-menu a:hover {
color: #d03228 !important;
}
.sticky {
background-color: #fff;
padding: 18px 0;
}
.sticky .logo {
background-image: url(../images/Full\ Logo\ black.png);
}
.sticky .navbar-menu a {
color: #111;
}
.sticky .menu-toggle span {
background-color: #111;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: white;
cursor: pointer;
font-size: 15px;
border: none;
top: 0;
}
.dropdown {
position: absolute;
display: inline-block;
width: 10%;
}
.dropdown-content {
margin-top: 10px;
margin-left: -100px;
padding: 10px;
display: none;
position: relative;
background-color: #353b48;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content h4 {
color: white;
padding: 5px 0 5px 0;
}
.dropdown-content .login {
margin-top: 15px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .login:hover {
background-color: #d03228;
color: #fff;
}
.dropdown-content .register {
margin-top: 10px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .register:hover {
background-color: #d03228;
color: #fff;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.goTop {
position: fixed;
z-index: 999;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
background-color: #d03228;
border: none;
border-radius: 6px;
cursor: pointer;
color: #fff;
outline: none;
display: none;
}
#media screen and (max-width: 980px) {
.menu-toggle {
display: block;
}
.navbar-menu {
position: fixed;
height: 100vh;
width: 100%;
background-color: #353b48;
top: 0;
right: -100%;
max-width: 400px;
padding: 80px 50px;
transition: 0.3s linear;
}
.navbar-menu a {
display: block;
font-size: 30px;
margin: 30px 0;
}
.sticky .navbar-menu {
background-color: #f1f1f1;
}
.navbar-menu.active {
right: 0;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(-45deg);
top: 4px;
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(45deg);
bottom: 14px;
}
.dropdown {
width: 70%;
}
.dropdown-content
{
margin: 10px;
}
}
#media screen and (max-width: 600px) {
.inner-width {
padding: 0 20px;
}
}
One major difference ive noticed since moving the navbar CSS is that the "Go to Top" Button now appears when you first load into a page rather than only appearing when scrolling down.
Adding Main CSS file below for more context.
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
::selection {
background-color: #d03228;
}
::-webkit-scrollbar {
width: 12px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #d03228;
}
/*home page*/
#home{
height: 100vh;
margin: 0;
}
#videoBG {
position:absolute;
z-index: 1;
margin: 0;
top:0;
left:0;
}
#media (min-aspect-ratio: 16/9) {
#videoBG {
width:100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
#videoBG {
width:auto;
height: 100%;
}
}
#media (max-width: 767px) {
#videoBG {
display: none;
}
#home {
background-image: url(../images/fuji.JPG);
background-size: cover;
}
}
Could someone explain why this is happening?

Please check this you have to write like this,
In the HTML file, you have to add one attribute id/class
<form action="#" id="formData">
</form>
In jquery/javascript "use anyone it's up to you"
//javascript
var form = document.getElementById('formData');
//jquery
var form = $("#formData");
/*add your script code like this*/
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});

try deleted id="cNavbar-menu" in the unworked html

CSS text align center is off

I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>

The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>

You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox

Open link in background tab without losing focus

I made a modal popup that reveals coupon code on my website, and the button is linked to the offer page. I want the offer page to open in background tab without losing focus on my page. is there any way to do it? here is the working link for my modal popup on button reveal coupon code and buy, thank you.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="location.href='#popup1'">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>

Try window.open('link', 'name');
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
function openView() {
location.href='#popup1';
window.open('https://stackoverflow.com/questions/60432716/', 'name');
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="openView()">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>