We Keep Coding

How can I create my preloader to be visible on my site?

Basically, I have created a preloader I want to show on my site when the user clicks the link or refreshes the page. However, I need help implementing the preloader onto my site. For some reason, when I combine my preloader with my site code, the preloader does not show up at the beginning. It shows up in a space at the bottom of my carousel, acting like a parallax effect for some reason. How can I make it so my preloader is displaying correctly and fade out showing my site? Any help is appreciated. Down below is the code I am using. Here is a link of what I would like my preloader to be: https://planepreload.raymondnelson.repl.co/
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
$(window).on('load', function() {
$('.preload').delay(5000).fadeOut(1000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
}
h3 {
color: #3F69CA
}
/* Preloader Code */
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #77b3d4;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5 ease;
}
.cloud1,
.cloud2,
.cloud3{
height: 100px;
position: absolute;
right: 0%;
z-index: -1;
}
.cloud1 {
top: 25%;
transform: translate(100%, -25%);
animation: clouds 3s ease infinite;
}
.cloud2 {
top: 50%;
transform: translate(100%, -50%);
animation: clouds 3s ease infinite 2s;
}
.cloud3 {
top: 75%;
transform: translate(100%, -75%);
animation: clouds 3s ease infinite 4s;
}
.airplane {
height: 200px;
animation: airplane 1s ease infinite alternate;
}
#keyframes airplane {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
#keyframes clouds {
from {
right: 0%;
}
to {
right: 130%;
}
}
.preload .land {
position: absolute;
top: 75%;
transform: translateY(-75%);
color: white;
font-size: 30px;
font-family: sans-serif;
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: "Hind";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Hind";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Hind";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hind";
}
header ul li {
position: relative;
list-style: none;
font-family: "Hind";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Hind";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Hind";
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.ddtext1 {
position: relative;
left: -5px;
}
.ddtext1:hover {
color: #00B800;
}
.ddtext2 {
position: relative;
left: -15px;
}
.ddtext2:hover {
color: #14adb3
}
.ddtext3 {
position: relative;
left: -20px;
}
.ddtext3:hover {
color: #E0A800;
}
.information {
background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");
background-size: cover;
height: 100vh;
}
.name {
position: relative;
top: 300px;
right: 200px;
text-align: center;
color: #20A4F3;
font-family: "Hind";
animation: fadeIn ease 4s;
font-size: 80px;
}
.text {
position: relative;
top: 300px;
text-align: center;
font-family: "Hind";
text-transform: uppercase;
}
.text h1 {
font-size: 50px;
color: #222;
}
.text span {
font-size: 50px;
animation: light 2s linear infinite;
}
/* Carousel */
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
</head>
<body>
<div class = "load">
<div class="preload">
<img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />
<h3 class = "land">Landing on the website...</h3>
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />
</div>
</div>
<!--Navbar-->
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="gallery.html">Gallery</a>
<div class="dropdown-content">
<a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>
</div>
</div>
</li>
<li>
Contact
</li>
</ul>
</header>
<!--Home Page-->
<div id="information">
<div id="slider">
<figure>
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
</figure>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

I added a z-index: 9999 rule for the preload class to overlap the main content for the duration of the animation. And also, adjust the z-index for the header tag - z-index: 9990. For the body tag, I set overflow: hidden to hide the scrollbar for the duration of the animation, and at the end of the animation, this scrollbar appears again, thanks to the adjustment of the jquery code:
$('body').css('overflow', 'visible');
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
$(window).on('load', function() {
$('.preload').delay(5000).fadeOut(1000, function() {
$('body').css('overflow', 'visible');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
overflow: hidden;
}
h3 {
color: #3F69CA
}
/* Preloader Code */
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #77b3d4;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5 ease;
z-index: 9999;
}
.cloud1,
.cloud2,
.cloud3{
height: 100px;
position: absolute;
right: 0%;
z-index: -1;
}
.cloud1 {
top: 25%;
transform: translate(100%, -25%);
animation: clouds 3s ease infinite;
}
.cloud2 {
top: 50%;
transform: translate(100%, -50%);
animation: clouds 3s ease infinite 2s;
}
.cloud3 {
top: 75%;
transform: translate(100%, -75%);
animation: clouds 3s ease infinite 4s;
}
.airplane {
height: 200px;
animation: airplane 1s ease infinite alternate;
}
#keyframes airplane {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
#keyframes clouds {
from {
right: 0%;
}
to {
right: 130%;
}
}
.preload .land {
position: absolute;
top: 75%;
transform: translateY(-75%);
color: white;
font-size: 30px;
font-family: sans-serif;
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 9990;
font-family: "Hind";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Hind";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Hind";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hind";
}
header ul li {
position: relative;
list-style: none;
font-family: "Hind";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Hind";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Hind";
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.ddtext1 {
position: relative;
left: -5px;
}
.ddtext1:hover {
color: #00B800;
}
.ddtext2 {
position: relative;
left: -15px;
}
.ddtext2:hover {
color: #14adb3
}
.ddtext3 {
position: relative;
left: -20px;
}
.ddtext3:hover {
color: #E0A800;
}
.information {
background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");
background-size: cover;
height: 100vh;
}
.name {
position: relative;
top: 300px;
right: 200px;
text-align: center;
color: #20A4F3;
font-family: "Hind";
animation: fadeIn ease 4s;
font-size: 80px;
}
.text {
position: relative;
top: 300px;
text-align: center;
font-family: "Hind";
text-transform: uppercase;
}
.text h1 {
font-size: 50px;
color: #222;
}
.text span {
font-size: 50px;
animation: light 2s linear infinite;
}
/* Carousel */
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
</head>
<body>
<div class = "load">
<div class="preload">
<img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />
<h3 class = "land">Landing on the website...</h3>
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />
</div>
</div>
<!--Navbar-->
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="gallery.html">Gallery</a>
<div class="dropdown-content">
<a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>
</div>
</div>
</li>
<li>
Contact
</li>
</ul>
</header>
<!--Home Page-->
<div id="information">
<div id="slider">
<figure>
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
</figure>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Why is my modal opening on the bottom of page?

I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}

You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>

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>

Why does dropdown menu only work properly in header?

I just implemented a dropdown-menu that drops down when the user hovers/clicks the menu image.
However as soon as the user scrolls down to section2, then the dropdown stops to work properly. Either it simply does not drop down when the user hovers/clicks the dropdown image, or if it does, the menu items can't be clicked.
I can't see how the other sections can influence whether or not a fixed dropdown works.
Any suggestions?
thanks
var main = function() {
$(".dropdown img").click(function() {
$(".dropdown-menu").slideDown("slow");
});
$(".dropdown img").mouseenter(function() {
$(".dropdown-menu").slideDown("slow");
});
$(".dropdown ul").mouseleave(function() {
$(".dropdown-menu").slideUp("slow");
});
$(window).scroll(function() {
$(".dropdown-menu").slideUp();
$(".dropdown img").removeClass("rotate");
});
$(".dropdown img").mouseenter(function() {
$(".dropdown img").addClass("rotate");
});
$(".dropdown-menu").mouseleave(function() {
$(".dropdown img").removeClass("rotate");
});
};
$(document).ready(main);
html,
body {
font-size: 100%;
height: 100%
}
/*Header*/
.dropdown img {
height: 2.5em;
width: 3.5em;
}
.dropdown-menu {
background-color: rgba(0, 0, 0, 0.5);
}
.header {
background: url(/img/sri.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
position: relative;
box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6);
min-height: 100%
}
.header ul li a {
color: #fff;
}
.header .logo {
float: left;
margin-top: 0.42em;
}
#rowheader {
margin-top: 5em;
}
.header .dropdown {
margin-top: 0.42em;
position: fixed;
right: 2em;
}
.dropdown img {
border-radius: 50%;
background: black;
height: 3em;
width: 3em;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
/* Safari */
transition: width 1s, height 1s, transform 1s;
}
.rotate {
-webkit-transform: rotate(180deg);
/* Safari */
transform: rotate(180deg);
}
.dropdown ul {
left: -8em;
width: auto;
position: absolute;
}
.header .logo p {
font-size: 1em;
color: black;
font-family: 'Permanent Marker', cursive;
font-weight: bold;
}
#rowheader h1 {
font-weight: bolder;
font-size: 3em;
position: relative;
color: #fff;
text-align: center;
}
/*Section1*/
#section1 {
text-align: center;
margin-top: 3em;
margin-bottom: 3em;
font-size: 1em;
height: auto;
position: relative;
font-family: 'Open Sans', sans-serif;
}
#section1 h2 {
font-size: 2em;
font-weight: bolder;
text-align: center;
padding: 0 2.5em 1em;
display: block;
}
#section1 p {
line-height: 1.8em;
font-size: 0.9em;
padding: 1em 0;
}
#section1 a {
color: #fff;
background: #007bb6;
text-decoration: none;
padding: 0.1em 0.5em;
border-radius: 5px 5px 5px 5px;
}
#section1 a:hover {
background: #005983
}
/*Section2*/
#section2 {
line-height: 1.8em;
height: auto;
margin-top: 2em;
margin-bottom: 2em;
position: relative;
}
#section2 h2 {
font-size: 2em;
font-weight: bolder;
text-align: center;
padding: 0 2.5em 1em;
display: block;
}
#section2 p {
padding: 0 0 0.5em;
font-family: 'Open Sans', sans-serif;
padding-bottom: 2em;
}
#section2 img {
width: 100%;
height: 100%;
}
#img-wrapper {
display: inline-block;
overflow: hidden;
}
#img-wrapper img {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#img-wrapper img:hover {
-webkit-transform: scale(1.1);
/* Safari and Chrome */
-moz-transform: scale(1.1);
/* Firefox */
-ms-transform: scale(1.1);
/* IE 9 */
-o-transform: scale(1.1);
/* Opera */
transform: scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Header -->
<div class="header">
<div class="container">
<div class="logo">
<p>???</p>
</div>
<div class="dropdown">
<img src="img/menuwhite.jpg">
<ul class="dropdown-menu">
<li>Find me on Linkedin
<li>
<li>Send me an email
</li>
<li>Download my resume
</li>
</ul>
</div>
<div id="rowheader">
<h1></h1>
</div>
</div>
</div>
<!-- Section1 -->
<div id="section1" class="container">
<h2>About</h2>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>Me</h3>
<p>blablablabla</p>
<p>blablablablablablablablablqblablablablablablablablablablablablablablabla</p>
</div>
<!-- Section2 -->
<div id="section2" class="container">
<h2>My Projects</h2>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="img-wrapper">
<img src=" "">
</div>
</div>
</div>
</div>

