Playing around with more UI concepts - this time for a sign up page! I hope you guys like it! Really happy with how it turned out :D! Make sure to give yourself a username to get a custom greeting :D!
<3
A Pen by Jack Thomson on CodePen.
.login | |
.login_inner | |
.login_inner__avatar | |
%input{:type => 'text', :placeholder => 'Give yourself a username', :id => 'username'} | |
%input{:type => 'email', :placeholder => 'What is your email?', :id => 'email'} | |
%input{:type => 'password', :placeholder => 'Choose a password', :id => 'password'} | |
%input{:type => 'submit', :value => 'Sign up'} | |
.login_inner__check | |
.login_inner__check--complete | |
%i{:class =>'fa fa-check'} | |
.loggedin | |
%h2 |
$(function() { | |
"use strict" | |
var name; | |
var loggedin = $(".loggedin").hide(); | |
var t = 500; | |
function store() { | |
name = $("input#username").val(); | |
} | |
function init() { | |
$("input[type='submit']").on("click", function() { | |
store(); | |
$(".login_inner, .login_inner__avatar").animate({ | |
'opacity': '0' | |
}, t); | |
setTimeout(function() { | |
$(".login_inner__check").css({ | |
'opacity': '1', | |
'animation': 'spinner 4s 0s linear', | |
'transition': 'all ease 3s' | |
}); | |
}); | |
setTimeout(function() { | |
$(".login_inner__check--complete").find('i').animate({ | |
'opacity': '1' | |
}, 500); | |
}, 4200); | |
setTimeout(function() { | |
$(".login").fadeOut(500, function() { | |
$(this).remove(); | |
}); | |
}, 5000); | |
setTimeout(function() { | |
loggedin.fadeIn(t, function() { | |
$(this).show(); | |
$(this).find('h2').html("Welcome " + name); | |
}); | |
}, 5500); | |
setTimeout(function() { | |
$(".loggedin h2").animate({ | |
'opacity': '1' | |
}, t); | |
}, 6000); | |
}); | |
}; | |
init(); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
Playing around with more UI concepts - this time for a sign up page! I hope you guys like it! Really happy with how it turned out :D! Make sure to give yourself a username to get a custom greeting :D!
<3
A Pen by Jack Thomson on CodePen.
// Variables | |
$c-bg-color: #2B2D42; | |
$c-btn-color: #4ECDC4; | |
$radius: 4px; | |
* { | |
box-sizing: border-box; | |
margin: 0; padding: 0; | |
font-family: 'Nunito', sans-serif; | |
} | |
html,body { | |
background: #EDF2F4; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
} | |
.login { | |
background: $c-bg-color; | |
border-radius: $radius; | |
width: 300px; | |
height: auto; | |
&_inner { | |
display: flex; | |
justify-content: flex-end; | |
flex-direction: column; | |
height: 100%; | |
&__avatar { | |
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/default-avatar-ponsy-deer.png); | |
background-size: cover; | |
border: 3px solid #EDF2F4; | |
width: 4em; | |
height: 4em; | |
margin: 0 auto; | |
transform: translateY(-35px); | |
border-radius: 100%; | |
} | |
&__check { | |
border: 1px dashed #FFF; | |
border-radius: 100%; | |
width: 4em; | |
height: 4em; | |
position: absolute; | |
margin: -185px 120px; | |
opacity: 0; | |
text-align: center; | |
&--complete { | |
i { | |
line-height: 4em; | |
color: #FFF; | |
opacity: 0; | |
} | |
} | |
} | |
input { | |
appearance: none; | |
background: none; | |
border-top: none; | |
border-right: none; | |
border-left: none; | |
border-bottom: 1px solid lighten($c-bg-color, 4%); | |
width: 100%; | |
padding: 1.1em; | |
color: #FFF; | |
outline: none; | |
font-size: 0.9em; | |
text-align: left; | |
&:last-of-type { | |
border-bottom: none; | |
} | |
&[type="submit"] { | |
background: $c-btn-color;; | |
cursor: pointer; | |
border-bottom-left-radius: $radius - 2; | |
border-bottom-right-radius: $radius - 2; | |
text-align: center; | |
margin: 3em auto 0 auto; | |
} | |
} | |
} | |
} | |
.loggedin { | |
background: $c-bg-color; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 100vw; | |
height: 100vh; | |
h2 { | |
opacity: 0; | |
color: #FFF; | |
text-align: center; | |
font-size: 1.7em; | |
} | |
} | |
::-webkit-input-placeholder { | |
color: #FFF; | |
} | |
:-moz-placeholder { | |
color: #FFF; | |
} | |
::-moz-placeholder { | |
color: #FFF; | |
} | |
:-ms-input-placeholder { | |
color: #FFF; | |
} | |
::-ms-input-placeholder { | |
color: #FFF; | |
} | |
.hide { | |
opacity: 0; | |
} | |
.show { | |
opacity: 1; | |
} | |
@keyframes spinner { | |
to { | |
transform: rotate(360deg); | |
} | |
} |