Develop Reference

My image carousel randomly doesn't work, sometimes refreshing fixes it, sometimes it doesn't

My image carousel randomly doesnt work, sometimes when i refresh, it starts working.
However, the textFade function inside the same carousel always works and it is linked to the same counter.
Here are some gifs of my issue:
https://gyazo.com/f94fecd0ce497838699900be07c55a83
https://gyazo.com/c3fc2be324e426a03891f433cdae6ef5
I am not sure how i can make the images from my code show on this question, i have tried to google how to upload the library on to the question, but i have not been able to find a solution.
I am making this for a job application so any help would be deeply appreciated.
// SLIDER
const allSlides = document.querySelector(".slide");
const allImages = document.querySelectorAll(".slide img");
const prev = document.querySelector("#prevBtn");
const next = document.querySelector("#nxtBtn");
let counter = 0;
const size = allImages[0].clientWidth;
next.addEventListener('click', ()=>{
if(counter >= allImages.length - 1){
allSlides.style.transform = 'translateX(0px)';
counter = 0;
textFade();
} else {
allSlides.style.transition = "transform 0.4s ease-in-out";
counter++
allSlides.style.transform = 'translateX(' + (-size * counter) + "px)";
textFade();
}
})
prev.addEventListener('click', ()=>{
if(counter <= 0 ){
allSlides.style.transform = 'translateX(' + (size * 3) + "px)";
counter = 3;
textFade();
}
allSlides.style.transition = "transform 0.4s ease-in-out";
counter--
allSlides.style.transform = 'translateX('+(-size * counter) + "px)";
textFade();
})
* {
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/* HEADER */
.navbar-container {
width: 83.5%;
background-color: black;
margin: auto;
padding: 2.2vw 0;
height: 14.1vw;
}
.header-subcontainer {
display: flex;
justify-content: space-between;
width: 71vw;
margin: auto;
position: relative;
z-index: 999;
}
.menu-tab{
visibility: hidden;
position: absolute;
}
.header-container {
width: 80%;
}
.logo-container img{
width: 21vw;
}
.navbar-social {
padding: 0 .45vw 0 .35vw;
height: .7vw;
margin-bottom: -.3vw;
}
.navbar-social:last-of-type {
padding-right: 0;
}
.link-container {
display:flex;
justify-content: right;
width: 60%;
margin: -1vw 0 0 27.15vw;
position: relative;
}
.links {
text-decoration: none;
color:white;
margin-left: 1.7vw;
display: inline-block;
font-size: 1vw;
cursor: default;
}
.links:after {
display: block;
content: '';
border-bottom: 1px solid #ffffff;
transform: scaleX(0);
transition: transform 200ms ease-in-out;
transform-origin: 0% 50%;
}
.links:hover:after {
transform: scaleX(1); transform-origin: 0% 50%;
}
.header-container {
width: 100%;
height: 2vw;
text-align: right;
margin-top: -.8vw;
}
/* ------- SEARCH ------- */
.searchbar {
color: white;
background: none;
border: none;
border-bottom: 2px solid grey;
padding-left: 1.1vw;
padding-bottom: .3vw;
margin-right: 1vw;
margin-left: -.5vw;
width: 100%;
height: 1vw;
font-size: .7vw;
}
.mobile-searchbar {
visibility: hidden;
position: absolute;
}
.search-box{
display: inline-block;
width: 20.8%;
z-index: 100;
}
#hidden-search {
left: 0;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li{
border-bottom: 2px solid #1f1f1f;
}
#myUL li a {
margin-top: -1px; /* Prevent double borders */
padding: 1vw 0 1vw 0;
text-decoration: none;
font-size: .7vw;
color: white;
display: block
}
.search-content{
width: 16.6vw;
text-align: left;
margin-top: 0px;
background-color: black;
outline: 1px solid #707070;
padding: 0 1vw 2vw 1vw;
color: white;
position: absolute;
visibility: hidden;
z-index: 100;
margin-left: 18.45vw;
}
#myUL h2 {
font-weight: normal;
padding-bottom: .5vw;
}
#myUL span{
font-size: .9vw;
line-height: 1.2vw;
}
::placeholder {
color: white;
}
.search-icon {
position: absolute;
width: .7vw;
margin-left: -.5vw;
margin-top: .2vw;
}
.second-search-icon{
position: absolute;
visibility: hidden;
}
input:focus {
outline: none;
}
/*------- SLIDER -------*/
.slider-container {
width: 71vw;
height: 40vw;
margin: auto;
margin-top: -6.49vw;
z-index: 2;
}
.slider {
margin: auto;
overflow: hidden;
width: 100%;
height: 30vw;
}
.slide {
display: flex;
width: 100%;
height: 100%;
}
#prevBtn {
background-image: url(assets/images/arrow-left.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: rgba(255, 255, 255, 0);
position: relative;
left: 67vw;
top: 1.2vw;
cursor: pointer;
}
#nxtBtn {
background-image: url(assets/images/arrow-right.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: white;
position: relative;
left: 67.8vw;
top: 1.2vw;
cursor: pointer;
}
.sub-slider {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
opacity: 100%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-2 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -6vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-3 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -12vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-background {
width: 41.45vw;
background-color: black;
color: black;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -24vw;
position: relative;
z-index: 3;
}
.close-menu {
position: absolute;
visibility: hidden;
}
.hidden-social {
position: absolute;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>World Barista Cup</title>
</head>
<body>
<div id="overlay">
<!-- HEADER -->
<header class="navbar-container">
<div class="header-subcontainer">
<div class="logo-container">
<img src="assets/images/logo-white.png" alt="">
</div>
<div class="header-container">
<img class="search-icon" src="assets/images/search.svg" id="search-icon" alt="" onclick="rotateSearchIcon();showData();" >
<img src="assets/images/menu_tab.png" alt="" class="menu-tab" id="menu-tab" onclick="show_menu()">
<img src="assets/images/close.svg" alt="" class="close-menu" id="close-menu" onclick="close_menu()">
<div class="search-box">
<input type="text" id="myInput" name="text" onkeyup="searchFunction()" onclick="showData()" class="searchbar" placeholder="search">
<div class="search-content" id="hidden-search">
<ul id="myUL">
<img class="second-search-icon" src="assets/images/search.svg" alt="">
<input type="text" id="mobile-search-input" name="text" onkeyup="searchFunctionMobile()" class="mobile-searchbar" placeholder="search">
<li><a href="#" onclick="firstPopup()">
<h2>Wonderful Copenhagen 2021</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</a></li>
<li><a href="#" onclick="secondPopup()">
<h2>The most expensive coffee on the market</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</li></a>
<li><a href="#" onclick="thirdPopup()">
<h2>10 types of coffee beans you need to know</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</a></li>
<li><a href="#" onclick="fourthPopup()">
<h2>Challenge your barista skills to the max</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</a></li>
</ul>
</div>
</div>
<img class="navbar-social" src="assets/images/linkedin-white.svg" alt="">
<img class="navbar-social" src="assets/images/twitter-white.svg" alt="">
<img class="navbar-social" src="assets/images/instagram-white.svg" alt="">
<img class="navbar-social" src="assets/images/facebook-white.svg" alt="">
<br>
</div>
</div>
<!-- MOBILE MENU -->
<div class="link-container">
<nav id="hidden-menu">
<div>
About us
Events
Nordic roaster
Results
Links
Contact
<div class="hidden-social">
<img class="menu-social" src="assets/images/linkedin-white.svg" alt="">
<img class="menu-social" src="assets/images/twitter-white.svg" alt="">
<img class="menu-social" src="assets/images/instagram-white.svg" alt="">
<img class="menu-social" src="assets/images/facebook-white.svg" alt="">
</div>
</div>
</nav>
</div>
</header>
<!-- SLIDER -->
<section class="slider-container">
<div class="slider">
<div class="slide">
<img src="assets/images/Coffee_1.png" alt="">
<img src="assets/images/Coffee_2.png" alt="">
<img src="assets/images/Coffee_3.png" alt="">
</div>
</div>
<button id="prevBtn"></button>
<button id="nxtBtn"></button>
<div class="sub-slider" id="slide-text-1">
<p>"To create an environment in which knowledge about coffee and its sphere can be obtained"</p>
</div>
<div class="sub-slider-2" id="slide-text-2">
<p>"This is a great introduction to the coffee industry's best beans on the planet"</p>
</div>
<div class="sub-slider-3" id="slide-text-3">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
<div class="sub-slider-background">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
</section>

I suspect it has to do with the JS.
The easiest way I know how to set up the plus/minus arrows for the slidshow is this:
HTML
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
CSS
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
JS
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

For some reason when the page loads for the first time const size = allImages[0].clientWidth; returns 0.only gets the value on refreshing.
so what i did was instead of const i wrote let size=""; let size be empty string then i am assigning the value inside the button which seems to work.have no idea why it doesnt do it the first time.
and i changed the images for here and your buttons were empty,also changed the css of .slider:width to 50%
// SLIDER
const allSlides = document.querySelector(".slide");
const allImages = document.querySelectorAll(".slide img");
const prev = document.querySelector("#prevBtn");
const next = document.querySelector("#nxtBtn");
let counter = 0;
let size="";
next.addEventListener('click', ()=>{
size = allImages[0].clientWidth;
if(counter >= allImages.length - 1){
allSlides.style.transform = 'translateX(0px)';
counter = 0;
/* textFade();*/
} else {
allSlides.style.transition = "transform 0.4s ease-in-out";
counter++
allSlides.style.transform = 'translateX(' + (-size * counter) + "px)";
/* textFade();*/
}
})
prev.addEventListener('click', ()=>{
size = allImages[0].clientWidth;
if(counter <= 0 ){
allSlides.style.transform = 'translateX(' + (size * 3) + "px)";
counter = 3;
/* textFade();*/
}
allSlides.style.transition = "transform 0.4s ease-in-out";
counter--
allSlides.style.transform = 'translateX('+(-size * counter) + "px)";
/* textFade();*/
})
* {
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/* HEADER */
.navbar-container {
width: 83.5%;
background-color: black;
margin: auto;
padding: 2.2vw 0;
height: 14.1vw;
}
.header-subcontainer {
display: flex;
justify-content: space-between;
width: 71vw;
margin: auto;
position: relative;
z-index: 999;
}
.menu-tab{
visibility: hidden;
position: absolute;
}
.header-container {
width: 80%;
}
.logo-container img{
width: 21vw;
}
.navbar-social {
padding: 0 .45vw 0 .35vw;
height: .7vw;
margin-bottom: -.3vw;
}
.navbar-social:last-of-type {
padding-right: 0;
}
.link-container {
display:flex;
justify-content: right;
width: 60%;
margin: -1vw 0 0 27.15vw;
position: relative;
}
.links {
text-decoration: none;
color:white;
margin-left: 1.7vw;
display: inline-block;
font-size: 1vw;
cursor: default;
}
.links:after {
display: block;
content: '';
border-bottom: 1px solid #ffffff;
transform: scaleX(0);
transition: transform 200ms ease-in-out;
transform-origin: 0% 50%;
}
.links:hover:after {
transform: scaleX(1); transform-origin: 0% 50%;
}
.header-container {
width: 100%;
height: 2vw;
text-align: right;
margin-top: -.8vw;
}
/* ------- SEARCH ------- */
.searchbar {
color: white;
background: none;
border: none;
border-bottom: 2px solid grey;
padding-left: 1.1vw;
padding-bottom: .3vw;
margin-right: 1vw;
margin-left: -.5vw;
width: 100%;
height: 1vw;
font-size: .7vw;
}
.mobile-searchbar {
visibility: hidden;
position: absolute;
}
.search-box{
display: inline-block;
width: 20.8%;
z-index: 100;
}
#hidden-search {
left: 0;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li{
border-bottom: 2px solid #1f1f1f;
}
#myUL li a {
margin-top: -1px; /* Prevent double borders */
padding: 1vw 0 1vw 0;
text-decoration: none;
font-size: .7vw;
color: white;
display: block
}
.search-content{
width: 16.6vw;
text-align: left;
margin-top: 0px;
background-color: black;
outline: 1px solid #707070;
padding: 0 1vw 2vw 1vw;
color: white;
position: absolute;
visibility: hidden;
z-index: 100;
margin-left: 18.45vw;
}
#myUL h2 {
font-weight: normal;
padding-bottom: .5vw;
}
#myUL span{
font-size: .9vw;
line-height: 1.2vw;
}
::placeholder {
color: white;
}
.search-icon {
position: absolute;
width: .7vw;
margin-left: -.5vw;
margin-top: .2vw;
}
.second-search-icon{
position: absolute;
visibility: hidden;
}
input:focus {
outline: none;
}
/*------- SLIDER -------*/
.slider-container {
width: 71vw;
height: 40vw;
margin: auto;
margin-top: -6.49vw;
z-index: 2;
}
.slider {
margin: auto;
overflow: hidden;
width: 50%; /*changed from 100 to 50*/
height: 30vw;
}
.slide {
display: flex;
width: 100%;
height: 100%;
}
#prevBtn {
background-image: url(assets/images/arrow-left.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: rgba(255, 255, 255, 0);
position: relative;
left: 67vw;
top: 1.2vw;
cursor: pointer;
}
#nxtBtn {
background-image: url(assets/images/arrow-right.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: white;
position: relative;
left: 67.8vw;
top: 1.2vw;
cursor: pointer;
}
.sub-slider {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
opacity: 100%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-2 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -6vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-3 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -12vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-background {
width: 41.45vw;
background-color: black;
color: black;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -24vw;
position: relative;
z-index: 3;
}
.close-menu {
position: absolute;
visibility: hidden;
}
.hidden-social {
position: absolute;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>World Barista Cup</title>
</head>
<body>
<div id="overlay">
<!-- HEADER -->
<header class="navbar-container">
<div class="header-subcontainer">
<div class="logo-container">
<img src="assets/images/logo-white.png" alt="">
</div>
<div class="header-container">
<img class="search-icon" src="assets/images/search.svg" id="search-icon" alt=""
onclick="rotateSearchIcon();showData();">
<img src="assets/images/menu_tab.png" alt="" class="menu-tab" id="menu-tab" onclick="show_menu()">
<img src="assets/images/close.svg" alt="" class="close-menu" id="close-menu" onclick="close_menu()">
<div class="search-box">
<input type="text" id="myInput" name="text" onkeyup="searchFunction()" onclick="showData()"
class="searchbar" placeholder="search">
<div class="search-content" id="hidden-search">
<ul id="myUL">
<img class="second-search-icon" src="assets/images/search.svg" alt="">
<input type="text" id="mobile-search-input" name="text" onkeyup="searchFunctionMobile()"
class="mobile-searchbar" placeholder="search">
<li><a href="#" onclick="firstPopup()">
<h2>Wonderful Copenhagen 2021</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</a></li>
<li><a href="#" onclick="secondPopup()">
<h2>The most expensive coffee on the market</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</li></a>
<li><a href="#" onclick="thirdPopup()">
<h2>10 types of coffee beans you need to know</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</a></li>
<li><a href="#" onclick="fourthPopup()">
<h2>Challenge your barista skills to the max</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</a></li>
</ul>
</div>
</div>
<img class="navbar-social" src="assets/images/linkedin-white.svg" alt="">
<img class="navbar-social" src="assets/images/twitter-white.svg" alt="">
<img class="navbar-social" src="assets/images/instagram-white.svg" alt="">
<img class="navbar-social" src="assets/images/facebook-white.svg" alt="">
<br>
</div>
</div>
<!-- MOBILE MENU -->
<div class="link-container">
<nav id="hidden-menu">
<div>
About us
Events
Nordic roaster
Results
Links
Contact
<div class="hidden-social">
<img class="menu-social" src="assets/images/linkedin-white.svg" alt="">
<img class="menu-social" src="assets/images/twitter-white.svg" alt="">
<img class="menu-social" src="assets/images/instagram-white.svg" alt="">
<img class="menu-social" src="assets/images/facebook-white.svg" alt="">
</div>
</div>
</nav>
</div>
</header>
<!-- SLIDER -->
<section class="slider-container">
<div class="slider">
<div class="slide">
<img
src="https://images.unsplash.com/photo-1558909552-8fcf7c94b575?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y29mZmVlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="">
<img
src="https://images.unsplash.com/photo-1571867424485-ca624c51c157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29mZmVlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="">
<img
src="https://images.unsplash.com/photo-1517789807669-59c1043388b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvZmZlZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
alt="">
</div>
</div>
<button id="prevBtn">prev</button>
<button id="nxtBtn">next</button>
<div class="sub-slider" id="slide-text-1">
<p>"To create an environment in which knowledge about coffee and its sphere can be obtained"</p>
</div>
<div class="sub-slider-2" id="slide-text-2">
<p>"This is a great introduction to the coffee industry's best beans on the planet"</p>
</div>
<div class="sub-slider-3" id="slide-text-3">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
<div class="sub-slider-background">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
</section>

unable to set same width and height on all images

I have made an image slider using javascript with the Glider library like below .
As you can see in my image however the third image is not aligned like the first 2 and has different height . My first two images in my image folder have the same width of 1920 . The third image has a width of 1200 .Even if I set the image width and height the result is the same . I've been banging my head for quite some time and have not found a solution for this .
My code for a single element inside my container, CSS and Glide libraries:
.card__header img{
max-width:100%;
}
.new__card {
background-color: var(--primaryColor);
width: 95%;
margin: 0 auto;
}
.new__card:not(:last-child) {
margin-right: 1rem;
}
.card__footer {
padding: 3rem 1.4rem;
}
.card__footer h3 {
font-size: 2.5rem;
font-weight: 600;
color: var(--black);
margin-bottom: 1rem;
}
.card__footer span {
display: inline-block;
margin-bottom: 1rem;
color: var(--black2);
}
.card__footer p {
font-size: 1.5rem;
color: var(--black2);
margin-bottom: 1.6rem;
line-height: 2.7rem;
}
.card__footer a button,
.card__footer a button {
display: inline-block;
padding: 1.4rem 4rem;
border: 1px solid var(--black);
color: var(--black);
cursor: pointer;
transition: 0.3s;
}
.card__footer a button:focus {
outline: none;
}
.card__footer a button:hover {
border: 1px solid var(--black);
color: var(--white);
background-color: var(--black);
}
<div class="news__container">
<div class="glide" id="glide_5">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="new__card">
<div class="card__header">
<img src="../images/news5.jpg" alt="">
</div>
<div class="card__footer">
<h3>Styling White Shirts After A Cool Day</h3>
<!-- <span>By Admin</span> -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo praesentium, numquam non
provident rem sed minus natus unde vel modi!</p>
<button>Read More</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.min.css
">
<!-- Glide Carousel Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js"></script>

Do this :
.card__header img{
height : 40px; /* height that you want */
width : 100%;
object-fit : cover;
}

How to add a website link to HTML website?

I know how to add images to html website but theres one thing i am not sure how to do, even after searching plenty of sites on the internet.
I created a small animation using java script on some other IDE, and I copied the link of my output:
https://g2mjl.csb.app/
I want to paste this link onto my html website but I do not know how to. If i use the regular <img src .... it does not work.
Basically the animation was coded in Java Script and the code for js is as follows:
import Vue from "vue";
import App from "./App.vue";
import TypeIt from "typeit";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
new TypeIt("#inner-demo-2", {
speed: 100,
lifelike: true,
cursor: true,
cursorSpeed: 200,
loop: true
})
.pause(1000)
.type('<span style="font-family: Segoe UI Emoji">👋</span>', {
html: true
})
.type("&nbspHi&nbspthere!&nbspI'm&nbspHussain Omer")
.go();
How can I add this code into my html file?
Also, this is for my personal website and not for school or anything, so answers are much appreciated!
I am fairly new to html too, as I started learning it a week ago, so help is really appreciated!
I want the animation to display at the very top and the width of it should cover basically my whole page but should be at the very top
Heres my html website code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Portfolio site template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Repl.it_logo.svg/220px-Repl.it_logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<!--────────────────Header───────────────-->
<header>
<a class="logo" href="#home">
<img src="https://newsletter-images--timmy-i-chen.repl.co/logo-light.png" alt="repl logo" />
</a>
<nav>
<ul class="nav-bar"><div class="bg"></div>
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<main>
<!--─────────────────Home────────────────-->
<div id="home">
<div class="filter"></div>
<section class="intro">
<p>Short Description.</p>
<p>Something more about yourself.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<!--────social media links─────-->
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</section>
</div>
<!--───────────────Projects───────────────-->
<div id="projects">
<h3>My Projects.<hr></h3>
<p>Here are some of my projects, you may like.</p>
<div class="work-box">
<div class="work">
<!--───────────────card───────────────-->
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1518611507436-f9221403cca2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1462642109801-4ac2971a3a51?ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1485815457792-d1a966f9bde0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1535556116002-6281ff3e9f36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=781&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1483546416237-76fd26bbcdd1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
</div>
</div>
</div>
<!--──────────────Contact────────────────-->
<div id="contact">
<!--────social media links─────-->
<h3>Contact.<hr></h3>
<p>Feel free to contact me on my social media.</p>
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</main>
<footer class="copyright">© 2020
Lilykhan.
<!-- be sure to give credit to me :) -->
</footer>
</div>
</body>
</html>
CSS CLASS:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
:root{
--main-background: #0b0c0f;
--main-fonts-color: #fff;
--main-decor-color:#00a9e2;
--main-header-background:#21252e;
--main-font-family: 'Poppins', sans-serif;
}
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
main{
padding: 0;
width: 100%;
height: 100%;
background: var(--main-background);
}
/*──────────────────
header
──────────────────*/
header{
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show{
opacity: 0;
}
header:hover{
opacity: 1;
background: var(--main-header-background);
}
.logo img{
padding-top: 5px;
height: 50px;
cursor: pointer;
}
.nav-bar{
list-style:none;
position: relative;
display: inline-flex;
}
a.nav-link{
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active{
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
/*──────────────────
home
──────────────────*/
#home{
margin: auto;
height: 100vh;
color: var(--main-fonts-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
#home .filter{
background: url('https://images.unsplash.com/photo-1544099858-75feeb57f01b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat;
background-size: cover;
background-position:center;
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
opacity:.20;
}
.intro {
text-align:center;
color: var(--main-fonts-color);
z-index: 1;
margin: auto;
padding: 20px;
}
.intro p{
margin: 5px;
font-size:1.2rem;
font-family: var(--main-font-family);
text-align:center;
}
h3{
padding-bottom: 15px;
letter-spacing: normal;
font-family: var(--main-font-family);
font-style: normal;
font-size: 60px;
color: var(--main-fonts-color);
text-shadow: 0px 0px 40px var(--main-decor-color);
}
/*──────────────────
social media
──────────────────*/
.social-media{
padding: 10px;
display: flex;
position: center;
align-items: space-around;
justify-content:center;
}
.social-media a {
margin: 10px;
font-size: 2rem;
text-align:center;
display: inline-block;
color: var(--main-fonts-color);
}
.social-media a i{
cursor: pointer;
}
.social-media a:hover {
color: var(--main-decor-color);
text-shadow: 0 0 50px var(--main-decor-color);
}
/*──────────────────
projects
──────────────────*/
#projects{
margin-top:100px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align:center;
color: var(--main-fonts-color);
}
#projects h3{
padding-top: 70px;
}
#projects p{
font-family: var(--main-font-family);
font-size:1.2rem;
padding: 10px;
}
.work{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content:center;
align-items: center;
padding: 20px;
}
.card{
display: flex;
flex-direction: column;
margin: 20px;
width: 200px;
height:250px;
border-radius:12px;
background:var(--main-decor-color);
}
.card img{
width: 100%;
height:70%;
border-radius:10px 10px 0px 0px;
}
.card .work-content{
text-align: center;
padding: 10px 5px;
font-size: 1rem;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
}
.card a{
text-decoration: none;
}
.card .work-content:hover{
color:#202020;
}
.card:hover{
box-shadow: 0 0 1.5rem gray;
}
/*──────────────────
Contact
──────────────────*/
#contact{
margin: auto;
padding-bottom: 20px;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--main-fonts-color);
}
#contact p{
padding:10px;
text-align:center;
font-size:1.2rem;
font-family: var(--main-font-family);
}
/*──────────────────
footer
──────────────────*/
footer {
width: 100%;
height: 100%;
background-color: var(--main-header-background);
}
.copyright {
color: #fff;
font-size: 1.2rem;
line-height: 40px;
text-align: center;
}
.copyright a{
color: #fff;
font-size: 1rem;
letter-spacing: 1px;
text-decoration: none;
font-family: var(--main-font-family);
}
.copyright a:hover{
color: var(--main-decor-color);
}
/*──── hr ─────*/
hr {
background: var(--main-decor-color);
margin: 2px;
height: 3px;
width: 150px;
border-radius:5px;
border: hidden;
margin-inline-start: auto;
margin-inline-end: auto;
}
/*──────────────────
Scrollbar
──────────────────*/
::-webkit-Scrollbar{
width: 5px;
background: rgba(5,5,5,1);
}
::-webkit-Scrollbar-thumb{
border-radius: 10px;
background: var(--main-decor-color);
box-shadow: inset 0 0 20px var(--main-decor-color);
}
::-webkit-Scrollbar-track{
margin-top: 80px;
border-radius: 10px;
}
/*──────────────────
hamburger
──────────────────*/
.hamburger {
display: none;
}
.hamburger div{
width: 30px;
height: 3px;
background: #dbdbdb;
margin: 5px;
transition:all 0.3s ease;
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#keyframes navLinkFade{
from{
opacity:0;
transform: translatex(50px);
}
to{
opacity: 1;
transform:translatex(0px);
}
}
/*──────────────────
media queries
──────────────────*/
#media only screen and (max-width: 1484px) and (min-width: 1214px) {
.work{
padding:20px 20%;
}
}
#media only screen and (max-width: 1214px) and (min-width: 1000px) {
.work{
padding:20px 12%;
}
}
#media only screen and (max-width: 500px) {
#home, #projects, #contact{
overflow-x: hidden;
}
header{
background-color: var(--main-header-background);
}
.logo{
position:absolute;
top: 2px;
left: 30px;
}
.nav-show{
opacity: 1;
}
.nav-bar{
position:fixed;
top: 0px;
right:0;
width:60%;
height: 100vh;
display:flex;
flex-direction: column;
align-items: center;
justify-content:space-evenly;
background:var(--main-header-background);
transform:translatex(100%);
transition: transform 0.5s ease-in;
z-index: -1;
}
.hamburger{
position:absolute;
top: 17px;
right: 25%;
display: block;
cursor:pointer;
z-index: 5;
}
.nav-bar li{
opacity:0;
}
}
.nav-active{
transform:translatex(0%);
}
JS CLASS:
// header scrolling effect
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('header').addClass('nav-show');
}
else{
$('header').removeClass('nav-show');
}
})
//hamburger
const navSlide = () => {
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
const navLinks = document.querySelectorAll(".nav-bar li");
hamburger.onclick = () => {
navbar.classList.toggle("nav-active");
//Animation links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+1}s`;
}
});
//hamburger animation
hamburger.classList.toggle("toggle");
}
}
window.onload = () => navSlide();
BTW this is a free html website template i got

