Game Start Page
How do I make an game start page?
What is a game start page? How do you make a game start page? This script and codes were developed by Leo on 05 January 2023, Thursday.
Game Start Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Game Start Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="game"> <div class="background gradient-blue"></div> <h1 id="title">Generic Game</h1> <div id="menu" class="center"> <a href="javascript:startGame()" class="button bigbutton" id="startGame"><span>START</span></a> </div> <div id="footer">Notice how the background is animated? I spent a lot of time on that.<br>Made by theLMGN in 2017. <a href="https://thelmgn.com">https://thelmgn.com/</div>
</div> <script src="js/index.js"></script>
</body>
</html>
Game Start Page - Script Codes CSS Codes
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
.background { position: fixed; z-index: 0; width: 100%; height: 100%; left: 0; top: 0;
}
@keyframes gradient-blue-anim { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
#game { background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5f8 75%); background-size: 200% 200%; animation-name: gradient-blue-anim; animation-duration: 10s; animation-iteration-count: infinite;
}
#footer { height: 2.5em; width: 100%; left: 0; bottom: 0; position: fixed; font-size: 0.75em; text-align: center;
}
#game { color: #fff; font-family: "Varela Round","Segoe UI", "Futura", "Ubuntu", "Source Sans", "Roboto"; width: 100%; height: 100%; position: fixed;
}
body { margin: 0;
}
.center { align-items: center; display: flex; justify-content: center; z-index: 2;
}
.button { background: #fa0dad; position: fixed; font-size: 3em; top: calc(50% - calc(1.25em / 2)); height: 1.25em; text-decoration: none; color: #fff;
}
#title { text-align: center; width: 100%;
}
Game Start Page - Script Codes JS Codes
function startGame() { document.getElementById("menu").style.display = "none";
}
Developer | Leo |
Username | theLMGN |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 2,287 Kb |
Views | 8,096 |
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 |
BigPicture Spammy | 1,395 Kb |
Maths. | 1,549 Kb |
Skycade Reset Counter | 3,124 Kb |
Vivaldi Ad Slider | 2,026 Kb |
Fidget Spinner | 1,770 Kb |
Testing BootStrap | 1,518 Kb |
A Pen by Leo | 4,909 Kb |
Websocket Box Test | 2,518 Kb |
Not You Generator | 3,763 Kb |
Pause Based Volume Slider | 2,319 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 |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Toolbar | Onsen | 5,414 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Algorithm practice | Abensur | 5,620 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Box-sizing | Elad2412 | 1,572 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!