Skyrim Start Game UI

Developer
Joost Jansen
Size
4,768 Kb
Views
20,240
  1. Skyrim Start Game UI Previews
  2. Skyrim Start Game UI HTML Codes
  3. Skyrim Start Game UI CSS Codes
  4. Skyrim Start Game UI JS Codes

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 Previews
IQ Test

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');
}
Skyrim Start Game UI - Script Codes
Skyrim Start Game UI - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 4
Size 4,768 Kb
Views 20,240
Do you need developer help for Skyrim Start Game 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
Name
CSGO image overlay using clip path
Overwatch cards, three styles
My Business Card
React CSSTransitionGroup
Material ripple effect with pure CSS and JS
A Pen by Joost Jansen
Firebase Logo Animation
DevWars Objectives Template
Personal Website Redesign v2.0
Flexbox Layout - One page website
Create amazing Facebook ads 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!