171 lines
6.7 KiB
HTML
171 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1280">
|
|
<title>Le Shed — Centre d'art contemporain en Normandie</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="settings" id="settings">
|
|
<button class="settings__btn" id="settings-toggle" aria-label="Paramètres">⚙</button>
|
|
<div class="settings__panel" id="settings-panel" hidden>
|
|
<p class="settings__label">Motifs</p>
|
|
<label class="settings__option">
|
|
<input type="radio" name="motifs" value="aucun" checked> Aucun
|
|
</label>
|
|
<label class="settings__option">
|
|
<input type="radio" name="motifs" value="paysage"> Paysage
|
|
</label>
|
|
<label class="settings__option">
|
|
<input type="radio" name="motifs" value="objets"> Objets
|
|
</label>
|
|
<label class="settings__option">
|
|
<input type="radio" name="motifs" value="objets2"> Objets 2
|
|
</label>
|
|
<p class="settings__label" style="margin-top:8px">Couleur</p>
|
|
<label class="settings__option">
|
|
<input type="radio" name="couleur" value="#000000" checked> Noir
|
|
</label>
|
|
<label class="settings__option">
|
|
<input type="radio" name="couleur" value="#1a1a1a"> Gris
|
|
</label>
|
|
<label class="settings__option">
|
|
<input type="radio" name="couleur" value="custom">
|
|
<input type="color" id="couleur-custom" value="#e05c2a" style="width:20px;height:20px;border:none;padding:0;cursor:pointer;background:none">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<header class="masthead">
|
|
<div class="brand">
|
|
<h1 class="brand__title">Le Shed</h1>
|
|
<p class="brand__sub">Centre d'art contemporain<br>en Normandie</p>
|
|
</div>
|
|
<nav class="nav">
|
|
<a href="#">À propos</a>
|
|
<a href="#">Agenda</a>
|
|
<a href="#">Programmation</a>
|
|
<a href="#">Productions</a>
|
|
<a href="#">Faire un don</a>
|
|
<a href="#">Venir au Shed</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
|
|
<!-- Colonne gauche : Expositions — défile à vitesse normale -->
|
|
<section class="col col--left">
|
|
<h2 class="col__heading">Expositions</h2>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">The Underways</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/the-underways.png" alt="The Underways — Emmanuelle Antille">
|
|
</div>
|
|
<p class="card__author">Emmanuelle Antille</p>
|
|
<p class="card__meta">Exposition au Shed - La maison à Maromme du 7 février au 12 avril 2026</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">Rice Power</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/rice-power.png" alt="Rice Power — Yohan Thommerel">
|
|
</div>
|
|
<p class="card__author">Yohan Thommerel</p>
|
|
<p class="card__meta">Résidence au Shed - La maison à Maromme de 2024 à 2027</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">Hermine Bouvier</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/hermine-bouvier.png" alt="Hermine Bouvier">
|
|
</div>
|
|
<p class="card__author">dans la Project Room</p>
|
|
<p class="card__meta">Programme « Une chambre à soi »<br>au Shed - La maison à Maromme, 2025/2026</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">Arena</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/arena.png" alt="Arena — Combo Toys">
|
|
</div>
|
|
<p class="card__author">Combo Toys</p>
|
|
<p class="card__meta">Exposition au Shed - La maison à Maromme<br>du 7 février au 4 mars 2026</p>
|
|
</article>
|
|
|
|
</section>
|
|
|
|
<!-- Colonne droite : Actions publiques — défile plus lentement (parallax) -->
|
|
<section class="col col--right">
|
|
<h2 class="col__heading">Actions publiques</h2>
|
|
|
|
<div class="col__cards">
|
|
<article class="card">
|
|
<h3 class="card__title">Vide-matrices</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/vide-matrices.png" alt="Vide-matrices">
|
|
</div>
|
|
<p class="card__meta">
|
|
Du 9 au 11 avril 2026 de 14h à 18h<br>
|
|
les jeudis et vendredis de 10h à 18h le samedi<br>
|
|
Au Shed - La maison à Maromme
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">Appel à cueillir</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/appel-a-cueillir.png" alt="Appel à cueillir">
|
|
</div>
|
|
<p class="card__meta">
|
|
Du 9 au 11 avril 2026 de 14h à 18h<br>
|
|
les jeudis et vendredis de 10h à 18h le samedi<br>
|
|
Au Shed - La maison à Maromme
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">Danser au cœur<br>d'une exposition</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/danser.png" alt="Danser au cœur d'une exposition">
|
|
</div>
|
|
<p class="card__meta">
|
|
Samedi 28 mars 2026 de 9h30 à 11h30<br>
|
|
Au Shed - La maison à Maromme
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h3 class="card__title">Terres communes</h3>
|
|
<div class="card__media">
|
|
<img src="assets/images/bonus.png" alt="Terres communes">
|
|
</div>
|
|
<p class="card__meta">
|
|
Samedi 17 mai 2026 de 14h à 18h<br>
|
|
Atelier collectif en plein air<br>
|
|
Au Shed - La maison à Maromme
|
|
</p>
|
|
</article>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Rellax pour le parallax différentiel des colonnes (et plus tard des formes) -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>
|
|
<script src="formes-elementaires-data.js"></script>
|
|
<script src="objets2-data.js"></script>
|
|
<script src="objets2.js"></script>
|
|
<script src="objets.js"></script>
|
|
<script src="paysage.js"></script>
|
|
<script src="app.js"></script>
|
|
|
|
</body>
|
|
</html>
|