API tools faq
paste
Advertisement
ShadowDarespark

code edit

ShadowDarespark
Jun 28th, 2023
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.71 KB | None | 0 0
raw download clone embed print report
  1. <!---------------- WHOLE THING ---------------->
  2. <!--- READ ME:
  3. ADDED FOR YOU:
  4. #37b5f5 is the border color of the name/quote box
  5. #8ae0ff is the background color of the name/quote box
  6. #f53737 is the name text + horizontal line + balloons color
  7. #f59a37 is the quote text + quotation marks color
  8. --->
  9. <div class="mx-auto" style="font-family: trebuchet ms,geneva; max-width: 600px;">
  10. <div class="card card-block" style="background-color: #3781f5; border-color: #3781f5; border-width: 5px; border-radius: 20px; color: #3781f5; background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/29301382_NRZbHyAgfIrHqHu.png?1642800739)">
  11. <div class="card p-2" style="background-color: #8ae0ff; border-color: #37b5f5; border-width: 5px; border-radius: 10px;">
  12. <!---------------- NAME HEADER ---------------->
  13. <div class="display-4 mb-2 d-flex" style="color: #f53737">Name
  14. <hr class="flex-fill my-auto mx-2" style="background-color: #f53737">
  15. <i class="fas fa-balloons pull-right"/></div>
  16. <!---------------- END NAME HEADER ---------------->
  17.  
  18. <!---------------- QUOTE ---------------->
  19. <p class="text-center" style="color: #f59a37">
  20. <i class="fas fa-quote-left pull-left"/>
  21. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  22. <i class="fas fa-quote-right pull-right"/>
  23. </p>
  24. <!---------------- END QUOTE ---------------->
  25. </div>
  26.  
  27. <!---------------- MAIN CONTENT ---------------->
  28. <div class="row no-gutters">
  29. <!---------------- PAGEDOLL ---------------->
  30. <div class="col-sm-12 col-lg-4 p-2 m-auto text-center">
  31. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53023480_2KRDiYOjPt5AC8Y.png" style="max-height:300px;">
  32. </div>
  33. <!---------------- END PAGEDOLL ---------------->
  34.  
  35. <!---------------- TAB CONTENT ---------------->
  36. <div class="col-sm-12 col-lg-8 p-2 mb-3 mb-lg-0 mt-3 mt-lg-0">
  37. <div class="card bg-faded card-block p-3 rounded-0" style="height:250px; max-height:250px;; overflow:auto; background-color: #ffe9a8; border-color: #ff837b; border-width: 5px 5px 5px; border-radius: 20px 20px 0 0; color: #ff837b">
  38. <div class="tab-content">
  39. <!---------------- TAB ONE ---------------->
  40. <div class="tab-pane fade in active show" id="CCONE">
  41. <h4 class="text-uppercase"><b>About</b>
  42. <i class="fas fa-party-horn pull-right"/></h4>
  43. <hr class="m-0" style="background-color: #ff837b">
  44.  
  45. <!---------------- CONTENT BOXES ---------------->
  46. <div class="row no-gutters">
  47. <div class="col">
  48. <div class="d-flex justify-content-between">
  49. <p class="text-uppercase"><b>Species</b></p>
  50. <span class="text-right">content</span>
  51. </div>
  52. <div class="d-flex justify-content-between my-1">
  53. <p class="text-uppercase"><b>Age</b></p>
  54. <span class="text-right">content</span>
  55. </div>
  56. <div class="d-flex justify-content-between my-1">
  57. <p class="text-uppercase"><b>Gender</b></p>
  58. <span class="text-right">content</span>
  59. </div>
  60. <div class="d-flex justify-content-between my-1">
  61. <p class="text-uppercase"><b>Pronouns</b></p>
  62. <span class="text-right">content</span>
  63. </div>
  64. <!---------------- END CONTENT BOXES ---------------->
  65. <hr class="m-0" style="background-color: #ff837b">
  66.  
  67. <!---------------- ABOUT ---------------->
  68. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
  69. <!---------------- END ABOUT ---------------->
  70. </div>
  71. </div>
  72. </div>
  73. <!---------------- END TAB ONE ---------------->
  74.  
  75. <!---------------- TAB TWO ---------------->
  76. <div class="tab-pane fade in show" id="CCTWO">
  77. <h4 class="text-uppercase"><b>Bio</b>
  78. <i class="fas fa-gift pull-right"/></h4>
  79. <hr class="m-0" style="background-color: #ff837b">
  80.  
  81. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
  82. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  83. </div>
  84. <!---------------- END TAB TWO ---------------->
  85.  
  86. <!---------------- TAB THREE ---------------->
  87. <div class="tab-pane fade in show" id="CCTHREE">
  88. <h4 class="text-uppercase"><b>Trivia</b>
  89. <i class="fas fa-pinata pull-right"/></h4>
  90. <hr class="m-0" style="background-color: #ff837b">
  91.  
  92. <!---------------- LIKES ---------------->
  93. <div class="my-1">
  94. <p class="text-uppercase mb-0"><i class="fas fa-heart"/><b> Likes</b></p>
  95. <ul class="mb-0">
  96. <li>content</li>
  97. <li>content</li>
  98. <li>content</li>
  99. <li>content</li>
  100. </ul>
  101. </div>
  102. <!---------------- END LIKES ---------------->
  103.  
  104. <hr class="m-0" style="background-color: #ff837b">
  105.  
  106. <!---------------- DISLIKES ---------------->
  107. <div class="my-1">
  108. <p class="text-uppercase mb-0"><i class="fas fa-heart-broken"/><b> Dislikes</b></p>
  109. <ul class="mb-0">
  110. <li>content</li>
  111. <li>content</li>
  112. <li>content</li>
  113. <li>content</li>
  114. </ul>
  115. </div>
  116. <!---------------- END DISLIKES ---------------->
  117.  
  118. <hr class="m-0" style="background-color: #ff837b">
  119.  
  120. <!---------------- TRIVIA ---------------->
  121. <div class="mt-1 mb-0">
  122. <p class="text-uppercase mb-0"><i class="fas fa-sparkles"/><b> Trivia</b></p>
  123. <ul class="mb-0">
  124. <li>content</li>
  125. <li>content</li>
  126. <li>content</li>
  127. <li>content</li>
  128. </ul>
  129. </div>
  130. <!---------------- END TRIVIA ---------------->
  131. </div>
  132. <!---------------- END TAB THREE ---------------->
  133.  
  134. <!---------------- TAB FOUR ---------------->
  135. <div class="tab-pane fade in show" id="CCFOUR">
  136. <h4 class="text-uppercase"><b>Links</b>
  137. <i class="fas fa-cake-candles pull-right"/></h4>
  138. <hr class="m-0" style="background-color: #ff837b">
  139.  
  140. <!---------------- CHARACTER ---------------->
  141. <div class="row no-gutters my-2">
  142. <div class="col-lg-4 mb-1 p-2 d-flex">
  143. <div class="rounded-circle m-auto" style="background-image: url(https://via.placeholder.com/100); no-repeat center;background-size:cover;height:80px;width:80px;"></div>
  144. </div>
  145. <div class="col-lg">
  146. <div class="d-flex justify-content-between text-secondary">
  147. <a href="URLHERE"><b>NAME</b></a>
  148. <span class="text-right my-auto">Relationship</span>
  149. </div>
  150. <div style="max-height: 80px; overflow: auto;">
  151. <p>Describe their relationship here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  152. </div>
  153. </div>
  154. </div>
  155. <!---------------- END CHARACTER ---------------->
  156.  
  157. <!---------------- CHARACTER ---------------->
  158. <div class="row no-gutters my-2">
  159. <div class="col-lg-4 mb-1 p-2 d-flex">
  160. <div class="rounded-circle m-auto" style="background-image: url(https://via.placeholder.com/100); no-repeat center;background-size:cover;height:80px;width:80px;"></div>
  161. </div>
  162. <div class="col-lg">
  163. <div class="d-flex justify-content-between text-secondary">
  164. <a href="URLHERE"><b>NAME</b></a>
  165. <span class="text-right my-auto">Relationship</span>
  166. </div>
  167. <div style="max-height: 80px; overflow: auto;">
  168. <p>Describe their relationship here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  169. </div>
  170. </div>
  171. </div>
  172. <!---------------- END CHARACTER ---------------->
  173.  
  174. <!---------------- CHARACTER ---------------->
  175. <div class="row no-gutters my-2">
  176. <div class="col-lg-4 mb-1 p-2 d-flex">
  177. <div class="rounded-circle m-auto" style="background-image: url(https://via.placeholder.com/100); no-repeat center;background-size:cover;height:80px;width:80px;"></div>
  178. </div>
  179. <div class="col-lg">
  180. <div class="d-flex justify-content-between text-secondary">
  181. <a href="URLHERE"><b>NAME</b></a>
  182. <span class="text-right my-auto">Relationship</span>
  183. </div>
  184. <div style="max-height: 80px; overflow: auto;">
  185. <p>Describe their relationship here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  186. </div>
  187. </div>
  188. </div>
  189. <!---------------- END CHARACTER ---------------->
  190. </div>
  191. <!---------------- END TAB FOUR ---------------->
  192. </div>
  193. </div>
  194.  
  195. <!---------------- TAB NAVIGATION ---------------->
  196. <ul class="nav nav-tabs card-header-tabs row no-gutters justify-content-between">
  197. <li class="nav-item col-3 mb-sm-2 mb-lg-0 pr-1"><a class="btn btn-block bg-faded show active rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCONE">About</a></li>
  198. <li class="nav-item col-3 mb-sm-2 mb-lg-0 px-1"><a class="btn btn-block bg-faded show rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCTWO">Bio</a></li>
  199. <li class="nav-item col-3 mb-sm-2 mb-lg-0 px-1"><a class="btn btn-block bg-faded show rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCTHREE">Trivia</a></li>
  200. <li class="nav-item col-3 mb-sm-2 mb-lg-0 pl-1"><a class="btn btn-block bg-faded show rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCFOUR">Links</a></li>
  201. </ul>
  202. <!---------------- END TAB NAVIGATION ---------------->
  203. </div>
  204. <!---------------- END TAB CONTENT ---------------->
  205. </div>
  206. <!---------------- END MAIN CONTENT ---------------->
  207. </div>
  208.  
  209. <!---------------- CREDIT - DO NOT REMOVE!!! ---------------->
  210. <div class="text-right">
  211. <a href="https://www.deviantart.com/firstfear/art/Vector-Confetti-Blast-BG-Pack-319233841" class="tooltipster text-muted" title="Background Pattern"><i class="far fa-image fa-sm"></i></a>
  212. <a href="/Prismicodes" class="tooltipster text-muted" title="HTML by Prismicodes"><i class="far fa-code fa-sm"></i></a>
  213. </div>
  214. <!---------------- END CREDIT ---------------->
  215. </div>
  216. <!---------------- END WHOLE THING ---------------->
  217.  
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!