feat(landing): add landing video
This commit is contained in:
parent
40df29fb0b
commit
596aadc507
3 changed files with 41 additions and 24 deletions
|
@ -1,18 +1,31 @@
|
|||
.cover__container {
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
min-height: 40rem;
|
||||
min-height: 50rem;
|
||||
}
|
||||
|
||||
.cover__back {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: center;
|
||||
background-position-y: center;
|
||||
z-index: 1;
|
||||
|
||||
// to center the video
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: gray;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.cover__content {
|
||||
|
@ -79,6 +92,11 @@
|
|||
|
||||
@import 'landing/timeline.scss';
|
||||
|
||||
@media (max-width: $lg-breakpoint) {
|
||||
.cover__back {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $lg-breakpoint) {
|
||||
.cover__back {
|
||||
background-position-x: center;
|
||||
|
@ -263,22 +281,6 @@
|
|||
|
||||
@media (max-width: $md-breakpoint) {
|
||||
.history-container {
|
||||
|
||||
.layout-grid-image.third {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.slide-image {
|
||||
height: 19rem;
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
{{ define "main" }}
|
||||
<div class="cover__container">
|
||||
<div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
|
||||
<video playsinline autoplay muted loop>
|
||||
<source src="https://static.etoiledebethleem.fr/videos/cover_trailer.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="cover__overlay">
|
||||
</div>
|
||||
|
@ -15,7 +18,7 @@
|
|||
<div class="accent-separator">
|
||||
</div>
|
||||
|
||||
<div class="page-container" style="margin-top: 2rem">
|
||||
<div class="page-container" style="padding: 2rem 0">
|
||||
<a class="button">Adhérer !</a>
|
||||
</div>
|
||||
|
||||
|
@ -310,10 +313,10 @@
|
|||
|
||||
<section class="organization-section">
|
||||
<div class="page-container">
|
||||
<div class="organization__image">
|
||||
<!-- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -->
|
||||
<img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" />
|
||||
</div>
|
||||
<!-- <div class="organization__image"> -->
|
||||
<!-- <!-1- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -1-> -->
|
||||
<!-- <img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" /> -->
|
||||
<!-- </div> -->
|
||||
<div class="organization__explain">
|
||||
<h2>L'association : L'Étoile de Bethléem</h2>
|
||||
<p>
|
||||
|
@ -388,8 +391,10 @@
|
|||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<div class="page-container">
|
||||
Others articles...
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
@ -7,12 +7,22 @@
|
|||
<!-- src="{{ $image.RelPermalink }}" /> -->
|
||||
</a>
|
||||
<nav class="site-header__nav desktop-nav">
|
||||
{{ if eq .File.Dir "/" }}
|
||||
<ul class="inline-menu-list">
|
||||
<li><a href="#association">L'association</a></li>
|
||||
<li><a href="#histoires">Histoire</a></li>
|
||||
<li><a href="#images">Galerie</a></li>
|
||||
<li><a href="#actualites">Actualités</a></li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ if not (eq .File.Dir "/") }}
|
||||
<ul class="inline-menu-list">
|
||||
<li><a href="/actualites">Actualités</a></li>
|
||||
<li><a href="/association">L'association</a></li>
|
||||
<li><a href="/histoires">Histoire</a></li>
|
||||
<li><a href="/images">Galerie</a></li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<div class="burger-menu">
|
||||
<div class="burger-button-container">
|
||||
|
|
Loading…
Reference in a new issue