API tools faq
paste
Advertisement
vladimirpinarum

F2U Allegiances

vladimirpinarum
May 16th, 2021 (edited)
4,863
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.13 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. ALLEGIANCES
  3. Profile by HTMLobster (noll)
  4.  
  5.  
  6. EDITING NOTE:
  7. When adding new cats, to get the image when you click the name, you have to CHANGE THE COLLAPSE ID AND THE URL HREF (bit that says cat1, cat2, cat3, etc.).
  8. It is easiest if you use the character's name instead of cat1, cat2, cat3, etc.
  9.  
  10. To add more cats to a section, copy and paste the whole <tr></tr> section (a full row on the table).
  11.  
  12.  
  13. TOS:
  14. Do not remove my credit. You may edit it, however.
  15. You may edit code/frankenstein with others as long as their TOS allows!
  16. Turn off WYSIWYG and turn on Code Editor.
  17. Ask me if you want to redistribute edits. Must be F2U.
  18. ------------------------------------------------------------------>
  19. <div class="container p-0" style="max-width:650px;">
  20. <div class="bg-secondary p-2 mb-2">
  21. <div class="bg-faded p-2">
  22. <!-- Heading -->
  23. <h1 class="text-uppercase text-center mb-0" style="font-size:2.2em; letter-spacing:4px; font-family:'EB Garamond', Garamond, Serif;">Allegiances</h1>
  24. </div>
  25. </div>
  26. <div class="bg-secondary p-2">
  27. <div class="bg-faded p-2" style="font-family:'EB Garamond', Garamond, Serif;">
  28. <div class="mb-3">
  29. <!-- Navigation buttons -->
  30. <ul class="nav nav-tabs row no-gutters border-0 justify-content-around">
  31. <!-- Clan 1 -->
  32. <li class="col-auto nav-item mx-1 mt-2">
  33. <a class="btn btn-primary p-0 rounded-0 justify-content-center active" style="clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 70% 25%, 30% 25%); height:65px; width:60px;" data-toggle="tab" href="#Clan1">
  34. <!-- Symbol -->
  35. <i class="fas fa-bolt pt-4" style="font-size:2.4em;"></i>
  36. </a>
  37. </li>
  38. <!-- CLan 2 -->
  39. <li class="col-auto nav-item mx-1 mt-2">
  40. <a class="btn btn-primary p-0 rounded-0 justify-content-center" style="clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 70% 25%, 30% 25%); height:65px; width:60px;" data-toggle="tab" href="#Clan2">
  41. <!-- Symbol -->
  42. <i class="fas fa-wind pt-4" style="font-size:2.4em;"></i>
  43. </a>
  44. </li>
  45. <!-- Clan 3 -->
  46. <li class="col-auto nav-item mx-1 mt-2">
  47. <a class="btn btn-primary p-0 rounded-0 justify-content-center" style="clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 70% 25%, 30% 25%); height:65px; width:60px;" data-toggle="tab" href="#Clan3">
  48. <!-- Symbol -->
  49. <i class="fas fa-water pt-4" style="font-size:2.4em;"></i>
  50. </a>
  51. </li>
  52. <!-- Clan 4 -->
  53. <li class="col-auto nav-item mx-1 mt-2">
  54. <a class="btn btn-primary p-0 rounded-0 justify-content-center" style="clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 70% 25%, 30% 25%); height:65px; width:60px;" data-toggle="tab" href="#Clan4">
  55. <!-- Symbol -->
  56. <i class="fas fa-eye pt-4" style="font-size:2.4em;"></i>
  57. </a>
  58. </li>
  59. <!-- Clan 5 -->
  60. <li class="col-auto nav-item mx-1 mt-2">
  61. <a class="btn btn-primary p-0 rounded-0 justify-content-center" style="clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 70% 25%, 30% 25%); height:65px; width:60px;" data-toggle="tab" href="#Clan5">
  62. <!-- Symbol -->
  63. <i class="fas fa-cloud pt-4" style="font-size:2.4em;"></i>
  64. </a>
  65. </li>
  66. </ul>
  67. </div>
  68.  
  69. <div class="tab-content">
  70. <!-- Tab 1 -->
  71. <div class="tab-pane fade active show" id="Clan1">
  72. <!-- Clan name -->
  73. <h1 class="text-uppercase text-center" style="font-size:1.8em; letter-spacing:4px;">ThunderClan</h1>
  74. <!-- Clan cats -->
  75. <table class="border-0">
  76. <!-- Leader -->
  77. <tr>
  78. <td class="pl-0 align-items-start">
  79. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Leader</h2>
  80. </td>
  81. <td class="pr-0">
  82. <!-- Leader image -->
  83. <div id="cat1" class="collapse float-left mr-2">
  84. <img src="https://images.unsplash.com/photo-1593626986521-f24d25d60103?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  85. </div>
  86. <!-- Leader info -->
  87. <a href="#cat1" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namestar</a> <span style="font-size:1.2em; text-decoration:none;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  88.  
  89. </td>
  90. </tr>
  91.  
  92. <!-- Deputy -->
  93. <tr>
  94. <td class="pl-0 align-items-start">
  95. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Deputy</h2>
  96. </td>
  97. <td class="pr-0">
  98. <!-- Deputy image -->
  99. <div id="cat2" class="collapse float-left mr-2">
  100. <img src="https://images.unsplash.com/photo-1548975488-0384bc5c7a6b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  101. </div>
  102. <!-- Deputy info -->
  103. <a href="#cat2" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  104. </td>
  105. </tr>
  106.  
  107. <!-- Medicine Cat -->
  108. <tr>
  109. <td class="pl-0 align-items-start">
  110. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Medicine Cat</h2>
  111. </td>
  112. <td class="pr-0">
  113. <!-- Med cat image -->
  114. <div id="cat3" class="collapse float-left mr-2">
  115. <img src="https://images.unsplash.com/photo-1598633049665-099be8c986bd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  116. </div>
  117. <!-- Med cat info -->
  118. <a href="#cat3" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  119. <!-- Apprentice name -->
  120. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">apprentice, namepaw</div>
  121. </td>
  122. </tr>
  123.  
  124. <!-- Warriors -->
  125. <tr>
  126. <td class="pl-0 align-items-start pb-0">
  127. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Warriors</h2>
  128. </td>
  129. <td class="pr-0 pb-0">
  130. <span style="font-size:1.2em;">(cats without kits)</span>
  131. </td>
  132. </tr>
  133. <tr>
  134. <td class="pt-0"></td>
  135. <td class="pr-0 pt-0">
  136. <!-- Warrior image -->
  137. <div id="cat4" class="collapse float-left mr-2">
  138. <img src="https://images.unsplash.com/photo-1615897232510-bea8a87666a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  139. </div>
  140. <!-- Warrior info -->
  141. <a href="#cat4" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  142. </td>
  143. </tr>
  144. <tr>
  145. <td></td>
  146. <td class="pr-0">
  147. <!-- Warrior image -->
  148. <div id="cat5" class="collapse float-left mr-2">
  149. <img src="https://images.unsplash.com/photo-1550697791-3a72f942f31e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  150. </div>
  151. <!-- Warrior info -->
  152. <a href="#cat5" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  153. <!-- Apprentice name -->
  154. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">apprentice, namepaw</div>
  155. </td>
  156. </tr>
  157. <tr>
  158. <td></td>
  159. <td class="pr-0">
  160. <!-- Warrior image -->
  161. <div id="cat6" class="collapse float-left mr-2">
  162. <img src="https://images.unsplash.com/photo-1591017320663-dc3334ff1dcc?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTc3fHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  163. </div>
  164. <!-- Warrior info -->
  165. <a href="#cat6" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  166. </td>
  167. </tr>
  168. <tr>
  169. <td></td>
  170. <td class="pr-0">
  171. <!-- Warrior image -->
  172. <div id="cat7" class="collapse float-left mr-2">
  173. <img src="https://images.unsplash.com/photo-1613295809584-88655f06cc6c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjEzfHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  174. </div>
  175. <!-- Warrior info -->
  176. <a href="#cat7" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  177. </td>
  178. </tr>
  179. <tr>
  180. <td></td>
  181. <td class="pr-0">
  182. <!-- Warrior image -->
  183. <div id="cat8" class="collapse float-left mr-2">
  184. <img src="https://images.unsplash.com/photo-1584210775374-fbecc7bd8241?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjMyfHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  185. </div>
  186. <!-- Warrior info -->
  187. <a href="#cat8" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  188. <!-- Apprentice name -->
  189. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">apprentice, namepaw</div>
  190. </td>
  191. </tr>
  192.  
  193. <!-- Apprentices -->
  194. <tr>
  195. <td class="pl-0 align-items-start pb-0">
  196. <h2 class="text-uppercase hidden-sm-up" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px; word-wrap:breal-word;">Appren-tices</h2>
  197. <h2 class="text-uppercase hidden-xs-down" style="font-family:Voltaire, sans-serif;text-decoration:underline;letter-spacing:2px;">Apprentices</h2>
  198. </td>
  199. <td class="pr-0 pb-0">
  200. <span style="font-size:1.2em;">(more than 6 moons old, in training to become warriors)</span>
  201. </td>
  202. </tr>
  203. <tr>
  204. <td class="pt-0"></td>
  205. <td class="pr-0 pt-0">
  206. <!-- Apprentice image -->
  207. <div id="cat9" class="collapse float-left mr-2">
  208. <img src="https://images.unsplash.com/photo-1606425270259-998c37268501?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjYyfHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  209. </div>
  210. <!-- Apprentice info -->
  211. <a href="#cat9" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namepaw</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  212. </td>
  213. </tr>
  214. <tr>
  215. <td></td>
  216. <td class="pr-0">
  217. <!-- Apprentice image -->
  218. <div id="cat10" class="collapse float-left mr-2">
  219. <img src="https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjY1fHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  220. </div>
  221. <!-- Apprentice info -->
  222. <a href="#cat10" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namepaw</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  223. </td>
  224. </tr>
  225. <tr>
  226. <td></td>
  227. <td class="pr-0">
  228. <!-- Apprentice image -->
  229. <div id="cat11" class="collapse float-left mr-2">
  230. <img src="https://images.unsplash.com/photo-1606685301089-1ecc362ef85a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzI1fHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  231. </div>
  232. <!-- Apprentice info -->
  233. <a href="#cat11" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namepaw</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  234. </td>
  235. </tr>
  236.  
  237. <!-- Queens -->
  238. <tr>
  239. <td class="pl-0 align-items-start pb-0">
  240. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Queens</h2>
  241. </td>
  242. <td class="pr-0 pb-0">
  243. <span style="font-size:1.2em;">(cats expecting or nursing kits)</span>
  244. </td>
  245. </tr>
  246. <tr>
  247. <td class="pt-0"></td>
  248. <td class="pr-0 pt-0">
  249. <!-- Queen image -->
  250. <div id="cat12" class="collapse float-left mr-2">
  251. <img src="https://images.unsplash.com/photo-1597068806585-c404c345c593?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzQxfHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  252. </div>
  253. <!-- Queen info -->
  254. <a href="#cat12" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  255. <!-- Kit names -->
  256. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">kits, namekit, namekit, namekit</div>
  257. </td>
  258. </tr>
  259. <tr>
  260. <td></td>
  261. <td class="pr-0">
  262. <!-- Queen name -->
  263. <div id="cat13" class="collapse float-left mr-2">
  264. <img src="https://images.unsplash.com/photo-1597576364579-075da59e710d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGJsYWNrJTIwY2F0fGVufDB8MnwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  265. </div>
  266. <!-- Queen info -->
  267. <a href="#cat13" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  268. </td>
  269. </tr>
  270.  
  271. <!-- Elders -->
  272. <tr>
  273. <td class="pl-0 align-items-start pb-0">
  274. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Elders</h2>
  275. </td>
  276. <td class="pr-0 pb-0">
  277. <span style="font-size:1.2em;">(former warriors and queens, now retired)</span>
  278. </td>
  279. </tr>
  280. <tr>
  281. <td class="pt-0"></td>
  282. <td class="pr-0 pt-0">
  283. <!-- Elder image -->
  284. <div id="cat14" class="collapse float-left mr-2">
  285. <img src="https://images.unsplash.com/photo-1579264502344-f42f0ab1b1ce?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  286. </div>
  287. <!-- Elder info -->
  288. <a href="#cat14" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  289. </td>
  290. </tr>
  291. <tr>
  292. <td></td>
  293. <td class="pr-0">
  294. <!-- Elder image -->
  295. <div id="cat15" class="collapse float-left mr-2">
  296. <img src="https://images.unsplash.com/photo-1580383857470-d5eff2e6b845?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2F0c3xlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  297. </div>
  298. <!-- Elder info -->
  299. <a href="#cat15" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  300. </td>
  301. </tr>
  302. </table>
  303. <!-- Clan cats end -->
  304. </div>
  305. <!-- Tab 1 end -->
  306.  
  307. <!-- Tab 2 -->
  308. <div class="tab-pane fade" id="Clan2">
  309. <!-- Clan name -->
  310. <h1 class="text-uppercase text-center" style="font-size:1.8em; letter-spacing:4px;">WindClan</h1>
  311. <!-- Clan cats -->
  312. <table class="border-0">
  313. <!-- Leader -->
  314. <tr>
  315. <td class="pl-0 align-items-start">
  316. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Leader</h2>
  317. </td>
  318. <td class="pr-0">
  319. <!-- Leader image -->
  320. <div id="cat16" class="collapse float-left mr-2">
  321. <img src="https://images.unsplash.com/photo-1593626986521-f24d25d60103?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  322. </div>
  323. <!-- Leader info -->
  324. <a href="#cat16" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namestar</a> <span style="font-size:1.2em; text-decoration:none;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  325.  
  326. </td>
  327. </tr>
  328.  
  329. <!-- Deputy -->
  330. <tr>
  331. <td class="pl-0 align-items-start">
  332. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Deputy</h2>
  333. </td>
  334. <td class="pr-0">
  335. <!-- Deputy image -->
  336. <div id="cat17" class="collapse float-left mr-2">
  337. <img src="https://images.unsplash.com/photo-1548975488-0384bc5c7a6b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  338. </div>
  339. <!-- Deputy info -->
  340. <a href="#cat17" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  341. <!-- Apprentice name -->
  342. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">apprentice, namepaw</div>
  343. </td>
  344. </tr>
  345.  
  346. <!-- Medicine Cat -->
  347. <tr>
  348. <td class="pl-0 align-items-start">
  349. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Medicine Cat</h2>
  350. </td>
  351. <td class="pr-0">
  352. <!-- Med cat image -->
  353. <div id="cat18" class="collapse float-left mr-2">
  354. <img src="https://images.unsplash.com/photo-1598633049665-099be8c986bd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  355. </div>
  356. <!-- Med cat info -->
  357. <a href="#cat18" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  358. </td>
  359. </tr>
  360.  
  361. <!-- Warriors -->
  362. <tr>
  363. <td class="pl-0 align-items-start pb-0">
  364. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Warriors</h2>
  365. </td>
  366. <td class="pr-0 pb-0">
  367. <span style="font-size:1.2em;">(cats without kits)</span>
  368. </td>
  369. </tr>
  370. <tr>
  371. <td class="pt-0"></td>
  372. <td class="pr-0 pt-0">
  373. <!-- Warrior image -->
  374. <div id="cat19" class="collapse float-left mr-2">
  375. <img src="https://images.unsplash.com/photo-1615897232510-bea8a87666a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  376. </div>
  377. <!-- Warrior info -->
  378. <a href="#cat19" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  379. </td>
  380. </tr>
  381. <tr>
  382. <td></td>
  383. <td class="pr-0">
  384. <!-- Warrior image -->
  385. <div id="cat20" class="collapse float-left mr-2">
  386. <img src="https://images.unsplash.com/photo-1550697791-3a72f942f31e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  387. </div>
  388. <!-- Warrior info -->
  389. <a href="#cat20" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  390. <!-- Apprentice name -->
  391. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">apprentice, namepaw</div>
  392. </td>
  393. </tr>
  394.  
  395. <!-- Apprentices -->
  396. <tr>
  397. <td class="pl-0 align-items-start pb-0">
  398. <h2 class="text-uppercase hidden-sm-up" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px; word-wrap:breal-word;">Appren-tices</h2>
  399. <h2 class="text-uppercase hidden-xs-down" style="font-family:Voltaire, sans-serif;text-decoration:underline;letter-spacing:2px;">Apprentices</h2>
  400. </td>
  401. <td class="pr-0 pb-0">
  402. <span style="font-size:1.2em;">(more than 6 moons old, in training to become warriors)</span>
  403. </td>
  404. </tr>
  405. <tr>
  406. <td class="pt-0"></td>
  407. <td class="pr-0 pt-0">
  408. <!-- Apprentice image -->
  409. <div id="cat21" class="collapse float-left mr-2">
  410. <img src="https://images.unsplash.com/photo-1606425270259-998c37268501?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjYyfHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  411. </div>
  412. <!-- Apprentice info -->
  413. <a href="#cat21" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namepaw</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  414. </td>
  415. </tr>
  416. <tr>
  417. <td></td>
  418. <td class="pr-0">
  419. <!-- Apprentice image -->
  420. <div id="cat22" class="collapse float-left mr-2">
  421. <img src="https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjY1fHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  422. </div>
  423. <!-- Apprentice info -->
  424. <a href="#cat22" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namepaw</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  425. </td>
  426. </tr>
  427.  
  428. <!-- Queens -->
  429. <tr>
  430. <td class="pl-0 align-items-start pb-0">
  431. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Queens</h2>
  432. </td>
  433. <td class="pr-0 pb-0">
  434. <span style="font-size:1.2em;">(cats expecting or nursing kits)</span>
  435. </td>
  436. </tr>
  437. <tr>
  438. <td class="pt-0"></td>
  439. <td class="pr-0 pt-0">
  440. <!-- Queen image -->
  441. <div id="cat23" class="collapse float-left mr-2">
  442. <img src="https://images.unsplash.com/photo-1597068806585-c404c345c593?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzQxfHxjYXR8ZW58MHwyfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  443. </div>
  444. <!-- Queen info -->
  445. <a href="#cat23" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  446. <!-- Kit names -->
  447. <div class="m-0 p-0" style="font-size:1.5em; font-family:Copperplate; line-height:15px;">kits, namekit, namekit, namekit</div>
  448. </td>
  449. </tr>
  450. <tr>
  451. <td></td>
  452. <td class="pr-0">
  453. <!-- Queen name -->
  454. <div id="cat24" class="collapse float-left mr-2">
  455. <img src="https://images.unsplash.com/photo-1597576364579-075da59e710d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGJsYWNrJTIwY2F0fGVufDB8MnwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  456. </div>
  457. <!-- Queen info -->
  458. <a href="#cat24" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  459. </td>
  460. </tr>
  461.  
  462. <!-- Elders -->
  463. <tr>
  464. <td class="pl-0 align-items-start pb-0">
  465. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Elders</h2>
  466. </td>
  467. <td class="pr-0 pb-0">
  468. <span style="font-size:1.2em;">(former warriors and queens, now retired)</span>
  469. </td>
  470. </tr>
  471. <tr>
  472. <td class="pt-0"></td>
  473. <td class="pr-0 pt-0">
  474. <!-- Elder image -->
  475. <div id="cat25" class="collapse float-left mr-2">
  476. <img src="https://images.unsplash.com/photo-1579264502344-f42f0ab1b1ce?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  477. </div>
  478. <!-- Elder info -->
  479. <a href="#cat25" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  480. </td>
  481. </tr>
  482. <tr>
  483. <td></td>
  484. <td class="pr-0">
  485. <!-- Elder image -->
  486. <div id="cat26" class="collapse float-left mr-2">
  487. <img src="https://images.unsplash.com/photo-1580383857470-d5eff2e6b845?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2F0c3xlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  488. </div>
  489. <!-- Elder info -->
  490. <a href="#cat26" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  491. </td>
  492. </tr>
  493. </table>
  494. <!-- Clan cats end -->
  495. </div>
  496. <!-- Tab 2 end -->
  497.  
  498. <div class="tab-pane fade" id="Clan3">
  499. <h1 class="text-uppercase text-center" style="font-size:1.8em; letter-spacing:4px;">RiverClan</h1>
  500. <!-- Clan cats -->
  501. <table class="border-0">
  502. <!-- Leader -->
  503. <tr>
  504. <td class="pl-0 align-items-start">
  505. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Leader</h2>
  506. </td>
  507. <td class="pr-0">
  508. <!-- Leader image -->
  509. <div id="cat27" class="collapse float-left mr-2">
  510. <img src="https://images.unsplash.com/photo-1593626986521-f24d25d60103?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  511. </div>
  512. <!-- Leader info -->
  513. <a href="#cat27" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namestar</a> <span style="font-size:1.2em; text-decoration:none;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  514.  
  515. </td>
  516. </tr>
  517.  
  518. <!-- Deputy -->
  519. <tr>
  520. <td class="pl-0 align-items-start">
  521. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Deputy</h2>
  522. </td>
  523. <td class="pr-0">
  524. <!-- Deputy image -->
  525. <div id="cat28" class="collapse float-left mr-2">
  526. <img src="https://images.unsplash.com/photo-1548975488-0384bc5c7a6b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  527. </div>
  528. <!-- Deputy info -->
  529. <a href="#cat28" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  530. </td>
  531. </tr>
  532.  
  533. <!-- Medicine Cat -->
  534. <tr>
  535. <td class="pl-0 align-items-start">
  536. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Medicine Cat</h2>
  537. </td>
  538. <td class="pr-0">
  539. <!-- Med cat image -->
  540. <div id="cat29" class="collapse float-left mr-2">
  541. <img src="https://images.unsplash.com/photo-1598633049665-099be8c986bd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  542. </div>
  543. <!-- Med cat info -->
  544. <a href="#cat29" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  545. </td>
  546. </tr>
  547.  
  548. <!-- Warriors -->
  549. <tr>
  550. <td class="pl-0 align-items-start pb-0">
  551. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Warriors</h2>
  552. </td>
  553. <td class="pr-0 pb-0">
  554. <span style="font-size:1.2em;">(cats without kits)</span>
  555. </td>
  556. </tr>
  557. <tr>
  558. <td class="pt-0"></td>
  559. <td class="pr-0 pt-0">
  560. <!-- Warrior image -->
  561. <div id="cat30" class="collapse float-left mr-2">
  562. <img src="https://images.unsplash.com/photo-1615897232510-bea8a87666a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  563. </div>
  564. <!-- Warrior info -->
  565. <a href="#cat30" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  566. </td>
  567. </tr>
  568. <tr>
  569. <td></td>
  570. <td class="pr-0">
  571. <!-- Warrior image -->
  572. <div id="cat31" class="collapse float-left mr-2">
  573. <img src="https://images.unsplash.com/photo-1550697791-3a72f942f31e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  574. </div>
  575. <!-- Warrior info -->
  576. <a href="#cat31" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  577. </td>
  578. </tr>
  579. </table>
  580. <!-- Clan cats end -->
  581. </div>
  582.  
  583. <div class="tab-pane fade" id="Clan4">
  584. <h1 class="text-uppercase text-center" style="font-size:1.8em; letter-spacing:4px;">ShadowClan</h1>
  585. <!-- Clan cats -->
  586. <table class="border-0">
  587. <!-- Leader -->
  588. <tr>
  589. <td class="pl-0 align-items-start">
  590. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Leader</h2>
  591. </td>
  592. <td class="pr-0">
  593. <!-- Leader image -->
  594. <div id="cat32" class="collapse float-left mr-2">
  595. <img src="https://images.unsplash.com/photo-1593626986521-f24d25d60103?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  596. </div>
  597. <!-- Leader info -->
  598. <a href="#cat32" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namestar</a> <span style="font-size:1.2em; text-decoration:none;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  599.  
  600. </td>
  601. </tr>
  602.  
  603. <!-- Deputy -->
  604. <tr>
  605. <td class="pl-0 align-items-start">
  606. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Deputy</h2>
  607. </td>
  608. <td class="pr-0">
  609. <!-- Deputy image -->
  610. <div id="cat33" class="collapse float-left mr-2">
  611. <img src="https://images.unsplash.com/photo-1548975488-0384bc5c7a6b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  612. </div>
  613. <!-- Deputy info -->
  614. <a href="#cat33" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  615. </td>
  616. </tr>
  617.  
  618. <!-- Medicine Cat -->
  619. <tr>
  620. <td class="pl-0 align-items-start">
  621. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Medicine Cat</h2>
  622. </td>
  623. <td class="pr-0">
  624. <!-- Med cat image -->
  625. <div id="cat34" class="collapse float-left mr-2">
  626. <img src="https://images.unsplash.com/photo-1598633049665-099be8c986bd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  627. </div>
  628. <!-- Med cat info -->
  629. <a href="#cat34" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  630. </td>
  631. </tr>
  632.  
  633. <!-- Warriors -->
  634. <tr>
  635. <td class="pl-0 align-items-start pb-0">
  636. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Warriors</h2>
  637. </td>
  638. <td class="pr-0 pb-0">
  639. <span style="font-size:1.2em;">(cats without kits)</span>
  640. </td>
  641. </tr>
  642. <tr>
  643. <td class="pt-0"></td>
  644. <td class="pr-0 pt-0">
  645. <!-- Warrior image -->
  646. <div id="cat35" class="collapse float-left mr-2">
  647. <img src="https://images.unsplash.com/photo-1615897232510-bea8a87666a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  648. </div>
  649. <!-- Warrior info -->
  650. <a href="#cat35" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  651. </td>
  652. </tr>
  653. <tr>
  654. <td></td>
  655. <td class="pr-0">
  656. <!-- Warrior image -->
  657. <div id="cat36" class="collapse float-left mr-2">
  658. <img src="https://images.unsplash.com/photo-1550697791-3a72f942f31e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  659. </div>
  660. <!-- Warrior info -->
  661. <a href="#cat36" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  662. </td>
  663. </tr>
  664. </table>
  665. <!-- Clan cats end -->
  666. </div>
  667.  
  668. <div class="tab-pane fade" id="Clan5">
  669. <h1 class="text-uppercase text-center" style="font-size:1.8em; letter-spacing:4px;">SkyClan</h1>
  670. <!-- Clan cats -->
  671. <table class="border-0">
  672. <!-- Leader -->
  673. <tr>
  674. <td class="pl-0 align-items-start">
  675. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Leader</h2>
  676. </td>
  677. <td class="pr-0">
  678. <!-- Leader image -->
  679. <div id="cat37" class="collapse float-left mr-2">
  680. <img src="https://images.unsplash.com/photo-1593626986521-f24d25d60103?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  681. </div>
  682. <!-- Leader info -->
  683. <a href="#cat37" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">namestar</a> <span style="font-size:1.2em; text-decoration:none;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  684.  
  685. </td>
  686. </tr>
  687.  
  688. <!-- Deputy -->
  689. <tr>
  690. <td class="pl-0 align-items-start">
  691. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Deputy</h2>
  692. </td>
  693. <td class="pr-0">
  694. <!-- Deputy image -->
  695. <div id="cat38" class="collapse float-left mr-2">
  696. <img src="https://images.unsplash.com/photo-1548975488-0384bc5c7a6b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  697. </div>
  698. <!-- Deputy info -->
  699. <a href="#cat38" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  700. </td>
  701. </tr>
  702.  
  703. <!-- Medicine Cat -->
  704. <tr>
  705. <td class="pl-0 align-items-start">
  706. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Medicine Cat</h2>
  707. </td>
  708. <td class="pr-0">
  709. <!-- Med cat image -->
  710. <div id="cat39" class="collapse float-left mr-2">
  711. <img src="https://images.unsplash.com/photo-1598633049665-099be8c986bd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  712. </div>
  713. <!-- Med cat info -->
  714. <a href="#cat39" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  715. </td>
  716. </tr>
  717.  
  718. <!-- Warriors -->
  719. <tr>
  720. <td class="pl-0 align-items-start pb-0">
  721. <h2 class="text-uppercase" style="font-family:Voltaire, sans-serif; text-decoration:underline; letter-spacing:2px;">Warriors</h2>
  722. </td>
  723. <td class="pr-0 pb-0">
  724. <span style="font-size:1.2em;">(cats without kits)</span>
  725. </td>
  726. </tr>
  727. <tr>
  728. <td class="pt-0"></td>
  729. <td class="pr-0 pt-0">
  730. <!-- Warrior image -->
  731. <div id="cat40" class="collapse float-left mr-2">
  732. <img src="https://images.unsplash.com/photo-1615897232510-bea8a87666a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  733. </div>
  734. <!-- Warrior info -->
  735. <a href="#cat40" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  736. </td>
  737. </tr>
  738. <tr>
  739. <td></td>
  740. <td class="pr-0">
  741. <!-- Warrior image -->
  742. <div id="cat41" class="collapse float-left mr-2">
  743. <img src="https://images.unsplash.com/photo-1550697791-3a72f942f31e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTV8fGNhdHxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100px;">
  744. </div>
  745. <!-- Warrior info -->
  746. <a href="#cat41" data-toggle="collapse" style="font-size:1.5em; font-family:Copperplate;">catname</a> <span style="font-size:1.2em;">- lorem ipsum dolor sit amet, consectetur adipiscing elit praesent mollis.</span>
  747. </td>
  748. </tr>
  749. </table>
  750. <!-- Clan cats end -->
  751. </div>
  752.  
  753. </div>
  754.  
  755. </div>
  756. </div>
  757. <div class="text-right pt-2">
  758. <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="theme by noll"><i class="fas fa-code"></i></a>
  759. </div>
  760. </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!