Develop Reference

Embed this externally made form into my website

I am working on this website where I want to add a form which opens once you press the login button. The form was created using an online form builder which provides an embed code for embedding into your website. I have provided the embed code along with the html/css for my website.
The HTML:
<div id="mySidenav" class="sidenav">
×
About
Contact
Help
</div>
<!-- <div id="main">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
-->
<div class="header">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<div class="header-right">
<a class="active" href="#home">Login</a>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}
</script>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: dodgerblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 40px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
margin-right: 30px;
}
#main {
transition: margin-left .3s;
padding: 20px;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: dodgerblue;
padding: 25px 20px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
embed code for the form:
<a name="form691431825" id="formAnchor691431825"></a>
<script type="text/javascript" src="https://fs3.formsite.com/include/form/embedManager.js?691431825"></script><script type="text/javascript">
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});</script>

First of all you need to rephrase the text of your post as you only make remarks without asking any question, having people to guess what it is you need.
Assuming you need a trigger to open your login window, here's what I did to make it work:
Modify the script with EmbedManager.embed(..); and put it inside a function called openLogin()
function openLogin() {
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});
}
Now you have a javascript function you can use to open your login screen. Once you have choosen an element (a,button,div,etc) you want to use as the trigger add propertiesname="form691431825" id="formAnchor691431825" onclick="javascript:openLogin()", remove the original a-element and your are good to go.
The result does not look too pretty, leaving you with the next fun puzzle to chew on...

My JQuery is not working on Chrome, sometimes works on firefox and then stops

when I click on the menu Icon, sometimes it works but after refreshing 3 or 4 times it stops. not working in Chrome at all. am i missing something. Please help.
$(function () {
const menu = $(".fa-3x");
const list = $(".show");
const main = $("#firstpage");
const last = $("#secondpage");
menu.on("click", _=> {
$(".show").toggleClass("hide");
});
});
Mock-up Site here - codepen

The query selector is wrong. $(".show").toggleClass("hide");
It could be better to use #menulinks to access related lu element.
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
Demo
/* jshint esversion:6 */
/* global $ */
$(function () {
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* makes the image fill entire screen*/
}
.name,
.scroller {
position: absolute;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
/* makes text in perfect mid*/
}
h1 {
font-family: "Inconsolata", monospace;
text-transform: uppercase;
}
.name {
top: 45%;
}
.show {
width: 130px;
background: rgba(3, 4, 32, 0.54);
position: relative;
left: 43px;
visibility: visible;
opacity: 1;
z-index: 4;
transition: 0.3s;
}
.fa-3x:hover,
#arrow:hover {
cursor: pointer;
opacity: 0.75;
}
.hidden li:hover a,
.name,
a:hover {
background: linear-gradient(to right, #215AF6, #F2359D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
.info {
font-size: 350%;
padding: 0;
margin-bottom: 20px;
letter-spacing: 5px;
}
.description {
letter-spacing: 4px;
word-spacing: 5px;
}
header {
background: linear-gradient(rgba(17, 20, 42, 0.95), rgba(17, 20, 42, 0.95)), url("https://images.pexels.com/photos/399636/pexels-photo-399636.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center;
background-attachment: fixed;
background-size: cover;
text-transform: uppercase;
height: 100vh;
color: white;
}
#secondpage {
background-size: cover;
height: 100vh;
}
div.scroller {
position: absolute;
top: 95%;
left: 50%;
}
.scrolltext {
font-size: 10px;
letter-spacing: 3px;
padding-top: 0;
}
.material-icons.md-100 {
font-size: 100px;
margin-top: -20px;
}
#menulinks {
text-align: left;
padding: 20px;
}
nav p {
font-size: 65%;
letter-spacing: 4px;
}
li a {
text-decoration: none;
color: white;
padding-left: 10px;
font-size: 90%;
}
ul {
list-style: none;
}
li {
padding: 5px;
}
.hide {
opacity: 0;
visibility: hidden;
}
.show li:hover {
background: rgba(3, 4, 32, 1);
padding-left: 12px;
transition: 0.3s;
}
.dp {
max-width: 400px;
max-height: 200px;
filter: grayscale(100%);
}
#bottom {
max-height: 110px;
max-width: 350px;
overflow: hidden;
margin: 0 auto;
margin-top: 230px;
margin-bottom: 50px;
text-align: center;
}
#summary,
#greeting {
max-width: 400px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
#greeting {
letter-spacing: 10px;
word-spacing: 10px;
}
#summarytext,
#span {
line-height: 150%;
font-size: 20px;
}
#span {
margin-top: 30px;
}
.fa-2x {
opacity: 0.1;
}
<html lang="en">
<head>
<title>Brian Profile</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header id="firstpage">
<nav id="menulinks">
<i class="fas fa-align-justify fa-3x"></i>
<p>menu</p>
<ul class="hide">
<li id="firstopt">About</li>
<li id="secondopt">Experience</li>
<li id="thirdopt">Portfolio</li>
<li id="fourthopt">Contact</li>
</ul>
</nav>
<div class="name">
<h1 class="info">Hello, I'm Brian</h1>
<p class="description">an aspiring web developer</p>
</div>
<div class="scroller">
<p class="scrolltext"> SCROLL DOWN</p>
<i class="material-icons md-100" id="arrow">expand_more</i>
</div>
</header>
<footer id="secondpage">
<div id="bottom">
<p>
<img src="https://dl.dropbox.com/s/3c0xlv56hhb1ed7/2013-07-20%2021.58.43.jpg?=raw1" alt="InstaPic" class="dp"></p>
</div>
<div id="greeting">
<span>HI THERE</span>
<p><i class="far fa-window-minimize fa-2x"></i></p>
</div>
<div id="summary">
<p id="summarytext">
I am a web developer based in London. With a growing Portfolio that is constantly updated, I have a passion for all things 'web'.</p>
<p id="span"><span>For more information visit my Blog.</span>
</p>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>

