Login/Register

by roomyrooms

HTML

<div class='alert_box'>

  <div class='alert_box_header' id='alert_box_header'>
    Test Alert
  </div>

  <div class='alert_box_text' id='alert_box_text'>
    Test Alert Description
  </div>

</div>


<br>



<div class='login_box'>

  <div class='login_centering_wrapper'>

    <div class='login_header'>
      Login
    </div>
    
    <div class='login_input_wrapper'>
      <h5 class='login_label'>USERNAME</h5>
      <input required spellcheck='false' type='text' class='login_input login_user' name='login_user'>
    </div>

    <br>

    <div class='login_input_wrapper'>
      <h5 class='login_label'>PASSWORD</h5>
      <input required spellcheck='false' type='password' class='login_input login_pass' name='login_pass'>
    </div>
    
    <div class='login_confirm'>
      <button type='submit' class='login_submit_button'>
        <div class='login_submit_contents'>
          Login
        </div>
      </button>
    </div>
    
    <div class='login_subtext'>
      Don't have an account? <a href='#' class='login_register_link'>Register</a>
    </div>

  </div>

</div>


<br><br>












<div class='register_box'>

  <div class='register_centering_wrapper'>
  
    <div class='register_header'>
      Register
    </div>

    <div class='register_input_wrapper'>
      <h5 class='register_label'>USERNAME</h5>
      <input required spellcheck='false' type='text' class='register_input register_user' name='register_user'>
    </div>
    
    <div class='register_subtext'>
      Make sure you activate your username in Discord before registering!
    </div>

    <br>

    <div class='register_input_wrapper'>
      <h5 class='register_label'>PASSWORD</h5>
      <input required spellcheck='false' type='password' class='register_input register_pass' name='register_pass'>
    </div>

    <br>

    <div class='register_input_wrapper'>
      <h5 class='register_label'>REPEAT PASSWORD</h5>
      <input required spellcheck='false' type='password' class='register_input...

CSS

.alert_box {
  background: #26202e;
  border: 2px solid #c7396b;
  border-radius: 5px;
  width: 100%;
  padding: 16px;
  font-size: 18px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  outline: none;
  height: 70px;
}

.alert_box_header {
  color: #c7396b;
  font-size: 15px;
  text-decoration: underline;
}

.alert_box_text {
  color: #c7396b;
  font-size: 14px;
}













.login_box {
  border: 10px solid;
  border-image: url(https://i.imgur.com/T7tm80Z.png) 10 round;
  background: #26202e;
  border-radius: 5px;
  width: 300px;
  padding: 16px;
  font-size: 18px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  outline: none;
}

.login_centering_wrapper {
  text-align: center;
  width: 100%;
  vertical-align: baseline;
  font-family: Courier, Whitney, sans-serif;
}

.login_header {
  color: #dddddd;
  text-align: center;
  padding-bottom: 16px;
  font-size: 21px;
  font-weight: 600;
  outline: none;
  margin-bottom: 0px;
}

.login_input_wrapper {
  width: 100%;
  font-size: 16px;
  text-align: start;
  outline: none;
}

.login_label {
  font-size: 12px;
  display: block;
  color: #33a1b4;
  margin: -10px 0px 5px 0px;
  margin-left: -4px;
  outline: none;
}

.login_input {
  font-size: inherit;
  padding: 10px 0px 10px 10px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  box-sizing: border-box;
  width: 100%;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  color: #4dbacd;
  background-color: rgba(0, 0, 0, 0.3);
  transition: border-color .3s ease-in-out;
  user-select: none;
  outline: none;
}

.login_input:focus {
  border-color: #cd4d7a;
}

.login_confirm {
  margin-top: 20px;
}

.login_submit_button {
  font-size: inherit;
  font-family: inherit;
  background-color: #2d8fa0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border: 0px transparent;
  border-radius: 3px;
  width: 100%;
  transition: background-color .2s ease-in-out;
  padding: 10px;
  outline:...