Develop Reference

I want to add a section under a video section but it doesn't align perfectly under the first section. How can I solve this?

I am trying to include a section under a previous section but it doesn't show and align the way I want it to be. The first section is a text section with video background but the next section added doesn't show in the preview. Even in the stack overflow snippet the "about us" section is behind the video section. How can I solve this problem?
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>Think Tank</title>
</html>
<head>
</head>
<body>
<style>
#import url('styles.css');
</style>
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="webasset.mov" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="image/img one.jpg">
</div>
</div>
</div>
<!--===== MAIN JS =====-->
<script src="main.js"></script>
</body>
</html>

.showcase {
position: relative;
}
Replace the 'position:absolute' property to 'position:relative' for above section. I will make your next section visible.

--> Always use "Position:relation" on parent div after give "position:absolute" to child div.
--> i add "hero-section-wrapper" div for solve this issue & add some css for it.
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero-section-wrapper {
position: relative;
height: 100vh;
display: table;
width: 100%;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<div class="hero-section-wrapper">
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="Video/video.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="https://images.unsplash.com/photo-1640525999004-42b645dd3dee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
</div>

div taking properties from each other in html error

I'm trying to make a portfolio page, using HTML, CSS & JS.
Encountered a weird error. The CSS styling that I have performed on one div is somehow also getting on another div. And the weird part is that, the second div responds to its own styling along with the first ones....It will be more clear from the code
$(document).ready(function () {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function(){ // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
*{
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
width: 100%;
z-index: 999;
position:fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky{
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span{
color: cyan
}
.navbar.sticky .logo a span{
color: white;
transition: all 0.3s ease;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover{
color: crimson;
}
.navbar.sticky .menu li a:hover{
color: white;
}
/* menu button styling */
.menu-btn{
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home{
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width{
margin: auto 0 auto 40px;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px, 0 ;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section{
padding: 100px 0;
}
.about{
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title{
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after{
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span{
color: white;
}
.about .about-content .right .lorem{
color: black;
background: none;
}
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px){
.home .max-width{
margin-left: 0px;
}
}
#media(max-width: 991px){
.max-width{
padding: 0 50px;
}
}
#media(max-width: 947px){
.menu-btn{
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu{
position: fixed;
height:100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin:20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
}
#media(max-width: 690px){
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
#media(max-width: 500px){
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li><a href="#">About</li>
<li><a href="#">Skills</li>
<li><a href=#>Projects</li>
<li><a href=#>Experience</li>
<li><a href="#">Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores
cumque
doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem
consequatur. Hic quas amet, aliquam nihil voluptatem, porro culpa doloremque qui numquam
atque
rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam,
adipisci
cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos!
Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
In the About section only the Resume Button is to be highlted but the entire colum right div is somehow affected. When I ran just the About section part, everything worked well. But when I run the whole file the same error pops up. I've tried removing the lorem part from div and put in and try, still the same error pops up. The same part is somehow referenced to the above the navbar as well, cause when clicked upon it shifts to the navbar. Please look into this.

The error is occurring because you did not close the anchor tags in your menu,
change it to this
<ul class="menu">
<li>Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>

You have this styling in the about section:
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
That is, every anchor link in the about right part is styled that way - with a crimson background (which changes to crimson text and no background on hover).
Because the anchor tags are not closed in your menu you have anchor tags open (nested anchor tags aren't legal HTML BTW) and it seems the browser is doing its best to understand these open anchor tags. By the time you get to the about section right hand side it still thinks there's an anchor tag (at least, in my Edge on Windows 10 that's what it had put there when I used the dev tools inspect facility to check the actual HTML it's trying to interpret). So it picks up the crimson styling.
Here's the snippet with the anchor tags in the menu closed and the text part of the resume does not have that crimson background:
$(document).ready(function() {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function() { // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
* {
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar {
width: 100%;
z-index: 999;
position: fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky {
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span {
color: cyan
}
.navbar.sticky .logo a span {
color: white;
transition: all 0.3s ease;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
.navbar.sticky .menu li a:hover {
color: white;
}
/* menu button styling */
.menu-btn {
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home {
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;
/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width {
margin: auto 0 auto 40px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px, 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section {
padding: 100px 0;
}
.about {
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after {
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span {
color: white;
}
.about .about-content .right .lorem {
color: black;
background: none;
}
.about .about-content .column a {
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px) {
.home .max-width {
margin-left: 0px;
}
}
#media(max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media(max-width: 947px) {
.menu-btn {
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before {
content: "\f00d";
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 35px;
}
}
#media(max-width: 690px) {
.max-width {
padding: 0 23px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
#media(max-width: 500px) {
.home .home-content .text-2 {
font-size: 50px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores cumque doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem consequatur. Hic quas amet, aliquam nihil voluptatem, porro
culpa doloremque qui numquam atque rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam, adipisci cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos! Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>

Integrate Randomly Selected Photos into Web Page from a Specified Link

I've come across an issue when coding a site for a colleague of mine. He resells t-shirts that are given to him by a friend, and does so by listing them on his current eBay page. He asked me to code a site for him which would promote his t-shirts more, and wanted me to allow customers to click on the shirts from his website to be redirected to the corresponding eBay page. I want to be able to randomly generate images from his eBay page and have them show up on the website, and therefore be able to redirect users to his eBay page from the site.
EDIT: I have already included a script in my .html file for randomly selecting images. My main issue is being able to randomly select such images from eBay itself.
Here is the HTML for the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ADARA Enterprises</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
</head>
<script type="text/javascript">
var imageURLs = [
"http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<span id="connect">
</span>
<!-- /#logo -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<!-- <li>Blog</li> -->
<li>Shop</li>
<li class="selected">Contact Us</li>
</ul>
</div> <!-- /#header -->
<div id="contents">
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
<address>
<span>Telephone numbers:</span>
555-5678901 to 555-5678902
<span>Email Address:</span>
adarasomething#whateverthehell.com
<span>Street Address:</span>
4th Lit Street, 73813 Yeet, CO
</address>
</div>
<div id="featured">
<ul>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
</ul>
shop here!
</div>
</div> <!-- /#contents -->
<div id="footer">
<div id="description">
<div>
<span>© Copyright © 2017. ADARA Enterprises All rights reserved</span>
</div>
<p>
This is just filler text. <br>
<br>
Filler text.
</p>
</div>
<div class="navigation">
Home|
About|
<!-- Yeet| -->
Shop|
Contact Us
</div>
</div> <!-- /#footer -->
</div> <!-- /#page -->
</div> <!-- /#background -->
</body>
</html>
And here is the CSS file associated with it:
html {
font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
background-color: #ffffff;
margin: 0;
// padding-top: 19px;
min-height: 100%;
}
#background {
background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
min-height: 100%;
//border-top: 1px solid #000000;
margin: 0;
}
#page {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: 100%;
}
#font-face {
font-family: 'Arial Bold';
src: url('fonts/corben-bold-webfont.eot');
src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'),
url('fonts/corben-bold-webfont.ttf') format('truetype'),
url('fonts/corben-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*
img {
border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
background: url(../images/bg-header.png) no-repeat center top;
min-height: 340px;
margin-bottom: 20px;
}
#connect {
float: left;
display: inline-block;
height: 30px;
width: 300px;
margin: 15px 0 15px 10px;
}
#connect a {
display: inline-block;
height: 30px;
margin: 0 10px;
padding: 0;
}
#connect .facebook {
background-position: 0 2px;
width: 27px;
}
#connect .twitter {
background-position: 0 -36px;
width: 36px;
}
/* #connect .vimeo {
background-position: 0 -74px; // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
width: 32px; */
}
#infos {
float: right;
color: #ffe680 ;
display: inline-block;
height: 30px;
width: 200px;
margin: 15px 0;
}
#infos a {
color: #ffe680;
font-family: Arial;
font-size: 14px;
line-height: 30px;
margin: 0 5px;
text-decoration: none;
}
/** Logo **/
#logo {
clear: both;
display: block;
height: 217px;
width: 950px;
margin: 0 auto;
}
/** Navigation **/
#navigation {
height: 40px;
list-style-type: none;
margin: 0;
display: inline-block;
padding: 8px 20px 12px 84px;
}
#navigation li {
float: left;
font-family: 'Arial Black';
font-size: 22px;
font-weight: bold;
line-height: 40px;
width: 186px;
text-align: center;
}
#navigation a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
color: #FFFFAC;
text-shadow: 1px 1px 0 #C3A33B;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
margin: 0 0 40px;
padding: 0 5px;
}
#main {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#main p {
color: #ffe680;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0 0 20px;
text-shadow: 1px 1px #C3A33B;
}
#main p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#main address {
color: #FFFFAC;
font-style: normal;
width: 350px;
margin: 0 auto;
text-align: center;
text-shadow: 1px 1px #C3A33B;
}
#main address span {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
line-height: 20px;
margin: 20px 0;
width: 350px;
}
/* #adbox {
background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
height: 371px;
width: 935px;
margin: 0 auto;
padding: 7px 7px 22px;
position: relative;
}
#adbox img {
height: 371px;
width: 935px;
margin: auto;
}
*/
#featured {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 42px;
position: relative;
}
#featured ul {
display: inline-block;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#featured ul li {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
height: 253px;
width: 204px;
margin-right: 28px;
padding: 6px 6px 15px;
}
#featured ul li.last {
margin-right: 0;
}
#featured ul li img {
border: 1px solid #e4e0d1;
}
#featured a.button {
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
position: absolute;
bottom: -20px;
left: 403px;
}
/*------------------------------ Blog Page ------------------------------*/
#blogs {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relative;
}
#blogs div {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
display: inline-block;
margin: 0 0 20px;
padding: 0 0 20px;
}
#blogs div.last {
background: none;
margin: 0;
}
#blogs span {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 6px;
margin-right: 40px;
padding: 6px 6px 15px;
}
#blogs span img {
border: 1px solid #e4e0d1;
}
#blogs h3 {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
line-height: 30px;
margin: 0 0 20px 258px;
padding: 0 0 10px;
}
#blogs p {
color: #ffe680;
max-height: 160px;
line-height: 20px;
margin: 0 0 20px 258px;
padding: 0 0 20px;
overflow: hidden;
text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
color: #ffe680;
text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
color: #C3A33B;
font-style: italic;
text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
background: none;
display: inline-block;
width: 328px;
margin: 0;
padding: 0;
position: absolute;
bottom: -20px;
left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
float: left;
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
margin-right: 20px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
}
#blogs div.blog-entry-buttons {
width: 690px;
left: 258px;
}
#blogs div.blog-entry-buttons a.back {
float: right;
font-size: 16px;
margin-right: 0;
}
/*------------------------------ Shop Page ------------------------------*/
#shop {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relavive;
}
#shop ul.items {
display: inline-block;
list-style-type: none;
margin: 0 auto 16px;
padding: 0;
}
#shop ul.items li {
float: left;
color: #ffe680;
height: 340px;
width: 216px;
margin-bottom: 20px;
margin-right: 28px;
}
#shop ul.items li span {
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 10px;
padding: 6px 6px 14px;
}
#shop ul.items li span img {
border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
float: right;
background: none;
color: #FFFFAC;
display: inine-block;
font-size: 17px;
height: 20px;
line-height: 20px;
width: 80px;
margin: 0;
padding: 0;
text-align: right;
}
#shop ul.items li a.buy {
background-color: #ffe680;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 14px;
height: 20px;
line-height: 20px;
width: 80px;
border-radius: 3px;
margin: 13px auto 0;
padding: 1px 0 4px;
text-align: center;
text-decoration: none;
}
#shop ul.items li.last {
margin-right: 0;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
padding: 0 5px;
}
#description {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#description div {
float: left;
width: 180px;
margin-right: 50px;
}
/*#description div a.logo {
background: url(../images/logo-footer.gif) no-repeat;
display: block;
height: 30px;
width: 175px;
margin: 0 0 10px;
}
*/
#description div span {
padding-bottom: 5px;
color:#ffe680;
display: block;
font-size: 11px;
line-height: 20px;
text-shadow: 1px 1px #C3A33B;
}
#description div span a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#description p {
color: #ffe680;
font-size: 13px;
line-height: 20px;
margin: 20px 0;
text-align: justify;
text-shadow: 1px 1px #C3A33B;
}
#description p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#footer div.navigation {
color: #ffe680;
font-size: 14px;
line-height: 20px;
width: 338px;
margin: 0 auto 20px;
text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
color: #ffe680;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
color: #FFFFAC;
}
/*------------------------------ For IE6 ------------------------------*/
#background {
_height: 1440px;
min-height: 100%;
}
#featured a.button {
_top: 299px;
}
#blogs {
_height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
_top: 620px;
}
I know this is a lot, and I'm not asking for anyone to look through the entirety of the code and provide me with completely revamped code that I can use right off the bat. I could really just use some help figuring out an algorithm to put into place for creating these randomly generated images on the page.
Any help that can be provided is very much appreciated! Thank you all!

