BoulbiCorp
/
website
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup css + game template

This commit is contained in:
nemo 2024-09-03 14:37:50 +02:00
parent 41b046232f
commit d792837e74
3 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
game.css
View File

@ -1,43 +0,0 @@
.games {
margin: 0 auto;
display: grid;
gap: 1rem;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px) {
.games { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.games { grid-template-columns: repeat(3, 1fr); }
}
.game {
color: white;
position: relative;
}
.game p {
margin: 0;
}
.game img {
width: 100%;
height: 100%;
object-fit: contain;
}
.game-video{
opacity: 0;
transition: 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.game:hover .game-video {
opacity: 1;
}

3
index.html
View File

@ -4,7 +4,6 @@
<meta charset="UTF-8">
<title>Bloub Bloub Studio</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/game.css">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
@ -62,7 +61,7 @@
<source src="/assets/trailer/trailer.mp4" type="video/mp4">
</video>
</a>
<a href="/game1.html" class="game">
<a href="/game-template.html" class="game">
<img src="/assets/miniature/miniature.png" alt="GAME 1" />
<video class="game-video" autoplay loop muted poster="/assets/miniature/miniature.png">
<source src="/assets/trailer/trailer.mp4" type="video/mp4">

44
style.css
View File

@ -101,3 +101,47 @@ nav > img {
width: 45px;
float: right;
}
.games {
margin: 0 auto;
display: grid;
gap: 1rem;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px) {
.games { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.games { grid-template-columns: repeat(3, 1fr); }
}
.game {
color: white;
position: relative;
}
.game p {
margin: 0;
}
.game img {
width: 100%;
height: 100%;
object-fit: contain;
}
.game-video{
opacity: 0;
transition: 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.game:hover .game-video {
opacity: 1;
}