23-random-user/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Person</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <!-- css -->
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div class="block bcg-black"></div>
    <div class="block">
      <div class="container">
        <img
          src="https://randomuser.me/api/portraits/men/75.jpg"
          alt="random user"
          class="user-img"
        />
        <p class="user-title">My name is</p>
        <p class="user-value">John Smith</p>
        <div class="values-list">
          <!-- Single Icon -->
          <button class="icon active" data-label="name">
            <span class="far fa-user"></span>
          </button>
          <!-- End of Single Icon -->

          <!-- Single Icon -->
          <button class="icon" data-label="email">
            <span class="far fa-envelope-open"></span>
          </button>
          <!-- End of Single Icon -->

          <!-- Single Icon -->
          <button class="icon" data-label="age">
            <span class="far fa-calendar-times"></span>
          </button>
          <!-- End of Single Icon -->

          <!-- Single Icon -->
          <button class="icon" data-label="street">
            <span class="far fa-map"></span>
          </button>
          <!-- End of Single Icon -->

          <!-- Single Icon -->
          <button class="icon" data-label="phone">
            <span class="fas fa-phone"></span>
          </button>
          <!-- End of Single Icon -->

          <!-- Single Icon -->
          <button class="icon" data-label="password">
            <span class="fas fa-user-lock"></span>
          </button>
          <!-- End of Single Icon -->
        </div>
        <button type="button" class="btn">random user</button>
      </div>
    </div>

    <!-- JavaScript -->
    <script type="module" src="./app.js"></script>
  </body>
</html>