1.Exigences techniques

Crée une page explicative complète et autonome en format Bootstrap 4 (compatible Bootstrap 5) et utilise uniquement des classes Bootstrap, aucun style inline. Les couleurs sont des classes bootstrap. Cette page sera intégrée dans Moodle et la hiérarchie des titres doit débuter avec une balise h3 afin d'assurer l'accessibilité. Tu ne dois pas générer de Jumbotron car Moodle possède déjà une entête.

Analyse le fichier en pièce jointe et remarque que :

La page doit systématiquement être constituée de :
- Un titre avec arrière plan coloré (alerte)
- Une zone de texte explicatif (carte border et shadow)
- Une vidéo explicative générée selon ce modèle : <div class="embed-responsive embed-responsive-16by9 video-container" data-tag-id="3"><iframe class="embed-responsive-item video" frameborder="0" title="" allowfullscreen="1" src="https://www.youtube.com/embed/WvljI0VIq-E?rel=0" data-tag-id="4"></iframe></div>
- Une zone interactive qui contient une image générique picsum (qui sera remplacée ultérieurement par l'image banana). Sous l'image, des boutons de qui révèlent des contenus (à la manière des onglets) en lien avec les informations de l'image.
- Une zone informative « Le savais-tu ? » (alerte info)

2.Exigences de contenu

Sujet : anatomie de l'oeil
Niveau : secondaire 3 (Québec)
Matière : Science et technologie.
Intention : Créer une fiche savoirs qui explique l'anatomie et les fonctions de l'oeil. L'élève doit reconnaitre les parties de l'oeil Il doit connaître la fonction de chaque partie de l'oeil.

Url de la vidéo explicative : https://www.youtube.com/watch?v=ij2gHg8SVr8

Informations de l'image : 
L'image contient ces repères qui identifient ces parties de l'oreille:
- Sclérotique
- Choroïde
- Cornée
- Iris
- Pupille
- Cristallin
- Corps vitré
- Tache aveugle
- Nerf optique
- Fovéa
- Rétine