## Goal
Create an engaging multimedia experience for the website visitors by incorporating both audio and video content.

## Task
Take the website to the next level by immersing users in a captivating multimedia experience. Your task is to:

**For the audio**: embed an audio file that provides a soothing atmosphere for users to relax. Use the following link for the audio:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea
        class="text-field"
        id="Your id"
        style="height: 70px; max-width: 100%"
      >
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3</textarea
      >
      
      <button
        class="copy-button"
        onclick="handleClick('Your id', 'widget1-notify')"
      >
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

**For the video**: integrate a video that lets users enjoy the beauty of nature creatures. Use the following link for the video:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea
        class="text-field"
        id="Your id"
        style="height: 70px; max-width: 100%"
      >
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4</textarea
      >
      
      <button
        class="copy-button"
        onclick="handleClick('Your id', 'widget1-notify')"
      >
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Add playback controls like play and pause.<br>
Add file types.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXVsdGltZWRpYTwvaDE+CiAgICAgIDxwPkVuam95IHRoZSBhdWRpbyBhbmQgdmlkZW8gY29udGVudCBiZWxvdyE8L3A+CiAgICA8L2hlYWRlcj4KCiAgICA8c2VjdGlvbj4KICAgICAgPGRpdj4KICAgICAgICA8IS0tIEluc2VydCBhdWRpbyBmaWxlIC0tPgogICAgICAgIDxfX18gX19fPgogICAgICAgICA8c291cmNlIHNyYz0iX19fIiB0eXBlPSJfX18iIC8+CiAgICAgICAgPC9fX18+CiAgICAgIDwvZGl2PgogICAgPC9zZWN0aW9uPgoKICAgIDxzZWN0aW9uPgogICAgICA8ZGl2PgogICAgICAgIDwhLS0gSW5zZXJ0IHZpZGVvIGZpbGUgLS0+CiAgICAgICAgPF9fXyBfX18+CiAgICAgICAgIDxzb3VyY2Ugc3JjPSJfX18iIHR5cGU9Il9fXyIgLz4KICAgICAgICA8L19fXz4KICAgICAgPC9kaXY+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICJBcmlhbCIsIHNhbnMtc2VyaWY7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKfQoKaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiAjZmZmOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4IDA7Cn0KCnNlY3Rpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Owp9CgpkaXYgewogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDVweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKfQoKYXVkaW8gewogIGJvcmRlci1yYWRpdXM6IDEwcHg7Cn0KCnZpZGVvIHsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKfQ==

1. Use the `audio` tag to specify an audio element.
2. Use the `video` tag to specify a video element.
3. Use the `controls` attribute to allow users to manage the audio or video playback.
4. Use the `src` attribute to specify the file's location. Ensure accurate copying of links from the task.
5. Use `type="audio/mp3"` to specify the correct file type for the audio.
6. Use `type="video/mp4"` to specify the correct file type for the video.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXVsdGltZWRpYTwvaDE+CiAgICAgIDxwPkVuam95IHRoZSBhdWRpbyBhbmQgdmlkZW8gY29udGVudCBiZWxvdyE8L3A+CiAgICA8L2hlYWRlcj4KCiAgICA8c2VjdGlvbj4KICAgICAgPGRpdj4KICAgICAgICA8IS0tIEF1ZGlvIGZpbGUgLS0+CiAgICAgICAgPGF1ZGlvIGNvbnRyb2xzPgogICAgICAgICAgPHNvdXJjZQogICAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS91bHRpbWF0ZS1odG1sL21lZGlhK2FuZCt0YWJsZXMvanVzdC1yZWxheC1hdWRpby5tcDMiCiAgICAgICAgICAgIHR5cGU9ImF1ZGlvL21wMyIKICAgICAgICAgIC8+CiAgICAgICAgPC9hdWRpbz4KICAgICAgPC9kaXY+CiAgICA8L3NlY3Rpb24+CgogICAgPHNlY3Rpb24+CiAgICAgIDxkaXY+CiAgICAgICAgPCEtLSBWaWRlbyBmaWxlIC0tPgogICAgICAgIDx2aWRlbyBjb250cm9scz4KICAgICAgICAgIDxzb3VyY2UKICAgICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdWx0aW1hdGUtaHRtbC9tZWRpYSthbmQrdGFibGVzL3RpZ2VyLXZpZGVvLm1wNCIKICAgICAgICAgICAgdHlwZT0idmlkZW8vbXA0IgogICAgICAgICAgLz4KICAgICAgICA8L3ZpZGVvPgogICAgICA8L2Rpdj4KICAgIDwvc2VjdGlvbj4KICA8L2JvZHk+CjwvaHRtbD4=

Learn the essentials of HTML (HyperText Markup Language), the foundation of web development. This beginner-friendly course covers tags, attributes, elements, and structuring web pages. Gain practical skills in creating headings, paragraphs, lists, images, links, forms, and tables. Explore best practices, optimization, and web accessibility. Start your web development journey with HTML.

Explore the inner workings of the web. Learn how data travels across networks, discover the role of protocols, and unravel the mysteries of IP addresses and domain names. Gain a high-level understanding of how web browsers and servers communicate to deliver web content.

Discover the power of tags to structure content, from headings and paragraphs to lists and tables. Learn how to enhance the elements with attributes.

The core of HTML document structure. Learn the components of an HTML document, including the doctype declaration, head, and body. Understand the purpose of each element and how they contribute to the overall structure of a webpage.

Make a web page more appealing with the help of media such as images, audio, and video. Work with structured tabular data in the form of tables.

Explore the versatility of HTML forms. Learn to design intuitive and user-friendly forms by leveraging key concepts and techniques. Discover how forms enable user interaction and data submission on websites. 

Ultimate HTML

Challenge: Audio and Video

Goal

Task