LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Rispen

CSS
*,
*::after,
*::before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
input,
button {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

html,
body {
  background-color: #2b86ec;
  height: 100%;
}

.container {
  padding: 0 10px;
}

small {
  color: white;
  display: block;
  font-size: 0.875em;
  margin: 25px auto;
  text-align: center;
  width: 85%;
}

.section-start {
  height: 100%;
  margin: 0 auto;
  max-width: 640px;
  overflow-x: hidden;
  padding-bottom: 25px;
  position: relative;
  width: auto;
}
@media (min-width: 40em) {
  .section-start {
    overflow-x: visible;
  }
}

.section-header {
  padding: 80px 0;
}
.section-header h1 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARoAAABgCAYAAADCfb2pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM5OUI1MTczMjdEQTExRTM4QkFBRDE4RjJDQTQ0MjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM5OUI1MTc0MjdEQTExRTM4QkFBRDE4RjJDQTQ0MjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Qzk5QjUxNzEyN0RBMTFFMzhCQUFEMThGMkNBNDQyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Qzk5QjUxNzIyN0RBMTFFMzhCQUFEMThGMkNBNDQyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6heZNzAAASIElEQVR42uxdCZRU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");
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
  direction: ltr;
  font-size: 0;
  height: 48px;
  margin: 0 auto;
  overflow: hidden;
  text-indent: -99999px;
  width: 141px;
}

.section-body {
  position: relative;
}

.start-login,
.start-signup {
  -moz-transition: -moz-transform 450ms cubic-bezier(0.1, 0.15, 0, 1);
  -o-transition: -o-transform 450ms cubic-bezier(0.1, 0.15, 0, 1);
  -webkit-transition: -webkit-transform 450ms cubic-bezier(0.1, 0.15, 0, 1);
  transition: transform 450ms cubic-bezier(0.1, 0.15, 0, 1);
}
@media (min-width: 40em) {
  .start-login,
  .start-signup {
    display: none;
  }
}
.start-login.active,
.start-signup.active {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@media (min-width: 40em) {
  .start-login.active,
  .start-signup.active {
    display: block;
  }
}

.start-login {
  left: 10px;
  position: absolute;
  right: 10px;
  top: 0;
  -moz-transform: translate3d(-150%, 0, 0);
  -webkit-transform: translate3d(-150%, 0, 0);
  transform: translate3d(-150%, 0, 0);
}
@media (min-width: 40em) {
  .start-login {
    position: static;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.start-signup {
  -moz-transform: translate3d(150%, 0, 0);
  -webkit-transform: translate3d(150%, 0, 0);
  transform: translate3d(150%, 0, 0);
}
@media (min-width: 40em) {
  .start-signup {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.btn-back-login {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI2QTAyNDhFMjg5NzExRTNCRDM3Qjk2RUVBM0Y2RENBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI2QTAyNDhGMjg5NzExRTNCRDM3Qjk2RUVBM0Y2RENBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjZBMDI0OEMyODk3MTFFM0JEMzdCOTZFRUEzRjZEQ0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjZBMDI0OEQyODk3MTFFM0JEMzdCOTZFRUEzRjZEQ0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6O841RAAABfUlEQVR42uyZu0oDURCGd0ULG6sUPoCtpVjYWdhErERQwQtYmGCXhCgWWnlrtPDWKQEFMViIWljYp/QtrAUVFLP+A//CYL1nZeIMfHCm2cO3lzNzzsZJkkSdEF1Rh4SLuIiLuIiLuIiLuMg/F5kB7+AmxMW7c5KYBQ3euKLVJzIBztRcFYsiItEEPczXwKE1kdFfEutgx9rHLhJ3SmIXbFlbtUYo0askVq0tv8PgQUkc5yGRtcgQeAR9zE/BirWCOMgnkUqcgzJILImIxBMoML8ES3lKZCEywNcplbgCc+DbWq91Dfo5fgHzfyGRhcgCeOVYhA5AbFHkGYwpmWUuubE1EYkWZd6UzJ7V/UiLDeIH82rIvip0QZQleFzJ1MGm1R2iyEyBL+YbFluUNKRhnFQy26Bmdc9+yz16m7l8/CWrhw9NVvm26oRLFkUkLsCiyo/AtNXDhwY74YiFct+qiMQJC+UnuA8xQex/dV3ERVzERVzERVzERYLFjwADAAm5Q1TTuEv2AAAAAElFTkSuQmCC");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: none;
  color: transparent;
  direction: ltr;
  font-size: 0;
  height: 50px;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-indent: -99999px;
  top: -188px;
  width: 50px;
  -moz-transition: opacity 200ms ease-out;
  -o-transition: opacity 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}
.btn-back-login:focus, .btn-back-login:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.text-input-container {
  border-radius: 3px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.text-input-container input {
  background-color: white;
  border: 0;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
  color: #404040;
  display: block;
  font-size: 1.3125em;
  height: 55px;
  letter-spacing: .025em;
  outline: 0;
  padding: 0 15px;
  vertical-align: middle;
  width: 100%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
  background-image: -moz-linear-gradient(left, #ffffff, #f5f5f5);
  background-image: -webkit-linear-gradient(left, #ffffff, #f5f5f5);
  background-image: linear-gradient(to right, #ffffff, #f5f5f5);
}
.text-input-container input:last-child {
  border-bottom: 0;
}

button,
input[type=submit] {
  background-color: #e9f3fd;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), inset 0 -1px 0 white;
  color: #2b86ec;
  display: block;
  font-weight: bold;
  margin: 20px 0;
  outline: 0;
  padding: 17px 0 15px;
  width: 100%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(#ffffff, rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(#ffffff, rgba(255, 255, 255, 0));
  background-image: linear-gradient(#ffffff, rgba(255, 255, 255, 0));
  -moz-transition: background-color 150ms ease-out, box-shadow 100ms ease-out, padding 80ms ease-out;
  -o-transition: background-color 150ms ease-out, box-shadow 100ms ease-out, padding 80ms ease-out;
  -webkit-transition: background-color 150ms ease-out, box-shadow 100ms ease-out, padding 80ms ease-out;
  transition: background-color 150ms ease-out, box-shadow 100ms ease-out, padding 80ms ease-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
button:focus, button:hover,
input[type=submit]:focus,
input[type=submit]:hover {
  background-color: white;
}
button:active,
input[type=submit]:active {
  box-shadow: 0 2px 1px transparent, inset 0 -1px 0 white;
}
JS
function toggleScroll() {
  $('.start-login, .start-signup').toggleClass('active');
  //$('html, body, .section-start').animate({
  //  scrollTop: 0
  //}, 200);
}

$('.btn-signup, .btn-back-login').click(function() {
  toggleScroll();
});

$('.btn-signup, .btn-back-login').on('touchstart', function(event) {
  event.stopPropagation();
  toggleScroll();
});
Host Instantly Drag and Drop Website Builder

 

Description

Our landing page to the app currently sucks monkey balls. This is what I came up with for now.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID