API tools faq
paste
Advertisement
weishiji

#10 - HOSPITAL'S ID (EDIT)

weishiji
Feb 5th, 2023
1,075
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.61 KB | None | 0 0
raw download clone embed print report
  1. <!---- QUICK NOTE BEFORE STARTING; ------
  2.  
  3.  
  4. Type ctrl+f to locate and replace the color of any of the item below.
  5.  
  6. - background color: #110d0f
  7. - background card color: #000
  8. - main color: #f95e41
  9. - font color: #ece6df
  10.  
  11. - dividers (scissors): #c9391f
  12. - darker main color: #5e180c
  13.  
  14.  
  15. -------->
  16.  
  17. <!------------ CONTENT ------------>
  18.  
  19. <div class="container mt-5" style="max-width: 1090px; font-family: ms gothic; color: #ece6df; font-size: 14px">
  20.  
  21. <!------------ CARD START ------------>
  22.  
  23. <div class="card p-1 border-0 rounded-0" style="background: #110d0f; box-shadow: 4px 4px 0 #c9391f">
  24.  
  25. <!------------ FIRST COLUMN ------------>
  26.  
  27. <div class="row no-gutters">
  28. <div class="col-lg-4 p-2">
  29.  
  30. <!------------ PATIENT NUMBER ------------>
  31.  
  32. <div class="card p-1 rounded-0 border-0" style="background: #000; box-shadow: 4px 4px 0 #f95e41; margin-bottom: -30px; z-index: 10; margin-left: 80px; width:260px;">
  33. <p class="text-center" style="font-size: 21px; font-family: georgia;"><span style="color: #f95e41;">
  34. <i class="far fa-barcode"></i><i class="far fa-barcode"></i><i class="far fa-barcode"></i></span>
  35.  
  36. PATIENT
  37. <span style="font-family: tahoma">
  38. #0000</span>
  39.  
  40. <!------------ END ------------>
  41.  
  42. </p></div>
  43.  
  44. <!------------ MAIN IMAGE ------------>
  45.  
  46. <div class="card border-0 rounded-0 mt-3" style="background: url(IMG_URL) center; background-size: cover;
  47. height: 415px; width: 350px; box-shadow: 4px 4px 0 #f95e41">
  48.  
  49. <!------------ ICON ------------>
  50.  
  51. <i class="far fa-paperclip" style="font-size: 70px; color: #ddd; position: absolute; left: -10px; top: -20px; text-shadow: 3px 3px 0 rgba(0,0,0,0.30)"></i>
  52.  
  53. <!------------ BASICS START ------------>
  54.  
  55. <div class="mt-auto"/>
  56. <div class="collapse px-3 p-3" id="open" style="background: #000; overflow: auto;">
  57. <div class="tab-pane fade show active" id="one">
  58.  
  59. <!------------ ADJETIVES ------------>
  60.  
  61. <div class="justify-content-center mt-3 mb-1">
  62.  
  63. <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
  64. adjective
  65. </div>
  66.  
  67. <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
  68. adjective
  69. </div>
  70.  
  71. <div class="card border-0 rounded-0 px-1 m-1" style="background-color: #5e180c;">
  72. adjective
  73. </div>
  74.  
  75. <!------------ ADD MORE ABOVE THIS LINE ------------>
  76.  
  77. </div>
  78.  
  79. <!------------ BASICS ------------>
  80.  
  81. <div class="justify-content-between py-1">
  82. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">NAME</span>
  83.  
  84. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  85. <span class="text-right"> content
  86. </div>
  87.  
  88. <!------------ ------------>
  89.  
  90. <div class="justify-content-between py-1">
  91. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">GENDER</span>
  92.  
  93. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  94. <span class="text-right"> content
  95. </div>
  96.  
  97. <!------------ ------------>
  98.  
  99. <div class="justify-content-between py-1">
  100. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">SPECIES</span>
  101.  
  102. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  103. <span class="text-right"> content
  104. </div>
  105.  
  106. <!------------ ------------>
  107.  
  108. <div class="justify-content-between py-1">
  109. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">AGE</span>
  110.  
  111. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  112. <span class="text-right"> content
  113. </div>
  114.  
  115. <!------------ ------------>
  116.  
  117. <div class="justify-content-between py-1">
  118. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ORIENT.</span>
  119.  
  120. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  121. <span class="text-right"> content
  122. </div>
  123.  
  124. <!------------ ------------>
  125.  
  126. <div class="justify-content-between py-1">
  127. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ROLE</span>
  128.  
  129. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  130. <span class="text-right"> content
  131. </div>
  132.  
  133. <!------------ ------------>
  134.  
  135. <div class="justify-content-between py-1">
  136. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ORIGIN</span>
  137.  
  138. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  139. <span class="text-right"> content
  140. </div>
  141.  
  142. <!------------ ------------>
  143.  
  144. <div class="justify-content-between py-1">
  145. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ALIGNMENT</span>
  146.  
  147. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  148. <span class="text-right"> content
  149. </div>
  150.  
  151. <!------------ ------------>
  152.  
  153. <div class="justify-content-between py-1">
  154. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">ALIAS</span>
  155.  
  156. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  157. <span class="text-right"> content
  158. </div>
  159.  
  160. <!------------ ------------>
  161.  
  162. <div class="justify-content-between py-1">
  163. <span style="color: #f95e41; letter-spacing: 1px; font-weight: bold">VOICE/SONG</span>
  164.  
  165. <hr class="flex-fill my-auto mx-2" style="background: #ece6df; opacity: 0.3;">
  166. <span class="text-right">
  167. <a href="LINK_URL" style="color: #f95e41;"><i class="fas fa-music"></i></a>
  168. </div>
  169.  
  170. <!------------ BASICS END ------------>
  171.  
  172. </div></div>
  173.  
  174. <!------------ BASICS LINK ------------>
  175.  
  176. <a class="p-1 text-center" style="color: #ece6df; background: #000; font-family: georgia; font-size: 25px;" data-toggle="collapse" href="#open" aria-expanded="false">
  177. <span style="background: #f95e41;"><s>P</span>ATIENT'S</s> INFO</a>
  178.  
  179. </div></div>
  180.  
  181. <!------------ FIRST COLUMN END ------------>
  182.  
  183. <!------------ SECOND COLUMN START ------------>
  184.  
  185. <div class="col-lg-7 p-2">
  186.  
  187. <div class="card-block">
  188.  
  189. <!------------ TABS ------------>
  190.  
  191. <ul class="nav p-1" style="z-index: 100; margin-bottom: -40px">
  192.  
  193. <!------------ ------------>
  194.  
  195. <li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
  196. <a href="#basic" class="nav-link active btn d-flex border-0 w-100" data-toggle="tab">
  197.  
  198. <span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅰ</span>
  199. </a></li>
  200.  
  201. <!------------ ------------>
  202.  
  203. <li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
  204. <a href="#info" class="nav-link btn d-flex border-0 w-100" data-toggle="tab">
  205.  
  206. <span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅱ</span></i>
  207. </a></li>
  208.  
  209. <!------------ ------------>
  210.  
  211. <li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
  212. <a href="#story" class="nav-link btn d-flex border-0 w-100" data-toggle="tab">
  213.  
  214. <span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅲ</span></i>
  215. </a></li>
  216.  
  217. <!------------ ------------>
  218.  
  219. <li class="nav-item d-flex m-1" style="clip-path: polygon(50% 26%, 100% 0, 100% 100%, 0 100%, 0 0); width: 70px; height: 75px; background: #f95e41;">
  220. <a href="#friends" class="nav-link btn d-flex border-0 w-100" data-toggle="tab">
  221.  
  222. <span class="m-auto" style= "color: #fff; font-family: georgia; font-size: large;">Ⅳ</span></i>
  223. </a></li>
  224.  
  225. <!------------ TABS END ------------>
  226.  
  227. </ul></div>
  228.  
  229. <!------------ MAIN CARD START ------------>
  230.  
  231. <div class="col-md-7 col-lg-12">
  232. <div class="card p-3 border-0 rounded-0" style="background:#000; box-shadow: 4px 4px 0 #f95e41; height: 351px; overflow: auto;">
  233.  
  234. <!------------ BASICS TAB ------------>
  235.  
  236. <div class="tab-content">
  237. <div class="tab-pane fade in active show" id="basic">
  238.  
  239. <!------------ ABOUT TITLE ------------>
  240.  
  241. <div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  242. <span style="background-color: #f95e41;"><s>A</s></span>BOUT</div>
  243. <div class="col-lg-1"><i class="far fa-folder-user" style="color: #c9391f"></i>
  244. </div></div>
  245.  
  246. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  247. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  248.  
  249. <!------------ END ------------>
  250.  
  251. <div style="height: 242px; overflow: auto">
  252.  
  253. <!------------ TITLE OR PHRASE ------------>
  254.  
  255. <blockquote class="justify-content-between mb-3 mt-1" style="border-left: 6px solid #f95e41; font-family: georgia;">
  256. <i class="fad fa-quote-left" style="color: #f95e41;"></i>
  257.  
  258. Some epic phrase or title in general... yas
  259.  
  260. <i class="fad fa-quote-right" style="color: #f95e41;"></i>
  261. </blockquote>
  262.  
  263. <!------------ CONTENT ------------>
  264.  
  265. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  266.  
  267. <!------------ PERSONALITY TITLE ------------>
  268.  
  269. <div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  270. <span style="background-color: #f95e41;"><s>P</s></span>ERSONALITY</div>
  271. <div class="col-lg-1"><i class="far fa-id-card" style="color: #c9391f"></i>
  272. </div></div>
  273.  
  274. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  275. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  276.  
  277. <!------------ CONTENT ------------>
  278.  
  279. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  280.  
  281. <!------------ TRIVIA TITLE ------------>
  282.  
  283. <div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  284. <span style="background-color: #f95e41;"><s>T</s></span>RIVIA</div>
  285. <div class="col-lg-1"><i class="far fa-list" style="color: #c9391f"></i>
  286. </div></div>
  287.  
  288. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  289. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  290.  
  291. <!------------ CONTENT - add more using <li> ------------>
  292.  
  293. <ul>
  294.  
  295. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  296. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  297. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  298. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  299.  
  300. </ul>
  301.  
  302. <!------------ BASICS TAB END ------------>
  303.  
  304. </div></div>
  305.  
  306.  
  307. <!------------ INFO TAB ------------>
  308.  
  309. <div class="tab-pane fade in" id="info">
  310.  
  311. <!------------ EXTRAS TITLE ------------>
  312.  
  313. <div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  314. <span style="background-color: #f95e41;"><s>E</s></span>XTRAS</div>
  315. <div class="col-lg-1"><i class="far fa-scalpel" style="color: #c9391f"></i>
  316. </div></div>
  317.  
  318. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  319. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  320.  
  321. <!------------ END ------------>
  322.  
  323. <div style="height: 242px; overflow: auto">
  324.  
  325. <!------------ LIKES & DISLIKES ------------>
  326.  
  327. <div class="row no-gutters">
  328. <div class="col-lg-6 p-1 px-2" style="height: 215px; overflow: auto">
  329.  
  330. <!------------ LIKES ------------>
  331.  
  332. <div class="mb-1" style="color: #f95e41; font-size: 17px; letter-spacing: 2px; font-weight: bold">LIKES.</div>
  333.  
  334. <ul>
  335.  
  336. <li>content</li>
  337. <li>content</li>
  338. <li>content</li>
  339. <li>content</li>
  340.  
  341. </ul>
  342.  
  343. <!------------ DISLIKES ------------>
  344.  
  345. <div class="mb-1" style="color: #f95e41; font-size: 17px; letter-spacing: 2px; font-weight: bold">DISLIKES.</div>
  346.  
  347. <ul>
  348.  
  349. <li>content</li>
  350. <li>content</li>
  351. <li>content</li>
  352. <li>content</li>
  353.  
  354. </ul>
  355.  
  356. <!------------ END ------------>
  357.  
  358. </div>
  359.  
  360. <!------------ PROGRESS BARS ------------>
  361.  
  362. <div class="col-lg-6 p-1 px-2" style="height: 215px; overflow: auto">
  363.  
  364. <!------------ ------------>
  365.  
  366. <div class="row no-gutters"><div style="margin-bottom: -5px">
  367. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">STRENGTH</span></div>
  368. <div class="col px-1 pb-1"></div><div class="col-auto">
  369.  
  370. <span style="font-size: 13px; opacity: 0.4">
  371. 50%
  372. </span></div></div>
  373. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  374. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  375. </div></div>
  376.  
  377. <!------------ ------------>
  378.  
  379. <div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
  380. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">EMPATHY</span></div>
  381. <div class="col px-1 pb-1"></div><div class="col-auto">
  382.  
  383. <span style="font-size: 13px; opacity: 0.4">
  384. 50%
  385. </span></div></div>
  386. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  387. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  388. </div></div>
  389.  
  390. <!------------ ------------>
  391.  
  392. <div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
  393. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">INTELLIGENCE</span></div>
  394. <div class="col px-1 pb-1"></div><div class="col-auto">
  395.  
  396. <span style="font-size: 13px; opacity: 0.4">
  397. 50%
  398. </span></div></div>
  399. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  400. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  401. </div></div>
  402.  
  403. <!------------ ------------>
  404.  
  405. <div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
  406. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">ENERGY</span></div>
  407. <div class="col px-1 pb-1"></div><div class="col-auto">
  408.  
  409. <span style="font-size: 13px; opacity: 0.4">
  410. 50%
  411. </span></div></div>
  412. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  413. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  414. </div></div>
  415.  
  416. <!------------ ------------>
  417.  
  418. <div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
  419. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">CONCENTRATION</span></div>
  420. <div class="col px-1 pb-1"></div><div class="col-auto">
  421.  
  422. <span style="font-size: 13px; opacity: 0.4">
  423. 50%
  424. </span></div></div>
  425. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  426. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  427. </div></div>
  428.  
  429. <!------------ ------------>
  430.  
  431. <div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
  432. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">CHARISMA</span></div>
  433. <div class="col px-1 pb-1"></div><div class="col-auto">
  434.  
  435. <span style="font-size: 13px; opacity: 0.4">
  436. 50%
  437. </span></div></div>
  438. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  439. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  440. </div></div>
  441.  
  442. <!------------ ------------>
  443.  
  444. <div class="row no-gutters mt-1"><div style="margin-bottom: -5px">
  445. <span style="color: #f95e41; letter-spacing: 2px; font-weight: bold">HUMOR</span></div>
  446. <div class="col px-1 pb-1"></div><div class="col-auto">
  447.  
  448. <span style="font-size: 13px; opacity: 0.4">
  449. 50%
  450. </span></div></div>
  451. <div class="progress rounded-0" style="height: 5px; background-color: #ddd">
  452. <div class="progress-bar" style="width: 50%; background-color: #5e180c">
  453. </div></div>
  454.  
  455. <!------------ ADD MORE ABOVE THIS LINE ------------>
  456.  
  457. </div></div>
  458.  
  459. <!------------ GALLERY TITLE ------------>
  460.  
  461. <div class="row no-gutters mt-2" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  462. <span style="background-color: #f95e41;"><s>G</s></span>ALLERY</div>
  463. <div class="col-lg-1"><i class="far fa-folders" style="color: #c9391f"></i>
  464. </div></div>
  465.  
  466. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  467. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  468.  
  469. <!------------ GALLERY START (you can use GIFs aswell) ------------>
  470.  
  471. <div class="row no-gutters">
  472.  
  473. <!------------ ------------>
  474.  
  475. <div class="col-4 p-1">
  476. <div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%;
  477. clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);">
  478. </div></div>
  479.  
  480. <!------------ ------------>
  481.  
  482. <div class="col-4 p-1">
  483. <div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
  484. </div></div>
  485.  
  486. <!------------ ------------>
  487.  
  488. <div class="col-4 p-1">
  489. <div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
  490. </div></div>
  491.  
  492. <!------------ ------------>
  493.  
  494. <div class="col-4 p-1">
  495. <div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
  496. </div></div>
  497.  
  498. <!------------ ------------>
  499.  
  500. <div class="col-4 p-1">
  501. <div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%">
  502. </div></div>
  503.  
  504. <!------------ ------------>
  505.  
  506. <div class="col-4 p-1">
  507. <div class="square" style="background:url(IMG_URL) center; background-size: cover; padding-top: 80%;
  508. clip-path: polygon(100% 0, 62% 100%, 0 100%, 0 0);">
  509. </div></div>
  510.  
  511. <!------------ END ------------>
  512.  
  513. </div></div></div>
  514.  
  515. <!------------ INFO TAB END ------------>
  516.  
  517.  
  518.  
  519. <!------------ STORY TAB ------------>
  520.  
  521. <div class="tab-pane fade in" id="story">
  522.  
  523. <!------------ BACKGROUND TITLE ------------>
  524.  
  525. <div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  526. <span style="background-color: #f95e41;"><s>B</s></span>ACKGROUND</div>
  527. <div class="col-lg-1"><i class="far fa-books" style="color: #c9391f"></i>
  528. </div></div>
  529.  
  530. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  531. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  532.  
  533. <!------------ CONTENT ------------>
  534.  
  535. <div style="height: 242px; overflow: auto">
  536.  
  537. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  538.  
  539. <!------------ TITLE ------------>
  540.  
  541. <div class="mt-2 px-3 text-right" style="font-size: 25px; font-family: georgia">
  542. <i class="far fa-bookmark" style="color: #c9391f"></i> SUBHEADER</div>
  543. <div class="justify-content-between mb-3">
  544. <span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
  545.  
  546. <!------------ CONTENT ------------>
  547.  
  548. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  549.  
  550. <!------------ TITLE ------------>
  551.  
  552. <div class="mt-2 px-3 text-right" style="font-size: 25px; font-family: georgia">
  553. <i class="far fa-bookmark" style="color: #c9391f"></i> SUBHEADER</div>
  554. <div class="justify-content-between mb-3">
  555. <span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
  556.  
  557. <!------------ CONTENT ------------>
  558.  
  559. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  560.  
  561. <!------------ ADD MORE ABOVE THIS LINE ------------>
  562.  
  563. </div></div>
  564.  
  565. <!------------ STORY TAB END ------------>
  566.  
  567.  
  568.  
  569. <!------------ RELATIONSHIP TAB ------------>
  570.  
  571. <div class="tab-pane fade in" id="friends">
  572.  
  573. <!------------ RELATIONSHIPS TITLE ------------>
  574.  
  575. <div class="row no-gutters" style="font-size: 32px; font-family: georgia"><div class="col-lg-11">
  576. <span style="background-color: #f95e41;"><s>R</s></span>ELATIONSHIPS</div>
  577. <div class="col-lg-1"><i class="far fa-users" style="color: #c9391f"></i>
  578. </div></div>
  579.  
  580. <div class="justify-content-between mb-2" style="font-size: 20px; color: #c9391f">
  581. <i class="far fa-scissors"></i><span class="col my-auto m-1" style="border-top: 3px dashed"></span></div>
  582.  
  583. <!------------ END ------------>
  584.  
  585. <div style="height: 242px; overflow: auto">
  586.  
  587. <!------------ RELATIONSHIP 1 ------------>
  588.  
  589. <div class="row no-gutters">
  590. <div class="col-lg-3 p-1">
  591.  
  592. <!------------ IMAGE ------------>
  593.  
  594. <img src="IMG_URL" style="box-shadow: -4px 4px 0 #c9391f"></div>
  595.  
  596. <div class="col-lg-9 p-1 px-2">
  597.  
  598. <!------------ NAME & HEARTS ------------>
  599.  
  600. <div class="row no-gutters"><div class="col-lg-7">
  601. <a href="LINK" style="color: #f95e41; font-family: georgia; font-size: 20px;">NAME</a>
  602. <span style="opacity: 0.7; font-weight: bold">— relationship</span></div>
  603.  
  604. <div class="col-lg-5 text-right">
  605. <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
  606. <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
  607. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  608. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  609. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  610. </div></div>
  611.  
  612. <!------------ ABOUT ------------>
  613.  
  614. <div class="mt-2" style="height: 90px; overflow: auto">
  615.  
  616. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  617.  
  618. </div>
  619. </div></div>
  620.  
  621. <!------------ END ------------>
  622.  
  623. <div class="justify-content-between mb-3 mt-3">
  624. <span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
  625.  
  626.  
  627.  
  628. <!------------ RELATIONSHIP 2 ------------>
  629.  
  630. <div class="row no-gutters">
  631. <div class="col-lg-3 p-1">
  632.  
  633. <!------------ IMAGE ------------>
  634.  
  635. <img src="IMG_URL" style="box-shadow: -4px 4px 0 #c9391f"></div>
  636.  
  637. <div class="col-lg-9 p-1 px-2">
  638.  
  639. <!------------ NAME & HEARTS ------------>
  640.  
  641. <div class="row no-gutters"><div class="col-lg-7">
  642. <a href="LINK" style="color: #f95e41; font-family: georgia; font-size: 20px;">NAME</a>
  643. <span style="opacity: 0.7; font-weight: bold">— relationship</span></div>
  644.  
  645. <div class="col-lg-5 text-right">
  646. <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
  647. <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
  648. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  649. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  650. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  651. </div></div>
  652.  
  653. <!------------ ABOUT ------------>
  654.  
  655. <div class="mt-2" style="height: 90px; overflow: auto">
  656.  
  657. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  658.  
  659. </div>
  660. </div></div>
  661.  
  662. <!------------ END ------------>
  663.  
  664. <div class="justify-content-between mb-3 mt-3">
  665. <span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
  666.  
  667.  
  668. <!------------ RELATIONSHIP 3 ------------>
  669.  
  670. <div class="row no-gutters">
  671. <div class="col-lg-3 p-1">
  672.  
  673. <!------------ IMAGE ------------>
  674.  
  675. <img src="IMG_URL" style="box-shadow: -4px 4px 0 #c9391f"></div>
  676.  
  677. <div class="col-lg-9 p-1 px-2">
  678.  
  679. <!------------ NAME & HEARTS ------------>
  680.  
  681. <div class="row no-gutters"><div class="col-lg-7">
  682. <a href="LINK" style="color: #f95e41; font-family: georgia; font-size: 20px;">NAME</a>
  683. <span style="opacity: 0.7; font-weight: bold">— relationship</span></div>
  684.  
  685. <div class="col-lg-5 text-right">
  686. <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
  687. <i class="fas fa-heart" style="color: #f95e41; font-size:20px;"></i>
  688. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  689. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  690. <i class="far fa-heart" style="color: #f95e41; font-size:20px;"></i>
  691. </div></div>
  692.  
  693. <!------------ ABOUT ------------>
  694.  
  695. <div class="mt-2" style="height: 90px; overflow: auto">
  696.  
  697. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  698.  
  699. </div>
  700. </div></div>
  701.  
  702. <!------------ END ------------>
  703.  
  704. <div class="justify-content-between mb-3 mt-3">
  705. <span class="col my-auto m-1" style="border-top: 3px dashed; color: #c9391f"></span></div>
  706.  
  707.  
  708. <!------------ ADD MORE ABOVE THIS LINE ------------>
  709.  
  710. </div></div></div>
  711. </div></div></div>
  712.  
  713. <!------------ THIRD COLUMN - PALETTE ------------>
  714.  
  715. <div class="col-md-1 mt-4 p-2">
  716.  
  717. <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #752110;">
  718. </div>
  719.  
  720. <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #9b341e;">
  721. </div>
  722.  
  723. <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #cc5438;">
  724. </div>
  725.  
  726. <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background:#ec6c4d;">
  727. </div>
  728.  
  729. <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #dcd1ca;">
  730. </div>
  731.  
  732. <div class="my-2 mx-auto rounded-circle" style="width: 60px; height: 60px; background: #ece6df;">
  733. </div>
  734.  
  735. <!------------ END ------------>
  736.  
  737. </div></diV></div>
  738.  
  739. <!------------ CREDIT - DO NOT REMOVE PLS! FEEL FREE TO MOVE IT AS LONG AS IT'S STILL VISIBLE ^^ ------------>
  740.  
  741. <a href="https://toyhou.se/burakkujakku" style="color: #f95e41; opacity: 0.5">
  742. <i class="far fa-fish-bones tooltipster mt-2" title="code by burakkujakku"></i></a>
  743. </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!