API tools faq
paste
lowkeywicked

Freebie - Capsule

lowkeywicked
Aug 5th, 2020 (edited)
27,767
2
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.43 KB | None | 2 0
raw download clone embed print report
  1. <!-- default focal color is #bc4c7c -- use fine & replace to quickly swap it out -->
  2.  
  3. <!-- DO NOT combine this HTML with premium CSS, there will be weird conflicts -->
  4. <div class="container-fluid card border-0 pt-5 pb-4 px-0" style="margin-top: -60px;">
  5.  
  6. <!--- set the main background color or pattern here -- you can put a transparent bg over a color if you want -->
  7. <div style="background-color:#D1D0D2;
  8. background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/18493463_E7zWDYoSCMyMjEH.png);
  9. max-width: 950px; border-radius: 1em;" class="container-fluid card p-md-4 p-2">
  10.  
  11. <div class="row no-gutters">
  12. <div class="col-md-4 mb-md-0 mb-2">
  13. <div class="h-100 d-flex flex-column modal-open" style="background:none;">
  14.  
  15. <!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
  16. <div style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/23471745_uDJmehms0JPTUHv.png);
  17. background-color: #fff;
  18. background-size: cover; repeat:no-repeat; background-position: top center;
  19. min-height: 400px; border-radius: 1em;"
  20. class="d-block w-100 mb-2"></div>
  21.  
  22. <div class="pt-1 mt-auto mb-md-0 mb-2">
  23. <ul class="nav row no-gutters justify-content-center text-center">
  24. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
  25. <li class="nav-item col mx-1" style="background: #bc4c7c; border-radius: 1em; overflow:hidden;">
  26. <a class="btn border-0 text-white px-md-1 py-2 nav-link active" data-toggle="tab" href="#ONE">
  27. <i class="fas fa-star fa-fw" /></a>
  28. </li>
  29.  
  30. <li class="nav-item col mx-1" style="background: #bc4c7c; border-radius: 1em; overflow:hidden;">
  31. <a class="btn border-0 text-white px-md-1 py-2 nav-link" data-toggle="tab" href="#TWO">
  32. <i class="fas fa-list fa-fw" /></a>
  33. </li>
  34.  
  35. <li class="nav-item col mx-1" style="background: #bc4c7c; border-radius: 1em; overflow:hidden;">
  36. <a class="btn border-0 text-white px-md-1 py-2 nav-link" data-toggle="tab" href="#THREE">
  37. <i class="fas fa-bookmark fa-fw" /></a>
  38. </li>
  39.  
  40. <li class="nav-item col ml-x" style="background: #bc4c7c; border-radius: 1em; overflow:hidden;">
  41. <a class="btn border-0 text-white px-md-1 py-2 nav-link" data-toggle="tab" href="#FOUR">
  42. <i class="fas fa-users fa-fw" /></a>
  43. </li>
  44. </ul>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="col-md-8 pl-md-3">
  49. <div class="tab-content" style="font-size: 10pt; letter-spacing: .4px;">
  50.  
  51. <!------- TAB ONE ------------------------>
  52. <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  53. <div style="background: #fff; color: #000; height: 450px; overflow:auto; border-radius: 1em;" class="p-3">
  54. <h1 style="color: #bc4c7c; letter-spacing:1px;" class="display-4 text-uppercase mb-3">
  55. <i class="fal fa-star fa-fw pull-right" /> Basics</h1>
  56.  
  57. <div class="row px-1">
  58. <div class="col-sm-6">
  59. <span class="text-uppercase" style="filter:opacity(70%);">
  60. Name</span>
  61. <span class="pull-right">
  62. content</span>
  63. <hr class="my-2" style="border-color: #e1e8ed;">
  64. </div>
  65.  
  66. <div class="col-sm-6">
  67. <span class="text-uppercase" style="filter:opacity(70%);">
  68. Called</span>
  69. <span class="pull-right">
  70. content</span>
  71. <hr class="my-2" style="border-color: #e1e8ed;">
  72. </div>
  73.  
  74. <div class="col-sm-6">
  75. <span class="text-uppercase" style="filter:opacity(70%);">
  76. Age</span>
  77. <span class="pull-right">
  78. content</span>
  79. <hr class="my-2" style="border-color: #e1e8ed;">
  80. </div>
  81.  
  82. <div class="col-sm-6">
  83. <span class="text-uppercase" style="filter:opacity(70%);">
  84. Gender</span>
  85. <span class="pull-right">
  86. content</span>
  87. <hr class="my-2" style="border-color: #e1e8ed;">
  88. </div>
  89.  
  90. <div class="col-sm-6">
  91. <span class="text-uppercase" style="filter:opacity(70%);">
  92. Height</span>
  93. <span class="pull-right">
  94. content</span>
  95. <hr class="my-2" style="border-color: #e1e8ed;">
  96. </div>
  97.  
  98. <div class="col-sm-6">
  99. <span class="text-uppercase" style="filter:opacity(70%);">
  100. Build</span>
  101. <span class="pull-right">
  102. content</span>
  103. <hr class="my-2" style="border-color: #e1e8ed;">
  104. </div>
  105.  
  106. <div class="col-sm-6">
  107. <span class="text-uppercase" style="filter:opacity(70%);">
  108. Race</span>
  109. <span class="pull-right">
  110. content</span>
  111. <hr class="my-2" style="border-color: #e1e8ed;">
  112. </div>
  113.  
  114. <div class="col-sm-6">
  115. <span class="text-uppercase" style="filter:opacity(70%);">
  116. Role</span>
  117. <span class="pull-right">
  118. content</span>
  119. <hr class="my-2" style="border-color: #e1e8ed;">
  120. </div>
  121.  
  122. <div class="col-sm-6">
  123. <span class="text-uppercase" style="filter:opacity(70%);">
  124. MBTI</span>
  125. <span class="pull-right">
  126. content</span>
  127. <hr class="my-2" style="border-color: #e1e8ed;">
  128. </div>
  129.  
  130. <div class="col-sm-6">
  131. <span class="text-uppercase" style="filter:opacity(70%);">
  132. Demeanor</span>
  133. <span class="pull-right">
  134. content</span>
  135. <hr class="my-2" style="border-color: #e1e8ed;">
  136. </div>
  137.  
  138. <div class="col-sm-6">
  139. <span class="text-uppercase" style="filter:opacity(70%);">
  140. Alignment</span>
  141. <span class="pull-right">
  142. content</span>
  143. <hr class="my-2" style="border-color: #e1e8ed;">
  144. </div>
  145.  
  146. <div class="col-sm-6">
  147. <span class="text-uppercase" style="filter:opacity(70%);">
  148. Theme</span>
  149. <span class="pull-right">
  150. <a href="SONG LINK" style="color: #bc4c7c;" target="_BLANK">Song link</a></span>
  151. <hr class="my-2" style="border-color: #e1e8ed;">
  152. </div>
  153. </div>
  154.  
  155. <!------------------------------- LIKES & DISLIKES ----------------------------------->
  156. <div class="row px-1">
  157. <div class="col-sm-6 mb-2">
  158. <p class="text-uppercase" style="filter:opacity(70%);">
  159. <i class="fal fa-heart fa-fw" /> Likes</p>
  160. <ul class="mb-0">
  161. <li class="mb-2">content</li>
  162. <li class="mb-2">content</li>
  163. <li class="mb-2">content</li>
  164. <li class="mb-2">content</li>
  165. </ul>
  166. </div>
  167.  
  168. <div class="col-sm-6 mb-2">
  169. <p class="text-uppercase" style="filter:opacity(70%);">
  170. <i class="fal fa-times fa-fw" /> Dislikes</p>
  171. <ul class="mb-0">
  172. <li class="mb-2">content</li>
  173. <li class="mb-2">content</li>
  174. <li class="mb-2">content</li>
  175. <li class="mb-2">content</li>
  176. </ul>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181.  
  182. <!------- TAB TWO ------------------------>
  183. <div class="tab-pane fade" data-toggle="tab" id="TWO">
  184. <div style="background: #fff; color: #000; height: 450px; overflow:auto; border-radius: 1em;" class="p-3">
  185. <h1 style="color: #bc4c7c; letter-spacing:1px;" class="display-4 text-uppercase mb-3">
  186. <i class="fal fa-list fa-fw pull-right" />Stats</h1>
  187.  
  188. <!------------ STATS ------------ FAS FOR SOLID --- FAR FOR OPEN ------------------------>
  189. <div class="row px-1 mb-3">
  190. <div class="col-md-6">
  191. <span class="text-uppercase" style="filter:opacity(70%);">Title</span>
  192. <span class="pull-right">
  193. <i class="fas fa-star" />
  194. <i class="fas fa-star" />
  195. <i class="far fa-star" />
  196. <i class="far fa-star" />
  197. <i class="far fa-star" />
  198. </span>
  199. <hr class="my-2" style="border-color: #e1e8ed;">
  200. </div>
  201.  
  202. <div class="col-md-6">
  203. <span class="text-uppercase" style="filter:opacity(70%);">Title</span>
  204. <span class="pull-right">
  205. <i class="fas fa-star" />
  206. <i class="fas fa-star" />
  207. <i class="far fa-star" />
  208. <i class="far fa-star" />
  209. <i class="far fa-star" />
  210. </span>
  211. <hr class="my-2" style="border-color: #e1e8ed;">
  212. </div>
  213.  
  214. <div class="col-md-6">
  215. <span class="text-uppercase" style="filter:opacity(70%);">Title</span>
  216. <span class="pull-right">
  217. <i class="fas fa-star" />
  218. <i class="fas fa-star" />
  219. <i class="far fa-star" />
  220. <i class="far fa-star" />
  221. <i class="far fa-star" />
  222. </span>
  223. <hr class="my-2" style="border-color: #e1e8ed;">
  224. </div>
  225.  
  226. <div class="col-md-6">
  227. <span class="text-uppercase" style="filter:opacity(70%);">Title</span>
  228. <span class="pull-right">
  229. <i class="fas fa-star" />
  230. <i class="fas fa-star" />
  231. <i class="far fa-star" />
  232. <i class="far fa-star" />
  233. <i class="far fa-star" />
  234. </span>
  235. <hr class="my-2" style="border-color: #e1e8ed;">
  236. </div>
  237.  
  238. <div class="col-md-6">
  239. <span class="text-uppercase" style="filter:opacity(70%);">Title</span>
  240. <span class="pull-right">
  241. <i class="fas fa-star" />
  242. <i class="fas fa-star" />
  243. <i class="far fa-star" />
  244. <i class="far fa-star" />
  245. <i class="far fa-star" />
  246. </span>
  247. <hr class="my-2 hidden-md-up">
  248. </div>
  249.  
  250. <div class="col-md-6">
  251. <span class="text-uppercase" style="filter:opacity(70%);">Title</span>
  252. <span class="pull-right">
  253. <i class="fas fa-star" />
  254. <i class="fas fa-star" />
  255. <i class="far fa-star" />
  256. <i class="far fa-star" />
  257. <i class="far fa-star" />
  258. </span>
  259. </div>
  260. </div>
  261.  
  262. <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  263. <i class="fal fa-square fa-fw" /> Trait
  264. </p>
  265. <p>Turn this section into a personality or skills section. You can list battle stats up top + skills down here, or list personality traits up top + key traits down here. </p>
  266.  
  267. <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  268. <i class="fal fa-square fa-fw" /> Trait
  269. </p>
  270. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. </p>
  271.  
  272. <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  273. <i class="fal fa-square fa-fw" /> Trait
  274. </p>
  275. <p>Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. </p>
  276. </div>
  277. </div>
  278.  
  279. <!------- TAB THREE ------------------------>
  280. <div class="tab-pane fade" data-toggle="tab" id="THREE">
  281. <div style="background: #fff; color: #000; height: 450px; overflow:auto; border-radius: 1em;" class="p-3">
  282. <h1 style="color: #bc4c7c; letter-spacing:1px;" class="display-4 text-uppercase mb-3">
  283. <i class="fal fa-books fa-fw pull-right" />About</h1>
  284.  
  285. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  286.  
  287. <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  288. <i class="fal fa-bookmark fa-fw" /> Subheader
  289. </p>
  290. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  291.  
  292. <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  293. <i class="fal fa-bookmark fa-fw" /> Subheader
  294. </p>
  295. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  296. </div>
  297. </div>
  298.  
  299. <!------- TAB FOUR ------------------------>
  300. <div class="tab-pane fade" data-toggle="tab" id="FOUR">
  301. <div style="background: #fff; color: #000; height: 450px; overflow:auto; border-radius: 1em;" class="px-3 pt-3">
  302. <h1 style="color: #bc4c7c; letter-spacing:1px;" class="display-4 text-uppercase mb-3">
  303. <i class="fal fa-users fa-fw pull-right" /> Links</h1>
  304.  
  305. <div class="row px-1">
  306. <!--------------------------- CHARACTER LINK -------------------------------------->
  307. <div class="col-12 mb-2">
  308. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  309. style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  310.  
  311. <p class="my-1" style="letter-spacing:1px; font-size: 14pt; font-weight:300;">
  312. <a href="CHARACTER_LINK" style="color: #bc4c7c;">
  313. Character</a>
  314. <span class="pull-right small mt-1" style="letter-spacing:1px; font-weight:300;filter:opacity(70%);">
  315. [ relationship ]</span></p>
  316.  
  317. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. </p>
  318. </div>
  319.  
  320. <!--------------------------- CHARACTER LINK -------------------------------------->
  321. <div class="col-12 mb-2">
  322. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  323. style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  324.  
  325. <p class="my-1" style="letter-spacing:1px; font-size: 14pt; font-weight:300;">
  326. <a href="CHARACTER_LINK" style="color: #bc4c7c;">
  327. Character</a>
  328. <span class="pull-right small mt-1" style="letter-spacing:1px; font-weight:300;filter:opacity(70%);">
  329. [ relationship ]</span></p>
  330.  
  331. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. </p>
  332. </div>
  333.  
  334. <!--------------------------- CHARACTER LINK -------------------------------------->
  335. <div class="col-12 mb-2">
  336. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  337. style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  338.  
  339. <p class="my-1" style="letter-spacing:1px; font-size: 14pt; font-weight:300;">
  340. <a href="CHARACTER_LINK" style="color: #bc4c7c;">
  341. Character</a>
  342. <span class="pull-right small mt-1" style="letter-spacing:1px; font-weight:300;filter:opacity(70%);">
  343. [ relationship ]</span></p>
  344.  
  345. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. </p>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  351. </div>
  352. </div>
  353. </div>
  354. <div class="container mt-2" style="max-width: 900px;">
  355. <p class="text-right small">HTML by @Pinky</p>
  356. </div>
  357. </div>
Advertisement
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!