index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Semester 1: Web Developer Training</title>
  </head>
  <body>
    <main class="container">
      <section class="row">
        <div class="col col-1">
          <img src="img/logo.svg" alt="company logo" />
          <p class="header-text">For Individuals</p>
          <p class="lead-text">
            Start benefiting from the wellness experience. For companies looking
            on increasing productivity, and improving organization wellness.
          </p>
          <p class="lead-text-2">
            Inspiring wholesome harmony for the mind, body and spirit, for
            everyone, everywhere.
          </p>
        </div>
        <div class="col col-2">
          <form action="">
            <div class="grid-container">
              <div class="grid-item grid-item-1">
                <label for="first-name">First Name</label>
                <input type="text" id="first-name" required />
              </div>
              <div class="grid-item grid-item-2">
                <label for="last-name">Last Name</label>
                <input type="text" id="last-name" required />
              </div>
              <div class="grid-item grid-item-3">
                <label for="gender">Gender</label>
                <select name="gender" id="gender" required>
                  <option value="" selected disabled>Select here</option>
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                  <option value="other">Other</option>
                  <option value="bobrisky">Prefer Not To Say</option>
                </select>
              </div>
              <div class="grid-item grid-item-4">
                <label for="dob">Date of Birth</label>
                <input type="date" id="dob" required />
              </div>
              <div class="grid-item grid-item-5">
                <label for="weight">Weight (KG)</label>
                <input
                  type="number"
                  id="weight"
                  placeholder="Enter weight here"
                />
              </div>
              <div class="grid-item grid-item-6">
                <label for="height">Height (CM)</label>
                <input
                  type="number"
                  id="height"
                  placeholder="Enter height here"
                />
              </div>
              <div class="grid-item grid-item-7">
                <label for="activity-level">Activity Level</label>
                <select name="activity-level" id="activity-level">
                  <option value="" selected disabled>Select here</option>
                  <option value="very-active">Very active</option>
                  <option value="moderately-active">Moderately active</option>
                  <option value="lightly-active">Lightly active</option>
                  <option value="sedentary">Sedentary</option>
                </select>
              </div>
              <div class="grid-item grid-item-8">
                <label for="password">Password</label>
                <input type="password" id="password" required />
              </div>
            </div>
            <div class="btn"><button>Register</button></div>
          </form>
          <div>
            <p>
              By clicking Register, you agree to our
              <a href="#">Terms of Use</a> and our
              <a href="#">Privacy Policy</a>.
            </p>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>