As others have mentioned, using an iframe would be your best bet if you want to display the actual app on your website.
This is how you would implement the iframe.
<iframe src="https://g2mjl.csb.app/" title="My App"></iframe>
That being said, iframes are tricky. Depending on the website, it's possible that an iframe blocking policy is in place which could prevent you from embedding your app.
More info here and here.
Now, if all you want is a gif, I've gone ahead and done that for you, although, you may want to upload your own with something like giphy.
Here is a link to a gif I've created from your app: https://media.giphy.com/media/U9vs87YlzO1KrlFSaG/giphy.gif
You can also see it by running the snippet below:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />
I wrapped the image with an anchor that will lead to your app page but you can just implement it in your img src as you originally attempted like this:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />

you can use this code:
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p>W3Schools.com</p>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

Add class active if onclick

I have a menu. I scrolled the function to the item that is listed in the menu. I also want the selected element to appear hr. I get if there is no scroll function, then hr appears in the selected menu. And I need that when the clicks on the menu appears and hr and scroll function. Lets look at link 2 and link 3
$('a.scrollTo').on('click', function(){
// data-scrollTo = section scrolling to name
var scrollTo = $(this).attr('data-scrollTo');
// toggle active class on and off. added 1/24/17
$( "a.scrollTo" ).each(function() {
if(scrollTo == $(this).attr('data-scrollTo')){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
});
// animate and scroll to the sectin
$('body, html').animate({
// the magic - scroll to section
"scrollTop": $('#'+scrollTo).offset().top
}, 1000 );
return false;
})
var elems = document.querySelectorAll(".one,.two,.three");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click",function(e){
if(document.querySelector(".activeOne")){
document.querySelector(".activeOne").classList.remove("activeOne");
}
e.currentTarget.classList.add("activeOne");
});
}
* {
margin: 0;
padding: 0;
outline: none;
}
body, html {
width: 100%;
height: 100%;
}
#main-header {
background-image: url(../img/background.jpg);
min-height: 100%;max-width: 100%;
background-attachment: fixed;
background-repeat: repeat-x;
background-position: left center;
position: relative;}
.main-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
z-index: 0;
background-image: linear-gradient(to right, #34373a, #696c70);
background-image: -moz-linear-gradient(to right, #34373a, #696c70);
background-image: -webkit-linear-gradient(to left, #34373a, #696c70);
background-image: -ms-linear-gradient(to left, #34373a, #696c70);
}
.header {
position: relative;
z-index: 1;
}
#headet-title {
text-align: center;
color: white;
font-family: 'Cabin Condensed', sans-serif;
margin: 15% 0 0.5% 0;
font-size: 1.7em;
}
#description-header {
text-align: center;
color: white;
font-family: 'Cabin Condensed', sans-serif;
font-size: 1.4em;
width: 50%;
margin: auto;
}
#menu-nav a {
color: white;
text-decoration:none;
color:#fff;
width:120px;
display:inline-block;
text-align:center;
transition:all .33s linear;
-webkit-transition:all .33s linear;
}
ul li {
display: inline;
text-align: center;
}
.two:hover ~ hr {
margin-left: 44%;
}
.three:hover ~ hr {
margin-left: 78%;
}
.scrollTo.activeOne ~ hr {
margin-left: 10%;
}
.two.activeOne ~ hr {
margin-left: 44%;
}
.three.activeOne ~ hr {
margin-left: 78%;
}
hr {
height: .15rem;
width: 12%;
margin: 0;
background: #ff2a58;
border: none;
transition: .3s ease-in-out;
margin-left: 10%;
}
.menu-nav-header {
display: flex;
justify-content: space-between;
padding: 5px;
}
#logo h2 {
color: white;
font-family: 'Cabin Condensed', sans-serif;
}
.button {
text-align: center;
margin-top: 2%;
}
.button a {
color: white;
font-family: 'Cabin Condensed', sans-serif;
text-decoration: none;
border: 1px solid;
padding: 6px 12px 6px 12px;
border-radius: 3px;
font-size: 1.3em;
}
.header-title-border {
height: 2px;
width: 190px;
background-color: #ff2a58;
margin: auto;
margin-bottom: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="scroll/section-scroll.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scroll/jquery.section-scroll.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet">
</head>
<div id="main-header">
<div class="main-overlay"></div>
<div class="header">
<div class="menu-nav-header"> <div id="logo">
<h2>NAME</h2>
</div>
<div id="menu-nav">
<ul>
<li class="one"><a class="scrollTo" data-scrollTo="main-header" href="#">Link 1</a></li>
<li class="two"> <a class="scrollTo" data-scrollTo="content1" href="#">Link 2</a></li>
<li class="three"> <a class="scrollTo" data-scrollTo="content2" href="#">Link 3</a></li>
<hr />
</ul>
</div>
</div>
<div id="headet-title">
<h1 class="wow fadeInDown">Name of Your Company</h1>
</div>
<div class="header-title-border"></div>
<div id="description-header">
<span class="wow fadeInDown">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque voluptate commodi impedit,
vitae vero, quo et odit natus sequi odio reprehenderit expedita voluptatum aspernatur, dolore soluta corporis aliquid animi iure.</span>
</div>
<div class="button">
Get Started
</div>
</div>
</div>
<div id="content1">Hello</div>
Link 2 has content1, which is why hr does not appear, while link 3 has no content2 and hr appears. Help me please

JS click event listener doesn't trigger function as expected

I'm trying to add a click event listener to a div that should then change a css style in another element. I'm basically trying to make a model window. When the div/button is clicked, it should change the display property from 'none' to 'border-box'. Clicking the div doesn't seem to be having any effect, however. I've tried console logging and nothing shows up there either. When I move the div (that is being clicked) and put it in a different part of the HTML doc it seems to work fine tho. Super confused.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scott Munro - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Outline|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<!-- nav bar -->
<nav class="navbar">
<a id="home-link" href="#top"></a>
<ul class="icon-list">
<li class="github-icon icon"><i class="fab fa-github"></i></li>
<li class="linkedin-icon icon"><i class="fab fa-linkedin"></i></li>
<li class="codepen-icon icon"><i class="fab fa-codepen"></i></li>
</ul>
<ul class="header-list">
<li class="nav-link">About</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
</ul>
</nav> <!-- end of navbar -->
<div class="header-title">
<h1>Scott Munro</h1>
<h2>Web Developer</h2>
<div class="section-divider"></div>
</div>
<div class="scrolling">
<div id="top"></div> <!-- allows smooth scroll to top of page -->
<img src="layer-front3.png" class="layer" id="layer-one"></img>
<img src="layer1b.png" class="layer" id="layer-oneb"></img>
<img src="layer2.png" class="layer" id="layer-two"></img>
<img src="layer3.png" class="layer" id="layer-three"></img>
<img src="layer4.png" class="layer" id="layer-four"></img>
</div>
<div id="sun"></div>
<div id="sky"></div>
</header>
<!-- Sections: -->
<!-- INTRO -->
<section class="section-background intro-color">
<div class="intro-container container">
<p>Hi, I'm Scott! I'm a developer based in Berlin who is available for hire. I'm passionate about building apps with clean, tested and maintainable code. I have an aptitude for problem solving and a hunger for continuous improvement. I am looking to work as part of a team where I can contribute to a meaningful project whilst continuing to learn from my peers.</p>
</div>
</section>
<!-- ABOUT -->
<section class="section-background about-color">
<div class="about-container container">
<h2 id="about-section">About Me</h2>
<div class="section-divider"></div>
<img id="head" src="img/8bit_head.jpg" alt="head" class="responsive">
<p></p>
<div class="about-skills" class="about-box">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML5</li>
<li>CSS3</li>
<li>SASS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ruby</li>
<li>Rails</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
</ul>
</div>
<a id="resume-button" href="cv.pdf" download>Download Resume
<div id="file-icon"></div>
</a>
</div> <!-- end of about container -->
</section>
<!-- PROJECTS -->
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse consequat deterruisset ex.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Portfolio Site</h3>
<div class="project-image project-two"></div>
<p class="project-description">Mea novum iusto dignissim ne, zril convenire forensibus duo an, ne pri dicant dolores omittantur. Nam ex fugit deseruisse, no stet iuvaret conceptam vix. Sit ut tempor epicurei expetendis, ne mel odio suscipit disputando, ut choro munere sit.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Calculator</h3>
<div class="project-image project-three"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Javascript To-do App</h3>
<div class="project-image project-four"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div> <!-- Modal for projects windows -->
</div> <!-- end of project container -->
</section>
<div class="clearfix"></div> <!-- clear fix below Projects section -->
<!-- CONTACT -->
<section class="section-background contact-color">
<div id="contact-container" class="container">
<div id="contact-header">
<h2 id="contact-section">Get in Touch</h2>
<div class="section-divider"></div>
</div>
<p>Email me directly at <strong>simunro (at) hotmail (dot) co (dot) uk</strong> or fill out the form below. Be sure to check out my <span href="" class="form-link">Github</span>, <span class="form-link">LinkedIn</span> and <span class="form-link">Codepen</span> accounts too!</p>
<form action="https://formspree.io/simunro#hotmail.co.uk" method="POST">
<label>Name: </label>
<input type="text" name="name" id="name"><br>
<label>Email: </label>
<input type="email" name="_replyto"><br>
<label>Message: </label>
<textarea placeholder="Please leave your message here..." required></textarea><br>
<input type="submit" value="Send" id="send-button">
</form>
</div> <!-- end of contact container -->
</section>
<!-- FOOTER -->
<footer>
<ul class="icon-list">
<li class="github-icon icon"><i class="fab fa-github"></i></li>
<li class="linkedin-icon icon"><i class="fab fa-linkedin"></i></li>
<li class="linkedin-icon icon"><i class="fab fa-codepen"></i></li>
</ul>
<div class="copyright"><p>&copyScott Munro 2018</p></div>
<div class="section-divider"></div>
</footer>
<!-- SCRIPTS -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
And the Javascript:
document.querySelector('#modal-btn').addEventListener('click',
function() {
document.querySelector('.modal').style.display = 'border-box';
});
And CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Titillium Web, Arial, sans-serif;
font-size: 1rem;
}
/*NAV BAR*/
.navbar {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
background-color: #222222;
}
.navbar ul {
float: right;
margin-top: 1rem;
}
.header-list {
margin-right: 2rem;
}
.navbar li {
display: inline-block;
padding: 0.8rem;
}
.navbar a {
color: white;
text-transform: uppercase;
letter-spacing: 0.6em;
text-decoration: none;
font-size: 0.8em;
}
.navbar a:hover {
color: #FFD03F;
}
.fab {
font-size: 1.8rem;
color: white;
}
.fab:hover {
color: #FFD03F;
}
#home-link {
float: left;
background-image: url(img/house_white.png);
background-size: 80%;
background-repeat: no-repeat;
margin: 25px 0px 0px 30px;
width: 40px;
height: 40px;
}
/*PARALLAX JUMBO*/
header {
width: 100%;
height: 720px;
}
.scrolling {
position: relative;
margin: auto;
width: 100%;
height: 600px;
z-index: 1;
}
.layer {
width: 100%;
height: 600px;
background-size: cover;
position: fixed;
}
#layer-one {
position: fixed;
height: 800px;
top: -60px;
left: 0;
z-index: -1;
}
#layer-oneb {
position: fixed;
height: 700px;
top: 60px;
left: 0;
z-index: -2;
}
#layer-two {
/*background-image: url('layer2.png');*/
left: 0;
top: 50px;
z-index: -4;
}
#layer-three {
/*background-image: url('layer3.png');*/
height: 700px;
top: -15px;
left: 0;
z-index: -3;
}
#layer-four {
/*background-image: url('layer4.png');*/
top: 65px;
left: 0;
z-index: -5;
}
#sun {
position: relative;
left: 80%;
z-index: -5;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #FFD03F;
box-shadow: 0px 0px 40px 20px #FFD03F;
animation: sunrise 6s ease-out forwards;
}
#sky {
position: relative;
top: -2rem;
z-index: -6;
width: 100%;
height: 600px;
background: linear-gradient(darkblue, #FFD03F);
animation: sky 6s ease-out forwards;
}
/*TITLE*/
.header-title {
position: absolute;
top: 150px;
left: 400px;
float: left;
z-index: 1;
text-align: center;
animation: fade 7s forwards;
}
.header-title h1 {
font-size: 4.7rem;
color: white;
letter-spacing: 0.6rem;
opacity: 0.3;
}
.header-title h2 {
font-size: 2.5rem;
color: white;
opacity: 0.3;
}
.header-title .section-divider {
width: 40%;
opacity: 0.3;
background-color: white;
}
/*SECTIONS*/
.section-background {
font-size: 1rem;
margin: 0 auto;
padding: 6rem 2rem 7rem 2rem;
z-index: -8;
}
.container {
width: 60%;
margin: 0 auto;
padding: 5rem 0;
background-color: white;
opacity: 0.9;
padding: 3rem;
}
.intro-color {
background-color: #07337A;
z-index: 8;
}
.about-color {
background-color: white;
}
.projects-color {
background-color: white;
position: relative;
}
.contact-color {
background-color: #ddd;
}
#top { /*enables smooth scrolling on home icon link*/
position: absolute;
top: -40rem;
}
/*INTRO SECTION*/
.intro-container p {
font-size: 2rem;
}
/*ABOUT SECTION*/
.about-container {
background-color: #07337A;
color: white;
box-shadow: 2rem 2rem 50rem 2rem grey;
}
.about-container p {
font-size: 1.3rem;
padding: 0 1rem 2rem 1rem;
line-height: 3rem;
}
.about-container h2 {
font-size: 2.6rem;
text-align: center;
padding: 2rem;
}
.about-box {
border: 1px solid black;
padding: 1.6rem;
margin: 3rem 1.5rem 3rem 0;
display: inline-block;
}
#resume-button {
border: 2px solid black;
padding: 1rem 4rem 1rem 1rem;
box-shadow: 3px 3px 5px black;
background-color: white;
text-decoration: none;
color: black;
transition: 700ms;
float: right;
}
#resume-button:hover {
background-color: #5c5292;
color: white;
}
#file-icon {
display: inline-block;
position: absolute;
top: 0.8rem;
right: 1rem;
width: 2rem;
height: 2rem;
background: url(img/file.png) no-repeat;
}
.about-skills li {
display: inline-block;
list-style-type: none;
padding: 0.3rem;
margin: 0.3rem;
border: 1px solid white;
border-radius: 5px;
}
.responsive { /*to make image responsive*/
width: 100%;
height: auto;
}
#head {
float: left;
width: 30%;
margin-right: 3rem;
}
/*PROJECTS SECTION*/
.projects-container h2 {
text-align: center;
padding: 3rem 0 1.6rem 0;
font-size: 2.6rem;
}
.projects-container {
width: 80%;
}
.project {
position: relative;
float: left;
width: 40%;
height: 400px;
border: 1px solid black;
padding: 2%;
margin: 4.5%;
text-align: left;
font-size: 0.9rem;
box-shadow: 0 0 5rem #b7b7b7;
}
.project-image {
width: 37%;
height: 45%;
float: left;
background-size: cover;
background-position: center center;
border: 1px solid black;
margin: 1rem 1rem 0 0;
}
.project p {
padding: 1rem 0;
}
.project-icons {
width: 100%;
position: absolute;
bottom: 1%;
left: 0;
font-size: 1rem;
padding: 8px;
}
.project-btn {
float: left;
border: 1px solid black;
padding: 7px 20px;
margin: 0 5px;
border-radius: 4px;
box-shadow: 3px 3px 10px grey;
}
.project-icons .fab {
color: black;
border: none;
font-size: 2.6rem;
padding: 0;
margin-right: 10px;
}
.project-three {
background-image: url(img/calculator.jpg);
}
.project-four {
background-image: url(img/todo.png);
}
.clearfix {
clear: both;
}
/*PROJECTS MODAL*/
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
/*CONTACT SECTION*/
#contact-container {
padding: 0;
width: 50%;
clear: both;
}
#contact-container h2 {
text-align: center;
font-size: 2.4rem;
margin: 1.2rem;
padding: 2rem 4rem 0 4rem;
}
#contact-header {
width: 100%;
margin: 0 auto;
padding: 0 0 3% 0;
background-color: #07337A;
color: white;
}
.section-divider {
width: 24%;
height: 4px;
margin: 0 auto 3rem auto;
background-color: lightblue;
}
#contact-container {
box-shadow: 0 0 100px #555555;
}
#contact-container p {
padding: 2.6rem;
text-align: center;;
font-size: 1.7rem;
}
.form-link {
color: #1158C8;
}
form {
margin: 0 auto;
width: 100%;
background-color: white;
text-align: center;
}
form label {
display: block;
padding: 0.7rem 0;
}
form textarea {
height: 14rem;
}
input, textarea {
display: inline-block;
width: 80%;
border: 1px solid black;
padding: 0.5rem;
margin: 0 auto;
}
#send-button {
margin: 3rem auto;
border: 1px solid #222222;
padding: 0.5rem;
box-shadow: 5px 5px 20px #333333;
background-color: #09429D;
color: white;
font-size: 1rem;
letter-spacing: 0.3rem;
transition: 400ms;
}
#send-button:hover {
background-color: #07337A;
cursor: pointer;
}
/*FOOTER*/
footer {
position: absolute;
height: auto;
width: 100%;
background-color: #222222;
}
footer li {
list-style: none;
display: inline-block;
padding: 1rem;
}
.icon-list {
width: 12rem;
height: 4rem;
margin: 0 auto;
}
.copyright p {
width: 100%;
margin: 0 auto;
text-align: center;
letter-spacing: 0.4em;
font-size: 1rem;
padding-bottom: 1rem;
color: white;
background-color: #222222;
}
footer .section-divider {
background-color: white;
margin-bottom: 1.5rem;
border: 0.5px solid white;
height: 1px;
width: 11rem;
}
/*KEYFRAMES*/
#keyframes sky {
from {top: 10px;}
to {top: -170px;}
}
#keyframes sunrise {
from {top: 450px;}
to {top: 210px;}
}
#keyframes fade {
from {opacity: 0;}
to {opacity: 1;}
}
/*MEDIA QUERIES*/
/*Small:*/
#media only screen and (max-width: 600px) {
html {font-size: 10px;}
.container {width: 100%;
padding: 8px;
margin: 0;
}
#contact-container {width: 100%;}
.projects-container {width: 100%;}
.layer {width: 100vw;
height: 100vh;
object-fit: cover;}
.section-background {padding: 0;}
.header-title h1 {font-size: 24px;}
.header-title {left: 70px;
top: 160px;
}
}
#home-link {display: none;}
}

Border-box doesn't work for the display property. As David mentioned border-box is for box-sizing. Your JS works fine, I would I've tossed it into a snippet for you:
document.querySelector('#modal-btn').addEventListener('click',
function() {
console.log('working');
document.querySelector('.modal').style.display = 'block';
});
.modal {
display: none;
}
#modal-btn {
cursor: pointer;
}
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse
consequat deterruisset ex.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div>
<!-- Modal window -->
</div>
<!-- end of project container -->
</section>
I changed display: border-box to display: block and that functions. I also added a console log to show that it is firing when you click the button.