sudovanilla-ark/forgejo/gitea/templates/home.tmpl

{{template "base/head" .}}

<div class="page-content">
    <div class="landing-hero">
        <video autoplay="" muted="" loop="" src="https://md.sudovanilla.org/videos/mp4/15708475-uhd_3840_2160_24fps.mp4" poster="https://md.sudovanilla.org/images/15708475-uhd_3840_2160_24fps%2000%3A00%3A00.png"></video>
        <div class="hero-content">
            <h2>Ark</h2>
            <p>The heart of SudoVanilla</p>
        </div>
    </div>
</div>

<style>
.landing-hero {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 text-align: left;
	 position: relative;
}
 .landing-hero video {
	 width: 100%;
	 max-width: 1200px;
	 height: 500px;
	 border-radius: 10px;
	 object-fit: cover;
filter: brightness(0.5);
	 pointer-events: none;
}
 .landing-hero #video-credit, .landing-hero #video-credit-js {
	 position: absolute;
	 color: white;
	 bottom: 0px;
	 right: 0px;
	 font-size: 10px;
	 margin: 32px;
}
 .landing-hero #video-credit a, .landing-hero #video-credit-js a {
	 color: white;
}
 .landing-hero .hero-content {
	 position: absolute;
	 display: flow-root;
	 width: 100%;
	 max-width: 1200px;
padding-left: 5%;
  font-weight: bold !important;
}
 .landing-hero .hero-content h2 {
	 font-size: 50px;
	 margin: 0px;
}
 .landing-hero .hero-content .sudovanilla-logo p {
	 font-size: 64px !important;
	 margin: 0px !important;
}
 .landing-hero .hero-content p {
	 font-size: 24px;
	 margin: 0px;
}
@media screen and (max-width: 800px) {
	.landing-hero {
		position: fixed !important;
		top: -16px !important;
		left: 0px !important;
		width: 100% !important;
		height: 100% !important;
	}
	.landing-hero video {
		height: 100% !important;
		border-radius: 0px !important;
	}
	.hero-content {
		top: 40% !important;
	}
}
.landing-hero * {
  color: white !important;
  font-weight: bold;
}


</style>