We Keep Coding

Modal content at center [duplicate]

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 26 days ago.
How to make the captcha at the center when I click the submit button? I am having a hard time centering the captcha in the center. Kindly take a look in the jsfiddle attached hehe
https://jsfiddle.net/rzant4kb/
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<button id="myBtn" class="btn-submit" type="submit">SUBMIT</button>
<br>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p>Captcha Verification</p>
<!--Captcha Verification-->
<div class="wrapper">
<div class="captcha-area">
<div class="captcha-img">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form action="#" class="input-area">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button class="check-btn">Check</button>
</form>
<div class="status-text"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Centered the captcha input field using :
.wrapper{
width: 65%;
margin: 0 auto;
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
* {
margin: 0;
border: 0;
}
hr {
border-color: #6ACEBC;
border-style: solid;
border-width: 0.7vw;
background: #6ACEBC;
height: 30px;
}
.logo {
width: 18%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
}
.login {
text-align: center;
display: block;
margin-top: 15px;
}
.username, .password {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 1vw;
margin-right: 10px;
}
.input-details {
border: black 1px solid;
width: 16vw;
height: 2vh;
}
.forgot-password {
margin-left: 230px;
text-decoration: none;
color: #6ACEBC;
font-family: Arial, Helvetica, sans-serif;
margin-top: 20%;
font-size: 75%;
}
.btn-submit {
background: #C78632;
border-radius: 301px;
padding: 5px;
color: white;
font-weight: bold;
margin-top: 20px;
width: 150px;
height: 30px;
}
.line {
bottom: 0;
position: absolute;
background-color: #6ACEBC;
width: 98.7%;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
height: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 34px;
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {
padding: 2px 16px;
align-items: center;
}
.modal-body p {
margin-top: 50px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
}
.wrapper{
width: 65%;
margin: 0 auto;
}
.wrapper .captcha-area{
display: flex;
height: 65px;
margin: 30px 50px 20px 0;
align-items: center;
justify-content: space-between;
}
.captcha-area .captcha-img{
height: 100%;
width: 345px;
user-select: none;
background: #9FFBA8;
border-radius: 5px;
position: relative;
}
.captcha-img img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
opacity: 0.95;
}
.captcha-img .captcha{
position: absolute;
left: 50%;
top: 50%;
width: 100%;
color: #000;
font-size: 35px;
text-align: center;
letter-spacing: 10px;
transform: translate(-50%, -50%);
text-shadow: 0px 0px 2px #b1b1b1;
font-family: 'Noto Serif', serif;
}
.wrapper button{
outline: none;
border: none;
color: #000;
cursor: pointer;
background: #9FFBA8;
border-radius: 5px;
transition: all 0.3s ease;
}
.wrapper button:hover{
background: #6ACEBC;
}
.captcha-area .reload-btn{
width: 75px;
height: 100%;
font-size: 25px;
}
.captcha-area .reload-btn i{
transition: transform 0.3s ease;
}
.captcha-area .reload-btn:hover i{
transform: rotate(15deg);
}
.wrapper .input-area{
height: 60px;
width: 85%;
position: relative;
}
.input-area input{
width: 100%;
height: 100%;
outline: none;
padding-left: 20px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #bfbfbf;
}
.input-area input:is(:focus, :valid){
padding-left: 19px;
border: 2px solid #4db2ec;
}
.input-area input::placeholder{
color: #bfbfbf;
}
.input-area .check-btn{
position: absolute;
right: 7px;
top: 50%;
font-size: 17px;
height: 45px;
padding: 0 20px;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
}
.input-area input:valid + .check-btn{
opacity: 1;
pointer-events: auto;
}
.wrapper .status-text{
display: none;
font-size: 18px;
text-align: center;
margin: 20px 0 -5px;
}
#media (max-width: 506px){
body{
padding: 0 10px;
}
.wrapper{
padding: 22px 25px 35px;
}
.wrapper header{
font-size: 25px;
}
.wrapper .captcha-area{
height: 60px;
}
.captcha-area .captcha{
font-size: 28px;
letter-spacing: 5px;
}
.captcha-area .reload-btn{
width: 60px;
margin-left: 5px;
font-size: 20px;
}
.wrapper .input-area{
height: 55px;
}
.input-area .check-btn{
height: 40px;
}
.wrapper .status-text{
font-size: 15px;
}
.captcha-area .captcha-img{
width: 250px;
}
}
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<button id="myBtn" class="btn-submit" type="submit">SUBMIT</button>
<br>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p>Captcha Verification</p>
<!--Captcha Verification-->
<div class="wrapper">
<div class="captcha-area">
<div class="captcha-img">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form action="#" class="input-area">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button class="check-btn">Check</button>
</form>
<div class="status-text"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

