API tools faq
paste
Advertisement
ThatBat

Minecraft

ThatBat
May 20th, 2021
2,844
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.29 KB | None | 0 0
raw download clone embed print report
  1. <!--------
  2. RULES
  3. - Do not remove credit, redistribute, or claim as your own
  4. - Can edit as much as you want, mixing with other code is also OK (credit is still needed)
  5. - (Optional but appreciated) let me know if you use it, I'd love to see what people do with it
  6.  
  7. THREAD
  8. https://toyhou.se/~forums/16.htmlcss-graphics/213264.-bat-s-code-stuff-
  9.  
  10. ----------->
  11.  
  12.  
  13. <div class="container p-0" style="width:900px">
  14. <div class="row" style="margin-left:0px">
  15. <div>
  16. <!---name box-->
  17. <div class="container bg-faded" style="width:430px;height:60px;font-size:40px;line-height:58px">
  18. <p>Name<span style="float:right"><i class="fas fa-seedling"></i></span></p>
  19. </div>
  20. <!---image box-->
  21. <div class="card rounded-0 bg-faded mt-2" style="width:430px;height:500px;border-width:0px">
  22. <!---image-->
  23. <!---use "background-size:65%" and "background-position:60px 15px" to adjust the size and location of the image-->
  24. <div class="card rounded-0" style="width:480px;height:570px;border-width:0px;background:url(https://i.imgur.com/Nma06OE.jpg);background-size:65%;background-repeat:no-repeat;background-position:60px 15px"></div>
  25.  
  26. <!---CREDIT DO NOT REMOVE-->
  27. <div style="position:absolute;bottom:0px;left:4px;font-size:18px"><a class="tooltipster text-secondary" title="Code by ThatBat" href="https://toyhou.se/ThatBat"><i class="fas fa-bat"></i></a></div>
  28. </div>
  29. </div>
  30.  
  31.  
  32.  
  33. <div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true" style="width:455px;margin-left:15px">
  34.  
  35. <!---basics tab-->
  36. <div>
  37. <div role="tab" id="heading1"><a class="btn btn-info rounded-0 w-100 text-white" data-toggle="collapse" data-parent="#accordion" href="#basics" aria-expanded="true" aria-controls="basics" style="font-size:20px">Basics
  38. </a></div>
  39. <div id="basics" class="collapse show w-100" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
  40. <div class="card-body pt-2">
  41. <div class="card rounded-0 bg-faded w-100 pl-3 pr-3 pt-2" style="border-width:0px;height:365px;font-size:20px">
  42. <ul class="list-unstyled">
  43. <li><p><span class="text-uppercase">full name</span><span style="float:right">info</span></p>
  44. <hr class="card-outline-info w-100 mt-1 mb-4" style="border-width:2px;"></li>
  45.  
  46. <li><p><span class="text-uppercase">species</span><span style="float:right">info</span></p>
  47. <hr class="card-outline-info w-100 mt-1 mb-4" style="border-width:2px;"></li>
  48.  
  49. <li><p><span class="text-uppercase">height</span><span style="float:right">info</span></p>
  50. <hr class="card-outline-info w-100 mt-1 mb-4" style="border-width:2px;"></li>
  51.  
  52. <li><p><span class="text-uppercase">gender</span><span style="float:right">info</span></p>
  53. <hr class="card-outline-info w-100 mt-1 mb-4" style="border-width:2px;"></li>
  54.  
  55. <li><p><span class="text-uppercase">sexuality</span><span style="float:right">info</span></p>
  56. <hr class="card-outline-info w-100 mt-1 mb-4" style="border-width:2px;"></li>
  57.  
  58. <li><p><span class="text-uppercase">job/role</span><span style="float:right">info</span></p>
  59. <hr class="card-outline-info w-100 mt-1 mb-4" style="border-width:2px;"></li>
  60.  
  61. </ul>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66.  
  67. <!---story tab-->
  68. <div>
  69. <div role="tab" id="heading2"><a class="btn btn-danger rounded-0 w-100 text-white mt-2 collapsed" data-toggle="collapse" data-parent="#accordion" href="#story" aria-expanded="false" aria-controls="story" style="font-size:20px">Story
  70. </a></div>
  71. <div id="story" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
  72. <div class="card-body pt-2">
  73. <div class="card rounded-0 bg-faded w-100 pl-3 pr-3 pt-2" style="border-width:0px;height:365px;font-size:17px;overflow:auto;overflow-x:hidden">
  74. <p>Write about your character's backstory/current story here. Box will scroll if needed, if all the space is not needed there's a spot for three images at the bottom</p>
  75. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nibh sem. Proin quis nulla id massa aliquam gravida nec.</p>
  76.  
  77.  
  78. <div class="row justify-content-around" style="position:absolute;bottom:30px;margin-left:-5px;width:95%">
  79. <div class="card rounded-0 card-outline-danger" style="width:125px;height:75px;border-width:3px;border-style:dashed;background:url(https://i.imgur.com/wlDKYxu.jpg);background-size:cover"></div>
  80.  
  81. <div class="card rounded-0 card-outline-danger" style="width:125px;height:75px;border-width:3px;border-style:dashed;background:url(https://i.imgur.com/wlDKYxu.jpg);background-size:cover"></div>
  82.  
  83. <div class="card rounded-0 card-outline-danger" style="width:125px;height:75px;border-width:3px;border-style:dashed;background:url(https://i.imgur.com/wlDKYxu.jpg);background-size:cover"></div>
  84. </div>
  85.  
  86. <div style="position:absolute;bottom:5px;right:8px;font-size:8px;letter-spacing:3px">
  87. <a class="text-danger" href="LINK"><i class="fas fa-circle tooltipster" title="image credit"></i></a>
  88. <a class="text-danger" href="LINK"><i class="fas fa-circle tooltipster" title="image credit"></i></a>
  89. <a class="text-danger" href="LINK"><i class="fas fa-circle tooltipster" title="image credit"></i></a>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95.  
  96. <!---stats tab-->
  97. <div>
  98. <div role="tab" id="heading3"><a class="btn btn-primary rounded-0 w-100 text-white mt-2 collapsed" data-toggle="collapse" data-parent="#accordion" href="#stats" aria-expanded="false" aria-controls="stats" style="font-size:20px">Stats
  99. </a></div>
  100. <div id="stats" class="collapse" role="tabpanel" aria-labelledby="heading3" data-parent="#accordion">
  101. <div class="card-body pt-2">
  102. <div class="card rounded-0 bg-faded w-100 pl-3 pr-0 pt-2" style="border-width:0px;height:365px;font-size:20px;line-height:55px">
  103. <div class="row" style="margin:0px">
  104. <div class="bg-inf" style="width:97px">
  105. <p>Building</p>
  106. <p>Brewing</p>
  107. <p>Redstone</p>
  108. <p>Fighting</p>
  109. <p>Parkour</p>
  110. </div>
  111. <div>
  112. <!---"add bg-primary" to the class section of a div to make it solid colored-->
  113. <!---building-->
  114. <div class="row" style="margin:0px;margin-top:6px;margin-bottom:30px">
  115. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  116. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  117. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  118. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  119. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px;"></div>
  120. </div>
  121. <!---brewing-->
  122. <div class="row" style="margin:0px;margin-bottom:30px">
  123. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  124. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  125. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  126. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  127. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px;"></div>
  128. </div>
  129. <!---redstone-->
  130. <div class="row" style="margin:0px;margin-bottom:30px">
  131. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  132. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  133. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  134. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  135. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px;"></div>
  136. </div>
  137. <!---fighting-->
  138. <div class="row" style="margin:0px;margin-bottom:30px">
  139. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  140. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  141. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  142. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  143. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px;"></div>
  144. </div>
  145. <!---parkour-->
  146. <div class="row" style="margin:0px;margin-bottom:30px">
  147. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  148. <div class="card rounded-0 card-outline-primary bg-primary" style="height:40px;width:60px;margin-right:6px"></div>
  149. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  150. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px"></div>
  151. <div class="card rounded-0 card-outline-primary" style="height:40px;width:60px;margin-right:6px;"></div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159.  
  160. <!---personality tab-->
  161. <div>
  162. <div role="tab" id="heading4"><a class="btn btn-warning rounded-0 w-100 text-white mt-2 collapsed" data-toggle="collapse" data-parent="#accordion" href="#personality" aria-expanded="false" aria-controls="personality" style="font-size:20px">Personality
  163. </a></div>
  164. <div id="personality" class="collapse" role="tabpanel" aria-labelledby="heading4" data-parent="#accordion">
  165. <div class="card-body pt-2">
  166. <div class="card rounded-0 bg-faded w-100 pl-3 pr-3 pt-2" style="border-width:0px;height:365px;font-size:17px;overflow:auto;overflow-x:hidden">
  167. <p>Personality description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non.</p>
  168. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh felis, bibendum id pretium sit amet, aliquet vitae libero. Sed id magna pellentesque, lacinia orci.</p>
  169. <hr class="card-outline-warning" style="border-width:2px;width:100%">
  170. <div class="row" style="margin-left:15px">
  171. <div class="bg-inf" style="width:190px;margin-right:20px">
  172. <p class="text-warning" style="font-size:25px">Likes</p>
  173. <ul class="fa-ul" style="margin-left:35px;">
  174. <li><span class="fa-li text-warning">✓</span>like</li>
  175. <li><span class="fa-li text-warning">✓</span>like</li>
  176. <li><span class="fa-li text-warning">✓</span>like</li>
  177. </ul>
  178. </div>
  179.  
  180. <div class="bg-inf" style="width:190px">
  181. <p class="text-warning" style="font-size:25px">Dislikes</p>
  182. <ul class="fa-ul" style="margin-left:35px;">
  183. <li><span class="fa-li text-warning"><i class="fal fa-times"></i></span>dislike</li>
  184. <li><span class="fa-li text-warning"><i class="fal fa-times"></i></span>dislike</li>
  185. <li><span class="fa-li text-warning"><i class="fal fa-times"></i></span>dislike</li>
  186. </ul>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194.  
  195.  
  196.  
  197. </div>
  198.  
  199. </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!