123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <style type="text/css">
- #main-menu h1 {
- font-family: sans-serif;
- font-weight: normal;
- font-size: 4em;
- }
- #main-menu button {
- width: 200px;
- height: 160px;
- font-size: 2em;
- background-color: transparent;
- border: 4px solid white;
- border-radius: 16px;
- color: white;
- transition: all 0.2s ease-in-out;
- }
- #main-menu button:hover {
- background-color: white;
- color: black;
- cursor: pointer;
- }
- #main-menu {
- font-family: sans-serif;
- color: white;
- text-align: center;
- width: 50%;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
- padding-top: 12%;
- }
- #level-select {
- opacity: 0;
- font-family: sans-serif;
- color: white;
- text-align: center;
- width: 50%;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
- padding-top: 12%;
- }
- #level-select button {
- width: 50px;
- height: 50px;
- font-size: 1.5em;
- background-color: transparent;
- border: 2px solid white;
- border-radius: 8px;
- color: white;
- transition: all 0.2s ease-in-out;
- margin: 0.5em 0.5em;
- }
- #level-select button:hover {
- background-color: white;
- color: black;
- cursor: pointer;
- }
- @media (max-width: 320px) {
- #main-menu {
- padding-top: 20px;
- }
- #level-select {
- padding-top: 20px;
- }
- }
- </style>
- <div id="main-menu">
- <h1>Tilegrid Rogue</h1>
- <button id="play-button">Play</button>
- </div>
- <div id="level-select">
- <h1>Level Select</h1>
- <button data-level='1'>1</button>
- <button data-level='2'>2</button>
- <button data-level='3'>3</button>
- <button data-level='4'>4</button>
- <button data-level='5'>5</button>
- <button data-level='6'>6</button>
- <button data-level='7'>7</button>
- <button data-level='8'>8</button>
- <button data-level='9'>9</button>
- <button data-level='10'>10</button>
- <button data-level='11'>11</button>
- <button data-level='12'>12</button>
- <button data-level='13'>13</button>
- <button data-level='14'>14</button>
- <button data-level='15'>15</button>
- <button data-level='16'>16</button>
- <button data-level='17'>17</button>
- <button data-level='18'>18</button>
- <button data-level='19'>19</button>
- <button data-level='20'>20</button>
- </div>
|