<div class="taco">
  <p>Tailfin keen bakelite populuxe television kodachrome copasetic. Roadside starburst atomic copasetic creative swingin', modern tailfin ring-a-ding jet-age space-age sport coat vinyl sleek! Broad highway sport coat herman miller, jet-age skinny lapel swingin' formica helvetica, eames chair dingbat abstract formica hip zephyr highway pocket square.</p>

  <p>Sassy copasetic son of a bitch naugahyde bachelor pad starburst dieter rams tomorrowland scandinavian. Frutiger son of a bitch pan am keen formica bachelor pad skinny lapel. Copasetic carport ray gun executive pan am. Copasetic executive pocket square creative, bourbon keen formica beatnik ratpack, jet-age vinyl doo-wop. Ring-a-ding interior saul bass drive-in formica scandinavian.</p>

  <p>Geometric hip ray gun big band. Pocket square aviation zephyr ray gun keen television highway.</p>
</div>

<form action="#" method="post">
  <div class="field name">
    <input type="text" name="user" placeholder="userName" />
    <button class="action">&#58542;</button>
  </div>
  <div class="field password">
    <input type="password" name="pass" placeholder="password" />
    <button class="action">&#58542;</button>
  </div>
  <div class="field submit">
    <input type="submit" name="submit" value="let me in" />
  </div>
</form>

$placeholder:#a8a8a8;
$red:#a11506;
$yellow:#ffff00;
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Trade+Winds);
*{box-sizing:border-box;}
html, body{height:100%;}
body{
background:radial-gradient($red 0%, darken($red, 50%));
  overflow:hidden;
}
::-webkit-input-placeholder {
   color:$placeholder;
  text-shadow:0 1px darken($yellow,30%);
}
::-moz-placeholder {
   color:$placeholder;
  text-shadow:0 1px darken($yellow,30%);  
}
:-ms-input-placeholder {  
   color:$placeholder;
  text-shadow:0 1px darken($yellow,30%);  
}
form{
 height:100%;
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:flex-start;
  font-family:'Trade Winds', serif;
  .field{
    margin:0;
    border:0;
    height:100%;
    background:linear-gradient(to bottom, $red 0%, darken($red, 50%));
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:center;
    button.action{
      font:normal 2.875em 'Entypo', sans-serf;
      padding:2px 10px;
      border-radius:0 7px 7px 0;
      border:0;
      color:darken($red,20%);
      background:darken($yellow,20%);
      transition:color 250ms;
      &:hover{
        color:$red;
      }
      &:focus{
        outline:none;
        color:$red;
      }
    }
    input[name="user"], input[name="pass"]{
      font:normal 1.875em 'Trade Winds', serif;
      padding:5px 20px;
      border:0;
      border-radius: 7px 0 0 7px;
      color:darken($red,10%);
      text-shadow:0 1px 2px darken($red,20%);
      background:linear-gradient(to right, lighten($yellow,30%)0%, darken($yellow,20%)100%);
      &:focus{
        background:linear-gradient(to right, lighten($yellow,10%)0%, darken($yellow,20%)100%);
        outline:none;
      }
    }
    input[type="submit"]{
      font:normal 2.875em 'Trade Winds', serif;
      padding:5px 30px;
      border-radius:7px;
      border:0;
      color:darken($red,20%);
      background:linear-gradient(to bottom, $yellow 0%, darken($yellow,5%)100%);
      transition:color 250ms;
      &:hover{
        color:$red;
        background:linear-gradient(to bottom, $yellow 0%, darken($yellow,8%)100%);
      }
      &:focus{
        outline:none;
        color:$red;
        animation:glow 2000ms ease-in-out infinite ;
      }
    }
  }
}
.taco{
   width: 40%;
  height:60%;
  margin:10% auto 0 auto; 
  color:darken(white,10%);
  text-shadow:0 1px rgba(0,0,0,.6);
}
@keyframes glow{
  0%{box-shadow:0 0 0 0 lighten($yellow,20%);}
  50%{box-shadow:0 0 20px 2px lighten($yellow,20%);}
  100%{box-shadow:0 0 0 0 lighten($yellow,20%);}
}

$('.taco').hide();//hide actual content
//set window vars and set form and .field widths
var windowWidth = $(window).width(),
    formWidth = windowWidth*3;
$('form').css({'width':formWidth+'px'});
$('.field').css({'width':windowWidth+'px'});
//on resize reset widths
$(window).on('resize',function(){
var newWindowWidth = $(window).width(),
    newFormWidth = newWindowWidth*3,
    stateName = $('.name').width(),
    statePassword = $('.password').width(),
    stateSubmit = $('.submit').width();
//check if width is 0 then hide  
  if(stateName == 0){$('.name').hide();}
  if(statePassword == 0){$('.password').hide();}
  if(stateSubmit == 0){$('.submit').hide();}
//set width of form and fields with noew values  
  $('form').css({'width':newFormWidth+'px'});
  $('.field').css({'width':newWindowWidth+'px'});
});//window.resize

$('.action').on('click',function(){
    $(this).parent('.field').animate({width:0+'px'},1000,
      function(){
        $(this).children('input, button').hide();
        $(this).next('.field').children('input').focus();
      });//animate
  return false;
  });//button.action
$('input[type="submit"]').on('click',function(e){
  e.preventDefault();
  $(this).parent('.field').fadeOut(1000);
  function show(){
    $('.taco').fadeIn(500);
  }
  setTimeout(show, 1500);
});//submit.on