League of Legends Login UI

Developer
Size
6,748 Kb
Views
22,264

How do I make an league of legends login ui?

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.. What is a league of legends login ui? How do you make a league of legends login ui? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

League of Legends Login UI Previews

League of Legends Login UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>League of Legends Login UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="client"> <div class="animation"> <div id="galio"></div> <div class="btn btn__notifications"> <i class="fa fa-exclamation"></i> </div> <div class="animation__controls"> <img src="https://upload.wikimedia.org/wikipedia/en/4/47/Riot_Games_logo.png" alt="logo" class="logo" /> <div class="animation__reset"> <div class="btn btn__reset"> <i class="fa fa-2x fa-repeat"></i> </div> </div> <div class="animation__toggles"> <div> <input type="checkbox" id="disable-animation" /> <label for="disable-animation"> <span></span>Disable Login Animations </label> </div> <div> <input type="checkbox" id="disable-music" /> <label for="disable-music"> <span></span>Disable Login Music </label> </div> </div> </div> </div> <div class="login"> <div class="login__window-controls"> <div class="btn btn__minimize"> <i class="fa fa-window-minimize"></i> </div> <div class="btn btn__help"> <i class="fa fa-question"></i> </div> <div class="btn btn__settings"> <i class="fa fa-cog"></i> </div> <div class="btn btn__close"> <i class="fa fa-times"></i> </div> </div> <img src="https://upload.wikimedia.org/wikipedia/en/7/77/League_of_Legends_logo.png" alt="logo" class="logo"/> <div class="login__forms"> <h4>Sign in</h4> <form> <div class="username"> <label for="username">Username</label> <input type="text" id="username" /> </div> <div class="password"> <label for="password">Password</label> <input type="password" id="password" /> </div> <div class="remember"> <input type="checkbox" id="remember" /> <label for="remember"><span></span>Remember Me</label> </div> <div class="region"> <label for="region">Region/Language</label> <div class="select"> <select name="region" id="region"> <option value="EU-West" selected>EU West</option> <option value="EU-Nordic and East">EU Nordic and East</option> <option value="North America">North America</option> </select> </div> </div> <div class="language"> <label for="language" hidden>Region/Language</label> <div class="select"> <select name="language" id="language"> <option value="English" selected>English</option> <option value="Deutsch">Deutsch</option> <option value="Nederlands">Nederlands</option> </select> </div> </div> </form> </div> <div class="btn btn__sign-in"> <span>Sign in</span> </div> <div class="login__links"> <a href="#"> Forgot your username?&nbsp;<i class="fa fa-external-link"></i> </a> <a href="#"> Forgot your password?&nbsp;<i class="fa fa-external-link"></i> </a> <a href="#"> Create your account&nbsp;<i class="fa fa-external-link"></i> </a> <a href="#"> Launch legacy client </a> </div> <span class="version"> V7.6-4115265.4182626 </span> </div>
</div> <script src='https://www.youtube.com/iframe_api'></script> <script src="js/index.js"></script>
</body>
</html>

League of Legends Login UI - Script Codes CSS Codes

/* ============== 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;
}

League of Legends Login UI - Script Codes JS Codes

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);
}
League of Legends Login UI - Script Codes
League of Legends Login UI - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 6,748 Kb
Views 22,264
Do you need developer help for League of Legends Login UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joost Jansen (DevItWithDavid) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!