Login Page

by Abbas Jaber

HTML

<section class="wrapper" dir="rtl">
  <div class="content">
    <header>
      <h1>اهلا بكم</h1>
    </header>
    <section>
      <div class="social-login">
        <button><img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="google" width="20"> <span> جووجل </span></button>
        <button><img src="https://cdn.freebiesupply.com/logos/large/2x/facebook-2-logo-svg-vector.svg" alt="facebook" width="10"><span>فايسبوك</span></button>
      </div>
      <form action="" class="login-form">
        <div class="input-group">
          <label for="username">اسم المستخدم او البريد الالكتروني</label>
          <input type="text" placeholder="اسم المستخدم او البريد الالكتروني" id="username">
        </div>
        <div class="input-group">
          <label for="password">كلمة المرور</label>
          <input type="password" placeholder="كلمة المرور" id="password">
        </div>
        <div class="input-group"><button>تسجيل الدخول</button></div>
      </form>
    </section>
    <footer>
      <a href="#" title="Forgot Password">نسيت كلمة المرور؟</a>
    </footer>
  </div>
</section>

SCSS

$background-start: #CDDC39;
$background-end: #CDDC39;

$gray-color: #eee;
$input-color: #F0F4C3;
$label-color: #212121;
$login-button: #CDDC39;

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(to right, $background-start, $background-end);
  margin: 0;
  height: 100vh;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    background-color: #fff;
    padding: 30px 15px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    min-width: 200px;
    button {
      padding: 15px;
      width: 150px;
      border: 1px solid $gray-color;
      background: transparent;
      border-radius: 50px;
      color: #333;
      cursor: pointer;
      &:focus {
        outline: none;
      }
    }
    header {
      text-align: center;
      h1 {
        margin-top: 0;
        font-size: 230%;
      }
    }
    .social-login {
      padding: 10px;
      text-align: center;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      button {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .5s;       
        -webkit-transition: background .5s;
        &:first-child {
          margin-right: 10px;
        }
        &:hover {
          background-color: $gray-color;
        }
        span {
          font-size: 17px;
          color: #777;
          margin-right: 5px;
        }
      }
    }
    .login-form {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .input-group {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        width: 100%;
        max-width: 310px;
        input {
          padding: 15px;
          font-size: 13px;
          border: 1px solid $input-color;
          background-color: $input-color;
          border-radius: 50px;
          tranistion: border .5s;
         ...