122 lines
5.3 KiB
Svelte
122 lines
5.3 KiB
Svelte
<script lang="ts">
|
|
import assnat from '$lib/assets/partenaires/assnat.png?width=1100&fit=contain&background=transparent&webp';
|
|
import atocas from '$lib/assets/partenaires/atocas.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import belleripe from '$lib/assets/partenaires/belleripe.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import boisdaction from '$lib/assets/partenaires/boisdaction.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import bombardier from '$lib/assets/partenaires/bombardier.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import carbotech from '$lib/assets/partenaires/carbotech.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import fermeforestiere from '$lib/assets/partenaires/fermeforestiere.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import festivalduboeuf from '$lib/assets/partenaires/festivalduboeuf.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import festo from '$lib/assets/partenaires/festo.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import fruitdor from '$lib/assets/partenaires/fruitdor.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import fusee from '$lib/assets/partenaires/fusee.jpg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import homedepot from '$lib/assets/partenaires/homedepot.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import hydroquebec from '$lib/assets/partenaires/hydroquebec.png?width=1100&fit=contain&background=transparent&webp';
|
|
import lumicom from '$lib/assets/partenaires/lumicom.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import machinex from '$lib/assets/partenaires/machinex.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import mcwane from '$lib/assets/partenaires/mcwane.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import metalpless from '$lib/assets/partenaires/metalpless.jpg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import mrc from '$lib/assets/partenaires/mrc.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import primewood from '$lib/assets/partenaires/primewood.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import robovic from '$lib/assets/partenaires/robovic.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import rtaschereau from '$lib/assets/partenaires/rtaschereau.jpg?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import usnr from '$lib/assets/partenaires/usnr.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import vexco from '$lib/assets/partenaires/vexco.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
import ville from '$lib/assets/partenaires/ville.png?height=600&width=600&fit=contain&background=transparent&webp';
|
|
</script>
|
|
|
|
<div class="container">
|
|
<article>
|
|
<header>Platine</header>
|
|
<div class="partenaires" id="platine">
|
|
<img
|
|
src={assnat}
|
|
alt="Assemblée Nationale"
|
|
style="padding-inline: 2rem; padding-bottom: 2rem"
|
|
/>
|
|
<img src={hydroquebec} alt="Hydro Québec" />
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<header>Or</header>
|
|
<div class="partenaires" id="or">
|
|
<img src={atocas} alt="Atocas de l'érable" />
|
|
<img src={belleripe} alt="Belle-Ripe" />
|
|
<img src={boisdaction} alt="Boisdaction" />
|
|
<img src={bombardier} alt="Fondation J Armand Bombardier" />
|
|
<img src={festo} alt="Festo" />
|
|
<img src={mcwane} alt="McWane Canada" />
|
|
<img src={metalpless} alt="Metal Pless" />
|
|
<img src={primewood} alt="Primewood" />
|
|
<img src={usnr} alt="USNR" />
|
|
<img src={ville} alt="Ville de Plessisville" />
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<header>Argent</header>
|
|
<div class="partenaires" id="argent">
|
|
<img src={carbotech} alt="Carbotech" />
|
|
<img src={fermeforestiere} alt="Ferme Forestière R Marcoux" />
|
|
<img src={festivalduboeuf} alt="Festival du boeuf" />
|
|
<img src={fruitdor} alt="Fruit d'or" />
|
|
<img src={lumicom} alt="Lumicom" />
|
|
<img src={machinex} alt="Machinex" />
|
|
<img src={mrc} alt="MRC de l'érable" />
|
|
<img src={rtaschereau} alt="Richard Taschereau" />
|
|
<img src={robovic} alt="Robovic" />
|
|
<img src={fusee} alt="Rotisserie Fusée" />
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<header>Bronze</header>
|
|
<div class="partenaires" id="bronze">
|
|
<img src={homedepot} alt="Home Dépot" />
|
|
<img src={vexco} alt="Vexco" />
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
article {
|
|
background-color: white;
|
|
// background-color: var(--partenaires-background);
|
|
border-radius: calc(var(--border-radius) + 3px) calc(var(--border-radius) + 3px)
|
|
var(--border-radius) var(--border-radius);
|
|
}
|
|
|
|
.partenaires {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
align-items: stretch;
|
|
justify-items: stretch;
|
|
|
|
&#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(1, 1fr);
|
|
}
|
|
&#or {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
&#argent {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
&#bronze {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
}
|
|
</style>
|