Hopi endpoint reset

by Adrian Grajdeanu

HTML

<div class="container-login">
  <div class="panel-login">
    <form class="login-form">
      <div class="login-form-title">
        <div class="hopi-logo">
          <?xml version="1.0" encoding="utf-8"?>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 340 340">
            <g style="fill: #222;">
              <path d="M170,0C76.3,0,0,76.3,0,170s76.3,170,170,170s170-76.3,170-170S263.7,0,170,0z M185,319.3V275h-30v44.3 C79.3,311.7,20,247.7,20,170C20,87.3,87.3,20,170,20s150,67.3,150,150C320,247.6,260.7,311.7,185,319.3z"/>
              <path d="M220,145H120c-8.3,0-15,6.7-15,15v80c0,13.8,11.2,25,25,25h80c13.8,0,25-11.2,25-25v-80 C235,151.7,228.3,145,220,145z M170,195c-8.3,0-15-6.7-15-15s6.7-15,15-15c8.3,0,15,6.7,15,15S178.3,195,170,195z"/>
              <path d="M220,65H120v70h100V65z M160,115h-20v-15h20V115z M200,115h-20v-15h20V115z"/>
            </g>
          </svg>
        </div>
        <div>Reset Password</div>
      </div>
      <div class="message">Enter your username or email address and we will send you a link to create a new password.</div>
      <div class="message message-success">Enter your username or email address and we will send you a link to create a new password.</div>
      <div class="message message-warning">Enter your username or email address and we will send you a link to create a new password.</div>
      <div class="message message-error">Enter your username or email address and we will send you a link to create a new password.</div>
      <div class="login-label">Username</div>
      <div class="login-input">
        <input class="login-input-control" type="text" name="username">
        <span class="login-focus-input"></span>
      </div>
      <div class="container-login-form-btn">
        <button class="login-form-btn">Reset Password</button>
      </div>
      <div class="login-footer">
        <a class="text-muted" href="index.html">Back to login</a>
      </div>
    </form>
 ...

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  font-family: sans-serif;
  height: 100%;
}

body {
  margin: 0;
}

a {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  text-decoration: none;
  transition: all .4s;
}

a:hover {
  color: #322446;
}

input {
  outline: 0;
}

button {
  border: 0;
  cursor: pointer;
  outline: 0;
}

.container-login {
  align-items: center;
  background: linear-gradient(45deg, #322446, #001230);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 100vh;
  padding: 30px;
  width: 100%;
}

.container-login-form-btn {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}

.hopi-logo {
  display: inline-block;
  width: 80px;
  padding-bottom: 10px;
}

.panel-login {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, .1);
  padding: 25px 40px 10px;
  position: relative;
  width: 420px;
}

.login-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.login-form-title {
  color: #555;
  display: block;
  font-size: 30px;
  line-height: 1.2;
  padding-bottom: 10px;
  text-align: center;
  width: 100%;
}

.login-form-btn {
  align-items: center;
  background-color: #333;
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-size: 16px;
  height: 40px;
  justify-content: center;
  line-height: 1.2;
  position: relative;
  transition: all .4s;
  width: 100%;
  z-index: 1;
}

.login-form-btn::before {
  background: #a64bf4;
  background: linear-gradient(-135deg, #322446, #001230);
  border-radius: 10px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all .4s;
  width: 100%;
  z-index: -1;
}

.login-form-btn:hover::before {
  opacity: 1;
}

.login-input {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.login-input-control {
  background-color: #f7f7f7;
  border-radius: 10px;
 ...