LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
/* ============== BASE ============== */
html, body {
  height: 100%;
}

body {
  position: relative;
  -webkit-font-smoothing: antialiased;
  background-color: #ddd;
}

/* ============== VARIABLES ============== */
/* ============== COMPONENTS ============== */
.client {
  height: 700px;
  width: 1100px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url(https://i.ytimg.com/vi/V2qpVcPTGP8/maxresdefault.jpg) no-repeat center/cover;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  border-top: 2px solid #785a28;
}

#galio {
  position: absolute;
  top: 50%;
  left: 60%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}

img.logo {
  height: 50px;
}

.animation {
  -webkit-box-flex: 10;
      -ms-flex: 10;
          flex: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.animation__controls {
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.7), transparent);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  font-size: 12px;
}
.animation__controls img.logo {
  padding-right: 20px;
  border-right: 1px solid #777;
}
.animation__reset {
  padding: 0 20px;
  -webkit-transform: rotate(75deg);
          transform: rotate(75deg);
}
.animation__toggles {
  height: 43px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.animation__toggles > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.animation__toggles label {
  margin-left: 5px;
}

.login {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px 15px;
  background-color: #010a13;
  border-left: 1px solid #797979;
}
.login__window-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.login__window-controls > .btn {
  color: #797979;
}
.login__window-controls > .btn:not(:first-child) {
  padding-left: 30px;
}
.login img.logo {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin-top: 20px;
}
.login__forms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.login__forms h4 {
  text-transform: uppercase;
  color: #797979;
  font-family: "Georgia", sans-serif;
}
.login__forms label {
  margin-bottom: 2px;
}
.login__forms .username,
.login__forms .password {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
}
.login__forms .remember {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login__forms .region {
  margin-top: 20px;
}
.login__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  margin-top: auto;
  margin-bottom: 10px;
}
.login__links > a {
  text-decoration: none;
  color: #13a7bb;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}
.login__links > a:last-child {
  margin-top: 5px;
  color: #eed28b;
}
.login__links > a:hover {
  color: #fefefe;
}
.login > span {
  text-align: center;
  font-family: "Georgia", sans-serif;
  font-weight: 800;
  font-size: 12px;
  border-top: 1px solid #797979;
  color: #797979;
  padding: 10px 0 5px 0;
}

.btn {
  color: #fff;
  cursor: pointer;
}
.btn__notifications {
  z-index: 2;
  -ms-flex-item-align: start;
      align-self: flex-start;
  position: relative;
  top: 30px;
  left: 30px;
  padding: 8px 15px;
  background-color: teal;
  border-radius: 50%;
}
.btn__notifications:after {
  content: '';
  height: 24px;
  width: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}
.btn__notifications:hover {
  background-color: none;
  background-image: -webkit-linear-gradient(bottom, rgba(212, 212, 212, 0.5), teal);
  background-image: linear-gradient(to top, rgba(212, 212, 212, 0.5), teal);
}
.btn__reset {
  padding: 13px 15px 14px 15px;
  background-color: rgba(0, 10, 0, 0.2);
  border-radius: 50%;
  position: relative;
}
.btn__reset:after {
  content: '';
  height: 38px;
  width: 38px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 2px solid #c4a361;
  border-radius: 50%;
}
.btn__reset:hover {
  background-color: none;
  background-image: -webkit-linear-gradient(right, rgba(212, 212, 212, 0.5), rgba(0, 10, 0, 0.2));
  background-image: linear-gradient(to left, rgba(212, 212, 212, 0.5), rgba(0, 10, 0, 0.2));
}
.btn__sign-in {
  padding: 7.5px 0;
  margin-top: auto;
  text-align: center;
  font-weight: bold;
  font-family: "Georgia", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  color: #13a7bb;
  background-color: #052b30;
  border: 2px solid #13a7bb;
}

/* ============== SHAME/CLEANUP ============== */
* {
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  cursor: pointer;
}
input[type="checkbox"] + label:hover {
  color: #fefefe;
}
input[type="checkbox"] + label span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px 0 0;
  vertical-align: bottom;
  border: 1px solid #c4a361;
  background: #010a13;
}
input[type="checkbox"]:checked + label span {
  background: -webkit-radial-gradient(ellipse, #daa520, #0f0f0f);
  background: radial-gradient(ellipse, #daa520, #0f0f0f);
}

input[type="text"],
input[type="password"] {
  width: calc(100% - 10px);
  height: 30px;
  margin: 5px 0;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid #c4a361;
  background-color: #101621;
  color: #dcc790;
}

div.select {
  border: 1px solid #c4a361;
  background-color: #101621;
  height: 30px;
  margin: 5px 0;
}

select {
  background: transparent;
  border: none;
  height: 30px;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #d2b986;
}
select option {
  font-size: 12px;
  background-color: #fff;
  color: #000;
}

label {
  color: #797979;
  font-size: 12px;
}
JS
const disableMusic = document.querySelector('#disable-music');
const disableAnimation = document.querySelector('#disable-animation');
const resetAnimation = document.querySelector('.btn__reset');
let grid = null;
let player;

disableMusic.addEventListener('click', mutePlayer);
disableAnimation.addEventListener('click', disablePlayer);
resetAnimation.addEventListener('click', resetPlayer);

function onYouTubeIframeAPIReady() {
    player = new YT.Player('galio', {
        height: '700',
        width: '1250',
        videoId: '8QrdnvOFnb4',
        playerVars: {
            autoplay: 1,
            controls: 0,
            disablekb: 1,
            fs: 0,
            loop: 1,
            playlist: "8QrdnvOFnb4",
            modestbranding: 1,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3,
            enablejsapi: 1,
            frameborder: 0
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.playVideo();
    grid = location.pathname.match(/fullcpgrid/i);
    if (grid !== null) {
        player.mute();
    }
}

function mutePlayer() {
    if (player.isMuted()) {
        player.unMute();
    } else {
        player.mute();
    }
}

function disablePlayer() {
    if (player.getPlayerState() === 2) { // paused
        resetPlayer();
        player.playVideo();
    } else if (player.getPlayerState() === 1) {
        player.seekTo(15);
        player.pauseVideo();
    }
}

function resetPlayer() {
    player.seekTo(0);
}
Host Instantly Drag and Drop Website Builder

 

Description

I tried to recreate the League of Legends login UI 2017 version in codepen. I primarily used flexbox for positioning and I used the YouTube iframe API for the login animation and controls.
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID