olabamipetaiwo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> LearnWorld --- Get Started</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        }

        *,
        *::before,
        *::after {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        }

        html {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 62.5%;
        }

        @media only screen and (min-width: 112.5em) {
        html {
            font-size: 75%;
        }
        }

        @media only screen and (max-width: 75em) {
        html {
            font-size: 56.25%;
        }
        }

        @media only screen and (max-width: 56.25em) {
        html {
            font-size: 50%;
        }
        }

        @media only screen and (max-width: 37.5em) {
        html {
            font-size: 40%;
        }
        }

        body {
        position: relative;
        font-size: 1.6rem;
        }

        @media only screen and (min-width: 112.5em) {
        body {
            font-size: 75%;
        }
        }

        @media only screen and (max-width: 75em) {
        body {
            font-size: 56.25%;
        }
        }

        @media only screen and (max-width: 56.25em) {
        body {
            font-size: 50%;
        }
        }

        @media only screen and (max-width: 37.5em) {
        body {
            font-size: 40%;
        }
        }

        body {
        font-weight: 400;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        width: 100%;
        height: 100vh;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        }

        nav {
        position: fixed;
        top: 0;
        left: 0;
        background-color: transparent;
        width: 100%;
        height: 5rem;
        z-index: 5;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        }

        nav .logo {
        position: absolute;
        top: 1rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        }

        nav .nav-item {
        position: absolute;
        top: 1rem;
        right: 5%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        }

        nav .nav-item a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        }

        nav .nav-item a:first-child {
        margin-right: 1rem;
        }

        nav a {
        font-size: 1.5rem;
        font-weight: bold;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        color: #0F1B3A;
        -webkit-transition: all .2s;
        transition: all .2s;
        }

        @media only screen and (max-width: 48em) {
        nav a {
            color: #ffffff;
        }
        }

        nav a:hover {
        color: #FE4777;
        text-decoration: none;
        }

        .container-fluid, .row {
        margin: 0;
        padding: 0;
        }

        .container-fluid *, .row * {
        margin: 0;
        padding: 0;
        }

        .main {
        height: 100%;
        }

        .info {
        background-color: #0F1B3A;
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        }

        @media only screen and (max-width: 48em) {
        .info {
            height: 50vh;
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        }

        .info h2 {
        font-size: 2.4rem;
        font-weight: bold;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        text-transform: uppercase;
        text-align: center;
        color: #ffffff;
        }

        .info h2 span {
        color: #FE4777;
        }

        .info figure {
        width: 50%;
        height: 50%;
        margin-bottom: 1rem;
        }

        .info figure img {
        width: 100%;
        height: 100%;
        }

        .form__box {
        height: 100vh;
        background-color: #f8f8f8;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        }

        @media only screen and (max-width: 48em) {
        .form__box {
            height: 50vh;
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        }

        .form__box .tab-1, .form__box .tab-2, .form__box .tab-3 {
        -ms-flex-preferred-size: 70%;
            flex-basis: 70%;
        background-color: transparent;
        display: none;
        opacity: 0;
        -webkit-transform: scale(0.8) translateX(-7rem) translateY(-7rem);
                transform: scale(0.8) translateX(-7rem) translateY(-7rem);
        -webkit-transition: all 700ms cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 700ms cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .form__box .tab-1.fade-in, .form__box .tab-2.fade-in, .form__box .tab-3.fade-in {
        -webkit-transform: scale(1) translateX(0) translateY(0);
                transform: scale(1) translateX(0) translateY(0);
        opacity: 1;
        }

        .form__box .tab-1.block, .form__box .tab-2.block, .form__box .tab-3.block {
        display: block;
        }

        .form__box .tab-2 .choose {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        }

        .form__box .tab-2 .choose h1 {
        margin-bottom: 2rem;
        }

        .form__box .tab-2 .choose form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        }

        .form__box .tab-2 .choose .role-radio.left {
        margin-right: 5rem;
        }

        .form__box .tab-2 .choose .role-radio input {
        width: 0;
        height: 0;
        display: none;
        }

        .form__box .tab-2 .choose .role-radio input:checked + label figure {
        border: 2px solid #0F1B3A;
        -webkit-transform: scale(1);
                transform: scale(1);
        }

        .form__box .tab-2 .choose .role-radio input:checked + label span {
        color: #0F1B3A;
        }

        .form__box .tab-2 .choose .role-radio label {
        -webkit-transition: border-color .15s ease-out,background-color .15s ease-out, -webkit-box-shadow .15s ease-out;
        transition: border-color .15s ease-out,background-color .15s ease-out, -webkit-box-shadow .15s ease-out;
        transition: border-color .15s ease-out,background-color .15s ease-out, box-shadow .15s ease-out;
        transition: border-color .15s ease-out,background-color .15s ease-out, box-shadow .15s ease-out,-webkit-box-shadow .15s ease-out;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        }

        .form__box .tab-2 .choose .role-radio label span {
        font-size: 2rem;
        font-weight: bold;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        padding-top: 1.5rem;
        }

        .form__box .tab-2 .choose .role-radio figure {
        width: 10rem;
        height: 10rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        padding: 1rem;
        }

        .form__box .tab-2 .choose .role-radio figure img {
        width: 100%;
        height: 100%;
        }

        .form__box .tab-3 .confirm {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        }

        .form__box .tab-3 .confirm .mb {
        margin-bottom: 1rem;
        }

        .form__box .tab-3 .confirm h1 {
        font-size: 2.4rem;
        font-weight: normal;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        color: #0F1B3A;
        }

        .form__box .tab-3 .confirm h1 span.chosenRole {
        font-weight: bold;
        }

        .form__box .tab-3 .confirm figure {
        width: 20rem;
        height: 20rem;
        margin-bottom: 1rem;
        }

        .form__box .tab-3 .confirm figure img {
        width: 100%;
        height: 100%;
        }

        .form__box .tab {
        width: 60%;
        height: 50%;
        }

        .form__box .tab h2 {
        font-size: 2.4rem;
        font-weight: bold;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        color: #0F1B3A;
        }

        .form__box .tab p {
        font-size: 1.4rem;
        font-weight: bold;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        text-align: center;
        color: #FE4777;
        }

        .form__box .tab form label {
        font-size: 1.2rem;
        font-weight: bold;
        color: #0F1B3A;
        }

        .form__box .tab form input {
        font-size: 1.2rem;
        padding: 1.2rem 1.5rem;
        border-radius: 5px;
        background-color: #f8f8f8;
        border: 1px solid #ebebeb;
        color: #0F1B3A;
        -webkit-transition: all .3s;
        transition: all .3s;
        }

        .form__box .tab form input:focus {
        outline: none;
        border: 2px solid #0F1B3A;
        }

        .form__box .tab form input:focus:invalid {
        border: 2px solid #FE4777;
        }

        .form__box .tab form input::-webkit-input-placeholder {
        color: #0F1B3A;
        }

        .form__box .tab form .form-row .checkbox {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        padding-left: 5px;
        }

        .form__box .tab form .form-row .checkbox input[type="checkbox"] {
        margin: 0;
        cursor: pointer;
        }

        .form__box .tab form .form-row .checkbox label {
        margin-left: 1rem;
        font-size: .8rem;
        min-height: 0;
        padding-left: 1rem;
        margin-bottom: 0;
        cursor: pointer;
        }

        .form__box .tab .control {
        margin-top: 1rem;
        margin-bottom: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        }

        .button {
        border: none;
        outline: none;
        width: 12rem;
        height: 5rem;
        color: #fff;
        background: #0F1B3A;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.5rem;
        font-weight: normal;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        cursor: pointer;
        -webkit-transition: all .2s;
        transition: all .2s;
        padding: 1rem 2rem;
        }

        .button:hover {
        background: rgba(15, 27, 58, 0.5);
        }

        .button:disabled {
        background: rgba(254, 71, 119, 0.2);
        }

        ul.parsley-errors-list {
        margin-top: .5rem;
        margin-bottom: .5rem;
        list-style: none;
        }

        ul.parsley-errors-list li {
        padding-top: .5rem;
        font-size: 1rem;
        -webkit-transition: all .2s;
        transition: all .2s;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        background-color: transparent;
        color: orangered;
        font-family: "Montserrat", "Ubuntu", sans-serif;
        padding-bottom: 0;
        }

        .loading {
        position: relative;
        background-color: rgba(15, 27, 58, 0.99);
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        -webkit-transition: all .7s;
        transition: all .7s;
        }

        .loading.loaded {
        opacity: 0;
        pointer-events: none;
        }

        .loading::after {
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(184, 179, 179, 0.482)), to(transparent));
        background: linear-gradient(90deg, transparent, rgba(184, 179, 179, 0.482), transparent);
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
        -webkit-animation: loading 1.5s;
                animation: loading 1.5s;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
                animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
        }

        @-webkit-keyframes loading {
        100% {
            -webkit-transform: translateX(100%);
                    transform: translateX(100%);
        }
        }

        @keyframes loading {
        100% {
            -webkit-transform: translateX(100%);
                    transform: translateX(100%);
        }
        }
    </style>
</head>
<body>
    <!-- Website Preloader -->
    <div class="loading">
    </div>
   <!-- Website Preloader -->
     <!-- Website Navigation Bar -->
      <nav >
          <!-- <div class="nav-item d-flex flex-row justify-content-end"> -->
              <a class="logo" href="index.html">
                  Learn
                  <span>World</span>
              </a>
          <!-- </div> -->
          <div class="nav-item">
              <a href="index.html">
                  Register
              </a>
              <a href="index.html">
                Login
              </a>
          </div>
      </nav>
   <!-- Website Navigation Bar -->
  <main class="main">
      <div class="container-fluid">
          <div class="row">
              <div class="col-md-5">
                  <div class="info">
                      <figure>
                          <img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816208/graphic1_lqli2o.svg">
                      </figure>
                      <h2>Get started quickly with our <br><span>flexible plans.</span></h2>
                  </div>
              </div>

              <div class="col-md-7">
                  <div class="form__box">

                              <!-- First Panel -->
                              <div class="tab tab-1">
                                  <h2 class="text-center text-uppercase">Register</h2>
                                  <p class="text-center mb-3">Fill in your basic details and get started</p>
                                  <div class="alert__box">
                                  </div>
                                  <form id="signupform" method="POST" data-parsley-validate="" >
                                          <div class="form-row mb-1">
                                              <div class="col">
                                                  <label class="mb-1">Email</label>
                                                  <input type="email"
                                                      name="email"
                                                      id="email"
                                                      class="form-control"
                                                      autocomplete="on"
                                                      data-parsley-trigger="blur"
                                                      placeholder="Email" required/>
                                              </div>
                                          </div>

                                          <div class="form-row mb-1">
                                              <div class="col">
                                                  <label>Password</label>
                                                  <input type="password"
                                                      name="password"
                                                      id="password"
                                                      autocomplete="on"
                                                      required
                                                      class="form-control"
                                                      placeholder="Password"
                                                      data-parsley-trigger="blur"
                                                      data-parsley-minlength="4"  />
                                              </div>
                                          </div>

                                          <div class="form-row mb-1">
                                              <div class="col">
                                                  <label>Confirm Password</label>
                                                  <input type="password"
                                                          name="cpassword"
                                                          id="cpassword"
                                                          class="form-control"
                                                          autocomplete="on"
                                                          required
                                                          data-parsley-trigger="blur"
                                                          data-parsley-equalto="#password"
                                                          placeholder="Password" />
                                              </div>
                                          </div>


                                      <div class="form-row">
                                          <div class="checkbox ">
                                              <input type="checkbox"
                                                      id="terms"
                                                      required
                                                      name="terms"
                                                      value="terms">
                                               <label class="small">I have read and agree to the terms presented in the Terms and Conditions agreement</label>
                                          </div>
                                      </div>

                                      <div class="control">
                                          <button class="button login" type="button" >Login</button>
                                          <button class="button" id="nextBtn" type="submit">Register</button>
                                      </div>
                                  </form>

                              </div>
                              <!-- End of panel 1 -->

                              <!-- Panel 2 -->
                                  <div class="tab tab-2 ">
                                      <div class="choose">
                                          <h1>You are registering as a</h1>
                                         <form class="d-flex">
                                          <div class="role-radio left">
                                              <input type="radio" name="role" value="Tutor" id="tutor"  />
                                              <label for="tutor">
                                                  <figure>
                                                      <img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816207/tutor_km1uxa.svg" alt="">
                                                  </figure>
                                                  <span>Tutor</span>
                                              </label>
                                          </div>

                                          <div class="role-radio">
                                          <input type="radio" name="role" value="Customer" id="customer" checked />
                                          <label for="customer">
                                              <figure>
                                                  <img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816207/user_jhfkmr.svg">
                                              </figure>
                                              <span>Customer</span>
                                          </label>
                                          </div>

                                      </form>
                                      <div class="control ">
                                          <button class="button" type="button" id="prevBtn">Previous</button>
                                          <button class="button" type="button" id="register">Next</button>
                                      </div>
                                      </div>
                                  </div>
                              <!-- End of Panel 2 -->

                              <!-- Panel 3 -->
                              <div class="tab tab-3 ">
                                  <div class="confirm">
                                    <h1 class="text-center mb">
                                        Congratulations for your succesful registration on our website as a <span class="chosenRole" id="chosenRole"></span>
                                     </h1>
                                     <figure>
                                         <img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816207/confirm_wsslxs.svg" alt="confirm" />
                                     </figure>
                                     <p class="text-center mb">If you are not redirected to your login page in 5 seconds,please click the button below</p>
                                     <button class="button login" type="button" >Login</button>
                                  </div>
                                </div>
                              <!-- End of Panel 3 -->
                      </div>
                  </div>

              </div>
          </div>
  </main>
    <script  src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
        //Preloader Handler Instruction 2
        window.addEventListener('load',function() {
            document.querySelector('.loading').classList.add('loaded');
        });


        $(document).ready(function(){
            //setting default role to customer
            let role = 'customer';

            //function to show relevant panel
            function showPanel(n) {
                $tab =  $('.tab-'+n);
                $tab.siblings().removeClass('block').removeClass('fade-in')
                $tab.addClass('block').outerWidth();
                $tab.addClass('fade-in');
            }

            //function to clear values
            function clearData() {
                $("#email").val('');
                $("#email").val('');
                role = '';
            }

            //Change role appropiately o click
            $('input[name=role]').click(function() {
                role = $(this).val();
            });


            //Form submission Handler
            $('#signupform').on('submit',function(e) {
                e.preventDefault();
                var ok = $('.parsley-error').length === 0;
                if(ok) {
                    showPanel(2);
                }else {
                    $('.alert__box').html(`
                        <div class="alert alert-danger text-center">
                            <strong class="text-center">Error!</strong> Please read the error messages carefully and make necessary changes.
                        </div>
                    `);
                }

            });

            //Transition to first panel
            $('#prevBtn').on('click',function() {
                showPanel(1);
            });

            //Handler for AJAX Call
            $('#register').on('click',function() {

                // Comment out block A to prevent success state
                // Start of Block A
                $('#chosenRole').text(role);
                showPanel(3);

                //Ons uccess,redirect to appropiate login page in 5seconds
                setTimeout(() => {
                    window.location.replace(`${role}/login.html`);
                },5000);
                //End of Block A

                // UnComment  block b to replicate error state
                // Start of Block B
                // var email =    $("#email").val();
                // var password = $("#password").val();

                // $.ajax({
                //     type: "POST",
                //     url: "server.php",
                //     data:{
                //         'type':'signup',
                //         'email':email,
                //         'password':password,
                //         'role':role
                //     },
                //     beforeSend: function(){
                //     },
                //     success:function (data) {
                //         $('#chosenRole').text(role)
                //         showPanel(3);
                //         setTimeout(() => {
                //             window.location.replace(`${role}/login.html`);
                //         },5000);
                //     },
                //     error: function (err) {
                //         $('.alert__box').html(`
                //             <div class="alert alert-danger text-center">
                //                 <strong class="text-center">Status Error: ${err.statusText}</strong>
                //                 ${err.responseText}
                //             </div>
                //         `);
                //         showPanel(1);
                //     }
                // });
                // End of Block B
            });

            $('.login').click(function() {
                clearData();
                let role = 'customer';
                window.location.replace(`${role}/login.html`);
            });

            //Show First Panel by default
            showPanel(1);
        });


    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> LearnWorld --- Get Started</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<style>
	* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

	*,
	*::before,
	*::after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	}

	html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	}

	@media only screen and (min-width: 112.5em) {
	html {
	font-size: 75%;
	}
	}

	@media only screen and (max-width: 75em) {
	html {
	font-size: 56.25%;
	}
	}

	@media only screen and (max-width: 56.25em) {
	html {
	font-size: 50%;
	}
	}

	@media only screen and (max-width: 37.5em) {
	html {
	font-size: 40%;
	}
	}

	body {
	position: relative;
	font-size: 1.6rem;
	}

	@media only screen and (min-width: 112.5em) {
	body {
	font-size: 75%;
	}
	}

	@media only screen and (max-width: 75em) {
	body {
	font-size: 56.25%;
	}
	}

	@media only screen and (max-width: 56.25em) {
	body {
	font-size: 50%;
	}
	}

	@media only screen and (max-width: 37.5em) {
	body {
	font-size: 40%;
	}
	}

	body {
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	height: 100vh;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	}

	nav {
	position: fixed;
	top: 0;
	left: 0;
	background-color: transparent;
	width: 100%;
	height: 5rem;
	z-index: 5;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	}

	nav .logo {
	position: absolute;
	top: 1rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	}

	nav .nav-item {
	position: absolute;
	top: 1rem;
	right: 5%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	}

	nav .nav-item a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	}

	nav .nav-item a:first-child {
	margin-right: 1rem;
	}

	nav a {
	font-size: 1.5rem;
	font-weight: bold;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	color: #0F1B3A;
	-webkit-transition: all .2s;
	transition: all .2s;
	}

	@media only screen and (max-width: 48em) {
	nav a {
	color: #ffffff;
	}
	}

	nav a:hover {
	color: #FE4777;
	text-decoration: none;
	}

	.container-fluid, .row {
	margin: 0;
	padding: 0;
	}

	.container-fluid , .row {
	margin: 0;
	padding: 0;
	}

	.main {
	height: 100%;
	}

	.info {
	background-color: #0F1B3A;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	}

	@media only screen and (max-width: 48em) {
	.info {
	height: 50vh;
	padding-top: 5rem;
	padding-bottom: 5rem;
	}
	}

	.info h2 {
	font-size: 2.4rem;
	font-weight: bold;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	text-transform: uppercase;
	text-align: center;
	color: #ffffff;
	}

	.info h2 span {
	color: #FE4777;
	}

	.info figure {
	width: 50%;
	height: 50%;
	margin-bottom: 1rem;
	}

	.info figure img {
	width: 100%;
	height: 100%;
	}

	.form__box {
	height: 100vh;
	background-color: #f8f8f8;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	}

	@media only screen and (max-width: 48em) {
	.form__box {
	height: 50vh;
	padding-top: 5rem;
	padding-bottom: 5rem;
	}
	}

	.form__box .tab-1, .form__box .tab-2, .form__box .tab-3 {
	-ms-flex-preferred-size: 70%;
	flex-basis: 70%;
	background-color: transparent;
	display: none;
	opacity: 0;
	-webkit-transform: scale(0.8) translateX(-7rem) translateY(-7rem);
	transform: scale(0.8) translateX(-7rem) translateY(-7rem);
	-webkit-transition: all 700ms cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: all 700ms cubic-bezier(0.075, 0.82, 0.165, 1);
	}

	.form__box .tab-1.fade-in, .form__box .tab-2.fade-in, .form__box .tab-3.fade-in {
	-webkit-transform: scale(1) translateX(0) translateY(0);
	transform: scale(1) translateX(0) translateY(0);
	opacity: 1;
	}

	.form__box .tab-1.block, .form__box .tab-2.block, .form__box .tab-3.block {
	display: block;
	}

	.form__box .tab-2 .choose {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	}

	.form__box .tab-2 .choose h1 {
	margin-bottom: 2rem;
	}

	.form__box .tab-2 .choose form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

	.form__box .tab-2 .choose .role-radio.left {
	margin-right: 5rem;
	}

	.form__box .tab-2 .choose .role-radio input {
	width: 0;
	height: 0;
	display: none;
	}

	.form__box .tab-2 .choose .role-radio input:checked + label figure {
	border: 2px solid #0F1B3A;
	-webkit-transform: scale(1);
	transform: scale(1);
	}

	.form__box .tab-2 .choose .role-radio input:checked + label span {
	color: #0F1B3A;
	}

	.form__box .tab-2 .choose .role-radio label {
	-webkit-transition: border-color .15s ease-out,background-color .15s ease-out, -webkit-box-shadow .15s ease-out;
	transition: border-color .15s ease-out,background-color .15s ease-out, -webkit-box-shadow .15s ease-out;
	transition: border-color .15s ease-out,background-color .15s ease-out, box-shadow .15s ease-out;
	transition: border-color .15s ease-out,background-color .15s ease-out, box-shadow .15s ease-out,-webkit-box-shadow .15s ease-out;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	}

	.form__box .tab-2 .choose .role-radio label span {
	font-size: 2rem;
	font-weight: bold;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	padding-top: 1.5rem;
	}

	.form__box .tab-2 .choose .role-radio figure {
	width: 10rem;
	height: 10rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	padding: 1rem;
	}

	.form__box .tab-2 .choose .role-radio figure img {
	width: 100%;
	height: 100%;
	}

	.form__box .tab-3 .confirm {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	}

	.form__box .tab-3 .confirm .mb {
	margin-bottom: 1rem;
	}

	.form__box .tab-3 .confirm h1 {
	font-size: 2.4rem;
	font-weight: normal;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	color: #0F1B3A;
	}

	.form__box .tab-3 .confirm h1 span.chosenRole {
	font-weight: bold;
	}

	.form__box .tab-3 .confirm figure {
	width: 20rem;
	height: 20rem;
	margin-bottom: 1rem;
	}

	.form__box .tab-3 .confirm figure img {
	width: 100%;
	height: 100%;
	}

	.form__box .tab {
	width: 60%;
	height: 50%;
	}

	.form__box .tab h2 {
	font-size: 2.4rem;
	font-weight: bold;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	color: #0F1B3A;
	}

	.form__box .tab p {
	font-size: 1.4rem;
	font-weight: bold;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	text-align: center;
	color: #FE4777;
	}

	.form__box .tab form label {
	font-size: 1.2rem;
	font-weight: bold;
	color: #0F1B3A;
	}

	.form__box .tab form input {
	font-size: 1.2rem;
	padding: 1.2rem 1.5rem;
	border-radius: 5px;
	background-color: #f8f8f8;
	border: 1px solid #ebebeb;
	color: #0F1B3A;
	-webkit-transition: all .3s;
	transition: all .3s;
	}

	.form__box .tab form input:focus {
	outline: none;
	border: 2px solid #0F1B3A;
	}

	.form__box .tab form input:focus:invalid {
	border: 2px solid #FE4777;
	}

	.form__box .tab form input::-webkit-input-placeholder {
	color: #0F1B3A;
	}

	.form__box .tab form .form-row .checkbox {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	padding-left: 5px;
	}

	.form__box .tab form .form-row .checkbox input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
	}

	.form__box .tab form .form-row .checkbox label {
	margin-left: 1rem;
	font-size: .8rem;
	min-height: 0;
	padding-left: 1rem;
	margin-bottom: 0;
	cursor: pointer;
	}

	.form__box .tab .control {
	margin-top: 1rem;
	margin-bottom: 1rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	}

	.button {
	border: none;
	outline: none;
	width: 12rem;
	height: 5rem;
	color: #fff;
	background: #0F1B3A;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 5px;
	font-size: 1.5rem;
	font-weight: normal;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	cursor: pointer;
	-webkit-transition: all .2s;
	transition: all .2s;
	padding: 1rem 2rem;
	}

	.button:hover {
	background: rgba(15, 27, 58, 0.5);
	}

	.button:disabled {
	background: rgba(254, 71, 119, 0.2);
	}

	ul.parsley-errors-list {
	margin-top: .5rem;
	margin-bottom: .5rem;
	list-style: none;
	}

	ul.parsley-errors-list li {
	padding-top: .5rem;
	font-size: 1rem;
	-webkit-transition: all .2s;
	transition: all .2s;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
	background-color: transparent;
	color: orangered;
	font-family: "Montserrat", "Ubuntu", sans-serif;
	padding-bottom: 0;
	}

	.loading {
	position: relative;
	background-color: rgba(15, 27, 58, 0.99);
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	-webkit-transition: all .7s;
	transition: all .7s;
	}

	.loading.loaded {
	opacity: 0;
	pointer-events: none;
	}

	.loading::after {
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(184, 179, 179, 0.482)), to(transparent));
	background: linear-gradient(90deg, transparent, rgba(184, 179, 179, 0.482), transparent);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-animation: loading 1.5s;
	animation: loading 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	}

	@-webkit-keyframes loading {
	100% {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	}
	}

	@keyframes loading {
	100% {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	}
	}
	</style>
	</head>
	<body>
	<!-- Website Preloader -->
	<div class="loading">
	</div>
	<!-- Website Preloader -->
	<!-- Website Navigation Bar -->
	<nav >
	<!-- <div class="nav-item d-flex flex-row justify-content-end"> -->
	<a class="logo" href="index.html">
	Learn
	<span>World</span>
	</a>
	<!-- </div> -->
	<div class="nav-item">
	<a href="index.html">
	Register
	</a>
	<a href="index.html">
	Login
	</a>
	</div>
	</nav>
	<!-- Website Navigation Bar -->
	<main class="main">
	<div class="container-fluid">
	<div class="row">
	<div class="col-md-5">
	<div class="info">
	<figure>
	<img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816208/graphic1_lqli2o.svg">
	</figure>
	<h2>Get started quickly with our <br><span>flexible plans.</span></h2>
	</div>
	</div>

	<div class="col-md-7">
	<div class="form__box">

	<!-- First Panel -->
	<div class="tab tab-1">
	<h2 class="text-center text-uppercase">Register</h2>
	<p class="text-center mb-3">Fill in your basic details and get started</p>
	<div class="alert__box">
	</div>
	<form id="signupform" method="POST" data-parsley-validate="" >
	<div class="form-row mb-1">
	<div class="col">
	<label class="mb-1">Email</label>
	<input type="email"
	name="email"
	id="email"
	class="form-control"
	autocomplete="on"
	data-parsley-trigger="blur"
	placeholder="Email" required/>
	</div>
	</div>

	<div class="form-row mb-1">
	<div class="col">
	<label>Password</label>
	<input type="password"
	name="password"
	id="password"
	autocomplete="on"
	required
	class="form-control"
	placeholder="Password"
	data-parsley-trigger="blur"
	data-parsley-minlength="4" />
	</div>
	</div>

	<div class="form-row mb-1">
	<div class="col">
	<label>Confirm Password</label>
	<input type="password"
	name="cpassword"
	id="cpassword"
	class="form-control"
	autocomplete="on"
	required
	data-parsley-trigger="blur"
	data-parsley-equalto="#password"
	placeholder="Password" />
	</div>
	</div>


	<div class="form-row">
	<div class="checkbox ">
	<input type="checkbox"
	id="terms"
	required
	name="terms"
	value="terms">
	<label class="small">I have read and agree to the terms presented in the Terms and Conditions agreement</label>
	</div>
	</div>

	<div class="control">
	<button class="button login" type="button" >Login</button>
	<button class="button" id="nextBtn" type="submit">Register</button>
	</div>
	</form>

	</div>
	<!-- End of panel 1 -->

	<!-- Panel 2 -->
	<div class="tab tab-2 ">
	<div class="choose">
	<h1>You are registering as a</h1>
	<form class="d-flex">
	<div class="role-radio left">
	<input type="radio" name="role" value="Tutor" id="tutor" />
	<label for="tutor">
	<figure>
	<img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816207/tutor_km1uxa.svg" alt="">
	</figure>
	<span>Tutor</span>
	</label>
	</div>

	<div class="role-radio">
	<input type="radio" name="role" value="Customer" id="customer" checked />
	<label for="customer">
	<figure>
	<img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816207/user_jhfkmr.svg">
	</figure>
	<span>Customer</span>
	</label>
	</div>

	</form>
	<div class="control ">
	<button class="button" type="button" id="prevBtn">Previous</button>
	<button class="button" type="button" id="register">Next</button>
	</div>
	</div>
	</div>
	<!-- End of Panel 2 -->

	<!-- Panel 3 -->
	<div class="tab tab-3 ">
	<div class="confirm">
	<h1 class="text-center mb">
	Congratulations for your succesful registration on our website as a <span class="chosenRole" id="chosenRole"></span>
	</h1>
	<figure>
	<img src="https://res.cloudinary.com/dl7cpsstt/image/upload/v1600816207/confirm_wsslxs.svg" alt="confirm" />
	</figure>
	<p class="text-center mb">If you are not redirected to your login page in 5 seconds,please click the button below</p>
	<button class="button login" type="button" >Login</button>
	</div>
	</div>
	<!-- End of Panel 3 -->
	</div>
	</div>

	</div>
	</div>
	</main>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" crossorigin="anonymous"></script>
	<script type="text/javascript">
	//Preloader Handler Instruction 2
	window.addEventListener('load',function() {
	document.querySelector('.loading').classList.add('loaded');
	});


	$(document).ready(function(){
	//setting default role to customer
	let role = 'customer';

	//function to show relevant panel
	function showPanel(n) {
	$tab = $('.tab-'+n);
	$tab.siblings().removeClass('block').removeClass('fade-in')
	$tab.addClass('block').outerWidth();
	$tab.addClass('fade-in');
	}

	//function to clear values
	function clearData() {
	$("#email").val('');
	$("#email").val('');
	role = '';
	}

	//Change role appropiately o click
	$('input[name=role]').click(function() {
	role = $(this).val();
	});


	//Form submission Handler
	$('#signupform').on('submit',function(e) {
	e.preventDefault();
	var ok = $('.parsley-error').length === 0;
	if(ok) {
	showPanel(2);
	}else {
	$('.alert__box').html(`
	<div class="alert alert-danger text-center">
	<strong class="text-center">Error!</strong> Please read the error messages carefully and make necessary changes.
	</div>
	`);
	}

	});

	//Transition to first panel
	$('#prevBtn').on('click',function() {
	showPanel(1);
	});

	//Handler for AJAX Call
	$('#register').on('click',function() {

	// Comment out block A to prevent success state
	// Start of Block A
	$('#chosenRole').text(role);
	showPanel(3);

	//Ons uccess,redirect to appropiate login page in 5seconds
	setTimeout(() => {
	window.location.replace(`${role}/login.html`);
	},5000);
	//End of Block A

	// UnComment block b to replicate error state
	// Start of Block B
	// var email = $("#email").val();
	// var password = $("#password").val();

	// $.ajax({
	// type: "POST",
	// url: "server.php",
	// data:{
	// 'type':'signup',
	// 'email':email,
	// 'password':password,
	// 'role':role
	// },
	// beforeSend: function(){
	// },
	// success:function (data) {
	// $('#chosenRole').text(role)
	// showPanel(3);
	// setTimeout(() => {
	// window.location.replace(`${role}/login.html`);
	// },5000);
	// },
	// error: function (err) {
	// $('.alert__box').html(`
	// <div class="alert alert-danger text-center">
	// <strong class="text-center">Status Error: ${err.statusText}</strong>
	// ${err.responseText}
	// </div>
	// `);
	// showPanel(1);
	// }
	// });
	// End of Block B
	});

	$('.login').click(function() {
	clearData();
	let role = 'customer';
	window.location.replace(`${role}/login.html`);
	});

	//Show First Panel by default
	showPanel(1);
	});


	</script>
	</body>

	</html>