Annuaire › Code ouvert
Code publié par son auteur, en lecture seule. « Copier dans mon espace » crée un nouveau site à vous (non publié) que vous pouvez modifier librement.
pages/actions.html · 4.0 Ko
<!DOCTYPE html>
<!--
=====================================================================
pages/actions.html : page « Nos actions »
=====================================================================
Rôle : présente les trois grandes actions de l'association.
Ce fichier est dans le sous-dossier pages/ : pour atteindre les
fichiers de la racine, on remonte d'un niveau avec « ../ ».
../css/style.css = css/style.css à la racine
../medias/xxx.svg = medias/xxx.svg à la racine
../index.html = page d'accueil
agenda.html = fichier voisin, dans le même dossier pages/
Voir ../index.html pour les explications générales (picture, lien
d'évitement...). Ici, on commente surtout ce qui est nouveau.
-->
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nos actions – Antalaha Propre</title>
<meta name="description" content="Les actions d'Antalaha Propre : nettoyage des plages, tri des déchets et ateliers dans les écoles.">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/impression.css" media="print">
</head>
<body>
<a class="lien-evitement" href="#contenu">Aller au contenu principal</a>
<header class="entete">
<div class="entete__interieur">
<a class="entete__nom" href="../index.html">Antalaha Propre</a>
<nav class="nav" aria-label="Navigation principale">
<ul class="nav__liste">
<li><a href="../index.html">Accueil</a></li>
<!-- Ici, c'est la page « Actions » qui est courante. -->
<li><a href="actions.html" aria-current="page">Actions</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main id="contenu" tabindex="-1">
<h1>Nos actions</h1>
<p class="chapeau">Trois façons concrètes d'agir pour la baie.</p>
<ul class="cartes">
<!-- Images sous la ligne de flottaison (il faut défiler pour les
voir) : loading="lazy" = chargées seulement quand on s'en
approche. width/height : réservent la place (ratio 16:9). -->
<li class="carte">
<img src="../medias/antalaha-baie-aube-paysage.svg" width="1600" height="900" loading="lazy"
alt="La baie d'Antalaha à l'aube, avec des pirogues">
<div class="carte__corps">
<h2>Nettoyage des plages</h2>
<p>Chaque premier samedi du mois, nous ramassons les déchets
sur le littoral. Matériel fourni, enfants bienvenus.</p>
</div>
</li>
<li class="carte">
<img src="../medias/antalaha-ville-collines-paysage.svg" width="1600" height="900" loading="lazy"
alt="La ville d'Antalaha et ses collines, vues depuis la baie">
<div class="carte__corps">
<h2>Tri et collecte en ville</h2>
<p>Nous installons des bacs de tri dans les quartiers et
accompagnons les commerçants du marché.</p>
</div>
</li>
<li class="carte">
<img src="../medias/antalaha-ravenala-portrait.svg" width="900" height="1600" loading="lazy"
alt="Des arbres du voyageur (ravenalas), symbole de la nature d'Antalaha">
<div class="carte__corps">
<h2>Ateliers dans les écoles</h2>
<p>Jeux et ateliers pour apprendre aux enfants à protéger
la nature qui les entoure.</p>
</div>
</li>
</ul>
<!-- Remarque : la 3e image est en portrait (900x1600) mais le CSS
(.carte img : aspect-ratio 16/9 + object-fit: cover) la recadre
dans un rectangle paysage, comme les autres. -->
<p><a class="bouton" href="agenda.html">Voir les prochaines dates</a></p>
</main>
<footer class="pied">
<p>Antalaha Propre, association fictive créée pour ce tutoriel HTML/CSS.</p>
<p>Illustrations libres de droits de la médiathèque du Portail Antalaha.</p>
</footer>
</body>
</html>