Day01-form-box

day01-form-box.markdown

Day01-form-box

100-days-of-code challenge Day01 Form Sign in box

A Pen by dahe oh on CodePen.

License.

index.html

<section>
  <div class="form-box">
    <h2 class="form-heading">log in to ohda works</h2>
    <form>
      <fieldset>
        <legend class="hidden">signin</legend>
        <label><input class="form-input" type="email" placeholder="Email" required></label>
        <label><input class="form-input" type="password" placeholder="password" required></label>
        <button type="submit" class="form-btn signin-btn">sign in</button>
        <a href="#" class="form-btn find-btn">Forgot?</a>
      </fieldset>
    </form>
  </div>
</section>

style.scss

// variables
$width: 400px;
$size: 10px;

@mixin hidden-element {
  white-space: nowrap;
  width: 1px;
  height: 1px;
  bottom: 0;
  padding: 0;
  clip-path: inset(50%);
  margin: -1px; 
}

* {
  box-sizing: border-box;
}

input, button {
  border:0;
  margin:0;
  padding:0;
  font-size:0;
  font-weight:normal;
}

body {
  background: linear-gradient(135deg, #7B4397, #B5238A, #DC2430);
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  color: white;
  font-size: $size;
}
a {
  text-decoration: none;
  color: inherit;
}
section {
  width:100%;
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
}
.form-box{
  width: $width;
  // background-color: teal;
  
  & .form-heading{
    text-transform:uppercase;
    font-size: 2em;
    padding-bottom: 10px;
  }
}
.form-input{
  width: 100%;
  display: inline-block;
  padding: 20px 10px;
  margin: 10px 0;
  font-size: 1.8em;
  border: 1px solid #666;
  text-transform: capitalize;
  border-radius: 5px;
}

.signin-btn {
  @extend .form-input;
  background: #DC2430;
  border-color: red;
  color: white;
  text-transform: uppercase;
  font-size: 1.7em;
  font-weight: bold;
}

.find-btn{
  width: 100%;
  margin-top: 10px;
  display: inline-block;
  text-align: right;
  font-size: 1.4em;
  text-decoration: underline;
}

.hidden {
  @include hidden-element;
}

styles

<link href="https://fonts.googleapis.com/css?family=Nunito:400,600" rel="stylesheet" />