Adding banner

This commit is contained in:
Michael Boelen 2024-11-20 15:42:55 +00:00
parent a6311b8611
commit c716a53367
4 changed files with 46 additions and 1 deletions

View file

@ -0,0 +1,29 @@
div.banner {
@media (max-width: 768px) {
display: none;
}
@media (min-width: 768px) {
background-color: $midnight-blue-dark;
background-image: url("/afbeeldingen/achtergronden/banner.svg");
background-size: cover;
border-radius: 5px;
align-content: center;
display: visible;
height: auto;
margin: 0 auto;
margin-bottom: 2rem;
position: relative;
div {
margin-left: auto;
margin-right: auto;
width: 50%;
ul {
display: block;
color: white;
font-size: 2.2em;
font-weight: bold;
padding: 2rem;
}
}
}
}

View file

@ -0,0 +1,5 @@
ul.nomarkup {
list-style-type: none;
padding: 0;
}

View file

@ -1,6 +1,16 @@
{{ define "main" }}
<article>
<div class="banner">
<div>
<ul class="nomarkup">
<li>Open source</li>
<li>Open systemen</li>
<li>Open standaarden</li>
</ul>
</div>
</div>
<div class="grid-row">
<div class="grid-two-thirds">{{ .Content }}
@ -57,7 +67,7 @@
</li>
{{ end }}
</ul>
<a class="btn btn-cta" href="{{ relref . "/evenementen/kalender/" }}">Bekijk kalender</a>
<a class="btn btn-cta" href="/evenementen/kalender/">Bekijk kalender</a>
</section>
</div>