I ended up creating an iframe and pulling the photos from E-bay's site regardless. Couldn't create live image pulls due to built-in security, so I had to go ahead and use images manually in a DB.
Also created an href redirect to the owner's ebay sales page, which worked out when it came to overall sales of the shirts / products, etc.

Background image overlaps another div

I'm trying to stop the .background image from overlapping skills div when viewport gets taller or wider. I'v tried many different things and i have no luck. Please help me! I'm fairly new to this so please don't be surprised if its something simple stupid thing that I did that's causing this problem. Thanks!
$(document).ready(function(){
//MENU
$('.menu-icon').click(function(){
$('.menu-nav').animate({
height: 'toggle'
}, 200
);
});
//SKILLS
flagScroll = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 40 && flagScroll) {
// apply effects and animations
flagScroll= false;
$('.html').animate({
marginRight: 0,
width: 100
}, 2200
);
$('.css').animate({
marginRight: 0,
width: 90
}, 2200
);
$('.javascript').animate({
marginRight: 0,
width: 40
}, 2200
);
}
});
});
/*$mat-black: #37474F;*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
/*background:transparent;*/
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
* h1 {
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
}
header {
background-color: black;
height: 420px;
}
header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 74%;
position: absolute;
overflow: hidden;
}
header nav {
width: 100%;
z-index: 2;
}
header .menu-icon {
padding: 5px 0 5px 10px;
cursor: pointer;
width: 50px;
}
header .menu-icon img {
width: 50px;
height: 50px;
}
header .menu {
width: 100%;
border-top: solid #18FFFF 1px;
border-width: 70%;
height: 0;
}
header .menu:before {
content: " ";
display: block;
width: 90%;
height: 5px;
margin: 0 auto;
left: 0;
right: 0;
background-color: #18FFFF;
opacity: 1;
}
header .menu .menu-nav {
z-index: 2;
position: absolute;
background-color: #18FFFF;
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
border-bottom-radius: 5px;
display: none;
}
header .menu .menu-nav ul {
margin-top: 20px;
}
header .menu .menu-nav ul li {
text-align: center;
padding: 10px;
list-style: none;
border-radius: 5x;
font-size: 2em;
cursor: pointer;
}
header .menu .menu-nav ul li:hover {
/*background-color: #607D8B;*/
background-color: black;
color: #18FFFF;
}
header .menu h1 {
text-align: center;
}
header .menu .menu-social {
width: 155px;
margin: 30px auto;
}
header .menu .menu-social img {
cursor: pointer;
margin: 0 1px 0 1px;
float: left;
padding-top: 20px;
padding-bottom: 20px;
}
header .menu .menu-social img:hover {
position: relative;
top: -5px;
}
header .bio {
width: 70%;
margin: 0 auto;
margin-bottom: 0;
position: relative;
}
header .bio .hello h1 {
font-size: 3.4em;
color: #18FFFF;
text-align: center;
padding-bottom: 20px;
padding-top: 45px;
font-family: 'Bowlby One SC', cursive;
}
header .bio .desc p {
color: white;
text-align: center;
line-height: 25px;
padding-bottom: 80px;
}
header img {
display: block;
margin: 0 auto;
padding-bottom: 3px;
cursor: pointer;
position: relative;
}
.skills-2 {
width: 90%;
margin: 15px auto;
background-color: white;
overflow: hidden;
border: solid black 1px;
border-radius: 5px;
}
.skills-2 h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.skills-2 .my-skills {
width: 50%;
padding-top: 20px;
float: left;
padding-bottom: 20px;
}
.skills-2 .my-skills ul li {
text-align: center;
padding-bottom: 10px;
}
.skills-2 .graph {
float: left;
width: 50%;
padding-top: 20px;
}
.skills-2 .graph .html {
width: 1px;
}
.skills-2 .graph .css {
width: 1px;
}
.skills-2 .graph .javascript {
width: 1px;
}
.skills-2 .graph .bar {
height: 10px;
background-color: #2962FF;
margin-bottom: 18px;
}
.work {
width: 100%;
background-color: white;
color: black;
}
.work:before {
/*#include divider;*/
}
.work h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
color: black;
}
.work p {
text-align: center;
display: block;
width: 70%;
margin: 0 auto;
padding-bottom: 60px;
line-height: 20px;
padding-top: 30px;
}
.work p span {
display: block;
padding-top: 10px;
font-size: 0.8em;
line-height: 15px;
}
.work h2 {
text-align: center;
padding-top: 50px;
padding-bottom: 20px;
font-size: 1.3em;
}
.work .site1 {
width: 100%;
}
.work .site1 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}
.work .site2 {
width: 100%;
}
.work .site2 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}
.contact {
background-color: black;
overflow: hidden;
color: white;
}
.contact h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
}
.contact form {
padding-top: 50px;
text-align: left;
width: 85%;
margin: 0 auto;
}
.contact form label p {
float: left;
width: 100%;
padding-bottom: 15px;
}
.contact form input {
width: 100%;
float: left;
margin-bottom: 20px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 2px solid #18FFFF;
height: 30px;
font-size: 18px;
background-color: black;
color: white;
}
.contact form input:focus {
outline: none;
}
.contact form textarea {
width: 100%;
border: #18FFFF solid 2px;
background-color: black;
font-size: 18px;
margin-top: 20px;
color: white;
}
.contact form input[type=submit] {
width: 30%;
padding: 5px;
margin: 20px auto;
border-bottom: none;
border: #18FFFF solid 1px;
background-color: black;
color: white;
}
.contact form input[type=submit]:hover {
color: black;
background-color: #18FFFF;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 100ms linear;
-ms-transition: background-color 100ms linear;
transition: background-color 100ms linear;
}
<title>Ivan B</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<img src="images/Menu-64.png">
</div><!--menu-icon-->
</nav>
<div class="menu">
<div class="menu-nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>
<div class="menu-social">
<img src="images/Instagram.png" alt="instagram" />
<img src="images/Twitter.png" alt="twitter" />
<img src="images/LinkedIn.png" alt="linkedin" />
</div>
</div><!--menu-nav-->
</div>
<div class="background">
</div><!--BACKGROUND-->
<div class="bio">
<div class="hello">
<h1>Hello...</h>
</div><!--Hello-->
<div class="desc">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, nominavi deseruisse eu vis. Pri eruditi apeirian periculis at, summo scriptorem has in.</p>
</div><!--desc-->
</div><!--Bio-->
<img src="images/arrow-down.png">
</header>
<div class="skills-2">
<h1>Skills</h1>
<div class="my-skills">
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</div><!--My SKills-->
<div class="graph">
<div class="html bar">
</div>
<div class="css bar">
</div>
<div class="javascript bar">
</div>
</div><!--Graph-->
</div><!--SKills 2-->
<div class="work">
<h1>Work</h1>
<div class="site1">
<h2>A very clear statement <br/>of your offer</h2>
<img src=images/site1.png>
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, <br/><span>*Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 1-->
<div class="site2">
<h2>The Yalow</h2>
<img src="images/site2.png">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis,<br/><span>Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 2-->
</div><!--Work-->
<div class="contact">
<h1>Contact</h1>
<form action="contact.php" method="post">
<label>
<p>Name *</p>
<input type="text" name="name">
</label>
<label>
<p>Your E-mail *</p>
<input type="text" name="email">
</label>
<label>
<p>Your message *</p>
<textarea name="message" rows="8" cols="40"></textarea>
</label>
<div id="button">
<input type="submit" name="name" value="Send">
</div><!--button-->
</form>
</div>

