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 |
Portfolio Joost Jansen 2016 | 5,671 Kb |
Skyrim Start Game UI | 4,768 Kb |
Personal website redesign v1.0 | 5,067 Kb |
React CSSTransitionGroup | 5,296 Kb |
Star Wars Battlefront I 2016 Interface | 6,229 Kb |
Flexbox is AWESOME | 2,524 Kb |
TicTacToe | 4,809 Kb |
Firebase Logo Animation | 2,830 Kb |
IPhone | 5,010 Kb |
Perspective Flipbook | 3,627 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 |
CSS3 Form | Tusharbandal | 1,836 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Lunar eclipse | Ademilter | 2,056 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!