API tools faq
paste
Advertisement
CrystalChimera

Toyhou.se HTML Code | Pokemon

CrystalChimera
Dec 9th, 2020
649
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.97 KB | None | 0 0
raw download clone embed print report
  1. <div class="container mx-auto" style="width:900px;">
  2. <div align="center">
  3. <div class="card card-outline-warning mb-4" style="width:600px;">
  4. <div class="card-header bg-warning text-white display-3"><i class="fa fa-id-card"></i><strong>&nbsp;Basics<br></strong></div>
  5. <div class="card-block bg-faded">
  6.  
  7. <table class="border-0 w-80 mx-auto">
  8. <tbody>
  9. <tr>
  10. <td class="w-60 align-top" style="text-align: center;"><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-center mr-1 img-rounded fr-fil fr-dib" width="100" height="100"></td>
  11. </tr>
  12. </tbody>
  13. </table>
  14. <div align="center"><span class="badge badge-pill badge-warning" style="font-size: 20px;">Type 1</span> | <span class="badge badge-pill badge-warning" style="font-size: 20px;">Type 2</span></div>
  15. <div align="center">Ability | Hidden Ability</div>
  16.  
  17. <table class="border-0 w-85 mx-auto">
  18. <tbody>
  19. <tr>
  20. <td class="w-60 align-top" style="text-align: left;"><strong>【Name】</strong> Name
  21. <br><strong>【Age】</strong> Age
  22. <br><strong>【Gender】</strong> Gender
  23. <br><strong>【Origin】</strong> First we kick it in Kanto
  24. <br><strong>【Trainer】</strong> Who caught you
  25. <br><strong>【Status】</strong> View this however you wish
  26. <br>
  27. </td>
  28. <td class="w-60 align-top" style="text-align: left;"><strong>【Nickname(s)】</strong> Nicknames
  29. <br><strong>【Orientation】</strong> What they&#39;re into
  30. <br><strong>【Race】</strong> Pikachu or Lycanroc
  31. <br><strong>【Alignment】</strong> Naught or nice?
  32. <br><strong>【Pokeball】</strong> Oh boy a Master Ball
  33. <br><strong>【Theme】</strong> Song link</td>
  34. </tr>
  35. </tbody>
  36. </table>
  37.  
  38. <table class="border-0 w-85 mx-auto">
  39. <tbody>
  40. <tr>
  41. <td class="w-60 align-top" style="text-align: left;"><strong>【Coding】</strong> @CrystalChimera</td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="card card-outline-warning mb-4">
  49. <div class="card-header bg-warning text-white display-3"><i class="fa fa-user"></i><strong>&nbsp;Design<br></strong></div>
  50. <div class="card-block bg-faded">
  51.  
  52. <p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-right rounded ml-1 fr-fir fr-dib" width="350" height="350"></p>
  53.  
  54. <table class="border-0 w-50 mx-auto">
  55. <tbody>
  56. <tr>
  57. <td class="w-50 align-top"><strong>【Height】</strong> Tol? Smol?
  58. <br><strong>【Skin tone】</strong> Or fur
  59. <br><strong>【Hair Color】</strong> Content
  60. <br><strong>【Demeanor】</strong> content
  61. <br><strong>【IQ Group】</strong> Ignore if not part of Pokemon Mystery Dungeon
  62. <br>
  63. </td>
  64. <td class="w-50 align-top"><strong>【Build】</strong> Bara or Lanky
  65. <br><strong>【Eye color】</strong> content
  66. <br><strong>【Hair style】</strong> Pokemon have hair?
  67. <br><strong>【Style】</strong> Goth? Prep?
  68. <br><strong>【Body Size】</strong> Same as IQ Group
  69. <br>
  70. </td>
  71. </tr>
  72. </tbody>
  73. </table>
  74.  
  75. <p>What kind of Pokemon are you? Also feel free to change the color of these boxes to fit the Type or Pokedex entry your Pokemon has! ;D You can do the same with those pill shaped things that says &quot;Type&quot; in them! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  76.  
  77. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="container mx-auto" style="width:800px;">
  82. <div class="card card-outline-warning mb-4" style="height:450px;">
  83. <div class="card-header bg-warning text-white display-3"><i class="fa fa-heartbeat"></i><strong>&nbsp;Personality<br></strong></div>
  84. <div class="card-block bg-faded">
  85. <div>
  86.  
  87. <p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left rounded ml-1 fr-fir fr-dib" width="150" height="150"></p>
  88.  
  89. <p>Do you have a heart that&#39;s true? Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  90. <br>
  91.  
  92. <table class="w-100 border-0">
  93. <tbody>
  94. <tr>
  95. <td class="align-top" style="width:33.3%;"><strong>【Likes】</strong>
  96.  
  97. <ul class="mb-0">
  98. <li>Lorem ipsum dolor sit amet</li>
  99. <li>Lorem ipsum dolor sit amet</li>
  100. <li>Lorem ipsum dolor sit amet</li>
  101. <li>Lorem ipsum dolor sit amet</li>
  102. <li>Lorem ipsum dolor sit amet</li>
  103. </ul>
  104. </td>
  105. <td class="align-top" style="width:33.3%;"><strong>【Dislikes】</strong>
  106.  
  107. <ul class="mb-0">
  108. <li>Lorem ipsum dolor sit amet</li>
  109. <li>Lorem ipsum dolor sit amet</li>
  110. <li>Lorem ipsum dolor sit amet</li>
  111. <li>Lorem ipsum dolor sit amet</li>
  112. <li>Lorem ipsum dolor sit amet</li>
  113. </ul>
  114. </td>
  115. <td class="align-top" style="width:33.3%;"><strong>【Habits/Hobbies】</strong>
  116.  
  117. <ul class="mb-0">
  118. <li>Lorem ipsum dolor sit amet</li>
  119. <li>Lorem ipsum dolor sit amet</li>
  120. <li>Lorem ipsum dolor sit amet</li>
  121. <li>Lorem ipsum dolor sit amet</li>
  122. <li>Lorem ipsum dolor sit amet</li>
  123. </ul>
  124. </td>
  125. </tr>
  126. </tbody>
  127. </table>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="container mx-auto" style="width:900px;">
  133. <div class="card card-outline-warning mb-4" style="height:500px;">
  134. <div class="card-header bg-warning text-white display-3"><i class="fa fa-film"></i><strong>&nbsp;Story<br></strong></div>
  135. <div class="card-block bg-faded table-responsive">
  136. <div>
  137.  
  138. <p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-right rounded ml-1 fr-fir fr-dib" width="250" height="250"></p>
  139.  
  140. <p>You can use this part to explain the character&#39;s background/past or give a summery! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  141.  
  142. <h1 class="text-uppercase"><i class="fa fa-bookmark"></i> Story Arc 1</h1>
  143.  
  144. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  145.  
  146. <h1 class="text-uppercase"><i class="fa fa-bookmark"></i> Story Arc 2</h1>
  147.  
  148. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  149.  
  150. <h1 class="text-uppercase"><i class="fa fa-bookmark"></i> Story Arc 3</h1>
  151.  
  152. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <div class="container mx-auto" style="width:1150px;">
  158. <div class="row mb-2">
  159. <div class="col-5">
  160. <div class="card card-outline-warning mb-4">
  161. <div class="card-header bg-warning text-white display-3"><i class="fa fa-bars"></i><strong>&nbsp;Moves<br></strong></div>
  162. <div class="card-block bg-faded table-responsive"><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 1</span>
  163.  
  164. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 2</span>
  165.  
  166. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 3</span>
  167.  
  168. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 4</span>
  169.  
  170. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="col-7">
  175. <div class="card card-outline-warning mb-4" style="height:500px;">
  176. <div class="card-header bg-warning text-white display-3"><i class="fa fa-users"></i><strong>&nbsp;Relationships<br></strong></div>
  177. <div class="card-block bg-faded table-responsive">
  178.  
  179. <table class="w-100 border-0">
  180. <tbody>
  181. <tr>
  182. <td><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
  183. <strong>【Name】</strong>
  184. <em>relationship</em>
  185. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci nisl, rhoncus luctus urna et, luctus tincidunt velit. Sed nec mattis dolor, quis iaculis massa. Donec at felis ac nulla dictum mollis. Donec quis justo tincidunt arcu convallis egestas ut gravida sapien. Duis id nulla non ex scelerisque rhoncus a vitae neque.
  186. <br>
  187. </td>
  188. </tr>
  189. <tr>
  190. <td><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
  191. <strong>【Name】</strong>
  192. <em>relationship</em>
  193. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci nisl, rhoncus luctus urna et, luctus tincidunt velit. Sed nec mattis dolor, quis iaculis massa. Donec at felis ac nulla dictum mollis. Donec quis justo tincidunt arcu convallis egestas ut gravida sapien. Duis id nulla non ex scelerisque rhoncus a vitae neque.
  194. <br>
  195. </td>
  196. </tr>
  197. <tr>
  198. <td><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
  199. <strong>【Name】</strong>
  200. <em>relationship</em>
  201. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci nisl, rhoncus luctus urna et, luctus tincidunt velit. Sed nec mattis dolor, quis iaculis massa. Donec at felis ac nulla dictum mollis. Donec quis justo tincidunt arcu convallis egestas ut gravida sapien. Duis id nulla non ex scelerisque rhoncus a vitae neque.
  202. <br>
  203. </td>
  204. </tr>
  205. </tbody>
  206. </table>
  207. </div>
  208. </div>
  209. </div>
  210. <div class="card card-outline-warning mb-4">
  211. <div class="card-header bg-warning text-white display-3"><i class="fa fa-universal-access"></i><strong>&nbsp;Mega Evolution</strong></div>
  212. <div class="card-block bg-faded">
  213.  
  214. <p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left rounded ml-1 fr-fir fr-dib" width="350" height="350"></p>
  215.  
  216. <p>What kind of MEGA Pokemon are you? Tell us how the Mega version of your character differs from the the normal one! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  217.  
  218. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  219.  
  220. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  221. <br>
  222. <div class="card card-outline-warning mb-4">
  223. <div class="card-header bg-warning text-white display-3"><i class="fa fa-tasks"></i><strong>&nbsp;Mega Moves<br></strong></div>
  224. <div class="card-block bg-faded">
  225. <div>
  226.  
  227. <p>Is by chance the moves are different!</p>
  228.  
  229. <table class="border-0 w-100 mx-auto">
  230. <tbody>
  231. <tr>
  232. <td class="w-50 align-top"><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 1</span>
  233. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  234. <br><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 3</span>
  235. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  236. <br>
  237. </td>
  238. <td class="w-50 align-top"><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 2</span>
  239. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  240. <br><span class="badge badge-pill badge-warning" style="font-size: 15px;">Move 4</span>
  241. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  242. <br>
  243. </td>
  244. </tr>
  245. </tbody>
  246. </table>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. </div>
  253. <div class="container mx-auto" style="width:1150px;">
  254. <div class="row mb-2">
  255. <div class="col-7">
  256. <div class="card card-outline-warning mb-4" style="height:350px;">
  257. <div class="card-header bg-warning text-white display-3"><i class="fa fa-puzzle-piece"></i><strong>&nbsp;Trivia<br></strong></div>
  258. <div class="card-block bg-faded table-responsive">
  259.  
  260. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  261. <br>
  262.  
  263. <ul class="mb-0">
  264. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  265. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  266. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  267. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  268. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  269. </ul>
  270. </div>
  271. </div>
  272. </div>
  273. <div class="col-5">
  274. <div class="card card-outline-warning mb-4" style="height:350px;">
  275. <div class="card-header bg-warning text-white display-3"><i class="fa fa-info-circle"></i><strong>&nbsp;Important Notes<br></strong></div>
  276. <div class="card-block bg-faded table-responsive">
  277.  
  278. <ul class="mb-0">
  279. <li>You can also use this for important moments instead!</li>
  280. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  281. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  282. <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  283. </ul>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!