Image Modal or Expand when click in html and css

So i am trying to put a code for modal or in order to expand my images. I already checked every sector or every codes and still didn't find why it's not working. I don't want nothing to change in it except the modal, it my get mess up if i change things. I got the codes from a website. In the site their result are working but when i put the codes in the notepad nothing happened. It will be really helpful if you can find what is wrong with it. Thank you in advance for those who will help me.
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8vw 130vw 7vw;
grid-gap: 0em;
margin: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
}
header,
footer {
grid-column: 1 / span 2;
}
main {
grid-column: 1 / span 2;
}
body {
margin: 0 auto;
max-width: 89em;
margin-left: 0;
margin-right:0;
padding: 0em 0;
}
header,
main,
aside,
footer {
display: flex;
}
footer {
background: #eaeaea;
}
.main1 {
margin-top: 450px;
margin-left: 0;
}
#body_1 h2 {
margin-left: 50px;
font-size: 30px;
color: black;
margin-top: 95px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h6 {
margin-left: 10px;
color: blue;
margin-top: 220px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h4 {
margin-left: 230px;
font-size: 30px;
color: black;
margin-top: 260px;
margin-bottom:3px;
position: left;
float: left;
}
.text4 {
position: absolute;
float: left;
top: 870px;
}
.background_wrap {
position: absolute;
background-color: rgba(19, 13, 6,0.5);
z-index: -1000;
width: 100%;
height: 100% ;
overflow:hidden;
background: url("Pics&Video/laoang6.jpg") no-repeat center;
background-size: cover;
}
.background_wrap::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 20%;
z-index: 1000;
}
.sub-content {
position: fixed;
width: 1000px;
height: 120px;
margin: 0 auto;
transition: 0.5s;
}
.sub-content.active {
background-color: rgba(0, 26, 26,0.7);
width: 100%
}
.sub-content.active ul li a {
background-color: rgba(0, 26, 26,0.7);
}
#list {
margin-right: 5px;
position:fixed;
margin-left: 780px;
margin-top: 20px;
}
ul {
margin-top:1px;
padding: 0px;
list-style: none;
color: white;
margin-right: 0px;
font-family: calibri;
font-weight: bold;
}
ul li {
float: right;
width: 130px;
font-family: courier new;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff ;
border-left: 1px solid #ffffff ;
border-top: 1px solid #ffffff ;
line-height: 25px;
text-align: center;
font-size: 13px;
font-weight: bolder;
margin-top: 35px;
margin-right: 3px;
}
ul li a {
color: white;
display: block;
margin-top: 2px;
font-weight: bolder;
text-decoration: none;
}
ul li a:hover {
background-color: green;
font-weight:bolder;
cursor: pointer;
color: white
}
ul li ul li {
display: none;
font-weight: bolder;
}
ul li:hover ul li {
display:block;
cursor: pointer;
color: white;
margin-top:1px;
margin-right: 0px;
position: center;
background-size: cover;
font-weight: bolder;
}
h1 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-weight: bolder;
color: white;
margin-bottom: 6px;
}
h2 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-weight: 300;
color: white;
padding-top: 14%;
}
.wrapper {
position: center;
width: 750px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
font-size: 17px;
}
.image_wrap {
margin-top:20px;
height: 70px;
margin-left:55px;
}
.fl_image {
float: left;
margin-right:5px;
margin-bottom: 10px;
}
.content h6 {
font-family: courier new;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
color: green;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 100px;
}
.content p {
font-family: courier new;
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #ffffff;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 250px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery1 {
float: left;
position: absolute;
margin-top: 320px;
margin-left: 10px;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 300px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery2 {
float: left;
position: absolute;
margin-top: 840px;
margin-left: 10px;
}
.text4 {
margin-left: 360px;
font-size: 30px;
color: black;
margin-top: 220px;
margin-bottom:3px;
position: left;
float: left;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10000 ; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 600px;
max-height: 450px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.transparent_btn {
font-size: 10px;
line-height: 50px;
color: #EC7063 ;
background-color: transparent;
border: 1px solid #D98880;
padding: 1px 20px;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: background-color ease 300ms;
font-weight: 200;
font-size: 16px;
margin-top: 620px;
float: left;
}
.transparent_btn:hover {
color: #fff;
background-color: rgba(245, 183, 177,0.8);
}
.btn {
position: absolute;
z-index: 1;
margin-left: 640px;
}
.btn2 {
position: absolute;
margin-top: 530px;
margin-left: 640px;
}
<!Doctype html>
<html>
<head>
<title> Hotels </title>
<link style="text/css" href="Hotel.css" rel="stylesheet" > </link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$(".sub-content").addClass('active');
}else{
$(".sub-content").removeClass('active');
}
})
});
</script>
<script>
$(document).ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img04");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
</script>
</head>
<body>
<header>
<div class="background_wrap">
</div>
<div class="content">
<div class="sub-content">
<img class="image_wrap fl_image" src="Pics&Video\picture.png" height="100px" margin-left="5px" alt="Image One"/>
<div id="list" >
<ul>
<li><a> <i class="fas fa-file-signature"></i> Contact</a></li>
<li> <i class="fas fa-user"></i> About</li>
<li> History </i></li>
<li><a> Activities <i class="fas fa-caret-down"></i></a>
<ul>
<li> Hotels</li>
<li> Festival</li>
</ul>
</li>
</ul>
</div>
<h6>Calbayog Tourism</h6>
</div>
</div>
<div class="wrapper">
<h2>Search all travel deals, in one go</h2>
<h1> HOTEL </h1>
</div>
</header>
<main class="main1">
<div id="body_1">
<h2> Calbayog Hotel </h2> <h6> 2 Places </h6>
<h4> Baypark Hotel </h4>
<div class="gallery1">
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" width="600" height="400">
</div>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img04">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
<div class="btn">
View
</div>
<div class="text4">
<h4> Ciriaco Hotel </h4>
</div>
<div class="gallery2">
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
<div class="btn2">
View
</div>
</div>
</main >
<footer style="background: #1a75ff;">
<div style="text-align: center; margin-left: 40%; margin-top: 30px; font-family: courier new;">
#2019 Calbayog Tourism. All rights resereved.
</div>
</footer>
</body>
</html>

