<section class="h-100 gradient-form" style="background: rgba(24, 25, 26, 1);">

  <div class="container py-5 h-100">

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

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

        <div class="card rounded-3 text-white">

          <div class="row g-0">

            <div class="col-lg-6">

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

​

                <div class="text-center">

                  <img src="https://fansinity.com/static/main/assets/images/logo.png"

                    style="width: 185px;" alt="logo">

                    <div class="register-title"> Register your interest</div>

                </div>

​

<form class="form-wraper" action="" method="post" class="mt-50">

    {% csrf_token %}

    <input type="text" id="email" name="email" placeholder="Your Email" required>

    <input type="password" id="password" name="password" placeholder="Your Password" required>

    <input type="password" id="password_repeat" name="password_repeat" placeholder="Repeat Your Password" required>

    <input type="checkbox" id="agreement" name="agreement" onchange="document.getElementById('register').disabled = !this.checked;">

    <label for="agreement">I have read & accept

      <a class="link" href="/term" target="_blank">the Terms of Service</a> and

      <a class="link" href="/policy" target="_blank">Privacy Policy</a></label>

    <div class="submit-wraper">

      {% if messages %}

        <ul class="messages">

          {% for message in messages %}

            <li class="{{ message.tags }}">{{ message }}</li>

          {% endfor %}

        </ul>

      {% endif %}

​

      <input id="register" type="submit" value="Register" disabled>

    </div>

​

    <div class="already-registered">

      Already Registered? <a class="link" href="/login">Sign In</a> 

    </div>

  </form>

​

              </div>

            </div>

            <div class="col-lg-6 d-flex align-items-center gradient-custom-2">

              <div class="text-white px-3 py-4 p-md-5 mx-md-4">

                <h4 class="mb-4">Register your interest</h4>

                <p class="small mb-0"> Enter your email address to register your interest.</p>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

.gradient-custom-2 {

/* fallback for old browsers */

/* background: #fccb90; */

​

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(to right, #ee7724, #d8363a,);

​

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(to right, #ee7724, #d8363a);

}

@card-bg {

 background: rgba(24, 25, 26, 1);   

}

@media (min-width: 768px) {

.gradient-form {

height: 100vh !important;

}

}

@media (min-width: 769px) {

.gradient-custom-2 {

border-top-right-radius: .3rem;

border-bottom-right-radius: .3rem;

}

}

// Chart

  const dataDoughnut = {

    type: 'doughnut',

    data: {

      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],

      datasets: [{

        label: 'Traffic',

        data: [21, 30, 45, 13, 9, 20, 7],

        backgroundColor: [

          'rgba(63, 81, 181, 0.5)',

          'rgba(77, 182, 172, 0.5)',

          'rgba(66, 133, 244, 0.5)',

          'rgba(156, 39, 176, 0.5)',

          'rgba(233, 30, 99, 0.5)',

          'rgba(66, 73, 244, 0.4)',

          'rgba(66, 133, 244, 0.2)',

        ],

      }, ],

    },

  };

​

  new mdb.Chart(document.getElementById('doughnut-chart'), dataDoughnut);