I have a video intro at the top of my website, and I want the website content to be underneath it. But when I added a test line of text, it appears ontop of it. The only thing keeping it from being right at the top is the header. Any help appriciated.
CSS:
:root {
--bg-color: #141414;
--text-color: #fff;
--default-text-color: #fff;
--secondary-color: #ff0000;
}
body {
background-color: var(--bg-color);
color: var(--default-text-color);
font-family: Rubik;
font-weight: 400;
width: 100%;
position: static!important;
top: 0!important;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.loader {
position: fixed;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-color);
transition: all .5s;
z-index: 99;
cursor: progress;
overflow: hidden;
}
.loader .logo {
font-size: 70px;
color: var(--text-color);
font-family: 'adrippingmarker', Arial;
}
.privacy-policy {
position: absolute;
display: block;
bottom: 0;
margin-bottom: 20px;
font-family: Arial;
font-weight: 900;
text-decoration: none;
color: var(--text-color);
}
.privacy-policy:hover {
cursor: default;
}
.navbar {
width: 100%;
margin: 0;
top: 0;
position: sticky;
display: block;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
z-index: 80;
}
.navbar .nav-btn {
margin-left: 30px;
padding: 0;
margin-top: 70px;
color: var(--text-color);
display:inline-block;
text-decoration: none;
font-family: 'montserrat';
font-weight: 600;
z-index: 81;
}
.navbar .nav-btn-first {
padding: 0;
margin-top: 70px;
color: var(--text-color);
display:inline-block;
text-decoration: none;
font-family: 'montserrat';
font-weight: 600;
z-index: 81;
}
.nav-logo {
font-family: 'adrippingmarker', Arial;
padding-top: 70px;
margin-left: 30px;
font-size: 75px;
text-decoration: none;
color: var(--text-color);
z-index: 81;
}
.nav-logo:hover {
background-image: url(../img/logo-hvr.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: transform 0.3s ease-in-out;
-ms-transition: transform 0.3s ease-in-out;
}
#intro-video-video, .intro-video, #intro-video-alternative {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
left: 0px;
top: 0px;
padding: 0;
margin: 0;
z-index: -1;
}
@media only screen and (max-width: 683px) {
.nav-btn, .nav-btn-first {
display: none !important;
}
}
HTML:
<div class="navbar">
<a class="nav-btn-first" href="./gallery.php">Gallery</a> <a class="nav-btn" href="./meet-us.php">Our Team</a> <a class="nav-logo" href="./">misfits.</a> <a class="nav-btn" href="./contact.php">Contact Us</a> <a class="nav-btn" href="./social.php">Socials</a>
</div>
<div class="video-intro">
<video id="intro-video-video" autoplay loop muted>
<source src="./assets/video/bg.mp4" type='video/mp4'>
<img id="intro-video-alternative" src="alternative.jpg" />
</video>
</div>
<p> ljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkf
</p>