Classes not being removed from links under div dropdown

I am working on a personal website.
In this site I would like to have the navigation links become active when I scroll to the part of the page relating to that navigation link, all other active links should then have the nav-active class removed.
I have it working partially, the navigation links are highlighting correctly. I do not understand why the active highlighting is not removed when the scrolling moves into the links that are under a div dropdown button.
Can anyone point me in the right direction and also point me to some tutorials/reading (not too advanced) on the relevant information about this issue?
My pen is here:
https://codepen.io/pjsmyth/pen/ZvaZBO/
Thanks in advance
Pete
Code below:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).addClass('nav-active');
$(this).siblings().removeClass('nav-active');
$(this).children().removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>

I think you wish the .dropbtn to highlight when a .scroll under it is highlighted...
There could be a couple ways to do it.
But since the sections (div) have fixed offsets, you can get them all in an array, on load... And then compare them with the scrolled position.
When we have a "match", get its id from another array holding the ids and quit that loop right away.
Here is the script:
$(document).ready(function() {
var scrollLink = $('.scroll');
var dropbtn = $(".dropbtn");
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Get all section position and id
var sectionArr = [];
var sectionId = [];
$("body>div").each(function(){
console.log($(this).attr("id") + " " + $(this).offset().top);
sectionArr.push($(this).offset().top-20);
sectionId.push($(this).attr("id"));
});
// Add the full page height to the array for the comparison of the last section
sectionArr.push($("body").height());
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
// Remove the class everywhere
scrollLink.removeClass('nav-active');
dropbtn.removeClass('nav-active');
// Compare the scrolled position with the offsets stored in array until we find.
for(i=0;i<sectionArr.length;i++){
var target = $(".scroll[href='#"+sectionId[i]+"']");
// if the scrolled position is more than a section position, BUT less than the next
if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
// add the highlight class
target.addClass("nav-active");
if(target.parent().is(".dropdown-content")){
// add the highlight class to the dropdown button
target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
}
break; // Exit the loop on match
}
} // End for loop
}); // End on scroll
}); // End ready
CodePen
Note that you could adjust the "trigger point" so the menu highlighting occurs when more than the half of the section is displayed, which I really think would be nicer!
Just update this line:
sectionArr.push($(this).offset().top-20 - ($(this).height()/2));

