PLS5618/website
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Addd placeholder images

Browse Source
This commit is contained in:
Olivier Demers
2023-02-25 14:21:43 -05:00
parent 659b55b3c1
commit acaa79ab2b
1 changed files with 77 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/routes/partenaires/+page.svelte
View File

@@ -1,4 +1,80 @@
<script lang="ts">
</script>
Partenaires
<div class="container">
<article>
<header>Platine</header>
<div class="partenaires" id="platine">
<img src="https://via.placeholder.com/400" alt="" />
<img src="https://via.placeholder.com/400" alt="" />
</div>
</article>
<article>
<header>Or</header>
<div class="partenaires" id="or">
<img src="https://via.placeholder.com/400" alt="Atocas de l'érable" />
<img src="https://via.placeholder.com/400" alt="Jit Laser" />
<img src="https://via.placeholder.com/600" alt="Machinex" />
<img src="https://via.placeholder.com/400" alt="USNR" />
</div>
</article>
<article>
<header>Argent</header>
<div class="partenaires" id="argent">
<img src="https://via.placeholder.com/400" alt="Amex" />
<img src="https://via.placeholder.com/400" alt="Batteries Expert" />
<img src="https://via.placeholder.com/400" alt="Boisdaction" />
<img src="https://via.placeholder.com/400" alt="Carbotech" />
<img src="https://via.placeholder.com/400" alt="Festival du boeuf" />
<img src="https://via.placeholder.com/400" alt="MRC de l'érable" />
<img src="https://via.placeholder.com/400" alt="Robovic" />
<img src="https://via.placeholder.com/400" alt="Ville de Plessisville" />
</div>
</article>
<article>
<header>Bronze</header>
<div class="partenaires" id="bronze">
<img src="https://via.placeholder.com/400" alt="Home Dépot" />
<img src="https://via.placeholder.com/400" alt="Manoir du Lac William" />
</div>
</article>
</div>
<style lang="scss">
.partenaires {
display: grid;
column-gap: 10px;
row-gap: 10px;
align-items: stretch;
justify-items: stretch;
margin-inline: auto;
&#platine {
grid-template-columns: repeat(1, 1fr);
}
&#or {
grid-template-columns: repeat(2, 1fr);
}
&#argent {
grid-template-columns: repeat(3, 1fr);
}
&#bronze {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 576px) {
&#platine {
grid-template-columns: repeat(2, 1fr);
}
&#or {
grid-template-columns: repeat(3, 1fr);
}
&#argent {
grid-template-columns: repeat(4, 1fr);
}
&#bronze {
grid-template-columns: repeat(5, 1fr);
}
}
}
</style>