API tools faq
paste
Advertisement
rosiuel

dabadeedabadaa

rosiuel
Jun 18th, 2021
2,844
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.83 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. dabadeedabadaa by cherubix
  4.  
  5. accent : #637EEA (titles)
  6. darkest : #0D142A (borders and text)
  7. box bgs : #374269
  8. inner box bgs : #6A749A
  9. background : #111222
  10.  
  11. do not remove credit!
  12.  
  13. -->
  14.  
  15. <div class="col-12 mx-auto my-0 p-5" style="max-width:900px;background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/20694216_rrcc9qKrB1miQdp.gif) repeat fixed; background-color:#111222">
  16. <div style="color:#000;font-family:courier;">
  17. <div class="row no-gutters">
  18.  
  19. <!-- box 1 : image
  20. - image will crop! -->
  21. <div class="col-4 p-2 my-auto text-center">
  22. <h1 class="p-2 text-uppercase font-weight-bold" style="color:#637EEA;font-family:times new roman;"><i class="fas fa-crown fa-lg"></i></h1>
  23. <div class="card rounded-circle bg-white" style="border: 7px double #0D142A;height:250px;">
  24. <div class="card rounded-circle h-100 w-100" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/11304798?1622344611) center;background-size:cover;"></div>
  25. </div>
  26. <h3 class="m-2 text-uppercase font-weight-bold" style="color:#637EEA;font-family:times new roman;">Name Surname</h3>
  27. <span class="font-italic" style="color:#777;">
  28. <i class="far fa-quote-left fa-sm"></i>
  29. quote
  30. <i class="far fa-quote-right fa-sm"></i>
  31. </span>
  32. </div>
  33.  
  34. <!-- box 2 : intro
  35. - box will expand if u add too much content in the upper section!
  36. -the little about section underneath is safe to go ham on tho
  37. -->
  38. <div class="col-8 p-2 my-auto">
  39. <h3 class="m-2 text-uppercase font-weight-bold text-center" style="color:#637EEA;font-family:times new roman;">Introduction</h3>
  40. <div class="d-block p-2" style="background:#374269;border:6px double #0D142A; color:#0D142A">
  41.  
  42. <div class="row no-gutters p-2" style="background-color:#6A749A">
  43.  
  44. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  45. <span class="text-uppercase font-weight-bold">Name</span>
  46. <span>content</span>
  47. </div>
  48.  
  49. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  50. <span class="text-uppercase font-weight-bold">Alias</span>
  51. <span>content</span>
  52. </div>
  53.  
  54. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  55. <span class="text-uppercase font-weight-bold">Age</span>
  56. <span>content</span>
  57. </div>
  58.  
  59. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  60. <span class="text-uppercase font-weight-bold">Birthday</span>
  61. <span>content</span>
  62. </div>
  63. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  64. <span class="text-uppercase font-weight-bold">Orient.</span>
  65. <span>content</span>
  66. </div>
  67.  
  68. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  69. <span class="text-uppercase font-weight-bold">Pronouns</span>
  70. <span>con/tent</span>
  71. </div>
  72.  
  73. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  74. <span class="text-uppercase font-weight-bold">Height</span>
  75. <span>content</span>
  76. </div>
  77.  
  78. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  79. <span class="text-uppercase font-weight-bold">Occupation</span>
  80. <span>content</span>
  81. </div>
  82.  
  83. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  84. <span class="text-uppercase font-weight-bold">Status</span>
  85. <span>content</span>
  86. </div>
  87.  
  88. <div class="col-sm-6 d-flex justify-content-between p-1 px-3">
  89. <span class="text-uppercase font-weight-bold">Theme</span>
  90. <!--------------
  91. music player
  92. - the yt link must have the /embed/ in the link!! or it will not work!!
  93. - go to the video you're linking, and copy the stream of numbers n letters at the end! and smack em where 'r4LGe12tNR8' is!
  94. --------------->
  95. <span class="tooltipster" title="cry baby - the neighbourhood"><iframe class="flex-fill" style="height:1em;width:1em;opacity:0;position:absolute;margin-top:5.5px;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  96. src="https://www.youtube.com/embed/r4LGe12tNR8"></iframe><i class="far fa-music"></i></span>
  97. </div>
  98. <!-- little about section -->
  99. <div class="text-justify overflow-auto" style="height:90px">
  100. <p>This box scrolls! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  101. </div>
  102.  
  103. </div>
  104.  
  105. </div>
  106. </div>
  107.  
  108. <!-- box 3 : trivia -->
  109. <div class="col-6 p-2 my-auto">
  110. <h3 class="m-2 text-uppercase font-weight-bold text-center" style="color:#637EEA;font-family:times new roman;">Trivia</h3>
  111. <div class="d-block p-2" style="background:#374269;border:6px double #0D142A; color:#0D142A">
  112.  
  113. <div class="row no-gutters p-2" style="background-color:#6A749A">
  114.  
  115. <!-- trivia -->
  116. <div class="text-justify overflow-auto" style="height:130px">
  117. <ul style="margin-left: -40px; margin-bottom: 0">
  118. <li style="list-style-type: none;"><i class="far fa-chevron-right fa-xs mr-2"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
  119. <li style="list-style-type: none;"><i class="far fa-chevron-right fa-xs mr-2"></i>Ultrices dui sapien eget mi proin sed.</li>
  120. <li style="list-style-type: none;"><i class="far fa-chevron-right fa-xs mr-2"></i>Sapien eget mi proin sed libero enim.</li>
  121. <li style="list-style-type: none;"><i class="far fa-chevron-right fa-xs mr-2"></i>Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate.</li>
  122. <li style="list-style-type: none;"><i class="far fa-chevron-right fa-xs mr-2"></i>Dis parturient montes nascetur ridiculus mus.</li>
  123. </ul>
  124. </div>
  125.  
  126. <div class="col-12 pb-0">
  127. <div class="row no-gutters">
  128.  
  129. <!-- likes -->
  130. <div class="col-6 p-1">
  131.  
  132. <div style="height:113px; overflow:auto">
  133. <ul class="fa-ul mb-0">
  134.  
  135. <li class="my-2"><span class="fa-li">
  136. <i class="far fa-check" style="font-size:9px;"></i></span>
  137. <span>list</span>
  138. </li>
  139.  
  140. <li class="my-2"><span class="fa-li">
  141. <i class="far fa-check" style="font-size:9px;"></i></span>
  142. <span>some</span>
  143. </li>
  144.  
  145. <li class="my-2"><span class="fa-li">
  146. <i class="far fa-check" style="font-size:9px;"></i></span>
  147. <span>likes</span>
  148. </li>
  149.  
  150. <li class="my-2"><span class="fa-li">
  151. <i class="far fa-check" style="font-size:9px;"></i></span>
  152. <span>here</span>
  153. </li>
  154.  
  155. </ul>
  156. </div>
  157. </div>
  158.  
  159.  
  160. <!-- dislikes-->
  161. <div class="col-6 p-1">
  162.  
  163. <div style="height:113px; overflow:auto">
  164. <ul class="fa-ul mb-0">
  165.  
  166. <li class="my-2"><span class="fa-li">
  167. <i class="far fa-times" style="font-size:9px;"></i></span>
  168. <span>list</span>
  169. </li>
  170.  
  171. <li class="my-2"><span class="fa-li">
  172. <i class="far fa-times" style="font-size:9px;"></i></span>
  173. <span>some</span>
  174. </li>
  175.  
  176. <li class="my-2"><span class="fa-li">
  177. <i class="far fa-times" style="font-size:9px;"></i></span>
  178. <span>dislikes</span>
  179. </li>
  180.  
  181. <li class="my-2"><span class="fa-li">
  182. <i class="far fa-times" style="font-size:9px;"></i></span>
  183. <span>here</span>
  184. </li>
  185.  
  186. </ul>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194.  
  195. <!-- box 4 : personality
  196. - has a little stat sheet for mbti types! -->
  197. <div class="col-6 p-2 my-auto">
  198. <h3 class="m-2 text-uppercase font-weight-bold text-center" style="color:#637EEA;font-family:times new roman;">Personality</h3>
  199. <div class="p-2" style="background:#374269;border:6px double #0D142A;color:#0D142A">
  200.  
  201. <div class="p-2 text-justify overflow-auto" style="height:267px;background-color:#6A749A">
  202.  
  203. <!-- collapsed button -->
  204. <p class="font-weight-bold text-center text-uppercase" style="font-size:0.9rem;">
  205. <a data-toggle="collapse" href="#more" style="color:#0D142A;">
  206. MBTI
  207. </a>
  208. </p>
  209.  
  210. <!-- collapsed stats -->
  211. <div class="collapse mt-2" id="more">
  212.  
  213. <!-- stat 1 -->
  214. <p style="margin:15px; margin-top:0px; margin-bottom:0px;">
  215. introvert
  216. <span class="pull-right">
  217. extrovert
  218. </span>
  219. </p>
  220. <div class="progress" style="margin-left:15px; margin-right:15px; height:10px;background-color:#374269">
  221. <div class="progress-bar progress-bar-striped progress-bar-animated" style="color:#637EEA;background:none;border-right-width:8px;border-right-style:solid;width:
  222. 50%;"></div>
  223. </div>
  224.  
  225. <div class="my-3"></div>
  226. <!-- stat 2 -->
  227. <p style="margin:15px; margin-top:0px; margin-bottom:0px;">
  228. intuitive
  229. <span class="pull-right">
  230. observant
  231. </span>
  232. </p>
  233. <div class="progress" style="margin-left:15px; margin-right:15px; height:10px;background-color:#374269">
  234. <div class="progress-bar progress-bar-striped progress-bar-animated" style="color:#637EEA;background:none;border-right-width:8px;border-right-style:solid;width:
  235. 50%;"></div>
  236. </div>
  237.  
  238. <div class="my-3"></div>
  239. <!-- stat 3 -->
  240. <p style="margin:15px; margin-top:0px; margin-bottom:0px;">
  241. thinking
  242. <span class="pull-right">
  243. feeling
  244. </span>
  245. </p>
  246. <div class="progress" style="margin-left:15px; margin-right:15px; height:10px;background-color:#374269">
  247. <div class="progress-bar progress-bar-striped progress-bar-animated" style="color:#637EEA;background:none;border-right-width:8px;border-right-style:solid;width:
  248. 50%;"></div>
  249. </div>
  250.  
  251. <div class="my-3"></div>
  252. <!-- stat 4 -->
  253. <p style="margin:15px; margin-top:0px; margin-bottom:0px;">
  254. judging
  255. <span class="pull-right">
  256. prospecting
  257. </span>
  258. </p>
  259. <div class="progress" style="margin-left:15px; margin-right:15px; height:10px;background-color:#374269">
  260. <div class="progress-bar progress-bar-striped progress-bar-animated" style="color:#637EEA;background:none;border-right-width:8px;border-right-style:solid;width:
  261. 50%;"></div>
  262. </div>
  263.  
  264. <div class="my-3"></div>
  265. <!-- stat 5 -->
  266. <p style="margin:15px; margin-top:0px; margin-bottom:0px;">
  267. assertive
  268. <span class="pull-right">
  269. turbulent
  270. </span>
  271. </p>
  272. <div class="progress" style="margin-left:15px; margin-right:15px; height:10px;background-color:#374269">
  273. <div class="progress-bar progress-bar-striped progress-bar-animated" style="color:#637EEA;background:none;border-right-width:8px;border-right-style:solid;width:
  274. 50%;"></div>
  275. </div>
  276.  
  277.  
  278. </div>
  279. <!-- end collapsed -->
  280.  
  281. <!-- text-->
  282. <hr class="m-2">
  283. <p>This box scrolls! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>
  284.  
  285. </div>
  286.  
  287. </div>
  288.  
  289. </div>
  290.  
  291. <!-- box 5 : history -->
  292. <div class="col-12 p-2 my-auto">
  293. <h3 class="m-2 text-uppercase font-weight-bold text-center" style="color:#637EEA;font-family:times new roman;">Biography</h3>
  294. <div class="p-2" style="background:#374269;border:6px double #0D142A;color:#0D142A">
  295. <div class="p-2 text-justify overflow-auto" style="height:200px;background-color:#6A749A">
  296.  
  297. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate. Pharetra massa massa ultricies mi quis. Id donec ultrices tincidunt arcu non. Cras sed felis eget velit aliquet sagittis id. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ut sem nulla pharetra diam sit amet.</p>
  298. <p>Auctor neque vitae tempus quam pellentesque nec nam. Elit duis tristique sollicitudin nibh sit amet commodo. Ut diam quam nulla porttitor. Blandit libero volutpat sed cras. Maecenas accumsan lacus vel facilisis volutpat est. Turpis in eu mi bibendum neque. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus.</p>
  299. </div>
  300. </div>
  301. </div>
  302.  
  303. <!-- mini moodboard
  304. - image size doesnt matter, they will crop!-->
  305.  
  306. <!-- image one -->
  307. <div class="col-4 p-2 my-auto">
  308. <div class="p-2" style="background:#374269;border:6px double #0D142A;color:#0D142A">
  309. <div style="height:150px;background:url(https://i.pinimg.com/564x/cf/c7/a4/cfc7a42c6ba66d93c3f9b93728b3a6c4.jpg) center;background-size:cover;"></div>
  310. </div>
  311. </div>
  312. <!-- image two -->
  313. <div class="col-4 p-2 my-auto">
  314. <div class="p-2" style="background:#374269;border:6px double #0D142A;color:#0D142A">
  315. <div style="height:150px;background:url(https://s11.favim.com/orig/7/781/7815/78154/aesthetics-palm-royal-Favim.com-7815480.jpg) center;background-size:cover"></div>
  316. </div>
  317. </div>
  318. <!-- image three -->
  319. <div class="col-4 p-2 my-auto">
  320. <div class="p-2" style="background:#374269;border:6px double #0D142A;color:#0D142A">
  321. <div style="height:150px;background:url(https://64.media.tumblr.com/0d8998e1dcf32bed028c01509250f26b/tumblr_oovt956rv31vei7fto3_500.jpg) center;background-size:cover"></div>
  322. </div>
  323. </div>
  324.  
  325. <!-- box 6 : relationships
  326. - whole box will scroll if you add more characters! -->
  327. <div class="col-12 p-2 my-auto">
  328. <h3 class="m-2 text-uppercase font-weight-bold text-center" style="color:#637EEA;font-family:times new roman;">Relations</h3>
  329. <div class="p-2" style="background:#374269;border:6px double #0D142A;color:#0D142A">
  330. <div class="p-2 overflow-auto text-justify" style="height:200px;background-color:#6A749A">
  331.  
  332. <div class="row no-gutters">
  333. <!-- character one -->
  334. <div class="col-6 p-2 my-auto">
  335. <h3 class="text-uppercase p-0 pull-left"><a href="URL_HERE" style="color:#0D142A;font-family:times new roman">Name</a></h3>
  336.  
  337. <!-- hearts
  338. fas is full, and far is empty! -->
  339. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  340. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  341. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  342. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  343. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  344.  
  345. <hr class="my-0" style="background-color:#0D142A;">
  346.  
  347. <!-- image
  348. works best if a square! -->
  349. <img class="mt-2" style="height:130px;border:3px solid #0D142A;" align="left" src="https://s10.favim.com/orig/170123/aesthetic-blue-dark-blue-theme-Favim.com-5012880.jpeg">
  350.  
  351. <p class="p-2 mt-2 overflow-auto" style="color:#0D142A;height:130px">Your character's thoughts go here!</p>
  352. </div>
  353.  
  354. <!-- character two -->
  355. <div class="col-6 p-2 my-auto">
  356. <h3 class="text-uppercase p-0 pull-left"><a href="URL_HERE" style="color:#0D142A;font-family:times new roman">Name</a></h3>
  357. <!-- hearts
  358. fas is full, and far is empty! -->
  359. <i class="far fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  360. <i class="far fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  361. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  362. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  363. <i class="fas fa-heart pull-right" style="font-size:20px;color:#0D142A;"></i>
  364.  
  365. <hr class="my-0" style="background-color:#0D142A;">
  366.  
  367. <!-- image
  368. works best if a square! -->
  369. <img class="mt-2" style="height:130px;border:3px solid #0D142A;" align="left" src="https://s10.favim.com/orig/170123/aesthetic-blue-dark-blue-theme-Favim.com-5012880.jpeg">
  370.  
  371. <p class="p-2 mt-2 overflow-auto" style="color:#0D142A;height:130px">This box will scroll if you fill it with enough content! See? Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
  372. </div>
  373.  
  374. </div>
  375. </div>
  376. </div>
  377. </div>
  378.  
  379. <!-- add more boxes above this line! -->
  380.  
  381.  
  382. </div>
  383.  
  384. <!-- credits // DO NOT REMOVE -->
  385. <div class="col-12">
  386. <h3 class="text-uppercase my-1" style="color:#637EEA;font-size:10px;letter-spacing:3px;" align="right">
  387.  
  388. <a href="/EnigmaticInsomniac"><span data-toggle="tooltip" title="icon by EnigmaticInsomniac"><i class="fas fa-user fa-xs" style="color:#637EEA;"></i></span></a>|<a href="/CanadianLyynx"><span data-toggle="tooltip" title="background pattern by CanadianLyynx"><i class="fas fa-image fa-sm" style="color:#637EEA;"></i></span></a>|<a href="/cherubix"><span data-toggle="tooltip" title="code by cherubix"><i class="fas fa-heart fa-sm" style="color:#637EEA;"></i></span></a>
  389.  
  390. </h3>
  391. </div>
  392. </div>
  393. </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!