<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

​

​

<section class="vh-100" style="background-color: #eee;">

  <div class="container h-100">

    <div class="row d-flex justify-content-center align-items-center h-100">

      <div class="col-lg-12 col-xl-11">

        <div class="card text-black" style="border-radius: 25px;">

          <div class="card-body p-md-5">

            <div class="row justify-content-center">

              <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">

​

                <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>

​

                <form class="mx-1 mx-md-4">

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="text" id="name" class="form-control" />

                      <label class="form-label" for="name">Your Name</label>

                    </div>

                  </div>

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="email" id="email" class="form-control" />

                      <label class="form-label" for="email">Your Email</label>

                    </div>

                  </div>

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="password" id="password" class="form-control" />

                      <label class="form-label" for="password">Password</label>

                    </div>

                  </div>

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-key fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="password" id="repet_password" class="form-control" />

                      <label class="form-label" for="repet_password">Repeat your password</label>

                    </div>

                  </div>

​

                  <div class="form-check d-flex justify-content-center mb-5">

                    <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" />

                    <label class="form-check-label" for="form2Example3">

                      I agree all statements in <a href="#!">Terms of service</a>

                    </label>

                  </div>

​

                  <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">

                    <button type="button" class="btn btn-primary btn-lg">Register</button>

                  </div>

​

                </form>

​

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

<section class="vh-100" style="background-color: #2779e2;">

  <div class="container h-100">

    <div class="row d-flex justify-content-center align-items-center h-100">

      <div class="col-xl-9">

​

        <h1 class="text-white mb-4">Apply for a job</h1>

​

        <div class="card" style="border-radius: 15px;">

          <div class="card-body">

​

            <div class="row align-items-center pt-4 pb-3">

              <div class="col-md-3 ps-5">

​

                <h6 class="mb-0">Full name</h6>

​

              </div>

              <div class="col-md-9 pe-5">

​

                <input type="text" class="form-control form-control-lg" />

​

              </div>

            </div>

 <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

  </div>

            <hr class="mx-n3">

​

            <div class="row align-items-center py-3">

              <div class="col-md-3 ps-5">

​

                <h6 class="mb-0">Email address</h6>

​

              </div>

              <div class="col-md-9 pe-5">

​

                <input type="email" class="form-control form-control-lg" placeholder="example@example.com" />

​

              </div>

            </div>

​

            <hr class="mx-n3">

​

            <div class="row align-items-center py-3">

              <div class="col-md-3 ps-5">

​

                <h6 class="mb-0">Full name</h6>

​

              </div>

              <div class="col-md-9 pe-5">

​

                <textarea class="form-control" rows="3" placeholder="Message sent to the employer"></textarea>

​

              </div>

            </div>

​

            <hr class="mx-n3">

​

            <div class="row align-items-center py-3">

              <div class="col-md-3 ps-5">

​

                <h6 class="mb-0">Upload CV</h6>

​

              </div>

              <div class="col-md-9 pe-5">

​

                <input class="form-control form-control-lg" id="formFileLg" type="file" />

                <div class="small text-muted mt-2">Upload your CV/Resume or any other relevant file. Max file

                  size 50 MB</div>

​

              </div>

            </div>

​

            <hr class="mx-n3">

​

            <div class="px-5 py-4">

              <button type="submit" class="btn btn-primary btn-lg">Send application</button>

            </div>

​

          </div>

        </div>

​

      </div>

    </div>

  </div>

</section>

<section class="vh-100" style="background-color: #eee;">

  <div class="container h-100">

    <div class="row d-flex justify-content-center align-items-center h-100">

      <div class="col-lg-12 col-xl-11">

        <div class="card text-black" style="border-radius: 25px;">

          <div class="card-body p-md-5">

            <div class="row justify-content-center">

              <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">

​

                <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>

​

                <form class="mx-1 mx-md-4">

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="text" id="form3Example1c" class="form-control" />

                      <label class="form-label" for="form3Example1c">Your Name</label>

                    </div>

                  </div>

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="email" id="form3Example3c" class="form-control" />

                      <label class="form-label" for="form3Example3c">Your Email</label>

                    </div>

                  </div>

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="password" id="form3Example4c" class="form-control" />

                      <label class="form-label" for="form3Example4c">Password</label>

                    </div>

                  </div>

​

                  <div class="d-flex flex-row align-items-center mb-4">

                    <i class="fas fa-key fa-lg me-3 fa-fw"></i>

                    <div class="form-outline flex-fill mb-0">

                      <input type="password" id="form3Example4cd" class="form-control" />

                      <label class="form-label" for="form3Example4cd">Repeat your password</label>

                    </div>

                  </div>

​

                  <div class="form-check d-flex justify-content-center mb-5">

                    <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" />

                    <label class="form-check-label" for="form2Example3">

                      I agree all statements in <a href="#!">Terms of service</a>

                    </label>

                  </div>

​

                  <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">

                    <button type="button" class="btn btn-primary btn-lg">Register</button>

                  </div>

​

                </form>

​

              </div>

              <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">

​

                <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"

                  class="img-fluid" alt="Sample image">

​

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>