index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/styles.css">
  <title>Frontend Mentor | Component with sign up form</title>
</head>

<body>
  <div class="text-container">
    <h1 class="heading">Learn to code by watching others</h1>

    <p class="text">See how experienced developers solve problems in real-time. Watching scripted tutorials is great, 
    but understanding how developers think is invaluable.</p>
  </div>

  <div class="main-container">
    <a href="#" class="pricing-btn"><span class="seven-day-span">Try it free 7 days</span> then $20/mo. thereafter</a>

    <div class="form-container">
      <form class="sign-up-form" action="/">
        <div class="input-group">
          <label for="first-name" class="label"> First Name</label>
          <input name="first-name" id="first-name" type="text" class="input" placeholder="First Name">
          <p class="error-text">First Name cannot be empty</p>
        </div>
        <div class="input-group">
          <label for="last-name" class="label"> Last Name</label>
          <input name="last-name" id="last-name" type="text" class="input" placeholder="Last Name">
          <p class="error-text">Last Name cannot be empty</p>
        </div>
        <div class="input-group">
          <label for="email" class="label"> Email Address</label>
          <input name="email" id="email" type="email" class="input" placeholder="Email Address">
          <p class="error-text">Looks like this is not an email</p>
        </div>
        <div class="input-group">
          <label for="password" class="label"> Password</label>
          <input name="password" id="password" type="password" class="input" placeholder="Password">
          <p class="error-text">Password cannot be empty</p>
        </div>
        <button type="submit" class="form-btn">Claim your free trial</button> 

        <p class="disclaimer">By clicking the button, you are agreeing to our <a href="" class="terms">Terms and Services</a> </p>
      </form>
    </div>

    <footer>
      <p class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="http://github.com/anaharri">anaharri</a>.
      </p>
    </footer>
  </div>



  <script src="/scripts/app.js"></script>
</body>
</html>