Website: The gallery

20. A Gallery

The best for last

Mentor Hiram Abif

Hiram looks at the draft, then at you.
“Alright. This one needs a clean structure. So let’s get to it.”

He grabs a piece of parchment and sketches a rough outline. “First, you build a large container. It holds everything together —
otherwise this turns into wild anarchy.”

Your task

Don’t forget to create the entire section with the ID: gallery.
Add the headline Gallery and More – styled just like the others.
Only after that comes the .gallery-container.
The audio file will still need a bit of tweaking with Morrigan – to make sure it works just right.

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

Solve the task here in the console [–> Open in a new tab]

HTML

<section id="gallery">
     <h2 class="center"><span class="secondary bold">Gallery</span> and more</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">Download the flyer</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">Fancy some music?</h3>
               <audio id="myAudio">
                    <source src="media/night-whisper.mp3" type="audio/mpeg" loop controls>
                    Your browser does not support the audio tag.
               </audio>
          </div>
          <div class="img8">
               <img src="img/heroes/gart.jpg" alt="" class="img-gallery">
          </div>
     </div>
</section>