You are missing z-index on .header .dropdown element
.header .dropdown {
margin-top: 0.42em;
position: fixed;
right: 2em;
z-index: 20;
}

how to start webkit animation after page load?

I have an animation with my header wrapper and I want the animation to start after the page completely loads.
However it seems like it starts before the page loads. I looked up a function on css tricks and that is what i am using here.
It seems the animation starts a little early. Any help with this?
From the post on css tricks i added a class "preload" to the body and then removed the class in my JavScript to start the animation but does not seem to work.
<!---------------------------HTML ------------------------>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class = "preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim fadeInDown">
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>
<!--------------------------------------CSS------------------------------>
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
<!-----------------------------------------JS------------------------------>
$(window).load(function() {
$("body").removeClass("preload");
});

Remove .fadeInDown class from wrapper div
Make wrapper div display:none by default.
Add display:block !important; CSS to .fadeInDown class
On page ready add .fadeInDown class to wrapper div.
$( document ).ready(function() {
$(".wrapper").addClass("fadeInDown");
});
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
display:block !important;
}
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class="preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim" style='display:none'>
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>

This preload class prevents transitions, but not keyframe animations. It's also a bit hacky.
Instead of removing a class on page load, it might make more sense to add the fadeInDown class in your $(window).load function, which will cause the CSS animation to run immediately after the class is added. Just remember to remove that class from the HTML, as it will now be added in JS.
$(window).load(function() {
$(".wrapper").addClass("fadeInDown");
});