We Keep Coding

Why doesn`t work my popup, although I connect Js?

Yesterday I made a popup in Html, Css and JS but it didn`t work.
Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button "Codes" that a popup open...
In a other project from me the popup works with the same code...
What shall I do that it works? Or what is the mistake in the code?
function togglePopup() {
document.getElementById("popup").classList.toggle("active");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#pop-up {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
#pop-up.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

Your id is misspelled. popup <-> pop-up
You should add open not active in js toggle function.
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s;
}
#popup.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup active" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

First and foremost your id attribute is "popup" and in your CSS rules is "pop-up".
Then in your CSS rules, you use the class "open" to show the popup, but in the JS you use "active".
So to work properly you should change the following:
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
Then change:
<div class="popup" id="pop-up">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>

Overflow hidden not including border-radius in Safari... sometimes

I have a button with a ripple animation on click.
In Safari the border-radius of the button isn't included with overflow: hidden:
So, I went to make a snippet demonstrating the issue to post here and, for the snippet, it worked:
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
}
.dk__btn > span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>
Anyone have any idea why?
To clarify, it works in all other browsers I've tested.

You need to add webkit mask for safari it work fine. Need to add following css to .dk_btn
-webkit-mask-image: radial-gradient(white, black);
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
-webkit-mask-image: radial-gradient(white, black);
}
.dk__btn>span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>

How To Show A "Browser-Native" Dialog Box From A Web URL

When a user requests my URL, how can I show a dialog box to ask for login credentials first before showing anything, like this:
https://pasteboard.co/I9aeDzI.png
https://pasteboard.co/I9af5i7.png
Seems to me these dialog boxes are in-built or native to the browser. Also, when a user clicks on Submit, is it like an ordinary HTML tag?
It'll be good if someone can post links to relevant documentation on this feature, which I currently cannot seem to find with a simple Google search as I don't know what keywords appropriately describe it.
Like to learn more including:
How to get the webpage to show it ?
what happens behind the hood when someone clicks on Submit (eg. what HTTP request method it uses, which URL it will call) ?

