I don't really know what else to type here so here is some information about the project: I have to create a web-portfolio about myself at school and i was planning to do a one-pager with scroll snapping, but somehow it doesn't work and im really close to just giving up, so i would appreciate some help :)
@font-face {
font-family: "headerfont";
src: url("../fonts/alexisv3.ttf")
}
body {
background-color: black;
}
.navbarcc {
list-style-type: none;
display: flex;
align-content: center;
justify-content: center;
color: white;
width: 100%;
margin: auto 0;
margin-right: 3rem;
background-color: black;
}
header {
display: flex;
flex-wrap: nowrap;
background-color: black;
height: 8vh;
font-family: headerfont;
width: 100%;
position: fixed;
z-index: 2;
opacity: 0.75;
}
header:hover {
transition: opacity 0.25s ease-in-out;
opacity: 1.0;
}
header:not(hover) {
transition: opacity 0.25s ease-in-out;
opacity: 0.75;
}
.hlogo {
width: 4.5rem;
height: auto;
justify-self: flex-start;
margin: auto 0;
margin-left: 1.5rem;
position: absolute;
}
.headerli {
margin-right: 2rem;
margin-left: 2rem;
background-color: black;
width: auto;
}
.vidarea1 {
width: 100%;
height: 100vh;
margin: 0;
top: 0;
bottom: 0;
overflow: hidden;
object-fit: cover;
}
.vidarea2 {
width: 100%;
height: 100vh;
margin: 0;
top: 0;
bottom: 0;
overflow: hidden;
object-fit: cover;
}
.vidarea3 {
width: 100%;
height: 100vh;
margin: 0;
top: 0;
bottom: 0;
overflow: hidden;
object-fit: cover;
}
.vidarea4 {
width: 100%;
height: 100vh;
margin: 0;
top: 0;
bottom: 0;
overflow: hidden;
object-fit: cover;
}
.navbarbtn {
text-decoration: none;
color: white;
transition: color 0.25s ease-in-out;
}
.navbarbtn:hover {
color: deepskyblue;
}
.vid1 {
width: auto;
height: auto;
}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<body>
<header>
<a href="https://steamcommunity.com/id/derpeyyy/"><img src="pics/PortfolioLogo.png" class="hlogo"></a>
<ul class="navbarcc">
<li class="headerli"><a class="navbarbtn" href="#">Start</a></li>
<li class="headerli"><a class="navbarbtn" href="#">Über Mich</a></li>
<li class="headerli"><a class="navbarbtn" href="#">Arbeitsproben</a></li>
<li class="headerli"><a class="navbarbtn" href="#">Kontaktformular</a></li>
</ul>
</header>
<div class="scrolldiv">
<section class="vidarea1">
<video autoplay muted loop id="myVideo" width="100%" height="auto" class="vid1">
<source src="vids/svid.mp4" type="video/mp4">
</video>
</section>
<section class="vidarea2">
<video autoplay muted loop id="myVideo" width="100%" height="auto" class="vid1">
<source src="vids/svid.mp4" type="video/mp4">
</video>
</section>
<section class="vidarea3">
<video autoplay muted loop id="myVideo" width="100%" height="auto" class="vid1">
<source src="vids/svid.mp4" type="video/mp4">
</video>
</section>
<section class="vidarea4">
<video autoplay muted loop id="myVideo" width="100%" height="auto" class="vid1">
<source src="vids/svid.mp4" type="video/mp4">
</video>
</section>
</div>
</body>
</html>
