123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="./style.css">
- </head>
- <body>
-
- <h1>Yo-Kai Watch Medallium</h1>
- <div id="binder">
- <table id="left" style="float: left;">
- <tr>
- <td id="medal-1">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-1"></div>
- <div class="outline"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-2">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-2"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-3">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-3"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
-
- <tr>
- <td id="medal-4">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-4"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-5">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-5"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-6">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-6"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
-
- <tr>
- <td id="medal-7">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-7"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-8">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-8"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-9">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-9"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
-
- <tr>
- <td id="medal-10">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-10"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-11">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-11"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-12">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-12"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
- </table>
- <table id="right" style="display: inline-block;">
- <tr>
- <td id="medal-13">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-1"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-14">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-2"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-15">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-3"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
-
- <tr>
- <td id="medal-16">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-4"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-17">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-5"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-18">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-6"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
-
- <tr>
- <td id="medal-19">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-7"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-20">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-8"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-21">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-9"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
-
- <tr>
- <td id="medal-22">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-10"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-23">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-11"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- <td id="medal-24">
- <div class="medal-container">
- <div id="triangle"></div>
- <div id="text-12"></div>
- <div class="outline" data-selected="false"></div>
- <div id="circle"></div>
- </div>
- </td>
- </tr>
- </table>
- <br>
- <div class="page-number" id="page-number-l">01</div>
- <div class="page-number" id="page-number-r">02</div>
- <script src="script.js"></script>
- </div>
- </body>
- </html>
|