Picture sarjakuva

  1. Tee HTML sivu jossa käyttäen yhtä picture elementtiä luot (vähintään) 3 kuvan "sarjakuvan" jonka ruudut vaihtuvat selaimen ikkunan kokoa muuttaessa.
  2. Kuvien yhteenlaskettu koko tulee olla alle 1MB
  3. Luo kotikansioon kansio jonka nimi on sarjakuvan nimi (ota huomioon nimeämissäännöt)
  4. Laita luomasi HTML sivu (jonka nimi on index.html) ja sarjakuvan kuvat luomaasi kansioon
  5. Laita kotikansiosi etusivulle linkki sarjakuvaan.

Voit ottaa mallia seuraavasta. Voit lisätä source elementtejä sen mukaan kuinka monta ruutua sarjakuvassasi on, mutta huomioi että vaihdat max-widthin niin että ruudut näkyvät oikeassa järjestyksessä ikkunan koon mukaan.


<section>
  <picture>
      <source media="(max-width: 800px)" srcset="/img/pieni.jpg" />
      <source media="(max-width: 1024px)" srcset="/img/keskikoko.jpg" />
      <img src="/img/iso.jpg" title="Seinä tulee vastaan" />
  </picture>
</section>