Discover.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quick Quiz</title>
    
    <link rel="stylesheet" href="about.css" />
    <style>
     /* Common styles for both mobile and desktop */
body {
    background-color: black;
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 30%;
    background-color: black;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    color: aliceblue;
    font-size: 20px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    div.gallery {
        width: 100%;
        margin: 5px 0;
    }

    div.desc {
        font-size: 16px;
    }
}

/* Desktop responsiveness */
@media (min-width: 769px) {
    div.gallery {
        width: 30%;
    }
}

        </style>
  </head>
  <body>
    <div class="navbar"> 
     
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="quizz.html">Quizz</a></li>
          <li><a href="about.html">About</a></li>
          <audio src="Avengers Suite (Theme).mp3" autoplay loop></audio>
         
      </ul>
      
  </div>
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Tony_Stark_(Marvel_Cinematic_Universe)">
      <img src="tony.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">  Tony Stark (Ironman)  </div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Captain_America">
      <img src="captain.gif" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Captain America</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Thor_(Marvel_Comics)">
      <img src="thor.webp" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Thor A.K.A god of Thunder</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Captain_Marvel_(film)">
      <img src="captainmarvel.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Captain Marvel</div>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Black_Widow_(Marvel_Comics)">
      <img src="blackwidow.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Black Widow</div>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Hawkeye_(Clint_Barton)">
      <img src="hawkeye.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Hawkeye (Clint Barton)</div>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Loki_(Marvel_Cinematic_Universe)">
      <img src="loki.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Loki</div>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Hulk">
      <img src="200.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Hulk</div>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Black_Panther_(film)">
      <img src="tchala.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Black Panther</div>
  </div><div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Nick_Fury_(Marvel_Cinematic_Universe)">
      <img src="nickfury.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Nick_Fury</div>
  </div><div class="gallery">
    <a target="_blank" href="https://www.marvel.com/characters/ultron">
      <img src="ultron.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Ultron</div>
  </div><div class="gallery">
    <a target="_blank" href="https://www.marvel.com/characters/vision">
      <img src="vision.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Vision</div>
  </div><div class="gallery">
    <a target="_blank" href="https://www.marvel.com/characters/thanos">
      <img src="Thanos.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Thanos</div>
  </div><div class="gallery">
    <a target="_blank" href="https://avengers.marvelhq.com/characters/falcon">
      <img src="falcon.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Falcon</div>
  </div><div class="gallery">
    <a target="_blank" href="https://marvelcinematicuniverse.fandom.com/wiki/Quicksilver">
      <img src="quicksilver.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Quicksilver</div>
  </div><div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Scarlet_Witch">
      <img src="scalet.gif" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Scarlet_Witch</div>
  </div><div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/Odin_(Marvel_Comics)">
      <img src="odin.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Odin</div>
  </div><div class="gallery">
    <a target="_blank" href="https://www.marvel.com/characters/winter-soldier-bucky-barnes">
      <img src="wintersoldier.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">winter-soldier-bucky-barnes</div>
  </div><div class="gallery">
    <a target="_blank" href="https://marvels-avengers.fandom.com/wiki/Spider-Man">
      <img src="spiderman.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Spider-Man</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="Red-Skull.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Red-Skull</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="Rocket.webp" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Rocket</div>
  </div><div class="gallery">
    <a target="_blank" href="https://en.wikipedia.org/wiki/War_Machine#:~:text=War%20Machine%20%28James%20Rupert%20%22%20Rhodey%20%22%20Rhodes%29,%28January%201979%29%20by%20David%20Michelinie%20and%20John%20Byrne.">
      <img src="warmachine.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">War Machine</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="Shuri.webp" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Shuri</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="strange.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Doctor Strange</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="groot.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Groot</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="peterqull.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Peter Quill</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="gamorah.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Gamorah</div>
  </div><div class="gallery">
    <a target="_blank" href="">
      <img src="nabula.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Nabula</div>
  </div>
</div><div class="gallery">
  <a target="_blank" href="">
    <img src="antman.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">AntMan</div>
</div><div class="gallery">
  <a target="_blank" href="">
    <img src="groot.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Groot</div>
  </body>
</html>