index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File Upload with Progress Bar | CodingNepal</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main style="padding: 2rem">
      <form action="#" class="quick_file_up__form">
        <input class="quick_file_up__input" type="file" name="file" />
        <p class="quick_file_up__text">Browse File to Upload</p>
      </form>

      <hr style="margin: 2rem 0" />

      <form action="#" class="another">
        <div
          class="hidden_area"
          style="
            background-color: #3d3a3a;
            max-width: 300px;
            height: 100px;
            cursor: pointer;
            border-radius: 10px;
            border: 2px dashed #8a8787;
          "
        >
          <input type="file" name="file" class="another_input" hidden />
        </div>
      </form>
    </main>

    <script src="script.js"></script>
  </body>
</html>