<div class="connectPanel row overflow-auto h-100 d-flex align-items-center justify-content-center p-5">
  <div id="leftPanel" class="d-flex align-items-center justify-content-center">
    <div class="text-center">
      <h1>
          Welcome
      </h1>
      <h6>Start using notes today!</h6>
      <button class="btn-connect btn-connect-navigate signin active" onclick="changeForm(this)">Sign in</button>
      <button class="btn-connect btn-connect-navigate signup" onclick="changeForm(this)">Sign up</button>
    </div>


  </div>
  <div id="rightPanel" class="flip-container d-flex align-items-center justify-content-center">
    <div class="front w-100 h-100 d-flex align-items-center justify-content-center">
      <div id="loginForm" class="text-center ">
        <div class="form-group">
          <label>Login</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control">
        </div>

        <div class="form-group custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="checkRememberMe">
          <label class="custom-control-label" for="checkRememberMe">Remember me</label>
        </div>

        <div class="form-group">
          <button class="btn-connect btn-connect-form m-auto">
            Login
          </button>
        </div>

        <div class="form-group">
          <a href="javascript:void(0)">Forgot password?</a>
        </div>
      </div>
    </div>
    <div class="back w-100 h-100 d-flex align-items-center justify-content-center">
      <div id="registerForm" class="text-center">
        <div class="form-group">
          <label>Login</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control">
        </div>
        <div class="form-group">
          <label>Confirm password</label>
          <input type="password" class="form-control">
        </div>

        <div class="form-group">
          <button class="btn-connect btn-connect-form m-auto">
            Register
          </button>
        </div>

      </div>
    </div>
  </div>

</div>

body {font-family: monospace; background-color:beige}

h1 {
  color: #fff;
}

#leftPanel, #rightPanel {
  width: 300px;
  height: 500px;
  margin: 10px;
}

#leftPanel, .front, .back {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#leftPanel {
  background: linear-gradient(to top right, rgb(151, 80, 106), rgb(253, 171, 94));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  color: #fff;

}

#rightPanel {
  background-color: beige;
}


#rightPanel label, #rightPanel a {
  background: linear-gradient(to top right, rgb(151, 80, 106), rgb(253, 171, 94));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#rightPanel label:focus, #rightPanel a  {
  outline:0;
}

#rightPanel input {
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-left: none;
  text-align: center;
  font-size:20px;
}
#rightPanel input:focus {

  border-color: brown;
  outline: 0;
  box-shadow: none;
}

#loginForm, #registerForm { width: 70%;}

#rightPanel {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;

	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d; 

}

 #rightPanel.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

#rightPanel.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);

	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);

	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);

	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);

	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
  
  background-color:#fff;
}

.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}

.back {

	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

button:active {transform: scale(0.95);}
button:focus {outline: 0;}

.btn-connect {
  display: block;
  background-color: inherit;
  width: 200px;
  height: 35px;
  border: 1px solid;
  border-radius: 0px;
  margin: 15px;
  border-color: #fff;
  color: #fff;
  outline: none;
  
}
.btn-connect.active {
  color: brown;
  background-color: #fff;
}

.btn-border {
  display: block;
  width: 194px;
  border: 1px solid #ffffffa8;
  padding: 3px;

}

.btn-connect-form {
  background: linear-gradient(to top right, rgb(179, 105, 103), rgb(253, 171, 94));
  border: 0;
  box-shadow: 3px 3px 15px rgba(0,0,0,0.25)
}

.custom-checkbox .custom-control-label::before {
  border-radius: .0;
}
.custom-control-input:checked~.custom-control-label::before {
  background: 0;
  border: 0;
}
.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: #f4a35f5c;
  border-color: #f4a35f5c;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #f4a35f5c;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem #f4a35f5c;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23c97c64' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") !important;
}
.custom-control-label::after {
  background: 0;
}

function changeForm(btn) {
	var panel = document.getElementById("rightPanel");
	var mode = btn.classList.contains('signin')
  
 var elems = document.querySelectorAll(".btn-connect-navigate");

  [].forEach.call(elems, function(el) {
      el.classList.remove("active");
  });
	if (mode) {
  	panel.classList.remove("hover");
    btn.classList.add("active");
  } else {
  	panel.classList.add("hover");
    btn.classList.add("active");
  }
}