Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="stylesheet.css" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"
    ></script>
    <title>Užduotėlė</title>
  </head>
  <body>
    <div class="container">
      <header><h1>Pavadinimas</h1></header>
        <div class="left-side">
          <i class="fas fa-home"></i>
          <i class="fas fa-network-wired"></i>
          <i class="fas fa-link"></i>
          <i class="fas fa-envelope"></i>
        </div>
        <div class="middle">
          <img class="logo" src="BG.svg" alt="Logo" />
          <div class="section section-1">
            <h1 class="heading">Antraštė 1</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur <a href="https://google.com">adipisicing</a> elit. Sit,
              distinctio? Provident incidunt tempora hic neque at enim veritatis
              dolorem ratione eum excepturi reiciendis in, porro ipsa blanditiis
              dolor asperiores cum amet modi delectus numquam nobis ea quae
              voluptates. Quidem veritatis aut molestias vel corporis ad
              quibusdam mollitia, unde rerum corrupti commodi repellat saepe
              quod delectus optio laudantium possimus provident cum, aliquid non
              ipsum sapiente doloremque distinctio. Quos doloribus deleniti
              possimus praesentium. Aut vero hic inventore eum, iste dolore eos
              ipsa illum earum quasi odit unde illo ullam atque ex aperiam fuga
              quae repellendus! Quidem qui nostrum labore molestiae optio
              assumenda perspiciatis. Obcaecati impedit iusto voluptate hic.
              Quis aliquid fugiat autem animi eveniet nam eius! Neque ducimus
              inventore fugiat eos error aperiam culpa enim, voluptates sunt
              minus architecto excepturi qui officiis iusto hic totam harum
              labore perferendis repellat consectetur repellendus! Laborum
              blanditiis nam inventore, saepe deleniti doloremque dolorem quia
              nobis tempora?
            </p>
            <video width="320" height="240" controls>
                    <source src="movie.mp4" type="video/mp4" />
                    <source src="movie.ogg" type="video/ogg" />
                    Your browser does not support the video tag.
                  </video>
            <img
              class="picture"
              src="https://source.unsplash.com/random/300x200?sig=121"
              alt=""
            />


          </div>

          <div class="section section-2">
            <h2 class="heading">Antraštė 2</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
              distinctio? Provident incidunt tempora hic neque at enim veritatis
              dolorem ratione eum excepturi reiciendis in, porro ipsa blanditiis
              dolor asperiores cum amet modi delectus numquam nobis ea quae
              voluptates. Quidem veritatis aut molestias vel corporis ad
              quibusdam mollitia, unde rerum corrupti commodi repellat saepe
              quod delectus optio laudantium possimus provident cum, aliquid non
              ipsum sapiente doloremque <a href="https://facebook.com">adipisicing</a>. Quos doloribus deleniti
              possimus praesentium. Aut vero hic inventore eum, iste dolore eos
              ipsa illum earum quasi odit unde illo ullam atque ex aperiam fuga
              quae repellendus! Quidem qui nostrum labore molestiae optio
              assumenda perspiciatis. Obcaecati impedit iusto voluptate hic.
              Quis aliquid fugiat autem animi eveniet nam eius! Neque ducimus
              inventore fugiat eos error aperiam culpa enim, voluptates sunt
              minus architecto excepturi qui officiis iusto hic totam harum
              labore perferendis repellat consectetur repellendus! Laborum
              blanditiis nam inventore, saepe deleniti doloremque dolorem quia
              nobis tempora?
            </p>
            <img
              class="picture"
              src="https://source.unsplash.com/random/300x200?sig=122"
              alt=""
            />
          </div>

          <div class="section section-3">
            <h3 class="heading">Antraštė 3</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
              distinctio? Provident incidunt tempora hic neque at enim veritatis
              dolorem ratione eum excepturi reiciendis in, porro ipsa blanditiis
              dolor asperiores cum amet modi delectus numquam nobis ea quae
              voluptates. Quidem veritatis aut molestias vel corporis ad
              quibusdam mollitia, unde rerum corrupti commodi repellat saepe
              quod delectus optio laudantium possimus provident cum, aliquid non
              ipsum sapiente doloremque distinctio. Quos doloribus deleniti
              possimus praesentium. Aut vero hic inventore eum, iste dolore eos
              ipsa illum earum quasi odit unde illo ullam atque ex aperiam fuga
              quae repellendus! Quidem qui nostrum labore molestiae optio
              <a href="https://youtube.com">adipisicing</a> perspiciatis. Obcaecati impedit iusto voluptate hic.
              Quis aliquid fugiat autem animi eveniet nam eius! Neque ducimus
              inventore fugiat eos error aperiam culpa enim, voluptates sunt
              minus architecto excepturi qui officiis iusto hic totam harum
              labore perferendis repellat consectetur repellendus! Laborum
              blanditiis nam inventore, saepe deleniti doloremque dolorem quia
              nobis tempora?
            </p>
            <img
              class="picture"
              src="https://source.unsplash.com/random/300x200?sig=123"
              alt=""
            />
          </div>

          <div class="section section-4">
            <h4 class="heading">Antraštė 4</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit
              odio officia modi aliquid adipisci laborum voluptates quas dolore
              tempora. Quo necessitatibus expedita quibusdam et illum
              exercitationem a natus tempore est, officia maxime deserunt vero!
              Quo temporibus provident corporis ea iusto aut nulla fugit eius,
              ex illum at nisi, exercitationem rem sint optio, nam dignissimos a
              porro error doloremque earum omnis? Illo repudiandae deserunt
              dignissimos excepturi eius, odio non culpa, placeat vitae possimus
              veritatis nulla adipisci dicta mollitia enim porro voluptas minus
              aliquid praesentium necessitatibus? Itaque quo nulla accusantium
              enim cum possimus explicabo similique commodi aut, atque non est
              incidunt optio placeat architecto dolores quia mollitia maiores
              quod adipisci a quae dolor assumenda. Error voluptatibus et,
              facilis nemo repudiandae suscipit aperiam, nesciunt perferendis
              nostrum dolor voluptate saepe explicabo dignissimos quas
              cupiditate dolores laudantium! Maiores similique sint adipisci ad
              quaerat laudantium nemo officiis, perferendis quisquam? Ullam
              molestiae architecto asperiores in accusamus inventore.
            </p>
            <audio controls>
                    <source src="horse.ogg" type="audio/ogg" />
                    <source src="horse.mp3" type="audio/mpeg" />
                    Your browser does not support the audio element.
                  </audio>
            <img
              class="picture"
              src="https://source.unsplash.com/random/300x200?sig=124"
              alt=""
            />


          </div>
          <div class="pictures-bottom">
            <img
              class="image"
              src="https://source.unsplash.com/random/300x200?sig=125"
              alt=""
            />
            <img
              class="image"
              src="https://source.unsplash.com/random/300x200?sig=126"
              alt=""
            />
            <img
              class="image"
              src="https://source.unsplash.com/random/300x200?sig=127"
              alt=""
            />


          </div>
          <button class="return">Grąžinti paveiksliukus</button>
        </div>
        <div class="right-side">
          <ul>
            <li>Studentė Brigita Grinytė</li>
            <li>2019</li>
            <li>Namų darbas</li>
          </ul>
        </div>
      </main>
    </div>
    <script>
      $("p").click(function() {
        $(this).addClass("pulse");
      });

      $(".picture").click(function() {
        $(this).css("transform", "scale(1.5)");
      });

      $(".image").click(function() {
        $(this).fadeOut();
      });

      $(".return").click(function() {
        $(".image").fadeIn();
      });
    </script>
  </body>
</html>