LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

body, html {
  background: #34495e; /* #34495e */
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.wrap {
  margin: 0 auto;
} 
.login {
  width: 300px;
  margin-top: 40vh;
}
.login input[type=text],
.login input[type=password] {
  opacity: 1;
  display: block;
  border: none;
  outline: none;
  width: 280px;
  padding: 10px;
  margin: 20px 0 0 0;
  border-radius: 2px;
}
.login input[type=text] {
  animation: bounce 1s;
  -webkit-appearance: none;
}
.login input[type=text]:focus:valid {
  box-shadow: 0 0 0 10000px #2ecc71;
}
.login input[type=text]:focus:valid ~ input[type=button] {
  background: #27ae60;
  color: #2ecc71;
}
.login input[type=text]:focus:valid ~ input[type=submit] {
  color: #2ecc71;
}
.login input[type=text]:invalid {
  box-shadow: 0 0 0 10000px #e74c3c;
}
.login input[type=text]:invalid ~ input[type=button] {
  background: #c0392b;
  color: #e74c3c;
}
.login input[type=text]:invalid ~ input[type=submit] {
  color: #e74c3c;
}
.login input[type=password] {
  animation: bounce1 1.3s;
}
.login input[type=submit],
.login input[type=button] {
  border: 0;
  outline: 0;
  padding: 13px 18px;
  margin: 40px 0 0 0;
  border-radius: 2px;
  font-weight: 600;
  animation: bounce2 1.6s;
} 
.login input[type=submit] {
  float: right;
  background: #fff;  
  color: #34495e;
  outline: none;
}
.login input[type=button] {
  background: #2C3E50;
  color: #34495e;
}
@keyframes bounce {
  0% { transform: translateY(-250px); opacity: 0; }
} 
@keyframes bounce1 {
  0% {  opacity: 0; }
  40% { transform: translateY(-100px); opacity: 0;}
}
@keyframes bounce2 {
  0% {  opacity: 0; }
  70% { transform: translateY(-20px); opacity: 0;}
}      
Host Instantly Drag and Drop Website Builder

 

Description

If you type an invalid email the whole page will turn red, if its valid then the page turns green when the email input is on focus. What do you guys think?
Term
Wed, 11/29/2017 - 11:23

Related Codes

Pen ID
Pen ID
Pen ID