Guest User

Untitled

a guest
Jun 26th, 2019
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.58 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> Find The Pair </title>
  5. <link rel="stylesheet" type="text/css" href="gamestyle.css" />
  6. <script src="script.js" async></script>
  7. </head>
  8. <body>
  9.  
  10.  
  11. <section class="memory-game">
  12. <pre> </pre>
  13. <h1 class="page-title">Find The Pair</h1>
  14.  
  15. <div class="panel">
  16. <select id="keke" class="panel" onchange="updateCards()">
  17. <option value="36">36</option>
  18. <option value="64">64</option>
  19. <option value="81">81</option>
  20. <option value="100">100</option>
  21. </select>
  22.  
  23. </div>
  24.  
  25.  
  26. <div id="hehe" class="overlay-text visible" >
  27. Click To Start
  28. </div>
  29.  
  30. <div id="game-over-text" class="overlay-text">
  31. GAME OVER
  32. <span class="overlay-text-small">Click to Restart</span>
  33. </div>
  34. <div id="victory-text" class="overlay-text">
  35. VICTORY
  36. <span class="overlay-text-small">Click to Restart</span>
  37. </div>
  38.  
  39.  
  40. <div id="content" class="game-container">
  41.  
  42. <div class="game-info-container">
  43. <div class="game-info">
  44. Time <span id="time-remaining">0</span>
  45. </div>
  46. <div class="game-info">
  47. Flips <span id="flips">0</span>
  48. </div>
  49.  
  50. </div>
  51.  
  52. <div class="memory-card" data-framework="1">
  53. <img class="front-face" src="1.png">
  54. <img class="back-face" src="back.png">
  55. </div>
  56. <div class="memory-card" data-framework="1">
  57. <img class="front-face" src="1.png" >
  58. <img class="back-face" src="back.png">
  59. </div>
  60. <div class="memory-card" data-framework="2">
  61. <img class="front-face" src="2.png" >
  62. <img class="back-face" src="back.png">
  63. </div>
  64. <div class="memory-card" data-framework="2">
  65. <img class="front-face" src="2.png" >
  66. <img class="back-face" src="back.png">
  67. </div>
  68. <div class="memory-card" data-framework="3">
  69. <img class="front-face" src="3.png" >
  70. <img class="back-face" src="back.png">
  71. </div>
  72. <div class="memory-card" data-framework="3">
  73. <img class="front-face" src="3.png" >
  74. <img class="back-face" src="back.png">
  75. </div>
  76. <div class="memory-card" data-framework="4">
  77. <img class="front-face" src="4.png" >
  78. <img class="back-face" src="back.png">
  79. </div>
  80. <div class="memory-card" data-framework="4">
  81. <img class="front-face" src="4.png" >
  82. <img class="back-face" src="back.png">
  83. </div>
  84. <div class="memory-card" data-framework="5">
  85. <img class="front-face" src="5.png" >
  86. <img class="back-face" src="back.png">
  87. </div>
  88. <div class="memory-card" data-framework="5">
  89. <img class="front-face" src="5.png" >
  90. <img class="back-face" src="back.png">
  91. </div>
  92. <div class="memory-card" data-framework="6">
  93. <img class="front-face" src="6.png" >
  94. <img class="back-face" src="back.png">
  95. </div>
  96. <div class="memory-card" data-framework="6">
  97. <img class="front-face" src="6.png" >
  98. <img class="back-face" src="back.png">
  99. </div>
  100. <div class="memory-card" data-framework="7">
  101. <img class="front-face" src="7.png" >
  102. <img class="back-face" src="back.png">
  103. </div>
  104. <div class="memory-card" data-framework="7">
  105. <img class="front-face" src="7.png" >
  106. <img class="back-face" src="back.png">
  107. </div>
  108. <div class="memory-card" data-framework="8">
  109. <img class="front-face" src="8.png" >
  110. <img class="back-face" src="back.png">
  111. </div>
  112. <div class="memory-card" data-framework="8">
  113. <img class="front-face" src="8.png" >
  114. <img class="back-face" src="back.png">
  115. </div>
  116. <div class="memory-card" data-framework="9">
  117. <img class="front-face" src="9.png" >
  118. <img class="back-face" src="back.png">
  119. </div>
  120. <div class="memory-card" data-framework="9">
  121. <img class="front-face" src="9.png" >
  122. <img class="back-face" src="back.png">
  123. </div>
  124. <div class="memory-card" data-framework="10">
  125. <img class="front-face" src="10.png" >
  126. <img class="back-face" src="back.png">
  127. </div>
  128. <div class="memory-card" data-framework="10">
  129. <img class="front-face" src="10.png" >
  130. <img class="back-face" src="back.png">
  131. </div>
  132. <div class="memory-card" data-framework="11">
  133. <img class="front-face" src="11.png" >
  134. <img class="back-face" src="back.png">
  135. </div>
  136. <div class="memory-card" data-framework="11">
  137. <img class="front-face" src="11.png" >
  138. <img class="back-face" src="back.png">
  139. </div>
  140. <div class="memory-card" data-framework="12">
  141. <img class="front-face" src="12.png" >
  142. <img class="back-face" src="back.png">
  143. </div>
  144. <div class="memory-card" data-framework="12">
  145. <img class="front-face" src="12.png" >
  146. <img class="back-face" src="back.png">
  147. </div>
  148. <div class="memory-card" data-framework="13">
  149. <img class="front-face" src="13.png" >
  150. <img class="back-face" src="back.png">
  151. </div>
  152. <div class="memory-card" data-framework="13">
  153. <img class="front-face" src="13.png" >
  154. <img class="back-face" src="back.png">
  155. </div>
  156. <div class="memory-card" data-framework="14">
  157. <img class="front-face" src="14.png" >
  158. <img class="back-face" src="back.png">
  159. </div>
  160. <div class="memory-card" data-framework="14">
  161. <img class="front-face" src="14.png" >
  162. <img class="back-face" src="back.png">
  163. </div>
  164. <div class="memory-card" data-framework="15">
  165. <img class="front-face" src="15.png" >
  166. <img class="back-face" src="back.png">
  167. </div>
  168. <div class="memory-card" data-framework="15">
  169. <img class="front-face" src="15.png" >
  170. <img class="back-face" src="back.png">
  171. </div>
  172. <div class="memory-card" data-framework="16">
  173. <img class="front-face" src="16.png" >
  174. <img class="back-face" src="back.png">
  175. </div>
  176. <div class="memory-card" data-framework="16">
  177. <img class="front-face" src="16.png" >
  178. <img class="back-face" src="back.png">
  179. </div>
  180. <div class="memory-card" data-framework="17">
  181. <img class="front-face" src="17.png" >
  182. <img class="back-face" src="back.png">
  183. </div>
  184. <div class="memory-card" data-framework="17">
  185. <img class="front-face" src="17.png" >
  186. <img class="back-face" src="back.png">
  187. </div>
  188. <div class="memory-card" data-framework="18">
  189. <img class="front-face" src="18.png" >
  190. <img class="back-face" src="back.png">
  191. </div>
  192. <div class="memory-card" data-framework="18">
  193. <img class="front-face" src="18.png" >
  194. <img class="back-face" src="back.png">
  195. </div>
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205. </div>
  206. </section>
  207.  
  208. </body>
  209. </html>
Advertisement
Add Comment
Please, Sign In to add comment