Skyrim Start Game UI
How do I make an skyrim start game ui?
I recreated the Skyrim game start ui using flexbox, css transitions and plain js. What is a skyrim start game ui? How do you make a skyrim start game ui? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.
Skyrim Start Game UI - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Skyrim Start Game 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://fonts.googleapis.com/css?family=BenchNine'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="skyrim"> <img src="http://vgboxart.com/resources/logo/1636_bethesda_game_studios-prev.png" class="bethesda-logo" alt="bethesda logo" /> <ul class="menu"> <li><a href="#" data-overlay-activate="continue">Continue</a></li> <li><a href="#" data-overlay-activate="new">New</a></li> <li><a href="#" data-overlay-activate="load">Load</a></li> <li><a href="#" data-overlay-activate="credits">Credits</a></li> <li><a href="#" data-overlay-activate="quit">Quit</a></li> </ul>
</div>
<div class="overlay js-overlay-continue"> <div class="borders"></div> <div class="catcher" data-overlay-close="continue"></div> <p>Continue from your last save?</p> <div class="overlay__controls"> <a href="#" class="btn btn__yes">Yes</a> <a href="#" class="btn btn__no">No</a> </div>
</div>
<div class="overlay js-overlay-new"> <div class="borders"></div> <div class="catcher" data-overlay-close="new"></div> <p>Start a new game?</p> <div class="overlay__controls"> <a href="#" class="btn btn__yes">Yes</a> <a href="#" class="btn btn__no">No</a> </div>
</div>
<div class="overlay js-overlay-load"> <div class="borders"></div> <div class="catcher" data-overlay-close="load"></div> <p>Load a game</p> <ul class="saves"> <li class="saves__quick"><a href="#">Skyrim</a></li> <li class="saves__auto"><a href="#">Sleeping Giant Inn</a></li> <li class="saves__auto"><a href="#">Temple of Miraak</a></li> <li class="saves__index"><a href="#">Skyrim</a></li> <li class="saves__index"><a href="#">Skyrim</a></li> <li class="saves__index"><a href="#">Skyrim</a></li> </ul> <div class="overlay__controls"> <a href="#"class="btn btn__yes">Yes</a> <a href="#"class="btn btn__no">No</a> </div>
</div>
<div class="overlay js-overlay-credits"> <div class="borders"></div> <div class="catcher" data-overlay-close="credits"></div> <p>View the credits?</p> <div class="overlay__controls"> <a href="#" class="btn btn__yes">Yes</a> <a href="#" class="btn btn__no">No</a> </div>
</div>
<div class="overlay js-overlay-quit"> <div class="borders"></div> <div class="catcher" data-overlay-close="quit"></div> <p>Are you sure you want to quit?</p> <div class="overlay__controls"> <a href="#" class="btn btn__yes">Yes</a> <a href="#" class="btn btn__no">No</a> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Skyrim Start Game UI - Script Codes CSS Codes
html,
body { height: 100%;
}
body { -webkit-font-smoothing: antialiased; overflow: hidden; position: relative; font-family: "BenchNine", sans-serif;
}
.skyrim { height: 720px; width: 1280px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 20px; background: url(http://orig00.deviantart.net/06cb/f/2011/237/9/b/high_res_esv__skyrim_logo_icon_by_soapgoat-d47rexb.png) no-repeat 20% center, #101010; overflow: hidden;
}
img.bethesda-logo { height: 100px; padding: 30px;
}
ul.menu { list-style: none; padding: 100px 60px; margin: 0; text-align: right;
}
ul.menu li { text-transform: uppercase; font-size: 22px; margin-bottom: 5px;
}
ul.menu li:first-child { font-size: 32px; margin-bottom: 5px;
}
ul.menu li:last-child { font-size: 18px;
}
ul.menu a { text-decoration: none; color: #777;
}
ul.menu a:hover { color: #fff;
}
ul.menu a.active { color: #fff;
}
.overlay { height: 720px; width: 250px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-size: 20px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 50%; right: 50%; -webkit-transform: translate(340%, -50%); transform: translate(340%, -50%); opacity: 0; -webkit-transition: opacity 200ms linear, -webkit-transform 200ms linear; transition: opacity 200ms linear, -webkit-transform 200ms linear; transition: opacity 200ms linear, transform 200ms linear; transition: opacity 200ms linear, transform 200ms linear, -webkit-transform 200ms linear;
}
.overlay.active { opacity: 1; -webkit-transform: translate(170%, -50%); transform: translate(170%, -50%); -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition: opacity 300ms ease-out, transform 300ms ease-out; transition: opacity 300ms ease-out, transform 300ms ease-out, -webkit-transform 300ms ease-out;
}
.overlay .borders { z-index: -1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 100%; width: 235px; border-left: 2px solid #444; border-right: 2px solid #444;
}
.overlay .catcher { position: absolute; bottom: 100px; left: 250px; height: 200px; width: 200px;
}
.overlay p { margin: 0; color: #fff; padding-bottom: 100px; text-align: center;
}
.overlay__controls { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; padding-bottom: 100px;
}
.overlay .saves { list-style: none; padding: 40px; margin: 0;
}
.overlay .saves li a { color: #777; text-transform: uppercase; text-decoration: none;
}
.overlay .saves li a:hover { color: #fff;
}
.overlay .saves li a:before { padding-right: 10px;
}
.overlay .saves__quick a:before { content: 'QUICK';
}
.overlay .saves__auto a:before { content: 'AUTO';
}
.overlay .saves__index:nth-child(4) a:before { content: "34";
}
.overlay .saves__index:nth-child(5) a:before { content: "35";
}
.overlay .saves__index:nth-child(6) a:before { content: "36";
}
.btn { text-decoration: none; color: #777; font-weight: bold;
}
.btn:before { color: #eee; font-weight: normal; border-top: 2px solid #777; border-right: 1px solid #777; border-bottom: 2px solid #777; border-left: 1px solid #777; border-radius: 5px; margin-right: 3px; padding: 0 1px;
}
.btn__yes:before { content: 'Enter';
}
.btn__no:before { content: 'Tab';
}
Skyrim Start Game UI - Script Codes JS Codes
const menuItems = document.querySelectorAll('ul.menu li a');
const clickCatchers = document.querySelectorAll('.catcher');
const yesBtns = document.querySelectorAll('a.btn__yes');
const noBtns = document.querySelectorAll('a.btn__no');
let activeListItem = null;
Array.from(yesBtns).forEach(b => { b.addEventListener('click', e => { console.log("canceled button click"); e.preventDefault(); });
});
Array.from(noBtns).forEach(b => { b.addEventListener('click', e => { console.log("canceled button click"); e.preventDefault(); });
});
Array.from(menuItems).forEach(m => { m.addEventListener('click', e => activateOverlay(e));
});
Array.from(clickCatchers).forEach(c => { c.addEventListener('click', e => closeOverlay(e));
});
// function confirm(e) {
// }
// function cancel(e) {
// }
function activateOverlay(event) { event.preventDefault(); activeListItem = event.target; event.target.classList.add('active'); const overlayName = event.target.getAttribute('data-overlay-activate'); const overlayEl = document.querySelector(`.js-overlay-${overlayName}`); overlayEl.classList.add('active');
}
function closeOverlay(event) { event.preventDefault(); activeListItem.classList.remove('active'); const overlayName = event.target.getAttribute('data-overlay-close'); const overlayEl = document.querySelector(`.js-overlay-${overlayName}`); overlayEl.classList.remove('active');
}
Developer | Joost Jansen |
Username | DevItWithDavid |
Uploaded | November 19, 2022 |
Rating | 4 |
Size | 4,768 Kb |
Views | 20,240 |
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 |
React Close Dialog with Animation | 5,569 Kb |
Flexbox Layout - One page website | 5,649 Kb |
Personal Website Redesign v2.0 | 5,168 Kb |
My Business Card | 4,034 Kb |
TicTacToe | 4,809 Kb |
Personal website redesign v1.0 | 5,067 Kb |
A Pen by Joost Jansen | 4,394 Kb |
CSGO image overlay using clip path | 2,794 Kb |
JQuery Image Slider | 3,407 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 |
Pomodoro Clock | Osycon | 3,705 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Rain Landing in a Pond | Edball | 3,009 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!