<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>

  <link rel="icon" type="image/x-icon" href="./static/user.svg">

  <link rel="stylesheet" href="styles/intro.css">
  <script src="./script.js" defer></script>

</head>
<body>

  <h3>*Hover On It*</h3>
  <div class="profile-card" onclick="navigateToNextPage()">
    <div class="status">Available To Work</div>
    <br>
    <h2 class="name">
      <img src="./static/user.svg" style="height: 20px; width: auto;" alt="Location Icon">
      StoreyedJoker72
    </h2>

    <p class="role"></p>I am a 
      <span style="color: #a29bfe; font-weight: bolder;">Developer</span>
    </p>


    <div class="tags">
      <span style="display: flex; align-items: center; gap: 5px;">
        <img src="./static/language.svg" style="height: 20px; width: auto;" alt="Language Icon">
        English & Hindi
      </span>

      <span style="display: flex; align-items: center; gap: 5px;">
        <img src="./static/location.svg" style="height: 20px; width: auto;" alt="Location Icon">
        India
      </span>

      <span style="display: flex; align-items: center; gap: 5px;">
        <img src="./static/calender.svg" style="height: 20px; width: auto;" alt="Calender Icon">
        15 y/o
      </span>

      <span style="display: flex; align-items: center; gap: 5px;">
        <img src="./static/electronics.svg" style="height: 20px; width: auto;" alt="Electronics Icon">
        Electronics
      </span>

    </div>

    <div class="hover-text" id="hoverText">*Click Me*</div>

  </div>
</body>
</html>
