We Keep Coding

how do I fix the overlay "overflow: hidden;" instead of the entire body

So I have this hamburger menu on the right side of the navbar which when clicked should pop open overlay and be full screen black and un-scrollable(just the overlay) but right now when it's clicked is scrollable and not full screen black, I don't know what went wrong, any help would be really appreciated, thanx!
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: black;
color: white;
height: 100%;
width: 100%;
position: fixed;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
Home
About
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

See adjustments to the CSS inline below, but here are the major points:
The overlay should not be using Flexbox. If you want the layout within the overlay to use Flexbox, then set that up on the elements it contains.
The element itself should not be in the HTML as a child of the main content if you are going to size it using percents, because then it will only be as big as the parent. Instead, use vh and vw (Viewport Height and Viewport Width) units.
Set the top and left CSS properties to position the overlay at the top-left of the screen.
Don't use visibility to hide the overlay, use display:none and then display:block to bring it back.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
color: white;
}
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
<div class="menu-overlay">
Home
About
</div>
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Thanks to #Scott Marcus for fixing the layout but the overflow was still not working so I added a toggle-class in js, It works just fine but lemme know otherwise if it contains any DOM errors. Cheers!
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.no-scroll{
overflow: hidden;
}

Animation with Popups Box

At the starting of 'zoomIn' animation the background: rgba(0, 0, 0, 0.5); comes along with it but what I am trying is to popup box to have zoomIn animation and the background: rgba(0, 0, 0, 0.5); should already be there.
And I am trying to implement smooth animation of 'backOutTop' after clicking Submit button in the popup box but:
1) The animation is not smooth, it happens very suddenly.
2) After the animation the popup box doesn't seem to hide even after I have set visibility: hidden;
If there's any other way to do that. Please do share. Thank You.
$(document).ready(() => {
setTimeout(() => {
$(".popUp").css('visibility', 'visible')
}, 500); //Automatically Pops up after 0.5 sec.
});
document.querySelector('.btn-name').addEventListener('click', () => {
document.querySelector('#popUpid').classList.remove('popUp');
document.querySelector('#popUpid').classList.add('popUpClose');
});
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
visibility: hidden;
animation: zoomIn;
animation-duration: 3s;
}
.popUpClose {
visibility: hidden;
animation: backOutUp;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
border: 3px solid black;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="popUp" id="popUpid">
<div class="popUpBox">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
</body>

as per the question explanation, these are the little changes you need to do in your code.
$(document).ready(function() {
setTimeout(() => {
$(".popUp").css('visibility', 'visible')
}, 500); //Automatically Pops up after 0.5 sec.
$('.btn-name').click(function() {
$('#popUpid').addClass('popUpClose');
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
visibility: hidden;
animation: zoomIn;
animation-duration: 3s;
opacity: 1;
transition: opacity 1s;
}
.popUpClose {
opacity: 0;
animation: backOutUp;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
border: 3px solid black;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp" id="popUpid">
<div class="popUpBox">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
for your still background and animation only on popUP.
$(document).ready(function() {
setTimeout(() => {
$(".popUpBox").addClass('show');
}, 500); //Automatically Pops up after 0.5 sec.
$('.btn-name').click(function() {
$('#popUpid').addClass('popUpClose');
setTimeout(() => {
$(".popUp").css('opacity','0');
}, 1800);
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
}
.popUpClose {
opacity: 0;
animation: backOutUpCustom;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0,0);
width: 200px;
height: 150px;
border: 3px solid black;
transition: all 3s;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.popUpBox.show {
transform: translate(-50%, -50%) scale(1,1);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
#keyframes backOutUpCustom {
0% {
-webkit-transform: scale(1);
transform: translate(-50%, -50%) scale(1,1);
opacity: 1
}
20% {
-webkit-transform: translate(-50%, 0) scale(0.7,0.7);
transform: translate(-50%, 0) scale(0.7,0.7);
opacity: .7
}
to {
-webkit-transform: translate(-50%, -700px) scale(0.7,0.7);
transform: translate(-50%, -700px) scale(0.7,0.7);
opacity: .7
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp">
<div class="popUpBox" id="popUpid">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>

Half circle animation start on button click

I'm trying to get my circle loader running. But didn't found how to get the animation running when clicking the Try it button.
Any ideas?
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>
Here the code: https://jsfiddle.net/pzc41skn/

Here is how you can achieve an animation on clicking of the button:
function myFunction() {
$('.liElem').remove();
$(".chart-skills").html('<div class="liElem" id="eins"></div>');
}
body {
font: normal 16px/1.5 'Roboto', sans-serif;
padding: 130px 0 0 0;
background: #f1f1f1;
}
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.chart-skills *,
.chart-skills::before {
box-sizing: border-box;
}
/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
position: relative;
width: 350px;
height: 175px;
overflow: hidden;
}
.chart-skills::before,
.chart-skills::after {
position: absolute;
}
.chart-skills::before {
content: '';
width: inherit;
height: inherit;
border: 45px solid rgba(211, 211, 211, .3);
border-bottom: none;
border-top-left-radius: 175px;
border-top-right-radius: 175px;
}
.chart-skills::after {
content: '';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: bold;
color: cadetblue;
}
.chart-skills .liElem {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
border: 45px solid;
border-top: none;
border-bottom-left-radius: 175px;
border-bottom-right-radius: 175px;
transform-origin: 50% 0;
transform-style: preserve-3d;
backface-visibility: hidden;
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: linear;
}
.chart-skills #eins {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .4s;
}
.chart-skills #zwei {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .8s;
}
#keyframes rotate-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
/**
* 32% => 57.6deg
* 57.6 + 21.6 => 79.2deg
*/
}
}
#bottom {
transform: scale(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>

Navigation Menu not working on mobile

I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!

You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.

How to prevent CSS for popup conflicting index.html CSS?

I'm attempting to use a form from codepen user Kyle Lavery sign up modal as a popup. I'm using <?php include"contact.html"; ?> in my index.html. My problem is that contact.html has overflow: hidden applied to the body which is conflicting with index.html. It's also possible that the styles applied to *, :before, :after are an issue but so far I can't tell. I tried putting a div around the entire form and it's parent divs and applying the styling from body to it but that cause the animation to shake slightly. Any suggestions on how to to apply this CSS while still keeping the animation smooth? My next thought is to use jQuery to only apply this CSS when the popup opens onclick. View the snippet full-screen to see the animation properly.
$(".close, .nope").on('click', function () {
$('.modal').addClass('hidden');
$('.open').addClass('active');
})
$(".open").on('click', function () {
$(this).removeClass('active');
$('.modal').removeClass('hidden');
})
*, :before, :after {
box-sizing: border-box;
margin: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body {
overflow: hidden;
}
.popup {
color: #FFF;
font-family: Roboto;
}
.modal {
height: 450px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .4s, box-shadow .3s .4s;
transition: .4s, box-shadow .3s .4s;
}
.modal.hidden {
box-shadow: none;
-webkit-transition: .4s, box-shadow 0s;
transition: .4s, box-shadow 0s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.modal.hidden .form {
top: 100%;
}
.modal.hidden .invite {
top: -100%;
}
.modal.hidden .invite .close {
height: 0;
width: 0;
top: 0;
right: 0;
}
.form, .invite {
background: rgba(71, 71, 71, 0.8);
width: 50%;
height: 100%;
padding: 25px;
position: absolute;
top: 0;
left: 0;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 500px #7a7a7a inset;
-webkit-text-fill-color: #FFF;
}
label {
font: 500 14px Roboto;
color: #ffb66e;
}
button {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
button:hover:before {
left: 110%;
-webkit-transition: .3s;
transition: .3s;
}
button:before {
content: '';
background: rgba(255, 255, 255, 0.3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transition: 0s;
transition: 0s;
}
.invite {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
left: 50%;
}
h2 {
font: 30px Roboto;
text-transform: uppercase;
}
.close {
background: #474747;
height: 30px;
width: 30px;
border: 3px solid #FFF;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
-webkit-transition: .4s .3s;
transition: .4s .3s;
}
.close:before, .close:after {
content: '';
background: #FFF;
height: 80%;
width: 3px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.open {
color: black;
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.open.active {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daily UI #001 - Sign Up Modal</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/contact.css">
</head>
<body>
<div class="popup">
<a class="open active" title="open modal" href="#">Open Modal</a>
<div class="modal hidden">
<div class="form">
<form>
<label for="first-name" required="required">First Name</label>
<input id="first-name" type="text" />
<label for="last-name" required="required">Last Name</label>
<input id="last-name" type="text" />
<label for="email" required="required">Email Address</label>
<input id="email" type="email" />
<label for="message">Message</label>
<input id="message" type="text" />
<button type="button">Send</button>
</form>
</div>
<div class="invite">
<h2>Thank you for your interest. I look forward to speaking with you soon.</h2>
<div title="close" class="close"></div>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/contact.js"></script>
</body>
</html>