{% extends 'shapeprint_app/base.html' %} {% block body %} {% load static %}

<section class="signup-wrapper-section">
  <div class="container">
    <div class="card sign-up-form">
      <div class="legend title-text">
        <h4>Personal Details </h4>
        <hr />
      </div>
      <form action="">
        <div class="row" style="border-bottom: 1px solid #c5c5c5">
          <div
            class="col-xs-12 col-sm-8 col-md-8"
            style="border-right: 1px solid #c5c5c5"
          >
            <div class="formSection">
              <div class="formSectionTitle">
                <div class="txt">Personal details</div>
                <div class="line"></div>
              </div>
              <div class="form-group">
                <label>Title*</label>
                <select class="form-control">
                  <option value="100">please select</option>
                  <option value="120">Ms</option>
                  <option value="110">Mr</option>
                </select>
                <div class="message d-none">
                  <div>Please select a title.</div>
                </div>
              </div>
              <div class="form-group">
                <label>First name*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please enter your first name.</div>
                </div>
              </div>
              <div class="form-group">
                <label>Surname*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please enter your surname.</div>
                </div>
              </div>

              <div class="form-group">
                <label>House no., Street*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please enter your house no. and street.</div>
                </div>
              </div>
              <div class="form-group">
                <label>Postcode*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please enter a valid postcode.</div>
                </div>
              </div>
              <div class="form-group">
                <label>Town*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please enter your town.</div>
                </div>
              </div>
              <div class="form-group">
                <label>Telephone no.*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please enter a valid telephone number.</div>
                </div>
              </div>
              <div class="form-group empfehlungsquelleDiv">
                <label>How did you hear about us?</label>
                <select class="form-control">
                  <option value="0">please select</option>
                  <option value="26">Online Banner</option>
                  <option value="15">Magazine/Press</option>
                  <option value="13">External Website Links</option>
                  <option value="14">Social Media (Facebook, etc.)</option>
                  <option value="27">TV/Radio</option>
                  <option value="18">Sport Sponsoring</option>
                  <option value="25">Direct Mail</option>
                  <option value="5">Recommendation</option>
                  <option value="4">Search Engines (Google, etc)</option>
                  <option value="7">Other</option>
                </select>
                <div class="message d-none">
                  <div>How did you hear about us?</div>
                </div>
              </div>
            </div>
            <div class="formSection">
              <div class="formSectionTitle">
                <div class="txt">Login information</div>
                <div class="line"></div>
              </div>
              <div class="form-group">
                <label>Email address*</label>
                <input type="email" class="form-control" />
                <div class="message d-none">
                  <div>Please enter your email address.</div>
                </div>
              </div>
              <div class="form-group">
                <label>Repeat email address*</label>
                <input type="text" class="form-control" />
                <div class="message d-none">
                  <div>Please repeat your email address.</div>
                </div>
              </div>
              <div class="form-group">
                <label
                  >User name*<span style="font-size: smaller"
                    >(3 -20 characters)</span
                  ></label
                >
                <input maxlength="20" class="form-control" />
                <div class="message d-none">
                  <div>
                    Please choose an individual user name, 3 to 20 characters
                    (letters and numbers, no symbols).
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label
                  >Password*
                  <span style="font-size: smaller"
                    >(at least 8 characters)</span
                  ></label
                >
                <input type="password" maxlength="20" class="form-control" />
                <div class="message d-none">
                  <div>
                    <span class="bold"
                      >Please note that your new secure password must
                      contain:</span
                    >
                    <br />
                    <br />
                    <ul>
                      <li class="ok2">at least 8 characters</li>
                      <li class="ok2">at least 1 upper and 1 lower case</li>
                      <li class="ok2">
                        a password different from your username
                      </li>
                    </ul>
                    <div class="clear">&nbsp;</div>
                    <br />
                    <p>
                      Your password must not contain spaces.<br />
                      Maximum number of characters is 20.
                    </p>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>Repeat password*</label>
                <input type="password" class="form-control" />
                <div class="message d-none">
                  <div>Please repeat your password.&nbsp;</div>
                </div>
              </div>
              <div class="form-check">
                <input
                  type="checkbox"
                  class="form-check-input"
                  id="rememberme"
                />
                <label class="form-check-label" for="rememberme"
                  >Remember me</label
                >
              </div>
            </div>
          </div>
        </div>
        <div class="row justify-content-between m-0 mt-4">
          <div class="gobackbtn">
            <span class="fa fa-chevron-left"></span>
            <a href="#" class="btn btn-mastery btn-outline">Back</a>
          </div>
          <div class="submitbtn">
            <button type="submit" class="btn btn-mastery">Register</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

{% endblock body %}