API tools faq
paste
Advertisement
caticooties

adventure team (1) code

caticooties
Jun 25th, 2021
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.87 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. ADVENTURE TEAM (SOLO) / by cati/dogboy
  4.  
  5. NOTES
  6. accent / #72B801 - favicon / fad fa-thumbs-up
  7. (use ctrl+f + replace for icon/accent replacement)
  8. mobile friendly + custom colors! ✔✔✔
  9.  
  10. RULES & DISCLAIMERS
  11. - fav/comment if using pls!
  12. - not wysiwyg friendly so please turn that off!
  13. - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
  14. - have a nice day!!
  15.  
  16. --->
  17.  
  18. <div class="container-fluid" style="background:none;max-width:530px;padding:10px 40px 0px;margin:30px auto 5px;">
  19. <!--- title --->
  20. <h2 class="text-uppercase font-italic" style="font-family:arial;font-weight:700;">benny's adventure team — assemble!</h2>
  21. <div class="card" style="background-color:#FFF;border:0px;box-shadow:0px 5px 15px 1px rgb(133,124,133);">
  22. <div class="tab-content">
  23. <!--- focal image --->
  24. <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>
  25. <div class="row no-gutters px-3 pt-3">
  26. <!--- basic info --->
  27. <div class="col-lg-6">
  28. <p style="color:#000;font-family:arial;">
  29. <span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
  30. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
  31. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
  32. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
  33. </p>
  34. </div>
  35. <div class="col-lg-6">
  36. <p style="color:#000;font-family:arial;">
  37. <span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
  38. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
  39. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
  40. <br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
  41. </p>
  42. </div>
  43. </div>
  44. <hr style="border-top:dashed #72B801 2px;">
  45. <!--- 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>" --->
  46. <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.
  47. <br><a data-toggle="collapse" href="#more" style="font-weight:500;color:#72B801;"><i class="fas fa-sort-down"></i></a>
  48. <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.
  49. <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.
  50. <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>
  51. </div>
  52. <hr style="border-top:dashed #72B801 2px;">
  53. <div class="row no-gutters px-3 pb-3">
  54. <div class="col-lg-7">
  55. <div class="accordion" id="accordion">
  56. <!--- stats, change the "width: 50%" to whatever percentage you want! --->
  57. <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;">
  58. <i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
  59. <div id="one" class="collapse show mb-2" data-parent="#accordion">
  60. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
  61. <div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
  62. <div class="progress-bar" style="background:#72B801;
  63. width: 50%;"></div>
  64. </div>
  65. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
  66. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  67. <div class="progress-bar" style="background:#72B801;
  68. width: 50%;"></div>
  69. </div>
  70. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
  71. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  72. <div class="progress-bar" style="background:#72B801;
  73. width: 50%;"></div>
  74. </div>
  75. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
  76. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  77. <div class="progress-bar" style="background:#72B801;
  78. width: 50%;"></div>
  79. </div>
  80. <span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
  81. <div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
  82. <div class="progress-bar" style="background:#72B801;
  83. width: 50%;"></div>
  84. </div>
  85. </div>
  86. <!--- trivia --->
  87. <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;">
  88. <i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
  89. <div id="two" class="collapse" data-parent="#accordion">
  90. <ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
  91. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  92. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
  93. <li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
  94. <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>
  95. </ul>
  96. </div>
  97. </div>
  98. </div>
  99. <!--- 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! --->
  100. <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>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. <!--- credit, dont remove pls! --->
  106. <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>
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!