Develop Reference

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

How to hide the navbar on scroll on a horizontal scrolling website?

I'm coding this website and I can not find the solution. It is so frustrating having a user scrolling through the website with the navbar following them.
Yet, I can not find the solution to the problem.
I've managed to apply the solution to a vertical scrolling website, however on the horizontal scrolling one, it does not work.
The idea is that the navbar hides / shows up on scroll left / right.
So, here's the HTML:
<header id="navbar">
<ul class="nav-links hidden">
<li>Home</li>
<li>About</li>
<li>Careers</li>
<li>Order Now</li>
</ul>
</header>
<section class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<video muted loop autoplay>
<source src="videos/2.mp4" />
</video>
<div class="one-content">
<h3>
<span id="art">art</span>
<span id="is">is</span>
<span id="where">where</span>
<span id="the">the</span>
<span id="work">work</span>
<span id="meets">meets</span>
<span id="love">love.</span>
</h3>
<img src="images/hands.png" id="hands" />
</div>
</div>
</div>
</section>
<script src="js/app.js"text/javascript"></script>
There are no errors in the HTML code.
Here's the CSS code:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
transition: 0.6s;
padding: 22px 100px;
z-index: 100000;
/* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
position: absolute;
top: 0;
left: 0;
border-right: 1px solid var(--clr-green);
border-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100vh;
max-width: 3%;
text-align: center;
}
.nav-links li {
transform: rotate(-90deg);
margin-bottom: 3rem;
}
.nav-links a{
font-family: var(--ff-main);
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 0.243rem;
font-size: 12px;
text-decoration: none;
color: inherit;
}
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.one {
position: relative;
background: var(--clr-black);
z-index: 2;
}
.one video {
position: absolute;
z-index: 0;
opacity: 0.8;
width: 100vw;
object-fit: cover;
filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin-left: 11rem;
}
.one-content #art {
position: absolute;
top: 6rem;
left: 3rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #is {
position: absolute;
top: 15rem;
left: 33rem;
font-size: 6rem;
font-weight: 100;
text-transform: uppercase;
}
.one-content #where {
position: absolute;
top: 22rem;
left: 43rem;
font-size: 6rem;
font-weight: 600;
text-transform: uppercase;
}
.one-content #the {
position: absolute;
top: 33rem;
left: 11rem;
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
.one-content #work {
position: absolute;
top: 33rem;
left: 22rem;
font-size: 9rem;
font-weight: 700;
text-transform: uppercase;
}
.one-content #meets {
position: absolute;
top: 40rem;
left: 56rem;
font-size: 2rem;
font-weight: 200;
text-transform: uppercase;
}
.one-content #love {
position: absolute;
top: 47rem;
left: 50rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #hands {
opacity: 1;
position: absolute;
top: 0rem;
right: -25rem;
width: 50rem;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
I believe there may be some incorrect styling in the CSS code.
However,
Here's the JavaScript code:
var prevScPos = window.pageXOffset;
window.addEventListener('scroll', function() {
var curScPos = window.pageXOffset;
if (prevScPos > curScPos) {
document.getElementById("navbar").style.left = "0";
} else {
document.getElementById("navbar").style.left = "-60px";
}
prevScPos = curScPos;
})
Any help is appreciated.
Thanks in advance.

You need to change the scroll event to wheel..
window.addEventListener('wheel', function() { ...
var prevScPos = window.pageXOffset;
window.addEventListener('wheel', function() {
var curScPos = window.pageXOffset;
if (prevScPos > curScPos) {
document.getElementById("navbar").style.left = "0";
} else {
document.getElementById("navbar").style.left = "-60px";
}
prevScPos = curScPos;
})
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
transition: 0.6s;
padding: 22px 100px;
z-index: 100000;
/* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
position: absolute;
top: 0;
left: 0;
border-right: 1px solid var(--clr-green);
border-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100vh;
max-width: 3%;
text-align: center;
}
.nav-links li {
transform: rotate(-90deg);
margin-bottom: 3rem;
}
.nav-links a{
font-family: var(--ff-main);
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 0.243rem;
font-size: 12px;
text-decoration: none;
color: inherit;
}
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.one {
position: relative;
background: var(--clr-black);
z-index: 2;
}
.one video {
position: absolute;
z-index: 0;
opacity: 0.8;
width: 100vw;
object-fit: cover;
filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin-left: 11rem;
}
.one-content #art {
position: absolute;
top: 6rem;
left: 3rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #is {
position: absolute;
top: 15rem;
left: 33rem;
font-size: 6rem;
font-weight: 100;
text-transform: uppercase;
}
.one-content #where {
position: absolute;
top: 22rem;
left: 43rem;
font-size: 6rem;
font-weight: 600;
text-transform: uppercase;
}
.one-content #the {
position: absolute;
top: 33rem;
left: 11rem;
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
.one-content #work {
position: absolute;
top: 33rem;
left: 22rem;
font-size: 9rem;
font-weight: 700;
text-transform: uppercase;
}
.one-content #meets {
position: absolute;
top: 40rem;
left: 56rem;
font-size: 2rem;
font-weight: 200;
text-transform: uppercase;
}
.one-content #love {
position: absolute;
top: 47rem;
left: 50rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #hands {
opacity: 1;
position: absolute;
top: 0rem;
right: -25rem;
width: 50rem;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
#navbar { position:absolute;}
<header id="navbar">
<ul class="nav-links hidden">
<li>Home</li>
<li>About</li>
<li>Careers</li>
<li>Order Now</li>
</ul>
</header>
<section class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<video muted loop autoplay>
<source src="videos/2.mp4" />
</video>
<div class="one-content">
<h3>
<span id="art">art</span>
<span id="is">is</span>
<span id="where">where</span>
<span id="the">the</span>
<span id="work">work</span>
<span id="meets">meets</span>
<span id="love">love.</span>
</h3>
<img src="images/hands.png" id="hands" />
</div>
</div>
</div>
</section>

Add the following CSS to the element.
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
.outer-wrapper::-webkit-scrollbar{
display: none;
}
For SCSS,
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
&:-webkit-scrollbar {
display: none;
}
}

Swiper JS Slider next/previous buttons aren't working perfectly

Hi guys I'm having a bit of trouble using swiper js slides. This is the link of my website having swiper js slider:
https://nyside2.internet.dk/
As you can see in the start the swiper js slider is showing a few parts from the next slide. This is a very big concern for me. Because I want only one slider per view also when I click on the next or previous button I'm having half part of the previous slider and half part of the next slider at the same time. Again this isn't what I want I want only one slide after clicking the next or previous button.
You can see the code below that I'm using:
<HTML>
<head>
<style>
HTML,body
{position: relative;
height: 100%;
}
body{
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
#Slider .swiper-container {
width: auto;
height: 100%;
}
#Slider .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
/* reset list */
#Slider ul.swiper-wrapper{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#Slider h2{
flex-basis: 100%;
}
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 45%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .swiper-container:hover .swiper-button-prev{
opacity: 1.0;
animation-duration: 1s;
animation-iteration-count: 1;
margin-left: 30px;
animation-name: PreviousSlider;
}
u/keyframes PreviousSlider{
0%{
opacity: 1;
}
100%{
opacity: 1;
transform: translate(30px, 0px);
}
}
#Slider .swiper-container:hover .swiper-button-next{
opacity: 1.0;
animation-duration: 1s;
animation-iteration-count: 1;
margin-right: 30px;
animation-name: NextSlider;
}
u/keyframes NextSlider{
0%{
opacity: 1;}
100%{
opacity: 1;
transform: translate(-30px, 0px);}
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 50%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 58%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 68%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 77%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
#Slider .button--inline .b8{
color: #EF8524;
}
#Slider .fa-long-arrow-alt-right:before{
color: #EF8524;
text-align: left;
letter-spacing: 0px;
font-weight: 400;
}
#Slider .video-overlay{
margin-top: -759px;
width: 100%;
height: 750px;
position: relative;
display: flex;
background: black;
opacity: 0.5;
}
/* Extra small devices (phones, 600px and down) */
u/media only screen and (max-width: 600px) and (min-width: 360px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
display: none;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 22%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 25px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 33%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 25px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 53%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 320px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 25px;
letter-spacing: 0px;
font-weight: 400;
font-size: 18px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 84%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 18px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
}
/***********
/* Small devices (portrait tablets and large phones, 600px and up) */
u/media only screen and (max-width: 768px) and (min-width: 600px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 35%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 40%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 50px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 53%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 50px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 68%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 85%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
#Slider .button--inline .b8{
color: #EF8524;
}
}
/* For tablet devices 768px to 992px */
u/media only screen and (max-width: 992px) and (min-width: 768px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 38%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 45%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 58%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 72%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
.button--inline{
position: absolute;
display: block;
top: 85%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
.button--inline .b8{
color: #EF8524;
}
}
/* Large devices (laptops/desktops, 992px and up) */
u/media only screen and (max-width: 1200px) and (min-width: 992px) {
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 45%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 50%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 58%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 68%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 77%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
#Slider .button--inline .b8{
color: #EF8524;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/swiper#8.0.7/swiper-bundle.min.css">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<ul class="swiper-wrapper">
<!-- Slides -->
<li class="swiper-slide">
<div>
<video
source src="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" ></video>
<div class="video-overlay"> </div>
<h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Forretningsorienteret</span>
<span>
<strong class="heading-line heading-line--1">
bureau
</strong>
</span>
</h2>
<div class="b2 b2--spread content_subtitle">
<p>
Stærkt team med fokus på strategi og kreativitet der engagere og aktiver mennesker på deres kunderejse
</p>
</div>
<div class="button hero-content-cta z4 button--inline">
<a href="https://nyside2.internet.dk/?page_id=37">
<span class="b8 z2">
Se hvordan vi gør
</span>
<i class="fas fa-long-arrow-alt-right">
</i>
</a>
</div>
</div>
</li>
<li class="swiper-slide">
<div>
<video source src="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4"></video>
<div class="video-overlay"></div>
<h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Fra kr. 2.980,- / mdr.</span>
<span>
<strong class="heading-line heading-line--1">
Den fulde løsning
</strong>
</span>
</h2>
<div class="b2 b2--spread content_subtitle">
<p>
Nyt kreativt webdesign, der løfter din virksomhed og øger effekten af din indsats
</p>
</div>
<div class="button hero-content-cta z4 button--inline">
<a href="https://nyside2.internet.dk/about/">
<span class="b8 z2">
Interesseret - så klik
</span>
<i class="fas fa-long-arrow-alt-right">
</i>
</a>
</div>
</div>
</li>
</ul>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8.0.7/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
centeredSlides: true,
autoplay: {
delay: 5000,
autoplayDisableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
/* ON INIT AUTOPLAY THE FIRST VIDEO */
on: {
init: function () {
console.log('swiper initialized');
var currentVideo = $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
currentVideo.trigger('play');
},
},
});
/* GET ALL VIDEOS */
var sliderVideos = $(".swiper-slide video");
/* SWIPER API - Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChange', function () {
console.log('slide changed');
/* stop all videos (currentTime buggy without this loop idea - no "real" previousIndex) */
sliderVideos.each(function( index ) {
this.currentTime = 0;
});
/* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
var prevVideo = $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
var currentVideo = $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
prevVideo.trigger('stop');
currentVideo.trigger('play');
});
</script>
</body>
</html>

I would to use angular or other framework to get that! better to use swipper with somthing framework. Your script don'd clear to me. Sorry to don't get help you. Your css code is perfect, but swipper has properties. Take a look on documentacion to javascript. I would recomend to use Ionic Framewor to create thats cards thath you want to slide.

Elements shifting when screen is resized

I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.

From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox

How to make an image point to a button (I have multiple versions of it, each pointing to a specific button)

For each button that the user hovers on, the image should change with one which points to that button. (I have 14 versions of that image, each pointing lower)
How would this be done with jQuery? Taking the mouse X and Y or using .hover and showing/hiding specific classes? (I think .hover would work better).
It works as expected with .hover() but I can't really seem to make the image stay in the center of its .
I tried many techniques from the internet, but none of them worked.
Screenshot with it not being centered:
Code:
body {
width: 100%;
text-rendering: optimizeLegibility; /*setam textul sa fie optimzat pentru o lizbilitate mai buna, in detrimentul vitezei de incarcare si a preciziei geometrice*/
font-weight: 200;
font-size: 15px;
font-family: 'Roboto Condensed', sans-serif;
color: #fff;
height: 100%;
animation-name: tranzitie-inceput;
animation-duration: 0.5s;
}
#container-mate {
background: #e6e7d0 url('../img/bg-mate.png');
}
/*HEADER-UL PAGINII*/
#meniu-mate {
max-width: 1500px;
margin: 0 auto; /*meniul este centrat orizontal*/
background-color: #fff;
height: 100%;
}
.mate-sus {
height: 10rem;
background: linear-gradient(to right, #7ec7bc, #63b4b3 15%, #429ba8);
}
.mate-sus-nerd {
float: right;
width: 9%;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 65px;
}
.citat-mate-sus {
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
font-weight: bold;
margin-left: 85px;
}
.nav-bar-pagina-mate {
height: 3rem;
background: linear-gradient(to right, #9bddc5 15%, #34bab8);
margin-bottom: 1.5rem;
}
.nav-bar-pagina-mate > ul {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 1.5rem;
font-size: 1.5rem;
}
.nav-bar-pagina-mate > ul > li {
display: inline;
}
.nav-bar-pagina-mate > ul > li > a {
text-decoration: none;
color: #fff;
font-style: italic;
}
/*CONTINUTUL PAGINII*/
#cursuri-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.cursuri-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.selectie-clasa-mate-cursuri,
.selectie-clasa-mate-exercitii,
.selectie-clasa-mate-quiz {
font-size: 2.5rem;
margin-left: 2rem;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.cifre-clasa {
float: right;
display: inline;
}
.cifre-clasa > ul {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 50px;
}
.home-mate {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.back-mate {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.back-mate:hover {
color: #429ba8;
}
.home-mate:hover {
color: #429ba8;
}
.comutare-mate {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.comutare-mate:hover {
color: #429ba8;
}
.cifre-clasa > ul > li {
opacity: 0;
margin: 5px;
display: inline-block;
}
.cifre-clasa > ul > li > a > img {
width: 85%;
}
.cifre {
width: 35%;
margin-left: 400px;
margin-top: -55px;
}
.fa-book {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
#exercitii-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.exercitii-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
#quiz-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.quiz-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.fa-pencil-alt {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
.fa-question {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
font-size: 6rem;
margin-right: 2rem;
}
.fa-lightbulb {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
#variante-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
cursor: pointer;
}
.variante-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.fa-pencil-alt {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
}
/*FOOTER*/
.mate-jos {
background-color: #28494e;
width: 100%;
color: white;
text-align: right;
height: 12.2rem;
position: relative;
}
.mate-jos-text {
font-size: 1.1rem;
}
#contact-footer {
float: right;
margin-right: 6rem;
}
#contact-footer i {
font-size: 5rem;
padding: 0 3.6rem;
margin-bottom: 1rem;
}
.footer-social {
float: right;
position: absolute;
bottom: 14%;
right: 5%;
}
.logo-mateinfo {
float: left;
width: 7.5%;
left: 5%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#variante-bacalaureat-mate-container {
max-width: 1500px;
margin: 0 auto; /*meniul este centrat orizontal*/
background-color: #fff;
height: 100%;
}
#variante-bacalaureat-mate-centru {
font-size: 5rem;
color: #000;
font-family: 'Proxima Nova', 'Roboto Condensed';
margin-top: 2rem;
overflow: hidden;
}
.semestrul1-variante-bacalaureat-mate {
background: linear-gradient(to right, #499fab, #86bfc7 20%, #abd3d8 50%, #fff);
width: 95%;
padding: 1rem 0 1rem 3rem;
margin-bottom: 1.25rem;
margin-left: 2rem;
color: #fff;
}
.variante-bacalaureat-mate-lista {
font-size: 3rem;
margin-left: 2rem;
color: #fff;
float: left;
}
.variante-bacalaureat-mate-lista > li {
height: 4rem;
line-height: 4rem;
max-width: 250px;
width: 100%;
background-color: #429ba8;
margin-bottom: 0.8rem;
padding-left: 1rem;
}
.variante-bacalaureat-mate-1:hover,
.variante-bacalaureat-mate-2:hover,
.variante-bacalaureat-mate-3:hover {
color: #7ec7bc;
transition: 0.25s;
variante-bacalaureator: pointer;
}
.fereastra-mate-variante-bacalaureat-1,
.fereastra-mate-variante-bacalaureat-2,
.fereastra-mate-variante-bacalaureat-3 {
float: right;
color: #000;
max-width: 1150px;
margin-right: 2rem;
text-align: center;
}
.vbac1
{
display: block;
margin-left: auto;
margin-right: auto
}
.header-mate-variante-bacalaureat-1 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-1 > p {
font-size: 2rem;
}
.fereastra-mate-variante-bacalaureat-2 {
display: none;
}
.header-mate-variante-bacalaureat-2 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-2 > p {
font-size: 2rem;
}
.fereastra-mate-variante-bacalaureat-3 {
display: none;
}
.header-mate-variante-bacalaureat-3 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-3 > p {
font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/reset.css" rel="stylesheet" />
<link href="css/fontawesome-all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<title>variante-bacalaureat Mate</title>
</head>
<body>
<div id="container-mate">
<section id="variante-bacalaureat-mate-container">
<header class="mate-sus">
<img src="img/mate nerd.png" class="mate-sus-nerd" />
<h1 class="citat-mate-sus">Egalitatea nu exista decat in matematica.</h1>
</header>
<nav class="nav-bar-pagina-mate">
<i class="fas fa-home"></i>
<i class="fas fa-arrow-left"></i>
COMUTA PORTAL
</nav>
<article id="variante-bacalaureat-mate-centru">
<h1 class="semestrul1-variante-bacalaureat-mate">variante-bacalaureat - clasa a IX-a</h1>
<ul class="variante-bacalaureat-mate-lista">
<li class="variante-bacalaureat-mate-1">Varianta 1</li>
<li class="variante-bacalaureat-mate-2">Varianta 2</li>
<li class="variante-bacalaureat-mate-3">Varianta 3</li>
<li>Varianta 4</li>
<li>Varianta 5</li>
<li>Varianta 6</li>
<li>Varianta 7</li>
<li>Varianta 8</li>
<li>Varianta 9</li>
<li>Varianta 10</li>
<li>Varianta 11</li>
<li>Varianta 12</li>
<li>Varianta 13</li>
<li>Varianta 14</li>
</ul>
<aside class="fereastra-mate-variante-bacalaureat-1">
<img src="img/vbac (1).png" class="vbac1" />
</aside>
<aside class="fereastra-mate-variante-bacalaureat-2">
<img src="img/vbac (2).png" class="vbac2" />
</aside>
<aside class="fereastra-mate-variante-bacalaureat-3">
<img src="img/vbac (3).png" class="vbac3" />
</aside>
</article>
<footer class="mate-jos">
<div id="contact-footer">
<img src="img/logo web .png" class="logo-mateinfo" />
<div class="footer-social">
<i class="fab fa-instagram"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-phone-square"></i>
<h6 class="mate-jos-text">© 2018 - Octavian Niculescu (cod), Cezar Stoica (design) pentru INFOEducatie.ro</h6>
</div>
</div>
</footer>
</section>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/js.js"></script>
</html>
I also uploaded it on my website so you can see it:
http://octaniculescu.com/mateinfo/variante-mate.html
Thanks.

I would do this in plain CSS with one single image which will be much more efficient than loading 14 different images.
What I would do would be to use the :hover CSS state in combination with transform(rotates XXdeg). This way you just need to assign a number of degrees for the image to rotate when hovering each button.
Check this approach here: https://codepen.io/guillermo-carone/pen/KRBprd