HTML:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>NFF ON TOP</title>
<link rel="stylesheet" href="resources/css/NFF.css">
<link rel="icon" href="resources/Images/NFF-Logo2" type="png">
</head>
<body>
<img1 src="resources/Images/NFF-Logo.png" width="110" >
<header>
<video id="Sky" src="resources/Video/Sky.mp4.mp4" autoplay loop></video>
</header>
<div class="contents">
<ul>
<li><a href="NFF web.html" style="text-decoration: none;"> Home </a></li>
<li><a href="Gallery.html" style="text-decoration: none;"> Gallery</a></li>
<li><a href="https://docs.google.com/forms/d/1KiwQMOUvVbfmdiihq9zHJpzmrfKkADeOXfLyBhPHssg/edit" style="text-decoration: none;"> Application</a></li>
<li><a href="Status.html" style="text-decoration: none;"> Status</a></li>
<li><a href="Minecraft.html" style="text-decoration: none;"> Minecarft</a></li>
</ul>
<div class="container">
<div class="img-container">
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138562904946384956/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138562904946384956/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138562904946384956/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138562230095450184/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138562904946384956/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138563016506495026/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1138923650209300622/1138964861968207983/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138561563440189480/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138561811189346456/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138563151835697242/image.png">
</div>
<div class="img">
<img src="https://cdn.discordapp.com/attachments/1014064260726403103/1138561721414471681/image.png">
</div>
</body>
</html>
Code:
video {
object-fit: cover;
width: 100vw;
height: 100vh;
Position: fixed;
top: 0;
left: 0;
width: 100%;
position: absolute;
z-index: -1;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 20vh;
width: 100vw;
color: black;
z-index: 100;
}
ul {
width: 40rem;
display: flex;
justify-content: space-evenly;
align-items: center;
}
li {
list-style: none;
position: relative;
cursor: pointer;
font-family: cursive;
font-size: large;
}
li::before {
content: "";
background-color:rgb(255, 255, 255) ;
position: absolute;
left: 0;
bottom: -0.3rem;
height: 3px;
width: 0;
transition: 0.3s ease-in-out;
}
li:hover::before {
content: "";
background-color:rgb(255, 255, 255) ;
position: absolute;
left: 0;
bottom: -0.3rem;
height: 3px;
width: 100%;
}
a {
color: #000000;
text-decoration: none;
}
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
.img-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.img-container .img {
height: 15rem;
width: 30rem;
margin: 2rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
overflow: hidden;
border-radius: 2rem;
}
. img-container .img img {
height: 100%;
width: 100%;
object-fit: cover;
outline: none;
border: none;
}
Zuletzt bearbeitet:
