Day 255

Almost done with this course... One more class.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

.task-form {
    background: $darkBlue;
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    width: 100%;
    color: $white;
    padding: 50px 0;
    transform: translate(0, 100%);
    transition: all 0.5s ease-in-out;
    &.active {
      transform: translate(0, 0);
    }
    .close-btn {
      position: absolute;
      top: 35px;
      right: 35px;
      padding: 15px;
      cursor: pointer;
      .fa {
        font-size: 36px;
      }
    }
    form {
      display: block;
      max-width: 500px;
      margin: 0 auto;
      padding: 15px;
    }
    h3 {
      margin: 0 0 50px 0;
      font-size: 36px;
      text-align: center;
      text-decoration: underline;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      font-family: "Roboto", cursive;
      font-weight: 300;
      font-size: 24px;
      display: block;
      text-transform: capitalize;
      margin: 0 0 15px 0;
    }
    input[type="text"],
    textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.3);
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      font-family: "Roboto", cursive;
      font-weight: 300;
      font-size: 36px;
      color: $white;
      &:focus {
        border: none;
        outline: none;
      }
    }
    textarea {
      height: 250px;
      font-size: 24px;
    }
    button {
      background: $lightBlue;
      border: none;
      width: 100%;
      font-size: 24px;
      text-transform: uppercase;
      color: $white;
      padding: 15px 20px;
    }
  }