Develop Reference

Visually replace div when clicking outside

function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(

try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})

Create 3d image hover effect

I want to create this effect but with javascript not in pure css as he did. And no scss also just css It'll be good. codepen
.picture-container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
justify-self: center;
align-items: center;
width: 40%;
height: 100vh;
}
.picture-frame {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding: 5%;
border: solid 1px #000;
}
.picture {
z-index: 1;
width: 100%;
height: 100%;
}
<html>
<div class="picture-container first-picture horizontal-small">
<div class="picture-frame">
<img
id="secondPic"
src="https://picsum.photos/200/300"
alt="picture of a brick house"
class="picture middle-right"
/>
</div>
</div>
<html>
I'm also using Vuejs if it changes something for this

You can use transform styling to get the 3D effect. Checkout my code below
var card = document.getElementsByClassName('card');
document.addEventListener("mousemove", function(e) {
var ax = -(window.innerWidth/2- e.pageX)/20;
var ay = (window.innerHeight/2- e.pageY)/10;
document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)";
});
#import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body {
background: #edf2f4;
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
height: 100vh;
font-family: "Playfair Display", georgia, serif;
}
.card {
pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
border-radius: 5px;
width: 400px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
position: relative;
}
.card:after {
content: " ";
position: absolute;
width: 100%;
height: 10px;
border-radius: 50%;
left: 0;
bottom: -50px;
box-shadow: 0 30px 20px rgba(0, 0, 0, .3);
}
.card .card-content {
margin: auto;
text-align: center;
transform-style: preserve-3d;
}
.card h1 {
transform: translateZ(100px);
}
<div id="cards" class="card">
<div class="card-content">
<h1>Just hover around</h1>
</div>
</div>

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
var req = new XMLHttpRequest();
var url = "https://api.nasa.gov/planetary/apod?api_key=";
var api_key = "Q6LCLptEevXBK9pvwj1GeEsPbM4mmv6ywTmfw0Nc";
req.open("GET", url + api_key);
req.send();
req.addEventListener("load", function() {
if (req.status == 200 && req.readyState == 4) {
var response = JSON.parse(req.responseText);
document.getElementById("title").textContent = response.title;
document.getElementById("date").textContent = response.date;
document.getElementById("pic").src = response.hdurl;
document.getElementById("explanation").textContent = response.explanation;
}
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: darkred;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.btnclick {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Main Content CSS */
.main {
background-color: #131313;
}
.main__container {
display: grid;
grid-template-columns: auto auto;
align-items: Left;
justify-self: Left;
margin: 100px;
height: 90vh;
background-color: #131313;
z-index: 1;
width: 100%;
max-width: 1300px;
padding-right: 0px;
padding-left: 0px;
}
.main__content {
color: #fff;
width: 100%;
}
.main__content h1 {
font-size: 4rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content h2 {
font-size: 4rem;
margin-top: 10px;
background-color: #ff8177;
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
.main__img--container {
text-align: center;
}
#main__img {
height: 80%;
width: 80%;
}
/* Mobile Responsive */
#media screen and (max-width: 768px) {
.main__container {
display: grid;
grid-template-columns: auto;
align-items: center;
justify-self: center;
width: 100%;
margin: 0 auto;
height: 90vh;
}
.main__content {
text-align: center;
margin-bottom: 4rem;
}
.main__content h1 {
font-size: 2.5rem;
margin-top: 2rem;
}
.main__content h2 {
font-size: 3rem;
}
.main__content p {
margin-top: 1rem;
font-size: 1.5rem;
}
}
#media screen and (max-width: 480px) {
.main__content h1 {
font-size: 2rem;
margin-top: 3rem;
}
.main__content h2 {
font-size: 2rem;
}
.main__content p {
margin-top: 2rem;
font-size: 1.5rem;
}
.main__btn {
padding: 12px 36px;
margin: 2.5rem 0;
}
}
/* Services Section */
.services {
background: #131313;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #ff8177;
background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.6) 100%), url('/images/pic3.jpg');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.9) 100%), url('/images/pic4.jpg');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* Footer CSS */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items>h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.social__icons {
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
}
.social__logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
margin-bottom: 16px;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
</head>
<body style="background-color:#131313;">
<div class="grid-container">
<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
</ul>
</div>
</nav>
</div>
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nick</p>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title" /h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="30%">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
text-align: Left;
padding: 20px 0;
font-size: 30px;
}
</style>
<body style="background-color:#131313;">
<div class="grid-container">
<div class="item1">
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nikunj Patel</p></div>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title"></h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="100%">
<p id="explanation"></p>
</div>
</div>
</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<script src="app.js"></script>
</body>
</html>
So why does the first html produce an image and the second doesnt but both return the Error:
(Both HTMLs use the same CSS and Js files)
"{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'textContent')",
"filename": "https://stacksnippets.net/js",
"lineno": 680,
"colno": 56
}"
i want to use the formatting of this second html file instead of the first and i was surprised no image was produced

