85 lines
2.7 KiB
Cheetah
85 lines
2.7 KiB
Cheetah
{{template "base/head" .}}
|
|
|
|
<div class="page-content">
|
|
<div class="landing-hero">
|
|
<video autoplay="" muted="" loop="" src="https://md.sudovanilla.org/videos/mp4/3783818-hd_1920_1080_24fps.mp4" poster="https://md.sudovanilla.org/images/vlcsnap-2024-05-02-17h23m53s431.png"></video>
|
|
<!-- Shoelace needs JS, this is a fallback solution -->
|
|
<noscript><p id="video-credit">Drone Footage Of The Island And The Sea By Taryn Elliott Taryn Elliott on Pexels</p> </noscript>
|
|
<sl-tooltip id="video-credit-js" class="with-js" content="Drone Footage Of The Island And The Sea By Taryn Elliott Taryn Elliott on Pexels" placement="top-end" style="--sl-tooltip-arrow-size: 0; --max-width: 600px;">
|
|
<svg width="16" height="16" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" id="video-credit-js">
|
|
<path d="M12 11.5V16.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path d="M12 7.51L12.01 7.49889" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</sl-tooltip>
|
|
<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%;
|
|
height: 500px;
|
|
border-radius: 10px;
|
|
opacity: 0.32;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
.landing-hero #video-credit, .landing-hero #video-credit-js {
|
|
position: absolute;
|
|
color: white;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
font-size: 10px;
|
|
opacity: 0.4;
|
|
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: 16%;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
</style> |