91 lines
2.1 KiB
Svelte
91 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import image1 from '$lib/assets/images/image1.jpg?width=600&webp';
|
|
import image2 from '$lib/assets/images/image2.jpg?width=600&webp';
|
|
import image3 from '$lib/assets/images/image3.jpg?width=600&webp';
|
|
</script>
|
|
|
|
<div class="container">
|
|
<article>
|
|
<header>Nous sommes</header>
|
|
<content>
|
|
<p>
|
|
Une équipe de jeunes de 12 à 18 ans, encadrés par des mentors, participant à la compétition
|
|
internationale de robotique FIRST. Notre défi consiste à concevoir et construire un robot
|
|
performant dans un temps limité.
|
|
</p>
|
|
<div class="img" style="background-image: url('{image1}')" />
|
|
</content>
|
|
</article>
|
|
|
|
<article>
|
|
<header>Notre mission</header>
|
|
<content>
|
|
<div class="img" style="background-image: url('{image2}')" />
|
|
<p>
|
|
L'équipe PLS 5618 désire garantir aux élèves une expérience enrichissante et professionnelle
|
|
en connaissances technologiques et personnelles dans un climat favorisant la confiance et
|
|
l'autonomie. Le projet stimule l'intérêt envers les sciences et technologies tout en
|
|
développant un sentiment d'appartenance envers l'équipe, l'école et la communauté.
|
|
</p>
|
|
</content>
|
|
</article>
|
|
|
|
<article>
|
|
<header>Nos valeurs</header>
|
|
<content>
|
|
<ul>
|
|
<li>Esprit d'équipe</li>
|
|
<li>Organisation</li>
|
|
<li>Connaissances</li>
|
|
<li>Confiance en soi et envers les autres</li>
|
|
<li>Plaisir</li>
|
|
<li>Amitié</li>
|
|
</ul>
|
|
<div class="img" style="background-image: url('{image3}')" />
|
|
</content>
|
|
</article>
|
|
|
|
<article id="links">
|
|
<a href="/resultats" role="button">Voir nos résultats</a>
|
|
<a href="/partenaires" role="button">Voir nos partenaires</a>
|
|
</article>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
content {
|
|
display: flex;
|
|
flex-flow: row;
|
|
gap: 30px;
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.img {
|
|
width: 50%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
//height: auto;
|
|
}
|
|
|
|
p {
|
|
width: 50%;
|
|
}
|
|
|
|
#links {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
gap: 10px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.img {
|
|
display: none;
|
|
}
|
|
p {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|