lowkeywicked

Freebie - Bubble

Oct 27th, 2021 (edited)
4,432
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.76 KB | None | 0 0
  1. <!--- color changing tip: use find & replace to quickly change all hex codes
  2.  
  3. ----- body ---------------- #ffffff
  4. ----- font ---------------- #222
  5. ----- highlight color ----- #d8607b
  6. ----- button/link color --- #999999
  7.  
  8. ------------------------------------>
  9.  
  10. <!----- background pattern -- use a seamless pattern ------------>
  11. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/40398513_PjIIhy0fjBGHP0D.png');
  12. background-position: fixed; border-radius: 16px; font-size: 10pt; font-family: helvetica; max-width: 800px;"
  13. class="container-fluid p-lg-5 p-4 my-4" >
  14. <div class="modal-open" style="border-radius: 16px;"><div class="row no-gutters">
  15. <div class="col-md-6 order-2">
  16.  
  17. <!-- large side image -- will crop & scale to fit area --------->
  18. <div style="background-image: url('IMG_URL');
  19. background-size: cover;background-position: center; min-height: 350px;" class="h-100"></div>
  20. </div>
  21. <div class="col-md-6 order-1"><div class="flex-column w-100">
  22.  
  23. <!----- navigation buttons --- you can change the symbols if you want ------------>
  24. <div style="background-color: #e8a3ae;" class="order-md-2">
  25. <ul class="nav row no-gutters">
  26. <li class="nav-item col">
  27. <a class="nav-link active btn btn-outline-secondary border-0 rounded-0 text-white px-1 py-2" style="box-shadow:none;"
  28. data-toggle="tab" href="#ONE">
  29. <i class="fas fa-info-circle fa-fw" style="font-size: 1.25rem;"></i>
  30. </a>
  31. </li>
  32.  
  33. <li class="nav-item col">
  34. <a class="nav-link btn btn-outline-secondary border-0 rounded-0 text-white px-1 py-2" style="box-shadow:none;"
  35. data-toggle="tab" href="#TWO">
  36. <i class="fas fa-bookmark fa-fw" style="font-size: 1.25rem;"></i>
  37. </a>
  38. </li>
  39.  
  40. <li class="nav-item col">
  41. <a class="nav-link btn btn-outline-secondary border-0 rounded-0 text-white px-1 py-2" style="box-shadow:none;"
  42. data-toggle="tab" href="#THREE">
  43. <i class="fas fa-image fa-fw" style="font-size: 1.25rem;"></i>
  44. </a>
  45. </li>
  46.  
  47. <li class="nav-item col">
  48. <a class="nav-link btn btn-outline-secondary border-0 rounded-0 text-white px-1 py-2" style="box-shadow:none;"
  49. data-toggle="tab" href="#FOUR">
  50. <i class="fas fa-question fa-fw" style="font-size: 1.25rem;"></i>
  51. </a>
  52. </li>
  53.  
  54. <li class="nav-item col">
  55. <a class="nav-link btn btn-outline-secondary border-0 rounded-0 text-white px-1 py-2" style="box-shadow:none;"
  56. data-toggle="tab" href="#FIVE">
  57. <i class="fas fa-users fa-fw" style="font-size: 1.25rem;"></i>
  58. </a>
  59. </li>
  60. </ul>
  61. </div>
  62.  
  63. <!-- start tab content --------------->
  64. <div class="tab-content order-md-1">
  65. <!-- first tab ------------------------------------------------------->
  66. <div class="tab-pane active show" id="ONE">
  67. <div style="background-color: #ffffff; color: #222; height: 320px; overflow: auto;" class="d-flex w-100 align-items-center p-3"><div class="w-100">
  68.  
  69. <div class="justify-content-between align-items-center">
  70. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  71. Name</div>
  72. <div>content</div>
  73. </div>
  74. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  75.  
  76. <div class="justify-content-between align-items-center">
  77. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  78. Gender</div>
  79. <div>content</div>
  80. </div>
  81. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  82.  
  83. <div class="justify-content-between align-items-center">
  84. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  85. Age</div>
  86. <div>content</div>
  87. </div>
  88. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  89.  
  90. <div class="justify-content-between align-items-center">
  91. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  92. D.o.B.</div>
  93. <div>date of birth</div>
  94. </div>
  95. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  96.  
  97. <div class="justify-content-between align-items-center">
  98. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  99. Race</div>
  100. <div>content</div>
  101. </div>
  102. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  103.  
  104. <div class="justify-content-between align-items-center">
  105. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  106. Height</div>
  107. <div>content</div>
  108. </div>
  109. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  110.  
  111. <div class="justify-content-between align-items-center">
  112. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  113. Demeanor</div>
  114. <div>content</div>
  115. </div>
  116. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  117.  
  118. <div class="justify-content-between align-items-center">
  119. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  120. Role</div>
  121. <div>what they do</div>
  122. </div>
  123. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  124.  
  125. <div class="justify-content-between align-items-center">
  126. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  127. Theme</div>
  128. <!-- LINK SONG HERE --------->
  129. <div><a href="SONG_LINK" style="color: #e8a3ae; font-weight: 600; text-decoration: none;" target="_BLANK">Song Name</a></div>
  130. </div>
  131. <hr style="border-color: #d6546c; opacity: 0.15" class="my-1">
  132. <!-- HTML CREDIT LINK -- leave this --------------------->
  133. <div class="justify-content-between align-items-center">
  134. <div style="font-weight: 600; color: #d6546c;" class="text-uppercase">
  135. HTML</div>
  136. <div><a href="/Pinky" style="color: #e8a3ae; font-weight: 600; text-decoration: none;" target="_BLANK">Pinky</a></div>
  137. </div>
  138.  
  139. </div></div>
  140. </div>
  141.  
  142. <!-- second tab ------------------------------------------------------->
  143. <div class="tab-pane" id="TWO">
  144. <div style="background-color: #ffffff; color: #222; height: 320px; overflow: auto;" class="p-3">
  145. <h4 style="font-weight: 600; letter-spacing: 1px; color: #d6546c;" class="text-center text-uppercase">
  146. About</h4>
  147.  
  148. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</p>
  149.  
  150. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</p>
  151. </div>
  152. </div>
  153.  
  154. <!-- third tab ------------------------------------------------------->
  155. <div class="tab-pane" id="THREE">
  156. <div style="background-color: #ffffff; color: #222; height: 320px; overflow: auto;" class="pt-3 px-3 pb-2">
  157. <div class="row no-gutters overflow-hidden" style="border-radius: 16px;">
  158. <!-- moodboard -- images will autocrop and center themselves ------------->
  159. <div class="col-6">
  160. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35906182_5cMQOCvGCPz8f1V.png');
  161. background-size: cover;background-position: center; min-height: 145px;"></div>
  162. </div>
  163. <div class="col-6">
  164. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35906192_tMAdpQ7hkXFKrpO.png');
  165. background-size: cover;background-position: center; min-height: 145px;"></div>
  166. </div>
  167. <div class="col-6">
  168. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35906195_aCFYApcA0NAAW1h.png');
  169. background-size: cover;background-position: center; min-height: 145px;"></div>
  170. </div>
  171. <div class="col-6">
  172. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35906184_sMZSsbv0vYzg0my.png');
  173. background-size: cover;background-position: center; min-height: 145px;"></div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178.  
  179. <!-- fourth tab ------------------------------------------------------->
  180. <div class="tab-pane" id="FOUR">
  181. <div style="background-color: #ffffff; color: #222; height: 320px; overflow: auto;" class="pt-3 px-3 pb-2">
  182. <h4 style="font-weight: 600; letter-spacing: 1px; color: #d6546c;" class="text-center text-uppercase">
  183. Trivia</h4>
  184.  
  185. <ul class="pl-4">
  186. <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</li>
  187.  
  188. <li class="mb-1">Fusce quis velit vel sem pellentesque iaculis congue non lorem.</li>
  189.  
  190. <li class="mb-1">Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit.</li>
  191.  
  192. <li class="mb-1">In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere.</li>
  193.  
  194. <li class="mb-1">Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</li>
  195. </ul>
  196. </div>
  197. </div>
  198.  
  199. <!-- fifth tab ------------------------------------------------------->
  200. <div class="tab-pane" id="FIVE">
  201. <div style="background-color: #ffffff; color: #222; height: 320px; overflow: auto;" class="pt-3 px-3">
  202. <h4 style="font-weight: 600; letter-spacing: 1px; color: #d6546c;" class="text-center text-uppercase">
  203. Related</h4>
  204. <div class="row no-gutters">
  205. <!-------------------------------------------->
  206. <div class="col-12 mb-2">
  207. <!-- link to character ------>
  208. <a href="CHARACTER_LINK">
  209.  
  210. <!-- character avatar image -- use square image --->
  211. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779319_NwDojeuKa5WLWJ4.png"
  212. class="float-left mr-2 rounded-circle" style="max-height: 50px;"></a>
  213. <!-- character name & relationship type -->
  214. <p class="mb-0"><b style="color: #d6546c;" class="text-uppercase">Name</b>
  215. <span class="faded" style="color: #d6546c; letter-spacing: 1px;">[relationship]</span></p>
  216.  
  217. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </p>
  218. </div>
  219. <!-------------------------------------------->
  220. <div class="col-12 mb-2">
  221. <!-- link to character ------>
  222. <a href="CHARACTER_LINK">
  223.  
  224. <!-- character avatar image -- use square image --->
  225. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779319_NwDojeuKa5WLWJ4.png"
  226. class="float-left mr-2 rounded-circle" style="max-height: 50px;"></a>
  227. <!-- character name & relationship type -->
  228. <p class="mb-0"><b style="color: #d6546c;" class="text-uppercase">Name</b>
  229. <span class="faded" style="color: #d6546c; letter-spacing: 1px;">[relationship]</span></p>
  230.  
  231. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </p>
  232. </div>
  233. <!-------------------------------------------->
  234. <div class="col-12 mb-2">
  235. <!-- link to character ------>
  236. <a href="CHARACTER_LINK">
  237.  
  238. <!-- character avatar image -- use square image --->
  239. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779319_NwDojeuKa5WLWJ4.png"
  240. class="float-left mr-2 rounded-circle" style="max-height: 50px;"></a>
  241. <!-- character name & relationship type -->
  242. <p class="mb-0"><b style="color: #d6546c;" class="text-uppercase">Name</b>
  243. <span class="faded" style="color: #d6546c; letter-spacing: 1px;">[relationship]</span></p>
  244.  
  245. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </p>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. </div> <!-- end tab content -------->
  251. </div></div>
  252. </div></div>
  253. </div>
Add Comment
Please, Sign In to add comment