Those are made with pure CSS and JavaScript.
You can't find anything like that because they aren't native browser features.
Maybe you see many websites using the same dialog box because they use templates and libraries built for that purpouse.
Take a look at this
var $btn = document.getElementById("submit");
var $form = document.getElementById("form")
function signIn() {
if ($form.checkValidity()) {
$btn.classList.add('pending');
window.setTimeout(function(){ $btn.classList.add('granted'); }, 1500);
}
}
$btn.addEventListener("click", signIn);
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i|Monoton");
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
box-sizing: border-box;
}
html {
font-size: 14px;
}
body {
background: linear-gradient(to bottom, #68d8d6, #ffffff);
color: #454749;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Sans Pro', sans-serif;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
font-family: Monoton, sans-serif;
margin-bottom: .5rem;
}
/**
* Tiles
*/
.tile {
background-color: #ffffff;
border-radius: .1rem;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
position: relative;
width: 100%;
min-width: 320px;
max-width: 24rem;
overflow: hidden;
}
.tile .tile-header {
background-image: url("https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_500,o_75,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg");
background-position: center;
background-size: cover;
height: 12rem;
}
.tile .tile-body {
padding: 2rem;
}
/**
* Forms
*/
.form-input {
display: block;
position: relative;
margin-bottom: 1rem;
}
.form-input > .material-icons {
position: absolute;
font-size: 1.5rem;
top: 1.2rem;
}
.form-input > .material-icons ~ input, .form-input > .material-icons ~ .label, .form-input > .material-icons ~ .underline {
margin-left: 2.25rem;
width: calc(100% - 2.25rem);
}
.form-input input {
border: none;
box-shadow: none;
padding-top: 1.5rem;
padding-right: 0;
padding-bottom: 0.5rem;
padding-left: 0;
outline-style: none;
width: 100%;
}
.form-input input ~ .label {
color: #868e96;
font-size: 1rem;
margin: 0;
pointer-events: none;
position: absolute;
top: 1.5rem;
left: 0;
transition: top .2s,font .2s;
z-index: 1;
}
.form-input input ~ .underline {
background-color: #bdc1c5;
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
}
.form-input input:hover ~ .underline, .form-input input:focus ~ .underline {
background-color: #07beb8;
}
.form-input input:hover ~ .label, .form-input input:focus ~ .label {
color: #07beb8;
}
.form-input input:focus ~ .underline {
height: 2px;
}
.form-input input:focus ~ .label, .form-input input:valid ~ .label {
top: 0;
font-size: 0.85rem;
}
.form-input input:-webkit-autofill ~ .label {
top: 0;
font-size: 0.85rem;
}
/**
* Buttons
*/
.btn {
border-radius: .2rem;
display: inline-block;
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
}
.btn, [role="button"], [type="button"] {
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
}
.btn-irenic {
background-color: #07beb8;
color: white;
}
.btn-irenic:hover, .btn-irenic:focus, .btn-irenic:active {
background-color: #06a5a0;
}
.btn-serene {
background-color: #3dccc7;
color: white;
}
.btn-serene:hover, .btn-serene:focus, .btn-serene:active {
background-color: #32beb9;
}
.btn-tranquil {
background-color: #68d8d6;
color: white;
}
.btn-tranquil:hover, .btn-tranquil:focus, .btn-tranquil:active {
background-color: #54d3d0;
}
.btn-calm {
background-color: #9ceaef;
color: white;
}
.btn-calm:hover, .btn-calm:focus, .btn-calm:active {
background-color: #86e5eb;
}
.btn-cool {
background-color: #c4fff9;
color: white;
}
.btn-cool:hover, .btn-cool:focus, .btn-cool:active {
background-color: #abfff6;
}
.btn-ice {
background-color: #ffffff;
color: white;
}
.btn-ice:hover, .btn-ice:focus, .btn-ice:active {
background-color: #f2f2f2;
}
.btn-base {
background-color: #454749;
color: white;
}
.btn-base:hover, .btn-base:focus, .btn-base:active {
background-color: #393a3c;
}
/**
* Utilities
*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
.float-right {
float: right;
}
/**
*
*/
.submit-container {
position: relative;
}
.submit-container #submit {
position: relative;
z-index: 2;
outline: none;
opacity: 1;
transition: transform .1s ease-in, opacity .1s ease-in, border-radius .1s ease-in;
right: -1px;
}
.submit-container #submit span {
opacity: 1;
transition: opacity .1s ease-in;
}
.submit-container #submit.pending {
transform: scale(0.55, 1.5);
background-color: #07beb8;
border-radius: 50%;
opacity: 1;
}
.submit-container #submit.pending span {
opacity: 0;
}
.submit-container #submit.pending ~ .login-pending {
opacity: 1;
transform: scale(1, 1);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending {
opacity: 1;
transform: translate(-9rem, -11rem) scale(18, 18);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending .spinner {
opacity: 0;
}
.submit-container #submit.granted ~ .login-pending .login-granted-content {
opacity: 1;
}
.submit-container .login-pending {
height: 3rem;
width: 3rem;
background-color: #07beb8;
position: absolute;
border-radius: 50%;
right: 1rem;
bottom: -0.5rem;
opacity: 0;
overflow: hidden;
transform: translate(0, 0) scale(0.5, 0.5);
transition: transform .2s ease-in, scale .2s ease-in;
z-index: 1;
}
.submit-container .login-pending .login-granted-content {
background-image: url(https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_700,o_25,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg);
background-position: center;
background-size: cover;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity .2s ease-in .2s;
text-shadow: 0px 0px 20px #ffffff;
}
.submit-container .login-pending .login-granted-content .material-icons {
font-size: 5px;
position: relative;
left: 1.25px;
}
.spinner {
width: 3rem;
height: 3rem;
position: relative;
margin: 0 auto;
}
.spinner .dot1, .spinner .dot2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #68d8d6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: dot-bounce 2.0s infinite ease-in-out;
animation: dot-bounce 2.0s infinite ease-in-out;
}
.spinner .dot2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes dot-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
#keyframes dot-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: left;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="tile">
<div class="tile-header">
<h2 style="color: white; opacity: .75; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;">SIGN IN</h2>
</div>
<div class="tile-body">
<form id="form">
<label class="form-input">
<i class="material-icons">person</i>
<input type="text" autofocus="true" required />
<span class="label">Username</span>
<span class="underline"></span>
</label>
<label class="form-input">
<i class="material-icons">lock</i>
<input type="password" required />
<span class="label">Password</span>
<div class="underline"></div>
</label>
<div class="submit-container clearfix" style="margin-top: 2rem;">
<div id="submit" role="button" type="button" class="btn btn-irenic float-right" tabindex="0">
<span>SIGN IN</span>
</div>
<div class="login-pending">
<div class=spinner>
<span class="dot1"></span>
<span class="dot2"></span>
</div>
<div class="login-granted-content">
<i class="material-icons">done</i>
</div>
</div>
</div>
</form>
</div>
</div>