That's because your DOM is in the incorrect order. In your DOM, "About" is the last DOM element with .scroll, and since About is also valid for sectionOffset <= scrollbarLocation and is the last item to be processed it overwrites the class manipulation for the other navigation elements that are on screen.
I partially fixed it in this demo here.

Your conditional selection logic is a little confused. The way you have it set up now, if the sectionOffset is less than the scrollbarLocation then you try to set the nav-active class on the current link and remove it from the siblings, children and parent links.
The problem is that if the current link is itself a child link, then the links you want to unset are going to be siblings of the link, siblings of the parent of the link or children of the siblings of the parent link.
You could cover all of those cases manually, but then your code becomes convoluted and brittle. What if, at some point in the future, you want to add additional layers of link nesting? You'd have to manually account for that.
Luckily, since you're already looping through all of your links on a scroll event, there's an easier way. Just check to see if a section has scrolled off of the screen and remove the nav-active class of it's associated link by changing your each callback:
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
Updated CodePen
Here it is as a snippet:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>

Adding padding within a div and the background image and color go away

First off let me say how much of a big help this website has been with my little project. Anyway on to my question.
So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.
When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?
And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing
I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}
This is the css code for the class holding the info.

Take the padding off .two, and if you want the white border around the content in .four, you can use a margin:
$(document).ready(function(event) {
$('.one').click(function() {
$('.two').slideToggle();
})
$('.three').click(function() {
$('.four').slideToggle();
})
$('.five').click(function() {
$('.six').slideToggle();
})
$('.seven').click(function() {
$('.eight').slideToggle();
})
setTimeout(function() {
$('.two').slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.one {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.two {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.three {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.four {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
margin: 15px;
}
.five {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.six {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.seven {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.eight {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<div class="container">
<div class="big1">
<div class="one">Main</div>
</div>
<div class="small1">
<div class="two">Welcome to my page!
<br>Click around
<br>Learn a thing or two about me</div>
</div>
<div class="big1">
<div class="three">About</div>
</div>
<div class="small2">
<div class="four">My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!</div>
</div>
<div class="big1">
<div class="five">Projects</div>
</div>
<div class="small1">
<div class="six">My projects can be found here</div>
</div>
<div class="big1">
<div class="seven">Contact</div>
</div>
<div class="small1">
<div class="eight">You can contact me here</div>
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>

Try moving the padding to the .four class, I think it will give you your desired result.

You could do some restructuring of the code to simplify it like
$(document).ready(function(event) {
$('.header').click(function() {
$(this).next('.content').slideToggle();
})
setTimeout(function() {
$('.content').first().slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.header {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.content {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="big1 header">
Main
</div>
<div class="small1 content">
Welcome to my page!
<br>Click around
<br>Learn a thing or two about me
</div>
<div class="big1 header">
About
</div>
<div class="small2 content">
My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!
</div>
<div class="big1 header">
Projects
</div>
<div class="small1 content">
My projects can be found here
</div>
<div class="big1 header">
Contact
</div>
<div class="small1 content">
You can contact me here
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>

Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
display : none;
}

Javascript not loading? Newbie here

When I open the html file in a browser the javascript doesn't work, I can't figure out why? The exact same code works in the codecademy prompts, but not when I launch it from files on my desktop.
HTML
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
/* Initial body */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
Javascript
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);

While PHPglue is correct, and that you should place the closing </div> tag, that's not causing your JS to not execute. This console error, however:
ReferenceError: $ is not defined app.js:26
Indicates that jQuery is not loading properly which means that this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is somehow not working, and I think I know why...
Using // will load the requested URL relative to the current page's scheme. Since you're viewing this from a browser locally, that scheme is file://. Consequently, you're not loading jQuery because it's requesting file://ajax.googleapis....
So yes, my comment is party wrong. On a web server, where the scheme is either http:// or https://, then using //ajax.googleapis... will be fine. On localhost, it's not.

You're missing a closing </div> tag:
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
add
</div>
If you right click on your web page with Firefox and click View Page Source. You should see most HTML tag issues in red, if they are part of the source code. Of course, this won't work if your code was created with JavaScript.

try $document.ready(main());
I don't know jQuery, so not sure if it needs to initiate the function with ()