<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Пропорция 16:9 */
    background: lightblue;
  }
</style>

const numbers = [1, 2, 3, 4, 5];

// Сумма всех чисел в массиве
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

<header>
  <h1>Мой блог</h1>
</header>
<section>
  <article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи...</p>
  </article>
</section>
<footer>
  <p>© 2024 Все права защищены</p>
</footer>

<div class="image-container">
  <img src="example.jpg" alt="Пример">
</div>

<style>
  .image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняет контейнер, обрезая края */
  }
</style>

const numbers = [1, 2, 3, 4];

// Сложение чисел с обходом справа налево
const sum = numbers.reduceRight((acc, num) => acc + num, 0);

console.log(sum); // 10

<img src="photo.jpg" alt="Фотография заката на пляже">

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<style>
  .box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    z-index: 1; /* Будет позади box2 */
  }

  .box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    left: 50px;
    z-index: 2; /* Отображается поверх box1 */
  }
</style>