CSS & Javascript transform rotateY to back of element

here is what im trying to do:
1-zoom in and rotate it in center(done)
2-open card(done)
3-View back of the card, and then go to the front of the opened card again.
Any tips on how to do it? im confused, ive tried with z-index and rotate transformations, but no luck at all.
Is it correct until now? what do you suggest and how can i achieve rotating to the back of the whole card, then to the front?
thank you in advance
function pers(){
document.getElementById("wrap").style.transform = "rotateX(0deg) rotate(0deg)";
document.getElementById("wrap").style.width = "250px";
document.getElementById("wrap").style.height = "500px";
}
function openCard() {
var button = document.getElementById('button');
if(button.innerHTML == 'Open Card') {
button.innerHTML = 'Close Card';
} else {
button.innerHTML = 'Open Card';
}
var cards = document.querySelectorAll('.card');
for(var i = 0; i < cards.length; i++) {
cards[i].classList.toggle('open');
}
}
body {
margin: 0;
background-color: grey;
/*background: radial-gradient(circle at center, rgba(50,50,50,1) 0%,rgba(14,14,14,1) 35%) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
transform-style: preserve-3d;
}
img {
max-width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
}
h2 {
font-family: "Dancing Script", serif;
font-weight: normal;
font-size: 45px;
color: #009500;
text-align: center;
}
.wrap {
width: 125px;
height: 250px;
position: relative;
transform: rotateX(40deg) rotate(15deg);
transform-style: preserve-3d;
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
transition: all 3s linear;
}
.card {
height: 100%;
width: 100%;
background-color: #fff;
border-radius: 2px;
position: relative;
border: 4px solid black;
text-align: center;
}
.card--front {
transform: rotateY(-20deg);
display: flex;
align-items: center;
justify-content: center;
transition: all 3.5s cubic-bezier(0.4, 0, 1, 1);
transform-origin: center left;
position: absolute;
top: 0;
left: 0;
z-index: 2;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card--front.open {
transform: rotateY(-180deg);
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
}
.card--front.back {
z-index: 0;
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.card--inner {
overflow: hidden;
padding: 15px;
}
.card--inner h2 {
font-size: 32px;
}
.card--inner img {
max-width: 60%;
margin-top: 1.5em;
}
.card--inner.open:before {
transform: translateX(-155%);
opacity: 0.1;
}
.card--inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 1;
transition: all 1s ease-in-out;
}
button {
-webkit-appearance: none;
background: #E53935;
border: 5px solid #9f1815;
border-width: 0 0 5px;
padding: 10px 20px;
width: 150px;
text-align: center;
display: block;
transform: rotateX(30deg);
margin-top: 20px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
}
button:active {
border-bottom-width: 2px;
margin-top: 23px;
outline: none;
}
button:focus {
outline: none;
}
<div class="wrap" id="wrap">
<div class="card card--inner" style="background-color:white;">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:37.5%;background-color:#8eb9ff;position:absolute;left:3%;top:41%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:30%;height:10%;background-color:#8eb9ff;position:absolute;right:3%;top:84%;margin:0px 5px;"></h2>
</div>
<div id="cc" style="background-color:white;" class="card card--front back" onclick="openCard();">
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:51%;margin:0px 5px;z-index;1000;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:3%;margin:0px 5px;z-index;1000;"></h2>
</div>
<div class="card card--front" onclick="openCard();">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3.5%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20.5%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:80%;height:6%;background-color:#8eb9ff;position:absolute;left:9%;top:43%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:4%;top:53%;margin:0px 5px;"></h2>
</div>
</div>
<button type="button" onclick="pers();setTimeout(openCard, 2000);" id="button">Open Card</button>

Make menu hamburger close when click on link and outside

I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.

You can use this part of code and also add any other logic you want.
$(document).click(function(e) {
var target = e.target;
if (
!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
Full code here
$(document).ready(function() {
$(".navbar-fostrap").click(function() {
$(".nav-fostrap").toggleClass("visible");
$("body").toggleClass("cover-bg");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
});
body {
background-color: red;
}
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
Hope it helps.