Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dare to Dream</title>
    <style>
      /* General Reset */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* Background Styling */
      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        max-width: 1440px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
      }

      /* Base styles for icons */
      .download,
      .notified,
      .yt,
      .ig,
      .spotify {
        position: absolute;
        z-index: 70;
        cursor: pointer;
        width: auto;
        height: auto;
      }

      /* Desktop Screens */
      @media (min-width: 1025px) {
        .download {
          bottom: 12%;
          left: 8%;
          width: 90px;
        }

        .notified {
          bottom: 12%;
          left: 22%;
          width: 90px;
        }

        .yt {
          bottom: 12%;
          right: 22%;
          width: 90px;
        }

        .ig {
          bottom: 12%;
          right: 15%;
          width: 90px;
        }

        .spotify {
          bottom: 12%;
          right: 8%;
          width: 90px;
        }
      }

      /* Tablets */
      @media (max-width: 1024px) {
        .download {
          bottom: 10%;
          left: 6%;
          width: 75px;
        }

        .notified {
          bottom: 10%;
          left: 22%;
          width: 75px;
        }

        .yt {
          bottom: 10%;
          right: 22%;
          width: 75px;
        }

        .ig {
          bottom: 10%;
          right: 14%;
          width: 75px;
        }

        .spotify {
          bottom: 10%;
          right: 6%;
          width: 75px;
        }
      }

      /* Mobile Screens */
      @media (max-width: 768px) {
        .download {
          bottom: 8%;
          left: 4%;
          width: 60px;
        }

        .notified {
          bottom: 8%;
          left: 24%;
          width: 60px;
        }

        .yt {
          bottom: 8%;
          right: 24%;
          width: 60px;
        }

        .ig {
          bottom: 8%;
          right: 14%;
          width: 60px;
        }

        .spotify {
          bottom: 8%;
          right: 4%;
          width: 60px;
        }
      }

      /* Small Phones */
      @media (max-width: 480px) {
        .download {
          bottom: -220%;
          left: 10%;
          width: 240px;
        }

        .notified {
          bottom: -260%;
          left: 11%;
          width: 240px;
        }

        .yt {
          bottom: -283%;
          left: 11%;
          width: 80px;
        }

        .ig {
          bottom: -283%;
          left: 37.5%;
          width: 80px;
        }

        .spotify {
          bottom: -283%;
          left: 63%;
          width: 80px;
        }
      }

      /* Responsive Image Handling */
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- <div class="image-wrapper">
        <img
          src="assets/bgimage.png"
          class="dtdbg"
          alt="DARE TO DREAM?"
          id="dtdbg" />
      </div> -->
    </div>
    <div class="container2">
      <img src="./assets/FULL_WEBPAGE_IMAGE.jpg" class="img" />
    </div>
    <img src="./assets/download.png" class="download" />
    <img src="./assets/notified.png" class="notified" />
    <img src="./assets/YT.png" class="yt" />
    <img src="./assets/IG.png" class="ig" />
    <img src="./assets/SPOTIFY.png" class="spotify" />

    <script>
      const image = document.getElementById("dtdbg");
      const body = document.body;

      image.addEventListener("click", () => {
        body.style.overflowY = "auto";

        image.classList.add("fly-up");

        setTimeout(() => {
          body.style.overflowY = "auto";
        }, 2000);
      });
    </script>
  </body>
</html>