LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html,
body {
  background-color: #2b86ec;
  color: white;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: white;
  text-decoration: none;
}

button,
a.btn {
  border: 2px solid white;
  border-radius: 30px;
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 15px 9px;
  -moz-transition: background-color 100ms ease-out, color 100ms ease-out;
  -o-transition: background-color 100ms ease-out, color 100ms ease-out;
  -webkit-transition: background-color 100ms ease-out, color 100ms ease-out;
  transition: background-color 100ms ease-out, color 100ms ease-out;
}
button:hover,
a.btn:hover {
  background-color: white;
  color: #2b86ec;
}

input {
  border: 0;
  border-radius: 3px;
  color: #404040;
  font-size: 2em;
  margin-bottom: 20px;
  outline: 0;
  padding: 10px 20px;
  width: 320px;
}
input[type=password] {
  letter-spacing: .2em;
  text-align: center;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ .label-checkbox::after {
  background-color: #404040;
  border-radius: 2px;
  height: 17px;
  left: 4px;
  top: 2px;
  width: 17px;
}

.label-checkbox {
  cursor: pointer;
  padding-left: 35px;
  position: relative;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.label-checkbox::before, .label-checkbox::after {
  content: '';
  display: block;
  position: absolute;
}
.label-checkbox::after {
  -moz-transition: background-color 150ms ease-out;
  -o-transition: background-color 150ms ease-out;
  -webkit-transition: background-color 150ms ease-out;
  transition: background-color 150ms ease-out;
}
.label-checkbox::before {
  background-color: white;
  border-radius: 2px;
  height: 25px;
  left: 0;
  top: -2px;
  width: 25px;
}

.section-footer {
  bottom: 0;
  left: 0;
  padding-bottom: 50px;
  position: absolute;
  right: 0;
}

.section-login {
  display: table;
  height: 100%;
  text-align: center;
  width: 100%;
}
.section-login .section-center {
  display: table-cell;
  vertical-align: middle;
}
.section-login h2 {
  font-size: 5em;
  font-weight: 200;
  margin: 0 0 30px;
}

.link-lostpass {
  color: rgba(255, 255, 255, 0.6);
  font-size: .9em;
  -moz-transition: color 150ms ease-out;
  -o-transition: color 150ms ease-out;
  -webkit-transition: color 150ms ease-out;
  transition: color 150ms ease-out;
}
.link-lostpass:hover {
  color: white;
}
JS
var username = 'Thomas';
Host Instantly Drag and Drop Website Builder

 

Description

Personalised login prototype for Rispen app. Appears if users go to their personalized URL
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID