League of Legends Login UI
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 - 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? <i class="fa fa-external-link"></i> </a> <a href="#"> Forgot your password? <i class="fa fa-external-link"></i> </a> <a href="#"> Create your account <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);
}
Developer | Joost Jansen |
Username | DevItWithDavid |
Uploaded | November 19, 2022 |
Rating | 3 |
Size | 6,748 Kb |
Views | 22,264 |
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!
Name | Size |
Star Wars Battlefront I 2016 Interface | 6,229 Kb |
CSGO image overlay using clip path | 2,794 Kb |
React Close Dialog with Animation | 5,569 Kb |
My Business Card | 4,034 Kb |
Flexbox Mixin | 2,746 Kb |
Flexbox Layout - One page website | 5,649 Kb |
Firebase Logo Animation | 2,830 Kb |
Material ripple effect with pure CSS and JS | 3,408 Kb |
Portfolio Joost Jansen 2016 | 5,671 Kb |
React CSSTransitionGroup | 5,296 Kb |
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!
Name | Username | Size |
Fullscreen Parallax | Bassta | 3,313 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!