contact.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <header>
      <div class="navbar-container">
        <h1 id="nav-title">Frontend Dev</h1>
        <!--Homepage-->
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Me</a></li>
            <li><a href="#" class="active">Contact</a></li>
            <li><a href="skills.html">Skills</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!--Contact Us-->
    <div class="hero">
      <h1>Contact us 📱</h1>
      <img class="manimg" src="manimg.svg" alt="man with laptop" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem vel
        consequatur, animi dignissimos distinctio doloremque reprehenderit
        assumenda eum explicabo dolores odit dolorem laudantium amet dolorum
        corrupti rerum non quadrat optio!
      </p>

      <form>
        <label for="name">Enter your name: </label>
        <input type="text" required /> <br />

        <label for="email">Enter your Email: </label>
        <input type="text" required id="emailInput" /> <br />

        <label for="msg">Message:</label>
        <input type="text" required id="message-box" /> <br />

        <div class="form-btn">
          <button type="submit" onclick="validateEmail()">Submit</button>
          <button type="reset">Reset</button>
        </div>
      </form>
    </div>

    <script type="module" src="main.js"></script>
  </body>
</html>