Залік 4

<body>
  <header>
    <h1>Мій сайт</h1>
  </header>
</body>

<body>
  <nav>
    <ul>
      <li>Головна</li>
      <li>Контакти</li>
    </ul>
  </nav>
</body>

<body>
  <main>
    <section>...</section>
  </main>
</body>

<body>
  <article>
    <p>Текст новини...</p>
  </article>
</body>

<body>
  <article>
    <section>
      <h2>Послуги</h2>
      <p>Опис послуг...</p>
    </section>
    <section>
      <h2>Про нас</h2>
      <p>Опис...</p>
    </section>
  </article>
</body>

<body>
  <footer>
    <p>© 2025 Мій сайт</p>
  </footer>
</body>

<body>
  <audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Ваш браузер не підтримує аудіо.
  </audio>
</body>

<body>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Ваш браузер не підтримує відео.
  </video>
</body>

<style>
  body {
    background-color: lightblue;
  }

  @media (max-width: 600px) {
    body {
      background-color: pink;
    }
  }
</style>

<style>
  body {
    background-color: lightblue;
  }

  @media (min-width: 800px) {
    body {
      background-color: yellow;
    }
  }
</style>

<style>
  body {
    background-color: lightblue;
  }

  @media (min-width: 600px) and (max-width: 900px) {
    body {
      background-color: orange;
    }
  }
</style>

<head>
  <style>
  .scroll-box {
    width: 200px;
    height: 100px;
    overflow: scroll;
  }
  </style>
</head>
<body>
  <div> Дуже багато тексту… </div>
</body>

<style>
  .scroll-box::-webkit-scrollbar {
    width: 8px;
  }
</style>

<style>
  .scroll-box::-webkit-scrollbar-track {
    background: #eee;
  }
</style>

<style>
  .scroll-box::-webkit-scrollbar-thumb {
    background: orange;
    border-radius: 4px;
  }
</style>

<head>
  <style> 
    .first { animation: myscale 5s infinite linear; }
    .second { animation: myscale 5s infinite ease; }
    .third { animation: myscale 5s infinite ease-in; }
    .fourth { animation: myscale 5s infinite ease-out; }
    .fifth { animation: myscale 5s infinite ease-in-out; } 
  </style>
</head>
<body>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <div class="fifth"></div>
</body>

<head>
  <style> 
    .first { 
      animation: myscale 5s infinite linear; 
    }
    @keyframes myscale { 
      0% {  background-color: blue; } 
      100% { background-color: yellow; } 
    }
  </style>
</head>
<body>
  <div class="first"></div>
</body>

<head>
  <style> 
    .first { 
      animation: myscale 5s infinite linear; 
    }
    @keyframes myscale { 
      0% { transform: scale(0,0); } 
      100% { transform: scale(1,1); } 
    }
  </style>
</head>
<body>
  <div class="first"></div>
</body>

<head>
  <style> 
    .first { 
      animation: myscale 5s infinite linear; 
    }
    @keyframes myscale { 
      0% {  transform: rotate(0deg); } 
      100% {  transform: rotate(180deg); } 
    }
  </style>
</head>
<body>
  <div class="first"></div>
</body>

<head>
  <style> 
    .first { 
      animation: myscale 5s infinite linear; 
    }
    @keyframes myscale { 
      0% { transform: translate(0,0) translateX(80px); } 
      100% { transform: translate(50px,50px) translateY(80px); } 
    }
  </style>
</head>
<body>
  <div class="first"></div>
</body>

<head>
  <style> 
    .first { 
      animation: myscale 5s infinite linear;
      animation-delay: 1s; 
    }
    @keyframes myscale { 
      0% { transform: scale(0,0); } 
      100% { transform: scale(1,1); } 
    }
  </style>
</head>
<body>
  <div class="first"></div>
</body>

<head>
  <style> 
    .first { 
      width: 100px; 
      height: 100px; 
      background: red; 
      box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
    }
  </style>
</head>
<body>
  <div class="first"></div>
</body>