LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



Don't have an account? Sign Up

CSS
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800");
@font-face {
  font-family: 'entypo';
  font-style: 'normal';
  font-weight: 'normal';
  src: url("http://weloveiconfonts.com/api/fonts/entypo/entypo.eot");
  src: url("http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix") format("eot"), url("http://weloveiconfonts.com/api/fonts/entypo/entypo.woff") format("woff"), url("http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf") format("truetype"), url("http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo") format("svg");
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

body, input, button {
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  color: #333;
  line-height: normal;
  font-smoothing: antialiased;
}

a {
  color: #38F;
  font-weight: 600;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#nav:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -25px 75px 50px rgba(0, 0, 0, 0.5);
  z-index: 0;
}
#nav button {
  cursor: pointer;
  position: relative;
  float: right;
  height: 30px;
  padding: 0 15px;
  margin: 15px 15px 0 0;
  border: 0;
  outline: 0;
  border-radius: 3px;
  background: #38F;
  z-index: 1;
  transition: box-shadow .05s ease;
  color: #FFF;
  font-weight: 700;
  line-height: 30px;
}
#nav button:hover {
  box-shadow: 0 0 0 2px #38F;
}

.inset {
  position: relative;
  width: 500px;
  margin: auto;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.inset .close {
  cursor: pointer;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 100%;
  background: #FFF;
  font-family: 'entypo', sans-serif;
  font-size: 18pt;
  color: #38F;
  line-height: 30px;
}
.inset .close:before {
  content: '\2716';
}
.inset .form {
  margin: 30px 30px 0;
}
.inset .form ul li {
  clear: both;
  width: 100%;
}
.inset .form ul li input {
  position: relative;
  float: left;
  width: calc(50% - 5px);
  height: 40px;
  padding: 0;
  margin: 0 0 10px;
  border: 0;
  outline: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: inset 0 0 0 1px #CCC;
  color: #38F;
  line-height: 40px;
  text-indent: 15px;
}
.inset .form ul li input:first-child {
  margin-right: 10px;
}
.inset .form ul li input::-webkit-input-placeholder {
  font-size: 12pt;
  color: #AAA;
}
.inset .form ul li input#password, .inset .form ul li input#confirmpassword {
  font-size: 20pt;
}
.inset .form ul li .confirm {
  position: relative;
  float: left;
  width: calc(50% - 5px);
}
.inset .form ul li .confirm input {
  width: 100%;
}
.inset .form ul li .confirm .fail {
  width: calc(100% - 39px);
  border-radius: 3px 0 0 3px;
  box-shadow: inset 0 0 0 1px #38F;
}
.inset .form ul li .confirm .fail + .error {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 0 3px 3px 0;
  background: #FFF;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #38F;
}
.inset .form ul li .confirm .fail + .error:after {
  content: '\274E';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: 'entypo', sans-serif;
  font-size: 18pt;
  color: #38F;
  line-height: 40px;
  text-align: center;
}
.inset .form .submit {
  cursor: pointer;
  width: 200px;
  height: 40px;
  padding: 0;
  margin: auto;
  border: 0;
  outline: 0;
  border-radius: 3px;
  background: #38F;
  display: block;
  transition: box-shadow .05s ease;
  color: #FFF;
  font-weight: 600;
}
.inset .form .submit:hover {
  box-shadow: 0 0 0 2px #38F;
}
.inset hr {
  position: relative;
  height: 30px;
  margin: 30px;
  border: 0;
}
.inset hr:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  margin: auto;
  background: #38F;
}
.inset hr:after {
  content: 'or';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 30px;
  height: 30px;
  margin: auto;
  border-radius: 100%;
  background: #38F;
  box-shadow: 0 0 0 4px #FFF, 0 0 0 6px #38F;
  font-size: 12pt;
  color: #FFF;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}
.inset .social {
  height: 35px;
  margin: 0 30px 30px;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.inset .social button {
  cursor: pointer;
  height: 40px;
  padding: 0 15px;
  margin: auto;
  border: 0;
  outline: 0;
  border-radius: 3px;
  background: #333;
  display: block;
  transition: box-shadow .05s ease;
  color: #FFF;
  font-weight: 600;
  line-height: 40px;
}
.inset .social button:before {
  float: left;
  margin-right: 10px;
  font-family: 'entypo', sans-serif;
  font-size: 18pt;
  font-weight: normal;
}
.inset .social button.google {
  background: #C61800;
}
.inset .social button.google:before {
  content: '\F30F';
}
.inset .social button.google:hover {
  box-shadow: 0 0 0 2px #C61800;
}
.inset .social button.facebook {
  background: #3B5998;
}
.inset .social button.facebook:before {
  content: '\F30C';
}
.inset .social button.facebook:hover {
  box-shadow: 0 0 0 2px #3B5998;
}
.inset .social button.twitter {
  background: #03ABEA;
}
.inset .social button.twitter:before {
  content: '\F309';
}
.inset .social button.twitter:hover {
  box-shadow: 0 0 0 2px #03ABEA;
}
.inset p {
  margin-bottom: 30px;
  display: block;
  text-align: center;
}

#signup {
  display: none;
}

#login {
  display: none;
}
#login input {
  width: 100%;
}
#login .login {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
}
#login .login .submit {
  width: 325px;
  margin: 0 30px 0 0;
}

#blur {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}
JS
$(function(){
  var speed = 300;
  $('#nav button').on('click',function(){
    if ( $(this).hasClass('signup') ) {
      $('#login').hide();
      $('#signup').fadeIn(speed);
    } else if ( $(this).hasClass('login') ) {
      $('#signup').hide();
      $('#login').fadeIn(speed);
    }
  });
  $('.close').on('click',function(){
    $('.inset').fadeOut(speed);
  });
});

function confirmEmail() {
  var email = document.getElementById('email').value,
      confirmemail = document.getElementById('confirmemail').value;
  if ( email != confirmemail ) {
    $('#confirmemail').addClass('fail');
  }
}
function confirmPassword() {
  var password = document.getElementById('password').value,
      confirmpassword = document.getElementById('confirmpassword').value;
  if ( password != confirmpassword ) {
    $('#confirmpassword').addClass('fail');
  }
}




CanvasImage = function (e, t) {
  this.image = t;
  this.element = e;
  e.width = t.width;
  e.height = t.height;
  this.context = e.getContext("2d");
  this.context.drawImage(t, 0, 0);
};
CanvasImage.prototype = {
  blur:function(e) {
    this.context.globalAlpha = 0.5;
    for(var t = -e; t <= e; t += 3) {
      for(var n = -e; n <= e; n += 3) {
        this.context.drawImage(this.element, n, t);
        var blob = n >= 0 && t >= 0 && this.context.drawImage(this.element, -(n-1), -(t-1));
      }
    }
  }
};
$(function() {
  var image, canvasImage, canvas;
  $('#blur').each(function() {
    canvas = this;
    var blur = $(canvas).data('blur');
    image = new Image();
    image.onload = function() {
      canvasImage = new CanvasImage(canvas, this);
      canvasImage.blur(blur);
    };
    image.src = $(canvas).data('src');
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Functional confirm email/password inputs
Term
Wed, 11/29/2017 - 11:30

Related Codes

Pen ID
Pen ID
Pen ID