Develop Reference

Switching items JS classes

I added the "setHeight" function to make the smooth opening/closing of items with dynamic content work.
The essence of the function, if the item with class "active" - then the height of the content is automatic from the height of the parent block (if you look at the function in the JS code, it will be clearer how it works).
If we click on the active item and it becomes inactive - everything works correctly.
The content height becomes 0 and the content is hidden.
Now the problem is that if we click not on active item but on another one and "active" class is removed from active item and another item is added - then content height is not removed from previous active item to "0".
How can I
const accordItems = document.querySelectorAll('.accordion__item');
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', () => {
const activeItem = item.classList.contains('active');
accordItems.forEach(item => {
item.classList.remove('active');
setHeight()
});
if (!activeItem) {
content.style.height = 0;
}
if (!activeItem) {
item.classList.add('active');
setHeight()
}
});
function setHeight() {
if (content.offsetHeight) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
});
#import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item.active {
height: auto; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
overflow: hidden;
transition: height .5s; }
.accordion__item.active > .accordion__header .accordion__icon {
transform: rotate(45deg); }
.accordion__item.active > .accordion__content {
margin-bottom: 1.2rem;
height: auto; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item active">
<div class="accordion__header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
solve this problem?

I modified your Javsacript a bit to achieve it, your problem is your content always refers to the current item which is not the previous active item. We need pass item param to that function to refer to a correct item.
The key changes are under setHeight function
function setHeight(item, isActive) {
const content = item.querySelector('.accordion__content');
if (!isActive) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
const accordItems = document.querySelectorAll('.accordion__item');
accordItems.forEach(item => {
const accordText = item.querySelector('.accordion__text');
item.addEventListener('click', () => {
const activeItem = item.classList.contains('active');
accordItems.forEach(item => {
item.classList.remove('active');
setHeight(item, false)
});
if (!activeItem) {
item.classList.add('active');
setHeight(item, true)
}
});
function setHeight(item, isActive) {
const content = item.querySelector('.accordion__content');
if (!isActive) {
content.style.height = 0;
} else {
content.style.height = accordText.offsetHeight + 'px';
};
};
});
#import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item.active {
height: auto; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
overflow: hidden;
transition: height .5s; }
.accordion__item.active > .accordion__header .accordion__icon {
transform: rotate(45deg); }
.accordion__item.active > .accordion__content {
margin-bottom: 1.2rem;
height: auto; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item active">
<div class="accordion__header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content">
<p class="accordion__text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>

How to open en close menu using javascript?

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!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">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>

You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

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>

All Collapsibles Open When I Click One

I am currently trying to make a tribute page with collapsible content. My problem is that when you click on the first collapsible, the rest of them open. I would like for a collapsible to only open when it is clicked. They are 9 in total and it makes no sense for all of them to open when user clicks just one.
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s, visibility .3s, opacity .3s;
}
.collapse-open:checked~.collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open~.collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked~.collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id="main">
<div id="img-div">
<img id="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>

This is the culprit clause: .collapse-open:checked ~ .collapse-panel - all successor sibling elements of class collapse-panel open when a checkbox is checked.
The remedy is a move to the adjacent sibling selector + modifying the selector that opens the panel on the way:
/* old */ .collapse-open:checked ~ .collapse-panel
/* new */ .collapse-open:checked + label + .collapse-panel
The selectors controlling the display of the arrow have been altered to use the adjacent sibling selector as well.
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s,
visibility .3s,
opacity .3s;
}
.collapse-open:checked + label + .collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open + .collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked + .collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
<html>
<body>
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id ="main">
<div id="img-div">
<img id ="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
</body>
</html>

Have unwanted space in the top of my slider image

I implemented a slider on one of my sites but there is a lot of unwanted space above my slider. As you can see the space between the bike image and the menu bar, I was wondering if there was any way to remove this so that the bike image is below the menu bar. I tried looking if it was the height set for the slider but I don't think it is.
HTML:
<!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>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-1"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-2"><img src="images/2.jpg"></div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div><img src="images/3.jpg"></div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div><img src="images/4.jpg"></div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
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";
}
</script>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 800px;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: #fff;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: #f2f2f2;
font-size: 15px;
padding: 8px 22px;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-1 {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}

The problem is, that on you're CSS the header has a height of 100vh...
Just reduce or remove the amount.
header {
width: 100%;
/* height: 100vh; */
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
See here: jsfidde