LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

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.

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.

Geometric hip ray gun big band. Pocket square aviation zephyr ray gun keen television highway.

CSS
@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(#a11506 0%, #000000);
  overflow: hidden;
}

::-webkit-input-placeholder {
  color: #a8a8a8;
  text-shadow: 0 1px #666600;
}

::-moz-placeholder {
  color: #a8a8a8;
  text-shadow: 0 1px #666600;
}

:-ms-input-placeholder {
  color: #a8a8a8;
  text-shadow: 0 1px #666600;
}

form {
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Trade Winds', serif;
}
form .field {
  margin: 0;
  border: 0;
  height: 100%;
  background: linear-gradient(to bottom, #a11506 0%, black);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
form .field button.action {
  font: normal 2.875em 'Entypo', sans-serf;
  padding: 2px 10px;
  border-radius: 0 7px 7px 0;
  border: 0;
  color: #3f0802;
  background: #999900;
  transition: color 250ms;
}
form .field button.action:hover {
  color: #a11506;
}
form .field button.action:focus {
  outline: none;
  color: #a11506;
}
form .field input[name="user"], form .field input[name="pass"] {
  font: normal 1.875em 'Trade Winds', serif;
  padding: 5px 20px;
  border: 0;
  border-radius: 7px 0 0 7px;
  color: #700f04;
  text-shadow: 0 1px 2px #3f0802;
  background: linear-gradient(to right, #ffff99 0%, #999900 100%);
}
form .field input[name="user"]:focus, form .field input[name="pass"]:focus {
  background: linear-gradient(to right, #ffff33 0%, #999900 100%);
  outline: none;
}
form .field input[type="submit"] {
  font: normal 2.875em 'Trade Winds', serif;
  padding: 5px 30px;
  border-radius: 7px;
  border: 0;
  color: #3f0802;
  background: linear-gradient(to bottom, #ffff00 0%, #e6e600 100%);
  transition: color 250ms;
}
form .field input[type="submit"]:hover {
  color: #a11506;
  background: linear-gradient(to bottom, #ffff00 0%, #d6d600 100%);
}
form .field input[type="submit"]:focus {
  outline: none;
  color: #a11506;
  animation: glow 2000ms ease-in-out infinite;
}

.taco {
  width: 40%;
  height: 60%;
  margin: 10% auto 0 auto;
  color: #e6e6e6;
  text-shadow: 0 1px rgba(0, 0, 0, 0.6);
}

@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 #ffff66;
  }
  50% {
    box-shadow: 0 0 20px 2px #ffff66;
  }
  100% {
    box-shadow: 0 0 0 0 #ffff66;
  }
}
JS
$('.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
Host Instantly Drag and Drop Website Builder

 

Description

Login where as inputs are completed they slide left then on submit fades to content.
Term
Wed, 11/29/2017 - 11:25

Related Codes

Pen ID
Pen ID
Pen ID