12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <style type="text/css">
- .container {
- text-align: center;
- height: 100vh;
- }
- h1 {
- font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
- color: white;
- font-size: 72px;
- font-weight: lighter;
- text-shadow: black 4px 4px 10px;
- }
- button#start-button {
- margin: 0;
- padding: 0;
- background-color: rgba(255, 255, 255, 0.5);
- color: black;
- font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
- width: 200px;
- height: 160px;
- border: 0;
- bottom: 25%;
- margin-left: -100px;
- border-radius: 8px;
- font-size: 48px;
- font-weight: lighter;
- position: absolute;
- }
- button#start-button:hover {
- cursor: pointer;
- background-color: white;
- }
-
- button.mutebutton {
- border: none;
- background-color: transparent;
- font-size: 18px;
- font-weight: normal;
- position: absolute;
- top: 16px;
- right: 16px;
- }
- button.mutebutton:after {
- content: "🔊";
- }
- button.mutebutton:hover {
- background-color: transparent;
- cursor: pointer;
- }
- button.mutebutton:hover:after {
- content: "🔇"
- }
- button.unmutebutton {
- border: none;
- background-color: transparent;
- font-size: 18px;
- font-weight: normal;
- position: absolute;
- top: 16px;
- right: 16px;
- }
- button.unmutebutton:after {
- content: "🔇";
- }
- button.unmutebutton:hover {
- background-color: transparent;
- cursor: pointer;
- }
- button.unmutebutton:hover:after {
- content: "🔊"
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>SHMUP Demo</h1>
- <button id="start-button">Play</button>
- <button id="sound-button" class="unmutebutton"> </button>
- </div>
- </body>
- </html>
|