<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="master.css" />
  <title>Registration Form</title>
  <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet" />
</head>

<body style="background-color: lightblue">
  <center>
    <i>
      <h2>Welcome !</h2>
    </i>
    <i>
      <h4>Please enter your data here.</h4>
    </i>
  </center>
  <hr />
  <form method="post" target="_blank">
    <div>
      <ul class="ul1">
        <li class="li1">
          <input type="email" required placeholder="Email" value="your_email@gmail.com" name="email" autofocus />
        </li>
      </ul>
    </div>
    <div>
      <ul>
        <li class="li2">
          <input type="password" required placeholder="Password" name="Password" minlength="8" maxlength="20" />
        </li>
      </ul>
      <h5>
        <i>
          <p>!Type a complex password with 8-20 characters.</p>
        </i>
      </h5>
    </div>
    <div>
      <ul>
        <li class="li3">
          <input type="number" required placeholder="+20 Phone Number" name="Phone Number" />
        </li>
      </ul>
    </div>
    <hr />
    <h4>
      <i>
        <p>Enter your profession:</p>
      </i>
    </h4>
    <ul>
      <li class="li4">
        <input id="Student" type="radio" , name="Profession" value="Student" />
        <label for="Student">Student</label>
        <input id="Teacher" type="radio" , name="Profession" value="Teacher" />
        <label for="Teacher">Teacher</label>
        <input id="Developer" type="radio" , name="Profession" value="Developer" />
        <label for="Developer">Developer</label>
      </li>
    </ul>
    <label for="stage">Choose the stage if you are (student)</label>
    <select name="stage" id="stage">
      <optgroup label="Primary stage">
        <option value="first primary">first primary</option>
        <option value="second primary">second primary</option>
        <option value="third primary">third primary</option>
        <option value="Fourth primary">Fourth primary</option>
        <option value="Fifth primary">Fifth primary</option>
        <option value="sixth primary">sixth primary</option>
      </optgroup>
      <optgroup label="Preparatory stage">
        <option value="first preparatory">first preparatory</option>
        <option value="second preparatory">second preparatory</option>
        <option value="third preparatory">third preparatory</option>
      </optgroup>
      <optgroup label="Secondary stage">
        <option value="first secondary">first secondary</option>
        <option value="second secondary">second secondary</option>
        <option value="third secondary">third secondary</option>
      </optgroup>
    </select>
    <hr />
    <ul>
      <li class="li5">
        <label for="d">Enter your Birth date.</label>
        <input type="date" name="date" id="d" />
      </li>
    </ul>
    <hr />
    <div>
      <ul>
        <li class="li6">
          <input type="text" placeholder="Any notes" name="Nots" />
        </li>
      </ul>
    </div>
    <hr />
    <input type="submit" />
    <input type="reset" value="Reset" />
  </form>
  <br />
  <br />
  <br />
  <center>
    <font>
      <h6>
        <i>
          <p>Developed by @Thomas.</p>
        </i>
      </h6>
      <a href="https://github.com/ThomasDev82" target="_blank">
        <font>
          <h5><i>Github</i></h5>
        </font>
      </a>
    </font>
  </center>
</body>

</html>
body {
  font-family: "Work Sans", sans-serif;
  padding-left: 30px;
  padding-right: 30px;
}

.li1 {
  padding-left: 20px;
  list-style-image: url("sharp_arrow_right_black_24dp.png");
}
.li2 {
  padding-left: 20px;
  list-style-image: url("sharp_arrow_right_black_24dp.png");
}
.li3 {
  padding-left: 20px;
  list-style-image: url("sharp_arrow_right_black_24dp.png");
}
.li4 {
  padding-left: 20px;
  list-style-image: url("sharp_arrow_right_black_24dp.png");
}
.li5 {
  padding-left: 20px;
  list-style-image: url("sharp_arrow_right_black_24dp.png");
}
.li6 {
  padding-left: 20px;
  list-style-image: url("sharp_arrow_right_black_24dp.png");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.