First you have to move your scripts inside document.ready. They are accessing DOM elements before rendering is completed.
Then you have to move the modal up. Do something like this and you'll see the modal move up. $("#img01").css({position:"absolute", "top": "0px"})
Then you can proceed :)

How can I create modal popup effect, If I'm using separate html/css pages?

I want to create a Modal Popup effect every time I click on "Login" on my index page.
The only thing is, I have created separate HTML/CSS pages (for example, index.html/css, login.html/css, etc..).
I'm confused, how to use JavaScript to make this happen.
As I have separate pages. I know how to apply modal popup effect, on single html/css page using JavaScript.
But I don't know how to make this happen if I'm using several different pages. My code looks messed up a bit. All my pages are linked to each other properly but without any effect.
Below is my index.html code and login.html code along with the css code.
index.html code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link href="login.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>MyWeb</title>
</head>
<body>
<div class="header">
<h1> <i class="fas fa-music"></i>Spotify</h1>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<div class="siderbarMenuInner">
<li> <div class="show-login-button"> <i class="fas fa-sign-in-alt"></i> login</div></li>
<li> <i class="fas fa-home"></i> Home </li>
<li> <i class="fas fa-search"></i> browse </li>
<li> <i class="fab fa-itunes-note"></i> My Playlist</li>
<li> About </li>
</ul>
<div class="Instagram">
<i class="fab fa-instagram"></i>
</div>
<div class="Twitter">
<i class="fab fa-twitter"></i>
</div>
<div class="Facebook">
<i class="fab fa-facebook-f"></i>
</div>
</div>
</body>
</html>
index.css code:-
body {
overflow-x: hidden;
height: 100%;
background-color: white;
}
body {
font-family: tahoma;
margin: 0;
padding: 0;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #fc466b;
position: fixed;
height: 50px !important;
overflow: hidden;
z-index: 10;
}
h1 {
margin: 1px;
top: 13%;
color: #2f3640;
text-decoration: none;
position: absolute;
left: 3%;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
h1:hover {
color: white;
}
h1 i {
font-size: 20px;
letter-spacing: 8px;
}
.searchbox {
position: absolute;
border-radius: 40px;
right: 2%;
background: #2f3640;
height: 40px;
top: 6%;
padding: 0.1%;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.search-btn {
color: #fc466b;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s;
text-decoration: none;
}
.searchbox:hover>.search-txt {
width: 500px;
padding: 0 6px;
}
.searchbox:hover>.search-btn {
background: white;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 50px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 50px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #fc466b, #3f5efb);
}
.siderbarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.siderbarMenuInner li {
list-style: none;
color: #2f3640;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
padding: 30px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
text-decoration: none;
text-align: center;
transition: 0.4s;
}
.siderbarMenuInner li:hover {
color: white;
}
.siderbarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
text-decoration: none !important;
color: inherit;
}
.sidebarMenuInner li a {
color: white;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
a {
text-decoration: none !important;
color: inherit;
}
.Instagram {
top: 90%;
left: 16%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Instagram:hover {
color: black;
}
.Twitter {
text-align: center;
top: 90%;
left: 45%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Twitter:hover {
color: black;
}
.Facebook {
text-align: center;
top: 90%;
left: 75%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Facebook:hover {
color: black;
}
login.html code:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Login Form</title>
<link rel="stylesheet" href="login.css">
<link rel="" href="index.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
>
<div class="login-form">
<form class="login-box" action="index.html" method="post">
<h1>Login</h1>
<input class="txtb" type="text" name="" placeholder="Username">
<input class="txtb" type="password" name="" placeholder="Password">
<input class="login-btn" type="submit" name="" value="Login">
</form>
</div>
</body>
</html>
login.css code:-
* {
font-family: "Monteserrat", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.login-form{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #fc466b, #3f5efb);
transition: 0.4s;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.login-box h1 {
font-weight: 400;
text-transform: uppercase;
margin-top: 0;
}
.txtb {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #1c2830;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.txtb:focus {
width: 280px;
border-color: #000000;
}
.login-btn {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #000000;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.login-btn:hover {
background: #000000;
}
JS code for modal on single HTML page:-
// GetElements
const modal = document.querySelector('#modal');
const modal_btn = document.querySelector('#modal-btn');
const close_btn = document.querySelector('.close');
//Event_Listener
modal_Btn.addEventListener('click', openModal);
close_Btn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
//Open & Close
function openModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
}

If I'm understand correctly, you are trying to use a separate HTML file as a modal, right? If that correct, try to watch this answer :
Open Modal (bootstrap) from other html-file

GetAjax gets the remote file and load_modal is just a shorthand function that calls getajax and loads the modal.
function getAjax(url, success) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
return xhr;
}
function load_modal(url){
getAjax(url, function(data){
modal.innerHTML = data;
modal.style.display = 'block';
});
}

Add text pop up on link click

MY website is currently under construction so im trying to add a little pop up on the header links that says "coming soon" or something like that. You click it and it just pops up near the link.
This is the tutorial i was following but cant get it to work with my own code. So ill take anything at this point.
https://www.w3schools.com/howto/howto_js_popup.asp
Id like something where all i have to do is add a certain class to each link and it just work once that class is added or something like that seems to me to be the best.
so idealy id like to add it to the about us, our work and services button.
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Roboto:bold');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
#import url('https://fonts.googleapis.com/css?family=Roboto:600');
#font-face {
font-family: "roboto";
src: url('https://fonts.googleapis.com/css?family=Roboto');
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color:#e0e0e0;
}
.logo {
width: 150px;
fill: white;
display: block;
position: relative;
padding: 23px 0px 0px 50px;
}
.logo svg {
position: absolute;
top: 0px;
right: 0px;
}
#hireus {
position: absolute;
top: 0;
right: 0;
padding: 3px;
font-family: proxima nova;
font-size: 12px;
text-decoration: none;
color: white;
margin: 27px 50px 0px 0px;
text-decoration: none;
z-index: 10;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
/*
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
*/
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
/* was ul */
.nav {
list-style-type: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
display: table;
margin: 0;
width: 100%;
text-align: center;
padding: 0
}
li {
/*
width: 120px;
height: 40px;
*/
margin: 0px 0px;
display: inline-block;
padding: 0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
}
.new a {
display: block;
/*
width: 120px;
height: 40px;
*/
/* line-height: 40px; */
text-decoration: none;
text-align: center;
color: white;
/* margin: 20px 20px; */
margin: 32px 20px 0px 20px;
}
.content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding-bottom: 7%;
}
.content h1 {
font-family: proxima nova;
font-size: 520%;
font-weight: bold;
color: white;
margin: 0;
padding-bottom: 3px;
}
.content p {
font-family: proxima nova;
font-size: 12px;
font-weight: 100;
color: white;
margin: 0 auto;
max-width: 420px;
padding-bottom: 25px;
}
.btn {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px white;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
}
.btn:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
.btn2 {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px #0B315C;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
background-color: #0B315C;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
margin-left: 30px;
-webkit-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
}
.btn2:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
#scroll {
color: green;
}
.title {
font-family: proxima nova;
font-size: 50px;
font-weight: 600;
color: black;
text-align: center;
margin-top: 60px;
padding-bottom: 2px;
}
.subtitle {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
text-align: center;
margin-top: -45px;
padding-bottom: 2px;
}
#second {
border-bottom: 1px solid #E6E6E6;
width: 480px;
margin: auto;
}
#Layer_1 {
width: 100px;
height: 100px;
}
#group2 {}
.whatwedo {
text-align: center;
width: 100%;
margin-top: 100px;
}
.subject {
text-align: center;
width: 300px;
display: inline-block;
margin: 0px 50px;
}
.subject img{
width: 100px;
}
.subject h2 {
font-family: proxima nova;
font-size: 20px;
font-weight: 600;
color: black;
margin-bottom: 12px;
}
.desc {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
}
.group3 {
position: relative;
text-align: center;
color: white;
margin-top: 90px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: proxima nova;
font-size: 24px;
font-weight: 100;
color: white;
width: 550px;
}
form {
display: table;
margin: 0 auto;
}
#forth {
width: 100%;
}
#forth h2{
margin-bottom: 20px;
}
input[type=text],
select {
width: 400px;
padding: 13px 20px;
margin: 8px 0;
display: inline-block;
border-radius: 30px;
box-sizing: border-box;
font-family: proxima nova;
font-size: 14px;
}
input[type=submit] {
width: 160px;
background-color: #4CAF50;
color: white;
padding: 13px 20px;
margin: 8px 0;
border: none;
border-radius: 30px;
cursor: pointer;
background-color: #0B315C;
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
position: relative;
bottom: 42px;
margin: -9px 0px 0px 240px;
}
.email-form {
width: 400px;
}
.email-form input {
border: 0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
#hi{
background-color: #F9F9F9;
margin-top: -64px;
padding-top: 150px;
padding-bottom: 120px;
}
footer {
background-color: #30659B;
width: 100vw;
}
.logo2 {
width: 150px;
fill: white;
display: block;
}
.nav2 {
padding:0;
list-style-type: none;
color: white;
display: flex; /*Generates a flexbox layout with default flex direction as row */
width: 100%; /* Not really required */
height:100px;
align-items: center; /*Aligns contents vertically */
justify-content: space-around;
margin: 0px;
}
li {
padding:0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
text-align:center;
margin:5px;
}
li:first-child{
margin-left:100px;
}
li:last-child{
margin-right:100px;
}
li a {
text-decoration: none;
color: white;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
.content {
padding-bottom: 10%;
}
.content h1 {
font-size: 400%
}
.btn {
font-size: 110%;
padding: 9px 43px;
}
}
#media screen and (max-width: 768px) {
.content {
padding-bottom: 12%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 9px 43px;
}
}
#media screen and (max-width: 480px) {
.content {
padding-bottom: 14%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 10px 44px;
}
}
<!DOCTYPE html>
<head>
<title>Launchpad | Web design and marketing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<div class="logo">
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div>
<a id="hireus" href="/">HIRE US</a>
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s">
<h1>Welcome to Launchpad</h1>
<p>We are a creative agency who specializes in digital marketing and graphic design. Let us launch your business to the next level!</p>
</section>
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.7s">
<a class="btn" href="#">Hire Us</a>
<a class="btn2" href="#">Learn More</a>
</section>
</div>
</div>
</section>
<div id="second">
<h2 class="title">What we do</h2>
<p class="subtitle">Let us take your buisness to the next level.</p>
</div>
<div class="group2">
<div class="whatwedo">
<div class="subject" id="customdesign">
<img src="images/customdesign.svg" alt="Custom Design">
<h2 class="title2">Custom Design</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="contentmarketing">
<img src="images/contentmarketing.svg" alt="Content Mrketing">
<h2 class="title2">Content Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="emailmarketing">
<img src="images/emailmarketing.svg" alt="Email Marketing">
<h2 class="title2">Email Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
</div>
</div>
<div class="group3">
<img src="images/testimonialbg.png" alt="Norway" style="width:100%;">
<div class="centered">“The team at Launchpad exceeded our expectations!
They have a bright future ahead of them.”<br>
<span style="font-weight: 600;">Sam Molloy, Unmatched Masonry</span></div>
</div>
<!--
<div id="second">
<h2 class="title">Our work</h2>
<p class="subtitle">Nervous about taking off? Here's the portfolio.</p>
</div>
-->
<div id="hi">
<div id="forth">
<h2 class="title">Lets get in touch</h2>
<form action="mailto:contact#madebylaunchpad.com" method="post" enctype="text/plain" class="email-form">
<input type="text" name="mail" placeholder="Your email address"><br>
<input type="submit" value="Lets talk">
</form>
</div>
</div>
<footer>
<ul class="nav2">
<li class="li2">ABOUT US</li>
<li class="li2">OUR WORK</li>
<li class="li2">SERVICES</li>
<li>
<div class="logo2">
<svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div></li>
<li class="li3">TWITTER</li>
<li class="li3">FACEBOOK</li>
<li class="li3">INSTAGRAM</li>
</ul>
</footer>
</body>
</html>

Here's the code working:
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>

I built a pretty easy example for you and I'll run you through the code here.
First here it is in action:
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
<ul class="nav">
<div class="new">
<li id="showHide">HOME</li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
This is going to be your nav bar. As you can see i made some changes. I gave your home button an id so that we can call it later. I also added a new <li> tag that is hidden from site by "display: none".
<ul class="nav">
<div class="new">
<li id="showHide"><a href="/" >HOME</a></li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
Here is the magic
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
At the top we create a selector variable to tell it what we want to target, which for us will be the Home button.
Below that we write a function that triggers when our selector is clicked. When it is triggered we define what we want to change(in this case that would be the element with the id of "hidden"). After that we simply edit it's display property to show.