Form

Form

by Hugo Licon

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css">
<body>

  <h1>add task</h1>
  <form id="form" autocomplete="off">
    <fieldset>
      <h2 class="fs-title">Create your account</h2>
      <h3 class="fs-subtitle">This is step 1</h3>
      <input type="text" name="email" placeholder="Email" />
      <input type="password" name="pass" placeholder="Password" />
      <input type="password" name="cpass" placeholder="Confirm Password" />
      <input type="button" name="next" class="next action-button" value="Next" />

      <p>Project:
        <select name="project" id="">
          <option value="restaurant">Restaurant</option>
        </select>
      </p>
      <textarea name="description" id="" cols="50" rows="5"></textarea>
      <input type="text" id="datepicker">

    </fieldset>
  </form>

  <form class="pure-form pure-form-stacked">
    <fieldset>
      <legend>A Stacked Form</legend>

      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email">
      <span class="pure-form-message">This is a required field.</span>

      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password">

      <label for="state">State</label>
      <select id="state">
        <option>AL</option>
        <option>CA</option>
        <option>IL</option>
      </select>

      <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox"> Remember me
      </label>

      <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
  </form>
</body>

SCSS

$gray: rgb(57, 70, 78);
    $red: rgb(253, 64, 60);
    $blue: rgb(36, 149, 238);
    $pink: rgb(237, 92, 101);
    $green: rgb(77, 175, 151);
   $gray: rgb(57, 70, 78);
$red: rgb(253, 64, 60);
$blue: rgb(36, 149, 238);
$pink: rgb(237, 92, 101);
$green: rgb(77, 175, 151);

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  /*Image only BG fallback*/
  background: linear-gradient(to left top, rgba($green, 0.6), rgba($blue, 0.6));
}

body {
  font-family: montserrat, arial, verdana;
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: white;
    font-weight: 300;
  }
}

#form {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

#form fieldset {
  background: $pink;
  border: 0 none;
  border-radius: 10px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;
  position: relative;
}


/*inputs*/

#form input,
#form textarea {
  display: block;
  appearance: none;
  outline: 0;
  border: 1px solid rgba(white, .4);
  background-color: rgba(white, .2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  transition-duration: 0.25s;
  font-weight: 300;
  &:hover {
    background-color: rgba(white, .4);
  }
  &:focus {
    background-color: white;
    width: 300px;
    color: $green;
  }
  /*----------------------*/
  // padding: 15px;
  // border: 1px solid #ccc;
  // border-radius: 3px;
  // margin-bottom: 10px;
  // width: 100%;
  // box-sizing: border-box;
  // font-family: montserrat;
  // color: #2C3E50;
  // font-size: 13px;
}


/*buttons*/

#form .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin:...