Checkbox with classList.toggle isn't toggling the classes. No errors shown

I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...

The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>

When to click form input the background is changing weirdly and after clicking page is not loading correctly on the phone

When I click the input the page is going crazy on the phone. There is not problem on the desktop. I believe the problem is because of the CSS but couldn't figure it out. I am a beginner designer and I am working on responsive web designers. When I click the input the background changes and page is not loading correctly.
This is the HTML of the site
body {
font-family: 'Playfair Display', serif;
position: relative;
background-image: url("pop-zebra-4q3Ogm3Kt44-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
body::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8)
}
#all {
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
padding: 3rem;
z-index: 1;
color: #fff;
}
.showcase-top {
text-align: center;
margin-right: 2rem;
}
.showcase-top h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.8rem;
}
.showcase-top p {
font-size: 1.1rem;
letter-spacing: 5px
}
#second {
margin-top: 0.2rem
}
.tabs {
display: flex;
text-align: center;
padding: 2rem;
}
.tab {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid rgba(166, 151, 7, 0.8);
border-radius: 50%;
margin-right: 2rem;
}
.tabs .tab h1 {
margin-top: 0.9rem;
}
.form {
padding: 0.5rem 5rem;
text-align: center;
margin-right: 2.5rem;
width: 90%;
max-width: 900px;
padding: 10px 50px;
margin-left: 0.6rem;
}
.form input {
width: 70%;
padding: 0.8rem;
border: none;
border-radius: 1.5rem;
margin-right: 0.5rem;
outline: none;
}
.form button {
width: 25%;
padding: 0.8rem;
border-radius: 1.5rem;
border: none;
background-color: #a69802;
color: #edece1;
cursor: pointer;
outline: none;
}
.footer {
color: rgba(255, 255, 255, 0.6);
width: 100%;
font-size: 6px;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-10%, 51%);
letter-spacing: 1px
}
#media screen and (max-width:768px) {
.tabs {
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
}
.tab {
margin-bottom: 1rem;
height: 90px;
width: 90px;
}
.form {
display: inline-block;
margin-right: 1rem;
margin-left: 1rem;
margin-top: -3rem;
width: 100%;
}
.form button {
width: 100px;
}
.showcase-top {
width: 500px;
margin-left: 1rem;
}
.showcase-top h1 {
font-size: 2rem;
}
.showcase-top p {
font-size: 1rem;
letter-spacing: 3px;
}
}
#media screen and (min-width:320px) and (max-width:480px) {
.form {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.form input {
width: 65%;
}
.form button {
width: 40%;
margin-top: 1rem;
}
.showcase-top p {
font-size: 0.7rem
}
.tabs {
padding: 0;
padding-top: 1.2rem
}
.tab {
height: 90px;
width: 90px;
}
.footer {
bottom: 15%;
left: 23%
}
}
<body>
<showcase id="all">
<div class="showcase-top">
<h1>Coming Soon</h1>
<p>My website is under construction</p>
<p id="second">Follow us now!</p>
</div>
<section class="tabs">
<div class="tab">
<h1 id="day">na</h1>
<p>Days</p>
</div>
<div class="tab">
<h1 id="hour">na</h1>
<p>Hours</p>
</div>
<div class="tab">
<h1 id="min">na</h1>
<p>Minutes</p>
</div>
<div class="tab">
<h1 id="sec">na</h1>
<p>Seconds</p>
</div>
</section>
<form class="form">
<input type="email" placeholder="Enter Email...">
<button type="submit">Subscribe</button>
</form>
</showcase>
<footer class="footer">
<h1>Designed by Cag | Copyright © 2021</h1>
</footer>