API tools faq
paste
Advertisement
ushiwaka

Quirked Up

ushiwaka
Mar 14th, 2023 (edited)
576
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 63.40 KB | None | 0 0
raw download clone embed print report
  1. <!--[[
  2.  
  3. CTRL+F AND REPLACE THIS COLOR:
  4. #ff0000
  5.  
  6. ]]--->
  7.  
  8. <div class="mx-auto" style="max-width: 600px;">
  9. <div style="font-weight: 100; font-size: 12px;">
  10.  
  11. <!--[[ TITLE ]]-->
  12. <div class="p-1">
  13. <div class="card rounded-0 text-uppercase p-1" style="font-size: 15px; color: #ff0000">
  14. <div class="bg-faded justify-content-between p-2">
  15.  
  16. <!--[[ REPLACE THE STAR WITH ANY FONT AWESOME ICON IF WANTED ]]-->
  17. <i class="fa-solid fa-star my-auto"></i>
  18.  
  19. <!--[[ OC NAME ]]-->
  20. <span style="font-weight: 700; letter-spacing: 1px">
  21. NAME
  22. </span>
  23.  
  24. </div>
  25. </div>
  26. </div>
  27. <!--[[ TITLE END ]]-->
  28.  
  29. <!--[[ INFO SECTION ]]-->
  30. <div class="row no-gutters">
  31.  
  32. <!--[[ COLUMN ONE ]]-->
  33. <div class="col-md-4 p-1"> <div class="card rounded-0 p-1"> <div class="bg-faded">
  34.  
  35. <!--[[ IMAGE ]]-->
  36. <div style="background:
  37.  
  38. url(IMG_URL)
  39. center no-repeat; background-size: cover; height: 300px;">
  40.  
  41. </div>
  42.  
  43. </div> </div> </div>
  44. <!--[[ COLUMN ONE END ]]-->
  45.  
  46. <!--[[ COLUMN TWO ]]-->
  47. <div class="col-md-8">
  48.  
  49. <!--[[ TABS SECTION ONE ]]-->
  50. <div class="p-1">
  51. <div class="card rounded-0 p-1">
  52. <div class="bg-faded">
  53. <ul class="nav row no-gutters p-1">
  54.  
  55. <li class="col p-1"><a href="#one" class="btn btn-block card border-0 rounded-0 active" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-id-card"></i></a></li>
  56. <li class="col p-1"><a href="#two" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-sparkles"></i></a></li>
  57. <li class="col p-1"><a href="#three" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-pie-chart"></i></a></li>
  58.  
  59. </ul>
  60. </div>
  61. </div>
  62. </div>
  63. <!--[[ TABS SECTION ONE END ]]-->
  64.  
  65. <!--[[ TAB BOX ONE ]]-->
  66. <div class="p-1">
  67. <div class="card rounded-0 p-1">
  68. <div class="bg-faded p-1" style="height: 236px; overflow: auto;">
  69. <div class="tab-content">
  70.  
  71. <!--[[ TAB ONE ]]-->
  72. <div class="tab-pane fade active show" id="one">
  73.  
  74. <!--[[ TITLE ]]-->
  75. <div class="text-uppercase p-1 text-center" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  76. BASIC INFO
  77. </div>
  78. <!--[[ TITLE END ]]-->
  79.  
  80. <!--[[ BASIC INFO ]]-->
  81. <div class="row no-gutters">
  82.  
  83. <!--[[ ONE ]]-->
  84. <div class="col-md-6 p-1">
  85.  
  86. <div class="justify-content-between">
  87. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  88. Name
  89. </div>
  90.  
  91. <div class="text-right">
  92. TBA
  93. </div>
  94.  
  95. </div>
  96.  
  97. <hr class="mb-0 mt-1">
  98. </div>
  99. <!--[[ ONE END ]]-->
  100.  
  101. <!--[[ TWO ]]-->
  102. <div class="col-md-6 p-1">
  103.  
  104. <div class="justify-content-between">
  105. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  106. Romaji
  107. </div>
  108.  
  109. <div class="text-right">
  110. TBA
  111. </div>
  112.  
  113. </div>
  114.  
  115. <hr class="mb-0 mt-1">
  116. </div>
  117. <!--[[ TWO END ]]-->
  118.  
  119. <!--[[ THREE ]]-->
  120. <div class="col-md-6 p-1">
  121.  
  122. <div class="justify-content-between">
  123. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  124. Kanji
  125. </div>
  126.  
  127. <div class="text-right">
  128. TBA
  129. </div>
  130.  
  131. </div>
  132.  
  133. <hr class="mb-0 mt-1">
  134. </div>
  135. <!--[[ THREE END ]]-->
  136.  
  137. <!--[[ FOUR ]]-->
  138. <div class="col-md-6 p-1">
  139.  
  140. <div class="justify-content-between">
  141. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  142. Alias
  143. </div>
  144.  
  145. <div class="text-right">
  146. TBA
  147. </div>
  148.  
  149. </div>
  150.  
  151. <hr class="mb-0 mt-1">
  152. </div>
  153. <!--[[ FOUR END ]]-->
  154.  
  155. <!--[[ FIVE ]]-->
  156. <div class="col-md-6 p-1">
  157.  
  158. <div class="justify-content-between">
  159. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  160. Birthday
  161. </div>
  162.  
  163. <div class="text-right">
  164. TBA
  165. </div>
  166.  
  167. </div>
  168.  
  169. <hr class="mb-0 mt-1">
  170. </div>
  171. <!--[[ FIVE END ]]-->
  172.  
  173. <!--[[ SIX ]]-->
  174. <div class="col-md-6 p-1">
  175.  
  176. <div class="justify-content-between">
  177. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  178. Age
  179. </div>
  180.  
  181. <div class="text-right">
  182. TBA
  183. </div>
  184.  
  185. </div>
  186.  
  187. <hr class="mb-0 mt-1">
  188. </div>
  189. <!--[[ SIX END ]]-->
  190.  
  191. <!--[[ SEVEN ]]-->
  192. <div class="col-md-6 p-1">
  193.  
  194. <div class="justify-content-between">
  195. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  196. Gender
  197. </div>
  198.  
  199. <div class="text-right">
  200. TBA
  201. </div>
  202.  
  203. </div>
  204.  
  205. <hr class="mb-0 mt-1">
  206. </div>
  207. <!--[[ SEVEN END ]]-->
  208.  
  209. <!--[[ EIGHT ]]-->
  210. <div class="col-md-6 p-1">
  211.  
  212. <div class="justify-content-between">
  213. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  214. Height
  215. </div>
  216.  
  217. <div class="text-right">
  218. 000cm (0'0")
  219. </div>
  220.  
  221. </div>
  222.  
  223. <hr class="mb-0 mt-1">
  224. </div>
  225. <!--[[ EIGHT END ]]-->
  226.  
  227. <!--[[ NINE ]]-->
  228. <div class="col-md-6 p-1">
  229.  
  230. <div class="justify-content-between">
  231. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  232. Hair Color
  233. </div>
  234.  
  235. <div class="text-right">
  236. TBA
  237. </div>
  238.  
  239. </div>
  240.  
  241. <hr class="mb-0 mt-1">
  242. </div>
  243. <!--[[ NINE END ]]-->
  244.  
  245. <!--[[ TEN ]]-->
  246. <div class="col-md-6 p-1">
  247.  
  248. <div class="justify-content-between">
  249. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  250. Eye Color
  251. </div>
  252.  
  253. <div class="text-right">
  254. TBA
  255. </div>
  256.  
  257. </div>
  258.  
  259. <hr class="mb-0 mt-1">
  260. </div>
  261. <!--[[ TEN END ]]-->
  262.  
  263. <!--[[ ELEVEN ]]-->
  264. <div class="col-md-6 p-1">
  265.  
  266. <div class="justify-content-between">
  267. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  268. Quirk
  269. </div>
  270.  
  271. <div class="text-right">
  272. TBA
  273. </div>
  274.  
  275. </div>
  276.  
  277. <hr class="mb-0 mt-1">
  278. </div>
  279. <!--[[ ELEVEN END ]]-->
  280.  
  281. <!--[[ TWELVE ]]-->
  282. <div class="col-md-6 p-1">
  283.  
  284. <div class="justify-content-between">
  285. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  286. STATUS
  287. </div>
  288.  
  289. <div class="text-right">
  290. TBA
  291. </div>
  292.  
  293. </div>
  294.  
  295. <hr class="mb-0 mt-1">
  296. </div>
  297. <!--[[ TWELVE END ]]-->
  298.  
  299. <!--[[ THIRTEEN ]]-->
  300. <div class="col-md-6 p-1">
  301.  
  302. <div class="justify-content-between">
  303. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  304. Birthplace
  305. </div>
  306.  
  307. <div class="text-right">
  308. TBA
  309. </div>
  310.  
  311. </div>
  312.  
  313. <hr class="mb-0 mt-1">
  314. </div>
  315. <!--[[ THIRTEEN END ]]-->
  316.  
  317. <!--[[ FOURTEEN ]]-->
  318. <div class="col-md-6 p-1">
  319.  
  320. <div class="justify-content-between">
  321. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  322. Occupation
  323. </div>
  324.  
  325. <div class="text-right">
  326. TBA
  327. </div>
  328.  
  329. </div>
  330.  
  331. <hr class="mb-0 mt-1">
  332. </div>
  333. <!--[[ FOURTEEN END ]]-->
  334.  
  335. <!--[[ FIFTEEN ]]-->
  336. <div class="col-md-6 p-1">
  337.  
  338. <div class="justify-content-between">
  339. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  340. Affiliation
  341. </div>
  342.  
  343. <div class="text-right">
  344. TBA
  345. </div>
  346.  
  347. </div>
  348.  
  349. <hr class="mb-0 mt-1">
  350. </div>
  351. <!--[[ FIFTEEN END ]]-->
  352.  
  353. <!--[[ SIXTEEN ]]-->
  354. <div class="col-md-6 p-1">
  355.  
  356. <div class="justify-content-between">
  357. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  358. Fighting style
  359. </div>
  360.  
  361. <div class="text-right">
  362. TBA
  363. </div>
  364.  
  365. </div>
  366.  
  367. <hr class="mb-0 mt-1">
  368. </div>
  369. <!--[[ SIXTEEN END ]]-->
  370.  
  371. </div>
  372. <!--[[ BASIC INFO END ]]-->
  373.  
  374. <!--[[ TITLE ]]-->
  375. <div class="text-uppercase p-1 pt-2 text-center" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  376. PERSONALITY
  377. </div>
  378. <!--[[ TITLE END ]]-->
  379.  
  380. <!--[[ PERSONALITY BLURB ]]-->
  381. <div class="p-1 text-center">
  382.  
  383. <p>Info about your character's personality</p>
  384.  
  385. </div>
  386. <!--[[ PERSONALITY BLURB END ]]-->
  387.  
  388. </div>
  389. <!--[[ TAB ONE END ]]-->
  390.  
  391. <!--[[ TAB TWO ]]-->
  392. <div class="tab-pane fade" id="two">
  393.  
  394. <!--[[ TITLE ]]-->
  395. <div class="text-uppercase p-1 text-center" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  396. QUIRK NAME
  397. </div>
  398. <!--[[ TITLE END ]]-->
  399.  
  400. <!--[[ QUIRK BASICS ]]-->
  401. <div class="row no-gutters">
  402.  
  403. <!--[[ ONE ]]-->
  404. <div class="col-md-6 p-1">
  405.  
  406. <div class="justify-content-between">
  407. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  408. Quirk Type
  409. </div>
  410.  
  411. <div class="text-right">
  412. TBA <!--// Emitter, Accumulation, Mutant, Transformation //-->
  413. </div>
  414.  
  415. </div>
  416.  
  417. <hr class="mb-0 mt-1">
  418. </div>
  419. <!--[[ ONE END ]]-->
  420.  
  421. <!--[[ TWO ]]-->
  422. <div class="col-md-6 p-1">
  423.  
  424. <div class="justify-content-between">
  425. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  426. Quirk Range
  427. </div>
  428.  
  429. <div class="text-right">
  430. TBA <!--// EX.: Contact / Small Range / Medium Range / Long Range //-->
  431. </div>
  432.  
  433. </div>
  434.  
  435. <hr class="mb-0 mt-1">
  436. </div>
  437. <!--[[ TWO END ]]-->
  438.  
  439. <!--[[ THREE ]]-->
  440. <div class="col-md-6 p-1">
  441.  
  442. <div class="justify-content-between">
  443. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  444. Inherited
  445. </div>
  446.  
  447. <div class="text-right">
  448. TBA <!--// EX.: From mother, or mix of parents' //-->
  449. </div>
  450.  
  451. </div>
  452.  
  453. <hr class="mb-0 mt-1">
  454. </div>
  455. <!--[[ THREE END ]]-->
  456.  
  457. <!--[[ FOUR ]]-->
  458. <div class="col-md-6 p-1">
  459.  
  460. <div class="justify-content-between">
  461. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  462. Manifested at age
  463. </div>
  464.  
  465. <div class="text-right">
  466. TBA <!--// What age your character awakened their Quirk //-->
  467. </div>
  468.  
  469. </div>
  470.  
  471. <hr class="mb-0 mt-1">
  472. </div>
  473. <!--[[ FOUR END ]]-->
  474.  
  475. </div>
  476. <!--[[ QUIRK BASICS END ]]-->
  477.  
  478. <!--[[ QUIRK ABOUT ]]-->
  479. <div class="text-center p-1 py-2">
  480.  
  481. <p>About your character's Quirk.</p>
  482. <p>More about, or the Quirk's drawbacks</p>
  483.  
  484. </div>
  485. <!--[[ QUIRK ABOUT END ]]-->
  486.  
  487. <!--[[ SUPERMOVES ]]-->
  488.  
  489. <!--[[ TITLE ]]-->
  490. <div class="text-uppercase text-center text-muted p-1" style="font-size: 13px; font-weight: 600; letter-spacing: 2px">
  491. Supermoves
  492. </div>
  493. <!--[[ TITLE END ]]-->
  494.  
  495. <!--[[ LIST ]]-->
  496. <ul>
  497.  
  498. <li>
  499. <b>Name</b> •
  500. Description
  501. </li>
  502.  
  503. <li>
  504. <b>Name</b> •
  505. Description
  506. </li>
  507.  
  508. <li>
  509. <b>Name</b> •
  510. Description
  511. </li>
  512.  
  513. </ul>
  514. <!--[[ LIST END ]]-->
  515.  
  516. <!--[[ SUPERMOVES END ]]-->
  517.  
  518. </div>
  519. <!--[[ TAB TWO END ]]-->
  520.  
  521. <!--[[ TAB THREE ]]-->
  522. <div class="tab-pane fade" id="three">
  523.  
  524. <!--[[ TITLE ]]-->
  525. <div class="text-uppercase p-1 text-center" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  526. Stats
  527. </div>
  528. <!--[[ TITLE END ]]-->
  529.  
  530. <div class="row no-gutters text-center">
  531.  
  532. <!--
  533. [[ HOW TO CHANGE STATS ]]
  534.  
  535. Change the 40% to these numbers:
  536.  
  537. S or A rank: 100%
  538. B rank: 80%
  539. C rank: 60%
  540. D rank: 40%
  541. E rank: 20%
  542. F rank: 0%
  543.  
  544. These are, of course, just suggestions based on the databooks, and you can do whatever number you'd like to put, so as long as it doesn't exceed 100%.
  545.  
  546. -->
  547.  
  548. <!--[[ STAT ONE ]]-->
  549. <div class="col-md-6 p-1">
  550. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  551. Power
  552. </div>
  553. <div class="p-1">
  554. <div class="progress rounded-0" style="height: 11px">
  555. <div class="progress-bar" style="background: #ff0000; width:
  556.  
  557. 40%;
  558.  
  559. "></div></div></div></div>
  560. <!--[[ STAT ONE END ]]-->
  561.  
  562. <!--[[ STAT TWO ]]-->
  563. <div class="col-md-6 p-1">
  564. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  565. Speed
  566. </div>
  567. <div class="p-1">
  568. <div class="progress rounded-0" style="height: 11px">
  569. <div class="progress-bar" style="background: #ff0000; width:
  570.  
  571. 40%;
  572.  
  573. "></div></div></div></div>
  574. <!--[[ STAT TWO END ]]-->
  575.  
  576. <!--[[ STAT THREE ]]-->
  577. <div class="col-md-6 p-1">
  578. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  579. Technique
  580. </div>
  581. <div class="p-1">
  582. <div class="progress rounded-0" style="height: 11px">
  583. <div class="progress-bar" style="background: #ff0000; width:
  584.  
  585. 40%;
  586.  
  587. "></div></div></div></div>
  588. <!--[[ STAT THREE END ]]-->
  589.  
  590. <!--[[ STAT FOUR ]]-->
  591. <div class="col-md-6 p-1">
  592. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  593. Intelligence
  594. </div>
  595. <div class="p-1">
  596. <div class="progress rounded-0" style="height: 11px">
  597. <div class="progress-bar" style="background: #ff0000; width:
  598.  
  599. 40%;
  600.  
  601. "></div></div></div></div>
  602. <!--[[ STAT FOUR END ]]-->
  603.  
  604. <!--[[ STAT FIVE ]]-->
  605. <div class="col-md-6 p-1">
  606. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  607. Stamina
  608. </div>
  609. <div class="p-1">
  610. <div class="progress rounded-0" style="height: 11px">
  611. <div class="progress-bar" style="background: #ff0000; width:
  612.  
  613. 40%;
  614.  
  615. "></div></div></div></div>
  616. <!--[[ STAT FIVE END ]]-->
  617.  
  618. <!--[[ STAT SIX ]]-->
  619. <div class="col-md-6 p-1">
  620. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  621. Perception
  622. </div>
  623. <div class="p-1">
  624. <div class="progress rounded-0" style="height: 11px">
  625. <div class="progress-bar" style="background: #ff0000; width:
  626.  
  627. 40%;
  628.  
  629. "></div></div></div></div>
  630. <!--[[ STAT SIX END ]]-->
  631.  
  632. <!--[[ STAT SEVEN ]]-->
  633. <div class="col-md-6 p-1">
  634. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  635. Cooperativeness
  636. </div>
  637. <div class="p-1">
  638. <div class="progress rounded-0" style="height: 11px">
  639. <div class="progress-bar" style="background: #ff0000; width:
  640.  
  641. 40%;
  642.  
  643. "></div></div></div></div>
  644. <!--[[ STAT SEVEN END ]]-->
  645.  
  646. <!--[[ STAT EIGHT ]]-->
  647. <div class="col-md-6 p-1">
  648. <div class="text-uppercase" style="color: #ff0000; font-weight: 700">
  649. Misc Stat <!--// like in the Ultra Analysis; a stat that fits specifically to your character. ex: "Instagram: 100%" //-->
  650. </div>
  651. <div class="p-1">
  652. <div class="progress rounded-0" style="height: 11px">
  653. <div class="progress-bar" style="background: #ff0000; width:
  654.  
  655. 40%;
  656.  
  657. "></div></div></div></div>
  658. <!--[[ STAT EIGHT END ]]-->
  659.  
  660. </div>
  661.  
  662. </div>
  663. <!--[[ TAB THREE END ]]-->
  664.  
  665. </div>
  666. </div>
  667. </div>
  668. </div>
  669. <!--[[ TAB BOX ONE END ]]-->
  670.  
  671. </div>
  672. <!--[[ COLUMN TWO ]]-->
  673.  
  674. <!--[[ QUOTE ]]-->
  675. <div class="col-md-12 p-1">
  676. <div class="card rounded-0 text-uppercase font-italic p-1" style="font-size: 12px; color: #ff0000">
  677. <div class="bg-faded justify-content-between text-center p-2">
  678.  
  679. <i class="fa-solid fa-quote-left mr-2 my-auto"></i>
  680.  
  681. <!--[[ OC NAME ]]-->
  682. <span style="font-weight: 700; letter-spacing: 1px">
  683. Quote
  684. </span>
  685.  
  686. <i class="fa-solid fa-quote-right ml-2 my-auto"></i>
  687.  
  688. </div>
  689. </div>
  690. </div>
  691. <!--[[ QUOTE END ]]-->
  692.  
  693. <!--[[ COLUMN THREE ]]-->
  694. <div class="col-md-10 p-1">
  695. <div class="card rounded-0 p-1">
  696. <div class="bg-faded p-1" style="overflow: auto; height: 277px;">
  697. <div class="tab-content">
  698.  
  699. <!--[[ TAB FOUR ]]-->
  700. <div class="tab-pane fade active show" id="four">
  701. <div class="text-center">
  702.  
  703. <!--[[ TITLE ]]-->
  704. <div class="text-uppercase p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  705. Backstory
  706. </div>
  707. <!--[[ TITLE END ]]-->
  708.  
  709. <!--[[ BACKSTORY ]]-->
  710. <div class="p-1 mb-2">
  711.  
  712. <p>Text</p>
  713.  
  714. </div>
  715. <!--[[ BACKSTORY END ]]-->
  716.  
  717. <div class="text-uppercase text-muted p-1" style="font-size: 13px; font-weight: 600; letter-spacing: 2px">
  718. Current
  719. </div>
  720.  
  721. <!--[[ TITLE END ]]-->
  722.  
  723. <!--[[ CURRENT STORY ]]-->
  724. <div class="p-1">
  725.  
  726. <p>Text</p>
  727.  
  728. </div>
  729. <!--[[ CURRENT STORY END ]]-->
  730.  
  731. </div>
  732. </div>
  733. <!--[[ TAB FOUR END ]]-->
  734.  
  735. <!--[[ TAB FIVE ]]-->
  736. <div class="tab-pane fade" id="five">
  737. <div class="row no-gutters">
  738.  
  739. <!--[[ RELATIONSHIP ONE ]]-->
  740.  
  741. <!--[[ INFO ONE ]]-->
  742. <div class="col-md-4">
  743.  
  744. <!--[[ IMAGE ]]-->
  745. <div class="p-1">
  746. <div style="background:
  747.  
  748. url(IMG_URL)
  749. center no-repeat; background-size: cover; height: 200px;"></div>
  750.  
  751. </div>
  752. <!--[[ IMAGE END ]]-->
  753.  
  754. <!--[[ RELATIONSHIP TYPE ]]-->
  755. <div class="p-1 text-center hidden-sm-down">
  756.  
  757. <div style="color: #ff0000; font-size: 15px">
  758. Relationship Type
  759. </div>
  760.  
  761. <hr class="mt-0 mb-1">
  762.  
  763. Information
  764.  
  765. </div>
  766. <!--[[ RELATIONSHIP TYPE END ]]-->
  767.  
  768. </div>
  769. <!--[[ INFO ONE END ]]-->
  770.  
  771. <!--[[ INFO TWO ]]-->
  772. <div class="col-md-8">
  773.  
  774. <!--[[ NAME ]]-->
  775. <div class="p-1">
  776. <a class="btn btn-block text-light border-0 rounded-0" style="background: #ff0000"
  777. href="LINK_HERE">
  778. NAME
  779. </a>
  780. </div>
  781. <!--[[ NAME END ]]-->
  782.  
  783. <!--[[ WRITTEN INFO ]]-->
  784. <div class="p-1">
  785.  
  786. <p>TBA</p>
  787.  
  788. </div>
  789. <!--[[ WRITTEN INFO DESC ]]-->
  790.  
  791. </div>
  792. <!--[[ INFO TWO END ]]-->
  793.  
  794. <!--[[ RELATIONSHIP ONE END ]]-->
  795.  
  796. <!--[[ RELATIONSHIP TWO ]]-->
  797.  
  798. <!--[[ INFO ONE ]]-->
  799. <div class="col-md-4">
  800.  
  801. <!--[[ IMAGE ]]-->
  802. <div class="p-1">
  803. <div style="background:
  804.  
  805. url(IMG_URL)
  806. center no-repeat; background-size: cover; height: 200px;">
  807.  
  808. </div>
  809. </div>
  810. <!--[[ IMAGE END ]]-->
  811.  
  812. <!--[[ RELATIONSHIP TYPE ]]-->
  813. <div class="p-1 text-center hidden-sm-down">
  814.  
  815. <div style="color: #ff0000; font-size: 15px">
  816. Relationship Type
  817. </div>
  818.  
  819. <hr class="mt-0 mb-1">
  820.  
  821. Information
  822.  
  823. </div>
  824. <!--[[ RELATIONSHIP TYPE END ]]-->
  825.  
  826. </div>
  827. <!--[[ INFO ONE END ]]-->
  828.  
  829. <!--[[ INFO TWO ]]-->
  830. <div class="col-md-8">
  831.  
  832. <!--[[ NAME ]]-->
  833. <div class="p-1">
  834. <a class="btn btn-block text-light border-0 rounded-0" style="background: #ff0000"
  835. href="LINK_HERE">
  836. NAME
  837. </a>
  838. </div>
  839. <!--[[ NAME END ]]-->
  840.  
  841. <!--[[ WRITTEN INFO ]]-->
  842. <div class="p-1">
  843.  
  844. <p>TBA</p>
  845.  
  846. </div>
  847. <!--[[ WRITTEN INFO DESC ]]-->
  848.  
  849. </div>
  850. <!--[[ INFO TWO END ]]-->
  851.  
  852. <!--[[ RELATIONSHIP TWO END ]]-->
  853.  
  854. <!--[[ RELATIONSHIP THREE ]]-->
  855.  
  856. <!--[[ INFO ONE ]]-->
  857. <div class="col-md-4">
  858.  
  859. <!--[[ IMAGE ]]-->
  860. <div class="p-1">
  861. <div style="background:
  862.  
  863. url(IMG_URL)
  864. center no-repeat; background-size: cover; height: 200px;">
  865.  
  866. </div>
  867. </div>
  868. <!--[[ IMAGE END ]]-->
  869.  
  870. <!--[[ RELATIONSHIP TYPE ]]-->
  871. <div class="p-1 text-center hidden-sm-down">
  872.  
  873. <div style="color: #ff0000; font-size: 15px">
  874. Relationship Type
  875. </div>
  876.  
  877. <hr class="mt-0 mb-1">
  878.  
  879. Information
  880.  
  881. </div>
  882. <!--[[ RELATIONSHIP TYPE END ]]-->
  883.  
  884. </div>
  885. <!--[[ INFO ONE END ]]-->
  886.  
  887. <!--[[ INFO TWO ]]-->
  888. <div class="col-md-8">
  889.  
  890. <!--[[ NAME ]]-->
  891. <div class="p-1">
  892. <a class="btn btn-block text-light border-0 rounded-0" style="background: #ff0000"
  893. href="LINK_HERE">
  894. NAME
  895. </a>
  896. </div>
  897. <!--[[ NAME END ]]-->
  898.  
  899. <!--[[ WRITTEN INFO ]]-->
  900. <div class="p-1">
  901.  
  902. <p>TBA</p>
  903.  
  904. </div>
  905. <!--[[ WRITTEN INFO DESC ]]-->
  906.  
  907. </div>
  908. <!--[[ INFO TWO END ]]-->
  909.  
  910. <!--[[ RELATIONSHIP THREE END ]]-->
  911.  
  912. <!---[[ ADD MORE ABOVE THIS LINE ]]-->
  913.  
  914. </div>
  915. </div>
  916. <!--[[ TAB FIVE END ]]-->
  917.  
  918. <!--[[ TAB SIX ]]-->
  919. <div class="tab-pane fade" id="six">
  920. <div class="row no-gutters">
  921.  
  922. <!--[[ OUTFIT ONE ]]-->
  923.  
  924. <!--[[ TITLE ]]-->
  925. <div class="col-md-12 text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  926. School Uniform
  927. </div>
  928. <!--[[ TITLE END ]]-->
  929.  
  930. <!--[[ IMAGE ]]-->
  931. <div class="col-md-4 p-1">
  932. <div style="background:
  933.  
  934. url(IMG_URL)
  935. center no-repeat; background-size: contain; height: 250px;">
  936.  
  937. </div>
  938. </div>
  939. <!--[[ IMAGE END ]]-->
  940.  
  941. <!--[[ NOTES ]]-->
  942. <div class="col-md-8 p-1">
  943. <ul>
  944.  
  945. <li>One</li>
  946. <li>Two</li>
  947. <li>Three</li>
  948.  
  949. </ul>
  950. </div>
  951. <!--[[ NOTES END ]]-->
  952.  
  953. <!--[[ OUTFIT ONE END ]]-->
  954.  
  955. <!--[[ OUTFIT TWO ]]-->
  956.  
  957. <!--[[ TITLE ]]-->
  958. <div class="col-md-12 text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  959. Hero Costume
  960. </div>
  961. <!--[[ TITLE END ]]-->
  962.  
  963. <!--[[ IMAGE ]]-->
  964. <div class="col-md-4 p-1">
  965. <div style="background:
  966.  
  967. url(IMG_URL)
  968. center no-repeat; background-size: contain; height: 250px;">
  969.  
  970. </div>
  971. </div>
  972. <!--[[ IMAGE END ]]-->
  973.  
  974. <!--[[ NOTES ]]-->
  975. <div class="col-md-8 p-1">
  976. <ul>
  977.  
  978. <li>One</li>
  979. <li>Two</li>
  980. <li>Three</li>
  981.  
  982. </ul>
  983. </div>
  984. <!--[[ NOTES END ]]-->
  985.  
  986. <!--[[ OUTFIT TWO END ]]-->
  987.  
  988. <!--[[ OUTFIT THREE ]]-->
  989.  
  990. <!--[[ TITLE ]]-->
  991. <div class="col-md-12 text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  992. Casual Outfit
  993. </div>
  994. <!--[[ TITLE END ]]-->
  995.  
  996. <!--[[ IMAGE ]]-->
  997. <div class="col-md-4 p-1">
  998. <div style="background:
  999.  
  1000. url(IMG_URL)
  1001. center no-repeat; background-size: contain; height: 250px;">
  1002.  
  1003. </div>
  1004. </div>
  1005. <!--[[ IMAGE END ]]-->
  1006.  
  1007. <!--[[ NOTES ]]-->
  1008. <div class="col-md-8 p-1">
  1009. <ul>
  1010.  
  1011. <li>One</li>
  1012. <li>Two</li>
  1013. <li>Three</li>
  1014.  
  1015. </ul>
  1016. </div>
  1017. <!--[[ NOTES END ]]-->
  1018.  
  1019. <!--[[ OUTFIT THREE END ]]-->
  1020.  
  1021. </div>
  1022. </div>
  1023. <!--[[ TAB SIX END ]]-->
  1024.  
  1025. <!--[[ TAB SEVEN ]]-->
  1026. <div class="tab-pane fade" id="seven">
  1027. <div class="row no-gutters">
  1028.  
  1029. <!--[[ LIKES ]]-->
  1030. <div class="col-md-6">
  1031.  
  1032. <!--[[ TITLE ]]-->
  1033. <div class="text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  1034. LIKES
  1035. </div>
  1036. <!--[[ TITLE END ]]-->
  1037.  
  1038. <!--[[ LIKES BOX ]]-->
  1039. <ul class="pr-2">
  1040.  
  1041. <li>One</li>
  1042. <li>Two</li>
  1043. <li>Three</li>
  1044.  
  1045. </ul>
  1046. <!--[[ LIKES BOX END ]]-->
  1047.  
  1048. </div>
  1049. <!--[[ LIKES END ]]-->
  1050.  
  1051. <!--[[ DISLIKES ]]-->
  1052. <div class="col-md-6">
  1053.  
  1054. <!--[[ TITLE ]]-->
  1055. <div class="text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  1056. DISLIKES
  1057. </div>
  1058. <!--[[ TITLE END ]]-->
  1059.  
  1060. <!--[[ DISLIKES BOX ]]-->
  1061. <ul class="pr-2">
  1062.  
  1063. <li>One</li>
  1064. <li>Two</li>
  1065. <li>Three</li>
  1066.  
  1067. </ul>
  1068. <!--[[ DISLIKES BOX END ]]-->
  1069.  
  1070. </div>
  1071. <!--[[ LIKES END ]]-->
  1072.  
  1073. <!--[[ FAVORITES ]]-->
  1074.  
  1075. <!--[[ TITLE ]]-->
  1076. <div class="col-12 text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  1077. Favorites
  1078. </div>
  1079. <!--[[ TITLE END ]]-->
  1080.  
  1081. <!--[[ ONE ]]-->
  1082. <div class="col-md-6 p-1">
  1083.  
  1084. <div class="justify-content-between">
  1085. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1086. Food
  1087. </div>
  1088.  
  1089. <div class="text-right">
  1090. TBA
  1091. </div>
  1092.  
  1093. </div>
  1094.  
  1095. <hr class="mb-0 mt-1">
  1096. </div>
  1097. <!--[[ ONE END ]]-->
  1098.  
  1099. <!--[[ TWO ]]-->
  1100. <div class="col-md-6 p-1">
  1101.  
  1102. <div class="justify-content-between">
  1103. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1104. Drink
  1105. </div>
  1106.  
  1107. <div class="text-right">
  1108. TBA
  1109. </div>
  1110.  
  1111. </div>
  1112.  
  1113. <hr class="mb-0 mt-1">
  1114. </div>
  1115. <!--[[ TWO END ]]-->
  1116.  
  1117. <!--[[ THREE ]]-->
  1118. <div class="col-md-6 p-1">
  1119.  
  1120. <div class="justify-content-between">
  1121. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1122. Animal
  1123. </div>
  1124.  
  1125. <div class="text-right">
  1126. TBA
  1127. </div>
  1128.  
  1129. </div>
  1130.  
  1131. <hr class="mb-0 mt-1">
  1132. </div>
  1133. <!--[[ THREE END ]]-->
  1134.  
  1135. <!--[[ FOUR ]]-->
  1136. <div class="col-md-6 p-1">
  1137.  
  1138. <div class="justify-content-between">
  1139. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1140. Plant
  1141. </div>
  1142.  
  1143. <div class="text-right">
  1144. TBA
  1145. </div>
  1146.  
  1147. </div>
  1148.  
  1149. <hr class="mb-0 mt-1">
  1150. </div>
  1151. <!--[[ FOUR END ]]-->
  1152.  
  1153. <!--[[ FIVE ]]-->
  1154. <div class="col-md-6 p-1">
  1155.  
  1156. <div class="justify-content-between">
  1157. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1158. Scent
  1159. </div>
  1160.  
  1161. <div class="text-right">
  1162. TBA
  1163. </div>
  1164.  
  1165. </div>
  1166.  
  1167. <hr class="mb-0 mt-1">
  1168. </div>
  1169. <!--[[ FIVE END ]]-->
  1170.  
  1171. <!--[[ SIX ]]-->
  1172. <div class="col-md-6 p-1">
  1173.  
  1174. <div class="justify-content-between">
  1175. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1176. Flavor
  1177. </div>
  1178.  
  1179. <div class="text-right">
  1180. TBA
  1181. </div>
  1182.  
  1183. </div>
  1184.  
  1185. <hr class="mb-0 mt-1">
  1186. </div>
  1187. <!--[[ SIX END ]]-->
  1188.  
  1189. <!--[[ SEVEN ]]-->
  1190. <div class="col-md-6 p-1">
  1191.  
  1192. <div class="justify-content-between">
  1193. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1194. Song
  1195. </div>
  1196.  
  1197. <div class="text-right">
  1198. TBA
  1199. </div>
  1200.  
  1201. </div>
  1202.  
  1203. <hr class="mb-0 mt-1">
  1204. </div>
  1205. <!--[[ SEVEN END ]]-->
  1206.  
  1207. <!--[[ EIGHT ]]-->
  1208. <div class="col-md-6 p-1">
  1209.  
  1210. <div class="justify-content-between">
  1211. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1212. Color
  1213. </div>
  1214.  
  1215. <div class="text-right">
  1216. TBA
  1217. </div>
  1218.  
  1219. </div>
  1220.  
  1221. <hr class="mb-0 mt-1">
  1222. </div>
  1223. <!--[[ EIGHT END ]]-->
  1224.  
  1225. <!--[[ NINE ]]-->
  1226. <div class="col-md-6 p-1">
  1227.  
  1228. <div class="justify-content-between">
  1229. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1230. Season
  1231. </div>
  1232.  
  1233. <div class="text-right">
  1234. TBA
  1235. </div>
  1236.  
  1237. </div>
  1238.  
  1239. <hr class="mb-0 mt-1">
  1240. </div>
  1241. <!--[[ NINE END ]]-->
  1242.  
  1243. <!--[[ TEN ]]-->
  1244. <div class="col-md-6 p-1">
  1245.  
  1246. <div class="justify-content-between">
  1247. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1248. Weather
  1249. </div>
  1250.  
  1251. <div class="text-right">
  1252. TBA
  1253. </div>
  1254.  
  1255. </div>
  1256.  
  1257. <hr class="mb-0 mt-1">
  1258. </div>
  1259. <!--[[ TEN END ]]-->
  1260.  
  1261. <!--[[ ELEVEN ]]-->
  1262. <div class="col-md-6 p-1">
  1263.  
  1264. <div class="justify-content-between">
  1265. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1266. Holiday
  1267. </div>
  1268.  
  1269. <div class="text-right">
  1270. TBA
  1271. </div>
  1272.  
  1273. </div>
  1274.  
  1275. <hr class="mb-0 mt-1">
  1276. </div>
  1277. <!--[[ ELEVEN END ]]-->
  1278.  
  1279. <!--[[ TWELVE ]]-->
  1280. <div class="col-md-6 p-1">
  1281.  
  1282. <div class="justify-content-between">
  1283. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1284. Person
  1285. </div>
  1286.  
  1287. <div class="text-right">
  1288. TBA
  1289. </div>
  1290.  
  1291. </div>
  1292.  
  1293. <hr class="mb-0 mt-1">
  1294. </div>
  1295. <!--[[ TWELVE END ]]-->
  1296.  
  1297. <!--[[ ELEVEN ]]-->
  1298. <div class="col-md-6 p-1">
  1299.  
  1300. <div class="justify-content-between">
  1301. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1302. Pro-Hero
  1303. </div>
  1304.  
  1305. <div class="text-right">
  1306. TBA
  1307. </div>
  1308.  
  1309. </div>
  1310.  
  1311. <hr class="mb-0 mt-1">
  1312. </div>
  1313. <!--[[ ELEVEN END ]]-->
  1314.  
  1315. <!--[[ TWELVE ]]-->
  1316. <div class="col-md-6 p-1">
  1317.  
  1318. <div class="justify-content-between">
  1319. <div class="text-uppercase" style="color: #ff0000; font-weight: 600">
  1320. Activity
  1321. </div>
  1322.  
  1323. <div class="text-right">
  1324. TBA
  1325. </div>
  1326.  
  1327. </div>
  1328.  
  1329. <hr class="mb-0 mt-1">
  1330. </div>
  1331. <!--[[ TWELVE END ]]-->
  1332.  
  1333. <!--[[ FAVORITES END ]]-->
  1334.  
  1335. </div>
  1336. </div>
  1337. <!--[[ TAB SEVEN END ]]-->
  1338.  
  1339. <!--[[ TAB EIGHT ]]-->
  1340. <div class="tab-pane fade" id="eight">
  1341.  
  1342. <!--[[ TITLE ]]-->
  1343. <div class="text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  1344. TRIVIA
  1345. </div>
  1346. <!--[[ TITLE END ]]-->
  1347.  
  1348. <!--[[ TRIVIA BOX ]]-->
  1349. <img src="IMG_URL" class="float-right ml-2 mb-2 pr-3" style="max-width: 100px;">
  1350. <ul class="pr-3 pb-1">
  1351.  
  1352. <li>One</li>
  1353. <li>Two</li>
  1354. <li>Three</li>
  1355.  
  1356. </ul>
  1357. <!--[[ TRIVIA BOX END ]]-->
  1358.  
  1359. </div>
  1360. <!--[[ TAB EIGHT END ]]-->
  1361.  
  1362. <!--[[ TAB NINE ]]-->
  1363. <div class="tab-pane fade" id="nine">
  1364. <div class="row no-gutters">
  1365.  
  1366. <!--[[ ONE ]]-->
  1367. <div class="col-4 p-1">
  1368. <div style="background:
  1369.  
  1370. url(IMG_URL)
  1371. center no-repeat; background-size: cover; height: 261px">
  1372.  
  1373. </div>
  1374. </div>
  1375.  
  1376. <div class="col-4">
  1377.  
  1378. <!--[[ TWO ]]-->
  1379. <div class="p-1">
  1380. <div style="background:
  1381.  
  1382. url(IMG_URL)
  1383. center no-repeat; background-size: cover; height: 81.5px">
  1384.  
  1385. </div>
  1386. </div>
  1387.  
  1388. <!--[[ THREE ]]-->
  1389. <div class="p-1">
  1390. <div style="background:
  1391.  
  1392. url(IMG_URL)
  1393. center no-repeat; background-size: cover; height: 81.5px">
  1394.  
  1395. </div>
  1396. </div>
  1397.  
  1398. <!--[[ FOUR ]]-->
  1399. <div class="p-1">
  1400. <div style="background:
  1401.  
  1402. url(IMG_URL)
  1403. center no-repeat; background-size: cover; height: 81.5px">
  1404.  
  1405. </div>
  1406. </div>
  1407.  
  1408. </div>
  1409.  
  1410. <div class="col-4">
  1411.  
  1412. <!--[[ FIVE ]]-->
  1413. <div class="p-1">
  1414. <div style="background:
  1415.  
  1416. url(IMG_URL)
  1417. center no-repeat; background-size: cover; height: 126px">
  1418.  
  1419. </div>
  1420. </div>
  1421.  
  1422. <!--[[ SIX ]]-->
  1423. <div class="p-1">
  1424. <div style="background:
  1425.  
  1426. url(IMG_URL)
  1427. center no-repeat; background-size: cover; height: 126px">
  1428.  
  1429. </div>
  1430. </div>
  1431.  
  1432. </div>
  1433.  
  1434. </div>
  1435. </div>
  1436. <!--[[ TAB NINE END ]]-->
  1437.  
  1438. <!--[[ TAB TEN ]]-->
  1439. <div class="tab-pane fade" id="ten">
  1440.  
  1441. <!--[[ TITLE ]]-->
  1442. <div class="text-uppercase text-center p-1" style="color: #ff0000; font-size: 15px; font-weight: 600; letter-spacing: 2px">
  1443. PLAYLIST
  1444. </div>
  1445. <!--[[ TITLE END ]]-->
  1446.  
  1447. <!--[[ SONG ONE ]]-->
  1448. <div class="row no-gutters">
  1449.  
  1450. <!--[[ PLAY BUTTON ]]-->
  1451. <div class="col-1 p-1">
  1452.  
  1453. <i class="fas fa-play" style="color: #ff0000; position: absolute; font-size: 20px; margin-top: 15px;"></i>
  1454. <iframe frameborder="0" style="opacity: 0.00001; width: 16px; height: 19px; margin-top: 15px; clip-path: polygon(0 0, 0% 100%, 100% 50%);" src="
  1455.  
  1456. https://www.youtube.com/embed/STRINGHERE">
  1457.  
  1458. <!--[[ !! PASTE ID ON THE STRINGHERE !! ]]-->
  1459. </iframe>
  1460.  
  1461. </div>
  1462. <!--[[ PLAY BUTTON END ]]-->
  1463.  
  1464. <!--[[ INFO ]]-->
  1465. <div class="col-11 p-1 text-right">
  1466. <span style="color: #ff0000; font-size: 14px;">
  1467. Artist Name
  1468. </span>
  1469. <br>
  1470. Song Name
  1471. </div>
  1472. <!--[[ INFO END ]]-->
  1473.  
  1474. </div>
  1475. <hr class="mx-1 mt-0">
  1476. <!--[[ SONG ONE END ]]-->
  1477.  
  1478. <!--[[ SONG TWO ]]-->
  1479. <div class="row no-gutters">
  1480.  
  1481. <!--[[ PLAY BUTTON ]]-->
  1482. <div class="col-1 p-1">
  1483.  
  1484. <i class="fas fa-play" style="color: #ff0000; position: absolute; font-size: 20px; margin-top: 15px;"></i>
  1485. <iframe frameborder="0" style="opacity: 0.00001; width: 16px; height: 19px; margin-top: 15px; clip-path: polygon(0 0, 0% 100%, 100% 50%);" src="
  1486.  
  1487. https://www.youtube.com/embed/STRINGHERE">
  1488. </iframe>
  1489.  
  1490. </div>
  1491. <!--[[ PLAY BUTTON END ]]-->
  1492.  
  1493. <!--[[ INFO ]]-->
  1494. <div class="col-11 p-1 text-right">
  1495. <span style="color: #ff0000; font-size: 14px;">
  1496. Artist Name
  1497. </span>
  1498. <br>
  1499. Song Name
  1500. </div>
  1501. <!--[[ INFO END ]]-->
  1502.  
  1503. </div>
  1504. <hr class="mx-1 mt-0">
  1505. <!--[[ SONG TWO END ]]-->
  1506.  
  1507. <!--[[ SONG THREE ]]-->
  1508. <div class="row no-gutters">
  1509.  
  1510. <!--[[ PLAY BUTTON ]]-->
  1511. <div class="col-1 p-1">
  1512.  
  1513. <i class="fas fa-play" style="color: #ff0000; position: absolute; font-size: 20px; margin-top: 15px;"></i>
  1514. <iframe frameborder="0" style="opacity: 0.00001; width: 16px; height: 19px; margin-top: 15px; clip-path: polygon(0 0, 0% 100%, 100% 50%);" src="
  1515.  
  1516. https://www.youtube.com/embed/STRINGHERE">
  1517. </iframe>
  1518.  
  1519. </div>
  1520. <!--[[ PLAY BUTTON END ]]-->
  1521.  
  1522. <!--[[ INFO ]]-->
  1523. <div class="col-11 p-1 text-right">
  1524. <span style="color: #ff0000; font-size: 14px;">
  1525. Artist Name
  1526. </span>
  1527. <br>
  1528. Song Name
  1529. </div>
  1530. <!--[[ INFO END ]]-->
  1531.  
  1532. </div>
  1533. <hr class="mx-1 mt-0">
  1534. <!--[[ SONG THREE END ]]-->
  1535.  
  1536. <!--[[ SONG FOUR ]]-->
  1537. <div class="row no-gutters">
  1538.  
  1539. <!--[[ PLAY BUTTON ]]-->
  1540. <div class="col-1 p-1">
  1541.  
  1542. <i class="fas fa-play" style="color: #ff0000; position: absolute; font-size: 20px; margin-top: 15px;"></i>
  1543. <iframe frameborder="0" style="opacity: 0.00001; width: 16px; height: 19px; margin-top: 15px; clip-path: polygon(0 0, 0% 100%, 100% 50%);" src="
  1544.  
  1545. https://www.youtube.com/embed/STRINGHERE">
  1546. </iframe>
  1547.  
  1548. </div>
  1549. <!--[[ PLAY BUTTON END ]]-->
  1550.  
  1551. <!--[[ INFO ]]-->
  1552. <div class="col-11 p-1 text-right">
  1553. <span style="color: #ff0000; font-size: 14px;">
  1554. Artist Name
  1555. </span>
  1556. <br>
  1557. Song Name
  1558. </div>
  1559. <!--[[ INFO END ]]-->
  1560.  
  1561. </div>
  1562. <hr class="mx-1 mt-0">
  1563. <!--[[ SONG FOUR END ]]-->
  1564.  
  1565. <!--[[ ADD MORE ABOVE ]]-->
  1566. </div>
  1567. <!--[[ TAB TEN END ]]-->
  1568.  
  1569. </div>
  1570. </div>
  1571. </div>
  1572. </div>
  1573. <!--[[ COLUMN THREE END ]]-->
  1574.  
  1575. <!--[[ COLUMN FOUR ]]-->
  1576. <div class="col-md-2 p-1">
  1577. <div class="card rounded-0 p-1">
  1578. <div class="bg-faded">
  1579. <ul class="nav row no-gutters p-1">
  1580.  
  1581. <li class="col p-1">
  1582. <a href="#four" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-book-open-cover"></i></a>
  1583. </li>
  1584. <li class="col p-1">
  1585. <a href="#five" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-handshake"></i></a>
  1586. </li>
  1587. <li class="col p-1">
  1588. <a href="#six" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-clothes-hanger"></i></a>
  1589. </li>
  1590. <li class="col p-1">
  1591. <a href="#seven" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-star"></i></a>
  1592. </li>
  1593. <li class="col p-1">
  1594. <a href="#eight" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-question"></i></a>
  1595. </li>
  1596. <li class="col p-1">
  1597. <a href="#nine" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-aperture"></i></a>
  1598. </li>
  1599. <li class="col p-1">
  1600. <a href="#ten" class="btn btn-block card border-0 rounded-0" data-toggle="tab" style="color: #ff0000; box-shadow: none"><i class="fa-solid fa-music"></i></a>
  1601. </li>
  1602.  
  1603. </ul>
  1604. </div>
  1605. </div>
  1606. </div>
  1607. <!--[[ COLUMN FOUR END ]]-->
  1608.  
  1609.  
  1610.  
  1611. </div>
  1612. <!--[[ INFO SECTION END ]]-->
  1613.  
  1614. <!--[[ CODE CREDITS ]]-->
  1615. <div class="p-1">
  1616. <div class="card rounded-0 text-lowercase p-1 text-right" style="font-size: 11px; color: #ff0000; letter-spacing: 1px; font-weight: 700">
  1617. <div class="bg-faded p-2">
  1618.  
  1619. code by @honorama
  1620.  
  1621. </div>
  1622. </div>
  1623. </div>
  1624. <!--[[ CODE CREDITS END ]]-->
  1625.  
  1626. </div>
  1627. </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!