Skip to content

Commit

Permalink
Merge branch 'Footer-component-#31' of https://github.com/Daan645/los…
Browse files Browse the repository at this point in the history 
…e-your-head-the-client-case into Footer-component-#31
  • Loading branch information
@OniWithTheHoodie
OniWithTheHoodie committed Oct 4, 2024
2 parents 58a0a63 + 209beb9 commit dfc3c30
Showing 1 changed file with 47 additions and 36 deletions.
83 changes: 47 additions & 36 deletions src/lib/footer/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,42 @@
<!-- DIT ZIJN ENHANCED IMAGES HIERVOOR GEBRUIK IK DE ENHANCED TAG EN DE IMAGES WORDEN INGELADEN.-->
<!-- DOOR DE IMPORT/VARIABLE NAAM MEE TE GEVEN BINNEN DE SRC EN TUSSEN DE "{}"" CURLY BRACES -->
<footer class="footer">
<enhanced:img src={Veronica} class="footer__veronica" alt="logo van veronica in footer" />
<h2 class="footer__h2">We. Love. Music</h2>
<ul class="footer__socials">
<h3 class="footer__h3">volg ons op social media</h3>
<ul class="footer__socials-icons">
<li class="footer__icons"><enhanced:img src={Facebook} alt="socials icoon Facebook" /></li>
<li class="footer__icons"><enhanced:img src={X} alt="socials icoon X" /></li>
<li class="footer__icons"><enhanced:img src={YT} alt="social icoon Youtube" /></li>
<li class="footer__icons"><enhanced:img src={IG} alt="social icoon Instagram" /></li>
<div class="footer__grid">
<enhanced:img src={Veronica} class="footer__veronica" alt="logo van veronica in footer" />
<h2 class="footer__h2">We. Love. Music</h2>
<ul class="footer__socials">
<h3 class="footer__h3">volg ons op social media</h3>
<ul class="footer__socials-icons">
<li class="footer__icons"><enhanced:img src={Facebook} alt="socials icoon Facebook" /></li>
<li class="footer__icons"><enhanced:img src={X} alt="socials icoon X" /></li>
<li class="footer__icons"><enhanced:img src={YT} alt="social icoon Youtube" /></li>
<li class="footer__icons"><enhanced:img src={IG} alt="social icoon Instagram" /></li>
</ul>
</ul>
</ul>
<ul class="footer__radio-veronica">
<h3 class="footer__h3">Radio Veronica</h3>
<li class="footer__radio-links">Home</li>
<li class="footer__radio-links">Programmering</li>
<li class="footer__radio-links">Ontdek</li>
<li class="footer__radio-links">Acties</li>
</ul>
<ul class="footer__algemeen">
<h3 class="footer__h3">Algemeen</h3>
<li class="footer__algemeen-links">Frequenties</li>
<li class="footer__algemeen-links">Alle programma's</li>
<li class="footer__algemeen-links">DJ overzicht</li>
<li class="footer__algemeen-links">Pers</li>
</ul>
<span class="footer__underline"></span>
<p class="footer__copyright">&copy; Mediahuis 2024</p>
<ul class="footer__FAQ">
<li class="footer__FAQ-links">Privacy verklaring</li>
<li class="footer__FAQ-links">Gebruiksvoorwaarden</li>
<li class="footer__FAQ-links">Cookieverklaring</li>
<li class="footer__FAQ-links">Cookie voorkeuren</li>
</ul>
<ul class="footer__radio-veronica">
<h3 class="footer__h3">Radio Veronica</h3>
<li class="footer__radio-links">Home</li>
<li class="footer__radio-links">Programmering</li>
<li class="footer__radio-links">Ontdek</li>
<li class="footer__radio-links">Acties</li>
</ul>
<ul class="footer__algemeen">
<h3 class="footer__h3">Algemeen</h3>
<li class="footer__algemeen-links">Frequenties</li>
<li class="footer__algemeen-links">Alle programma's</li>
<li class="footer__algemeen-links">DJ overzicht</li>
<li class="footer__algemeen-links">Pers</li>
</ul>
<span class="footer__underline"></span>
<p class="footer__copyright">&copy; Mediahuis 2024</p>
<ul class="footer__FAQ">
<li class="footer__FAQ-links">Privacy verklaring</li>
<li class="footer__FAQ-links">Gebruiksvoorwaarden</li>
<li class="footer__FAQ-links">Cookieverklaring</li>
<li class="footer__FAQ-links">Cookie voorkeuren</li>
</ul>
</div>

</footer>

<style>
Expand All @@ -51,15 +54,23 @@
}
.footer {
background-color: var(--color-footer);
padding: 3.5rem;
}
.footer__grid {
font-family: var(--font-family);
color: var(--light);
background-color: var(--color-footer);
display: grid;
grid-template-columns: repeat(4, 0.3fr);
grid-template-rows: repeat(5, 0.3fr);
padding: 3.5rem;
grid-template-columns: repeat(4, 0.5fr);
grid-template-rows: repeat(5, 1fr);
gap: 2rem;
grid-template-areas:
grid-template-areas:
"veronica . . ."
"header-footer . radio-veronica algemeen"
"socials . radio-veronica algemeen"
Expand Down Expand Up @@ -100,7 +111,7 @@
height: 0.1rem;
background-color: var(--secondary-color);
}
.footer__socials {
grid-area: socials;
display: flex;
Expand Down Expand Up @@ -149,4 +160,4 @@
li {
cursor: pointer;
}
</style>
</style>

0 comments on commit dfc3c30

Please sign in to comment.