to fix your image overlapping issue, add below changes to your css -
header {
background-color: black;
height: 420px;
position: relative; /* Added */
}
header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 100%; /* editied */
top: 0px; /* added */
position: absolute;
overflow: hidden;
}

In your css file :
height:78% change it to 38% and it should resize it for you. Always check your css when it comes to positioning and resizing.

Give this property
backface-visibility:hidden;
to your background image element.

How do I prevent elements in my nav-bar being cut off when re-sizing?

I managed to fix a problem I was having where my nav elements where bunching up when the window is resized by adding:
nav ul {
white-space: nowrap;
}
nav ul li {
display: table-cell;
}
But now, when I resize my window, elements in my nav bar are disappearing.
#import url(https://fonts.googleapis.com/css?family=Pacifico);
#import url(https://fonts.googleapis.com/css?family=Patua+One);
body {
margin: 0px;
}
header {
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 15px 0px 15px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
header h1 {
font-size: 30px;
display: inline;
padding: 30px;
font-family: 'Pacifico', cursive;
}
nav ul {
margin: 0;
display: inline;
padding: 50px;
white-space: nowrap;
}
#main {
font-size: 80px;
}
nav ul li {
color: white;
list-style-type: none;
display: inline-block;
padding: 20px 65px;
margin: 0px;
font-family: 'Patua One', cursive;
display: table-cell;
}
nav ul li:hover {
color: #999;
}
#ghostButton {
background: rgba(0, 0, 0, 0.3);
border: 0.5px solid white;
width: 200px;
padding: 10px;
display: inline-block;
font-family: "Times new roman";
}
#ghostButton:hover {
background: rgba(255, 255, 255, 0.3);
}
#hero {
background-size: cover;
position: relative;
height: 100vh;
background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg);
}
.header {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
color: #fff;
font-size: 36px;
-ms-transform: translate(0, -50%);
/* IE 9 */
-webkit-transform: translate(0, -50%);
/* Safari */
transform: translate(0, -50%);
font-family: 'Pacifico', cursive;
font-family: "Times new roman";
}
.header1 {
padding-bottom: 300px;
color: black;
text-align: center;
font-size: 25px;
font-family: 'Pacifico', cursive;
font-family: "Times new roman";
}
p {
font-size: 20px;
}
/*# sourceMappingURL=stylesheet.css.map */
<! DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<nav>
<h1>Elianos Brasserie</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Page1</li>
<li>Page2</li>
</ul>
</nav>
</header>
<div>
</div>
<div id="wrapper">
<div id="hero">
<div class="header">
<h1 id="main">Made with love</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut
<br>aliquip ex ea commodo consequat. Duis
<br>
</p>
<div id="ghostButton">Learn More</div>
</div>
</div>
</div>
</body>
</html>
I would like the elements to remain spaced out.

