20. Eine Galerie

Das Beste zum Schluss

Mentor Hiram Abif

Hiram blickt auf den Entwurf, dann auf dich. „Gut, das hier braucht eine saubere Struktur. Also legen wir los.“

Er nimmt ein Pergament und zeichnet eine grobe Skizze.
„Zuerst baust du einen großen Container. Der hält alles zusammen – sonst endet das hier in wilder Anarchie.“

Deine Aufgaben

  • Vergiss nicht die gesamte Sektion mit der id: gallery zu erstellen.
  • Füge die Überschrift Galerie und mehr im selben Stil wie bisher dazu.
  • Dann erst kommt der .gallery-container
  • Das Audio-file musst du später noch mit Morrigan bearbeiten, damit es auch richtig funktioniert.

img1 -> img/future/communication.jpg
img2 -> img/future/conversion.jpg
img3 -> media/mushroom-forest.mp4
img4 -> media/magic-book.mp4
img5 -> media/flame-greenwood.pdf
Icon: download
img6 -> img/future/new-ironspire.jpg
img7 -> media/night-whisper.mp3
Icons: play_circle, pause_circle
img8 -> img/heroes/gart.jpg

Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]

HTML
<section id="gallery">
     <h2 class="center"><span class="secondary bold">Galerie</span> und mehr</h2>
     <div class="container-large gallery-container">
          <div class="img1">
               <img src="img/future/communication.jpg" alt="" class="img-gallery">
          </div>
          <div class="img2">
               <img src="img/future/conversion.jpg" alt="" class="img-gallery">
          </div>
          <div class="img3">
               <video src="media/mushroom-forest.mp4" loop autoplay muted class="img-gallery"></video>
          </div>
          <div class="img4">
               <video src="media/magic-book.mp4" loop autoplay muted class="img-gallery"></video>
          </div>
          <div class="img5 center bg-highlight p-sm">
               <i class="material-icons-rounded">download</i><br>
               <a href="media/flame-greenwood.pdf" download class="btn">Lade den Flyer herunter</a>
          </div>
          <div class="img6">
               <img src="img/future/new-ironspire.jpg" alt="" class="img-gallery">
          </div>
          <div class="img7 center bg-highlight p-sm flex secondary">
               <h3 class="secondary">Musik gefällig?</h3>
               <audio id="myAudio">
                    <source src="media/night-whisper.mp3" type="audio/mpeg" loop controls>
                    Dein Browser unterstützt kein Audio-Tag.
               </audio>
          </div>
          <div class="img8">
               <img src="img/heroes/gart.jpg" alt="" class="img-gallery">
          </div>
     </div>
</section>
Nach oben scrollen