API tools faq
paste
caticooties

adventure team (4) code

caticooties
Jun 25th, 2021 (edited)
451
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.53 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. ADVENTURE TEAM / by cati/dogboy
  4.  
  5. NOTES
  6.  
  7. !! this code requires a bit of prior html knowledge to get around! i wouldn't reccommend it for your first ever profile! !!
  8.  
  9. first chara: accent / #72B801 - favicon / fad fa-thumbs-up
  10. second chara: accent / #57507E - favicon / fad fa-claw-marks
  11. third chara: accent/ #CEC7ED - favicon / fad fa-crow
  12. fourth chara: accent / #74BEDA - favicon / fad fa-comment-music
  13. (use ctrl+f + replace for icon/accent replacement)
  14. mobile friendly + custom colors! ✔✔✔
  15.  
  16. RULES & DISCLAIMERS
  17. - fav/comment if using pls!
  18. - not wysiwyg friendly so please turn that off!
  19. - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
  20. - have a nice day!!
  21.  
  22. --->
  23.  
  24. <div class="container-fluid" style="background:none;max-width:530px;padding:10px 40px 0px;margin:30px auto 5px;">
  25. <!--- title --->
  26. <h2 class="text-uppercase font-italic" style="font-family:arial;font-weight:700;">benny's adventure team — assemble!</h2>
  27. <div class="card" style="background-color:#FFF;border:0px;box-shadow:0px 5px 15px 1px rgb(133,124,133);">
  28. <!--- tabs start
  29.  
  30. TO REMOVE A CHARACTER: highlight from the "first/second/third/fourth" to "first/second/third/fourth end" and delete accordingly, depending on who you don't want!
  31.  
  32. --->
  33. <div class="tab-content">
  34. <!--- FIRST CHARACTER --->
  35. <div class="tab-pane active show" id="benny">
  36. <!--- focal image --->
  37. <div class="card" style="background:url('https://www.gematsu.com/wp-content/uploads/2020/03/Genshin-Impact_2020_03-13-20_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
  38. <div class="row no-gutters px-3 pt-3">
  39. <!--- basic info --->
  40. <div class="col-lg-6">
  41. <p style="color:#000;font-family:arial;">
  42. <span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
  43. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
  44. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
  45. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
  46. </p>
  47. </div>
  48. <div class="col-lg-6">
  49. <p style="color:#000;font-family:arial;">
  50. <span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
  51. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
  52. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
  53. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
  54. </p>
  55. </div>
  56.  
  57. </div>
  58. <hr style="border-top:dashed #72B801 2px;">
  59. <!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
  60. <p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  61. <br><a data-toggle="collapse" href="#more" style="font-weight:500;color:#72B801;"><i class="fas fa-sort-down"></i></a>
  62. <div class="collapse text-center px-3" id="more" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
  63. <br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
  64. <br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
  65. </div>
  66. <hr style="border-top:dashed #72B801 2px;">
  67. <div class="row no-gutters px-3 pb-3">
  68. <div class="col-lg-7">
  69. <div class="accordion" id="accordion">
  70. <!--- stats, change the "width: 50%" to whatever percentage you want! --->
  71. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#one" style="background:transparent;border:0px;color:#72B801;font-size:20px;font-weight:500;">
  72. <i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
  73. <div id="one" class="collapse show mb-2" data-parent="#accordion">
  74. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
  75. <div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
  76. <div class="progress-bar" style="background:#72B801;
  77. width: 50%;"></div>
  78. </div>
  79. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
  80. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  81. <div class="progress-bar" style="background:#72B801;
  82. width: 50%;"></div>
  83. </div>
  84. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
  85. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  86. <div class="progress-bar" style="background:#72B801;
  87. width: 50%;"></div>
  88. </div>
  89. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
  90. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  91. <div class="progress-bar" style="background:#72B801;
  92. width: 50%;"></div>
  93. </div>
  94. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
  95. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  96. <div class="progress-bar" style="background:#72B801;
  97. width: 50%;"></div>
  98. </div>
  99. </div>
  100. <!--- trivia --->
  101. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#two" style="background:transparent;border:0px;color:#72B801;font-size:20px;font-weight:500;">
  102. <i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
  103. <div id="two" class="collapse" data-parent="#accordion">
  104. <ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
  105. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  106. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
  107. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
  108. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
  109. </ul>
  110. </div>
  111. </div>
  112. </div>
  113. <!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
  114. <div class="col-lg-5"><div class="card h-100" style="background:url('https://upload-os-bbs.hoyolab.com/upload/2021/02/26/1015537/d16c2a258acd96a04623692308dd288d_9193833608002301649.jpg?x-oss-process=image/resize,s_740/quality,q_80/auto-orient,0/interlace,1/format,jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
  115. </div>
  116. </div>
  117. <!--- FIRST CHARACTER END --->
  118. <!--- SECOND CHARACTER --->
  119. <div class="tab-pane" id="razor">
  120. <!--- focal image --->
  121. <div class="card" style="background:url('https://gematsu.com/wp-content/uploads/2019/10/Genshin-Impact_2019_10-18-19_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
  122. <div class="row no-gutters px-3 pt-3">
  123. <!--- basic info --->
  124. <div class="col-lg-6">
  125. <p style="color:#000;font-family:arial;">
  126. <span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
  127. <br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
  128. <br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
  129. <br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
  130. </p>
  131. </div>
  132. <div class="col-lg-6">
  133. <p style="color:#000;font-family:arial;">
  134. <span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
  135. <br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
  136. <br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
  137. <br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
  138. </p>
  139. </div>
  140.  
  141. </div>
  142. <hr style="border-top:dashed #57507E 2px;">
  143. <!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
  144. <p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  145. <br><a data-toggle="collapse" href="#more1" style="font-weight:500;color:#57507E;"><i class="fas fa-sort-down"></i></a>
  146. <div class="collapse text-center px-3" id="more1" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
  147. <br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
  148. <br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
  149. </div>
  150. <hr style="border-top:dashed #57507E 2px;">
  151. <div class="row no-gutters px-3 pb-3">
  152. <div class="col-lg-7">
  153. <div class="accordion" id="accordion">
  154. <!--- stats, change the "width: 50%" to whatever percentage you want! --->
  155. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#three" style="background:transparent;border:0px;color:#57507E;font-size:20px;font-weight:500;">
  156. <i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
  157. <div id="three" class="collapse show mb-2" data-parent="#accordion">
  158. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
  159. <div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
  160. <div class="progress-bar" style="background:#57507E;
  161. width: 50%;"></div>
  162. </div>
  163. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
  164. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  165. <div class="progress-bar" style="background:#57507E;
  166. width: 50%;"></div>
  167. </div>
  168. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
  169. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  170. <div class="progress-bar" style="background:#57507E;
  171. width: 50%;"></div>
  172. </div>
  173. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
  174. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  175. <div class="progress-bar" style="background:#57507E;
  176. width: 50%;"></div>
  177. </div>
  178. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
  179. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  180. <div class="progress-bar" style="background:#57507E;
  181. width: 50%;"></div>
  182. </div>
  183. </div>
  184. <!--- trivia --->
  185. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#four" style="background:transparent;border:0px;color:#57507E;font-size:20px;font-weight:500;">
  186. <i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
  187. <div id="four" class="collapse" data-parent="#accordion">
  188. <ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
  189. <li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  190. <li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
  191. <li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
  192. <li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
  193. </ul>
  194. </div>
  195. </div>
  196. </div>
  197. <!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
  198. <div class="col-lg-5"><div class="card h-100" style="background:url('https://static0.thegamerimages.com/wordpress/wp-content/uploads/2020/12/Razor-Serious-Genshin-Impact-Cropped.jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
  199. </div>
  200. </div>
  201. <!--- SECOND CHARACTER END --->
  202. <!--- THIRD CHARACTER --->
  203. <div class="tab-pane" id="fischl">
  204. <!--- focal image --->
  205. <div class="card" style="background:url('https://www.gematsu.com/wp-content/uploads/2020/03/Genshin-Impact_2020_03-31-20_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
  206. <div class="row no-gutters px-3 pt-3">
  207. <!--- basic info --->
  208. <div class="col-lg-6">
  209. <p style="color:#000;font-family:arial;">
  210. <span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
  211. <br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
  212. <br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
  213. <br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
  214. </p>
  215. </div>
  216. <div class="col-lg-6">
  217. <p style="color:#000;font-family:arial;">
  218. <span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
  219. <br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
  220. <br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
  221. <br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
  222. </p>
  223. </div>
  224.  
  225. </div>
  226. <hr style="border-top:dashed #CEC7ED 2px;">
  227. <!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
  228. <p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  229. <br><a data-toggle="collapse" href="#more2" style="font-weight:500;color:#CEC7ED;"><i class="fas fa-sort-down"></i></a>
  230. <div class="collapse text-center px-3" id="more2" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
  231. <br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
  232. <br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
  233. </div>
  234. <hr style="border-top:dashed #CEC7ED 2px;">
  235. <div class="row no-gutters px-3 pb-3">
  236. <div class="col-lg-7">
  237. <div class="accordion" id="accordion">
  238. <!--- stats, change the "width: 50%" to whatever percentage you want! --->
  239. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#five" style="background:transparent;border:0px;color:#CEC7ED;font-size:20px;font-weight:500;">
  240. <i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
  241. <div id="five" class="collapse show mb-2" data-parent="#accordion">
  242. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
  243. <div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
  244. <div class="progress-bar" style="background:#CEC7ED;
  245. width: 50%;"></div>
  246. </div>
  247. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
  248. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  249. <div class="progress-bar" style="background:#CEC7ED;
  250. width: 50%;"></div>
  251. </div>
  252. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
  253. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  254. <div class="progress-bar" style="background:#CEC7ED;
  255. width: 50%;"></div>
  256. </div>
  257. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
  258. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  259. <div class="progress-bar" style="background:#CEC7ED;
  260. width: 50%;"></div>
  261. </div>
  262. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
  263. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  264. <div class="progress-bar" style="background:#CEC7ED;
  265. width: 50%;"></div>
  266. </div>
  267. </div>
  268. <!--- trivia --->
  269. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#six" style="background:transparent;border:0px;color:#CEC7ED;font-size:20px;font-weight:500;">
  270. <i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
  271. <div id="six" class="collapse" data-parent="#accordion">
  272. <ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
  273. <li><span><i class="fad fa-crow mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  274. <li><span><i class="fad fa-crow mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
  275. <li><span><i class="fad fa-crow mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
  276. <li><span><i class="fad fa-crow mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
  277. </ul>
  278. </div>
  279. </div>
  280. </div>
  281. <!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
  282. <div class="col-lg-5"><div class="card h-100" style="background:url('https://cdn.gamerjournalist.com/primary/2020/11/Genshin-Impacts-Unreconciled-Stars-Event-free-Fischl-and-more-rewards.jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
  283. </div>
  284. </div>
  285. <!--- THIRD CHARACTER END --->
  286. <!--- FOURTH CHARACTER --->
  287. <div class="tab-pane" id="barbara">
  288. <!--- focal image --->
  289. <div class="card" style="background:url('https://zeldauniverse.net/wp-content/uploads/2021/02/Genshin-Impact-Barbara-Best-Build-524x295@2x.jpg');background-position:center;background-size:cover;height:250px;"></div>
  290. <div class="row no-gutters px-3 pt-3">
  291. <!--- basic info --->
  292. <div class="col-lg-6">
  293. <p style="color:#000;font-family:arial;">
  294. <span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
  295. <br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
  296. <br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
  297. <br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
  298. </p>
  299. </div>
  300. <div class="col-lg-6">
  301. <p style="color:#000;font-family:arial;">
  302. <span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
  303. <br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
  304. <br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
  305. <br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
  306. </p>
  307. </div>
  308.  
  309. </div>
  310. <hr style="border-top:dashed #74BEDA 2px;">
  311. <!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
  312. <p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  313. <br><a data-toggle="collapse" href="#more3" style="font-weight:500;color:#74BEDA;"><i class="fas fa-sort-down"></i></a>
  314. <div class="collapse text-center px-3" id="more3" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
  315. <br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
  316. <br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
  317. </div>
  318. <hr style="border-top:dashed #74BEDA 2px;">
  319. <div class="row no-gutters px-3 pb-3">
  320. <div class="col-lg-7">
  321. <div class="accordion" id="accordion">
  322. <!--- stats, change the "width: 50%" to whatever percentage you want! --->
  323. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#seven" style="background:transparent;border:0px;color:#74BEDA;font-size:20px;font-weight:500;">
  324. <i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
  325. <div id="seven" class="collapse show mb-2" data-parent="#accordion">
  326. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
  327. <div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
  328. <div class="progress-bar" style="background:#74BEDA;
  329. width: 50%;"></div>
  330. </div>
  331. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
  332. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  333. <div class="progress-bar" style="background:#74BEDA;
  334. width: 50%;"></div>
  335. </div>
  336. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
  337. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  338. <div class="progress-bar" style="background:#74BEDA;
  339. width: 50%;"></div>
  340. </div>
  341. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
  342. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  343. <div class="progress-bar" style="background:#74BEDA;
  344. width: 50%;"></div>
  345. </div>
  346. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
  347. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  348. <div class="progress-bar" style="background:#74BEDA;
  349. width: 50%;"></div>
  350. </div>
  351. </div>
  352. <!--- trivia --->
  353. <a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#eight" style="background:transparent;border:0px;color:#74BEDA;font-size:20px;font-weight:500;">
  354. <i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
  355. <div id="eight" class="collapse" data-parent="#accordion">
  356. <ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
  357. <li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  358. <li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
  359. <li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
  360. <li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
  361. </ul>
  362. </div>
  363. </div>
  364. </div>
  365. <!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
  366. <div class="col-lg-5"><div class="card h-100" style="background:url('https://www.pockettactics.com/wp-content/uploads/2021/02/genshin-impact-barbara-2.jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
  367. </div>
  368. </div>
  369. <!--- FOURTH CHARACTER END --->
  370. </div>
  371. </div>
  372. <!--- navigation, if you want to remove a button just remove the <li></li> of that button --->
  373. <ul class="nav nav-pills justify-content-center mt-3">
  374. <!--- first character button --->
  375. <li class="nav-item"><a class="nav-link active btn btn-default" data-toggle="pill" href="#benny" style="background:transparent;border:0px;"><i class="fad fa-thumbs-up" style="font-size:20px;color:#72B801;background:transparent;border:0px;"></i></a></li>
  376. <!--- second character button --->
  377. <li class="nav-item"><a class="nav-link btn btn-default" data-toggle="pill" href="#razor" style="background:transparent;border:0px;"><i class="fad fa-claw-marks" style="font-size:20px;color:#57507E;background:transparent;border:0px;"></i></a></li>
  378. <!--- third character button --->
  379. <li class="nav-item"><a class="nav-link btn btn-default" data-toggle="pill" href="#fischl" style="background:transparent;border:0px;"><i class="fad fa-crow" style="font-size:20px;color:#CEC7ED;background:transparent;border:0px;"></i></a></li>
  380. <!--- fourth character button --->
  381. <li class="nav-item"><a class="nav-link btn btn-default" data-toggle="pill" href="#barbara" style="background:transparent;border:0px;"><i class="fad fa-comment-music" style="font-size:20px;color:#74BEDA;background:transparent;border:0px;"></i></a></li>
  382. </ul>
  383. </div>
  384. <!--- credit, dont remove pls! --->
  385. <a class="d-block text-muted text-center" href="10690306" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
Add Comment
Please, Sign In to add comment
Public Pastes
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!