I think you can easily achieve such an effect using flexbox display properties.
I edited your code with an example of this. Using flex-grow:1; on the li they will divide the available horizontal space amongst each other. To avoid the line from wrapping you could consider adding flex-wrap:nowrap; to the ul.
Before using flexbox, consider the browser support of flexbox.
#import url(https://fonts.googleapis.com/css?family=Pacifico);
#import url(https://fonts.googleapis.com/css?family=Patua+One);
body {
margin: 0px;
}
header {
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 15px 0px 15px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
header h1 {
font-size: 30px;
float:left;
padding: 30px;
font-family: 'Pacifico', cursive;
}
nav ul {
margin: 0;
display: inline;
padding: 50px;
display:flex;
}
#main {
font-size: 80px;
}
nav ul li {
color: white;
list-style-type: none;
display: inline-block;
//padding: 20px 65px;
margin: 0px;
font-family: 'Patua One', cursive;
flex-grow:1;
}
nav ul li:hover {
color: #999;
}
#ghostButton {
background: rgba(0, 0, 0, 0.3);
border: 0.5px solid white;
width: 200px;
padding: 10px;
display: inline-block;
font-family: "Times new roman";
}
#ghostButton:hover {
background: rgba(255, 255, 255, 0.3);
}
#hero {
background-size: cover;
position: relative;
height: 100vh;
background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg);
}
.header {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
color: #fff;
font-size: 36px;
-ms-transform: translate(0, -50%);
/* IE 9 */
-webkit-transform: translate(0, -50%);
/* Safari */
transform: translate(0, -50%);
font-family: 'Pacifico', cursive;
font-family: "Times new roman";
}
.header1 {
padding-bottom: 300px;
color: black;
text-align: center;
font-size: 25px;
font-family: 'Pacifico', cursive;
font-family: "Times new roman";
}
p {
font-size: 20px;
}
/*# sourceMappingURL=stylesheet.css.map */
<! DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<nav>
<h1>Elianos Brasserie</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Page1</li>
<li>Page2</li>
</ul>
</nav>
</header>
<div>
</div>
<div id="wrapper">
<div id="hero">
<div class="header">
<h1 id="main">Made with love</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut
<br>aliquip ex ea commodo consequat. Duis
<br>
</p>
<div id="ghostButton">Learn More</div>
</div>
</div>
</div>
</body>
</html>

I think you should read and learn something about responsive web design. Or just add float: left; to your nav ul li .
Read more on Responsive web design here