API tools faq
paste
t3ch13-c0l0rs

moonsetter

t3ch13-c0l0rs
Feb 20th, 2022 (edited)
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.76 KB | None | 0 0
raw download clone embed print report
  1. <!-- code start -->
  2.  
  3. <div class="col-lg-7 col-sm-12 mx-auto bg-faded p-0" style="border-radius: 2em; max-width: 30em">
  4.  
  5. <!-- header img -->
  6.  
  7. <div class="col-12" style="background-image: url(https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1774&q=80); border-radius: 2em 2em 0em 0em; height: 8.5em; background-size: cover; background-position: fixed">
  8. </div>
  9.  
  10. <!-- character collapses -->
  11.  
  12. <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
  13.  
  14. <!-- person 1 -->
  15.  
  16. <div class="accordion-item">
  17.  
  18. <div id="person1" style="background-color: #242424; border: 4px #141414 solid" class="accordion-collapse collapse" aria-labelledby="person1" data-parent="#accordion">
  19.  
  20. <div class="col-12 m-0">
  21.  
  22. <div style="text-align: center;">
  23.  
  24. <a href="#character" class="mb-2" style="z-index: 1; ">
  25. <img src="https://64.media.tumblr.com/95af0ddbb0ee3817fc760413d71e8015/tumblr_ow8p86L0o51us4msbo1_r1_1280.png" style="margin-top: -4em; max-width: 100px; max-height: 100px" class="p-1 border-1 rounded-0 btn btn-outline-danger mb-2">
  26. </a>
  27.  
  28. <h1 style="font-weight: 300; color: #ff0000"><em>JOEY CLAIRE</em></h1>
  29.  
  30. <p style="font-weight: 300; color: #ff0000; font-size: smaller"><em> age . pronouns . orientation </em></p>
  31.  
  32. <hr style="border-color: red; border-style: solid">
  33.  
  34. </div>
  35.  
  36. <!-- quick stats -->
  37.  
  38. <div class="col-12 p-0 mt-2 mb-2" style="color: red">
  39.  
  40. <!-- quick stats 1 -->
  41.  
  42. <div class="justify-content-between">
  43.  
  44. <span>
  45. <em> KNOWN EACHOTHER FOR... </em>
  46. </span>
  47.  
  48.  
  49. <span>
  50. <em> X YEARS </em>
  51. </span>
  52.  
  53. </div>
  54.  
  55. <!-- stat 1 end -->
  56.  
  57. <hr class=" mt-1" style="border-color: red; border-style: dashed">
  58.  
  59. <!-- quick stats 2 -->
  60.  
  61. <div class="justify-content-between">
  62.  
  63. <span>
  64. <em> CLOSENESS </em>
  65. </span>
  66.  
  67.  
  68. <span>
  69. <em> DISTANT / CLOSE / ON-OFF </em>
  70. </span>
  71.  
  72. </div>
  73.  
  74. <!-- stat 2 end -->
  75.  
  76. <hr class=" mt-1" style="border-color: red; border-style: dashed">
  77.  
  78. <!-- quick stats 3 -->
  79.  
  80. <div class="justify-content-between">
  81.  
  82. <span>
  83. <em> TOGETHER FOR... </em>
  84. </span>
  85.  
  86.  
  87. <span>
  88. <em> X YEARS </em>
  89. </span>
  90.  
  91. </div>
  92.  
  93. <!-- stat 3 end -->
  94.  
  95. <hr class=" mt-1" style="border-color: red; border-style: dashed">
  96.  
  97. <!-- quick stats 4 -->
  98.  
  99. <div class="justify-content-between">
  100.  
  101. <span>
  102. <em> STABILITY </em>
  103. </span>
  104.  
  105.  
  106. <span>
  107. <em> ROCKY / SO-SO / GOOD / LIKE STEEL </em>
  108. </span>
  109.  
  110. </div>
  111.  
  112. <!-- stat 4 end -->
  113.  
  114. <hr class=" mt-1" style="border-color: red; border-style: dashed">
  115.  
  116. <!-- music player -->
  117.  
  118. <div class="justify-content-between">
  119.  
  120. <span>
  121. <em> THEME </em>
  122. </span>
  123.  
  124.  
  125. <span>
  126.  
  127.  
  128. <!-- not explaining this again you already know probably remove the "2Z4m4lnjxkY" replace it with the thing -->
  129. <iframe class="flex-fill"
  130. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  131. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  132. allowfullscreen
  133. src="https://www.youtube.com/embed/2Z4m4lnjxkY"></iframe>
  134.  
  135. <i class="fas fa-heart fa-beat mt-1"></i>
  136.  
  137. </span>
  138.  
  139. </div>
  140.  
  141. <!-- music player end -->
  142.  
  143. <hr class=" mt-1" style="border-color: red; border-style: dashed">
  144.  
  145. <!-- thoughts thing -->
  146.  
  147. <div class="justify-content-between">
  148.  
  149. <div class="col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  150.  
  151. <img src="https://64.media.tumblr.com/95af0ddbb0ee3817fc760413d71e8015/tumblr_ow8p86L0o51us4msbo1_r1_1280.png" style="max-width: 100px; max-height: 100px; vertical-align: middle">
  152.  
  153. </div>
  154.  
  155. <!-- arrows and opinions -->
  156.  
  157. <div class="col-lg-6 col-sm-12">
  158.  
  159. <!-- arrow -->
  160. <div class="col-12 mb-5 ">
  161.  
  162. <div class="col-12 p-1 mb-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  163.  
  164. ayo this shit dont expand i wouldnt recommend writing too much
  165.  
  166. </div>
  167.  
  168. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  169. <div class="progress-bar" style="height: 100%; width: 100%; background-color: white;"></div>
  170. <div style="margin: -8px">
  171. <i class="fa-solid fa-angle-right fa-2x"></i>
  172. </div>
  173. </div>
  174. </div>
  175.  
  176. <!-- other arrow -->
  177.  
  178. <div class="col-12">
  179.  
  180.  
  181. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  182. <div class="progress-bar" style="height: 100%; width: 5%; background-color: white;"></div>
  183. <div style="margin: -8px">
  184. <i class="fa-solid fa-angle-left fa-2x"></i>
  185. </div>
  186. </div>
  187.  
  188. <div class="col-12 p-1 mt-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  189.  
  190. ayo this shit dont expand i wouldnt recommend writing too much
  191.  
  192. </div>
  193.  
  194. </div>
  195.  
  196.  
  197. <!-- end -->
  198.  
  199. </div>
  200.  
  201. <!-- img -->
  202.  
  203. <div class="col-lg-1 col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  204. <div class="justify-content-center">
  205. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-width: 100px; max-height: 100px">
  206. </div>
  207. </div>
  208.  
  209. <!-- end -->
  210. </div>
  211.  
  212. <!-- end thoughts -->
  213.  
  214.  
  215. </div>
  216.  
  217. <!-- end -->
  218.  
  219.  
  220. </div>
  221.  
  222. <!-- end person one -->
  223. </div>
  224.  
  225. </div>
  226.  
  227. <!-- actual end of person one -->
  228.  
  229.  
  230. <!-- person 2 -->
  231.  
  232. <div class="accordion-item">
  233.  
  234. <div id="person2" class="accordion-collapse collapse" style="background-color: #242424; border: 4px #141414 solid" aria-labelledby="person2" data-parent="#accordion">
  235.  
  236. <div class="col-12 m-0">
  237.  
  238. <div style="text-align: center;">
  239.  
  240. <a href="#character" class="mb-2" style="z-index: 1; ">
  241. <img src="https://64.media.tumblr.com/0ff753a082ba73e4df8aa35e40699698/tumblr_ow8p86L0o51us4msbo2_r1_400.png" style="margin-top: -4em; max-width: 100px; max-height: 100px" class="p-1 border-1 rounded-0 btn btn-outline-info mb-2">
  242. </a>
  243.  
  244. <h1 style="font-weight: 300; color: #ffc4da"><em>XEFROS TRITOH</em></h1>
  245.  
  246. <p style="font-weight: 300; color: #ffc4da; font-size: smaller"><em> age . pronouns . orientation </em></p>
  247.  
  248. <hr style="border-color: #ffc4da; border-style: solid">
  249.  
  250. </div>
  251.  
  252. <!-- quick stats -->
  253.  
  254. <div class="col-12 p-0 mt-2 mb-2" style="color: #ffc4da">
  255.  
  256. <!-- quick stats 1 -->
  257.  
  258. <div class="justify-content-between">
  259.  
  260. <span>
  261. <em> KNOWN EACHOTHER FOR... </em>
  262. </span>
  263.  
  264.  
  265. <span>
  266. <em> X YEARS </em>
  267. </span>
  268.  
  269. </div>
  270.  
  271. <!-- stat 1 end -->
  272.  
  273. <hr class=" mt-1" style="border-color: #ffc4da; border-style: dashed">
  274.  
  275. <!-- quick stats 2 -->
  276.  
  277. <div class="justify-content-between">
  278.  
  279. <span>
  280. <em> CLOSENESS </em>
  281. </span>
  282.  
  283.  
  284. <span>
  285. <em> DISTANT / CLOSE / ON-OFF </em>
  286. </span>
  287.  
  288. </div>
  289.  
  290. <!-- stat 2 end -->
  291.  
  292. <hr class=" mt-1" style="border-color: #ffc4da; border-style: dashed">
  293.  
  294. <!-- quick stats 3 -->
  295.  
  296. <div class="justify-content-between">
  297.  
  298. <span>
  299. <em> TOGETHER FOR... </em>
  300. </span>
  301.  
  302.  
  303. <span>
  304. <em> X YEARS </em>
  305. </span>
  306.  
  307. </div>
  308.  
  309. <!-- stat 3 end -->
  310.  
  311. <hr class=" mt-1" style="border-color: #ffc4da; border-style: dashed">
  312.  
  313. <!-- quick stats 4 -->
  314.  
  315. <div class="justify-content-between">
  316.  
  317. <span>
  318. <em> STABILITY </em>
  319. </span>
  320.  
  321.  
  322. <span>
  323. <em> ROCKY / SO-SO / GOOD / LIKE STEEL </em>
  324. </span>
  325.  
  326. </div>
  327.  
  328. <!-- stat 4 end -->
  329.  
  330. <hr class=" mt-1" style="border-color: #ffc4da; border-style: dashed">
  331.  
  332. <!-- music player -->
  333.  
  334. <div class="justify-content-between">
  335.  
  336. <span>
  337. <em> THEME </em>
  338. </span>
  339.  
  340.  
  341. <span>
  342.  
  343.  
  344. <!-- not explaining this again you already know probably remove the "2Z4m4lnjxkY" replace it with the thing -->
  345. <iframe class="flex-fill"
  346. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  347. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  348. allowfullscreen
  349. src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
  350.  
  351. <i class="fas fa-diamond fa-beat mt-1"></i>
  352.  
  353. </span>
  354.  
  355. </div>
  356.  
  357. <!-- music player end -->
  358.  
  359. <hr class=" mt-1" style="border-color: #ffc4da; border-style: dashed">
  360.  
  361. <!-- thoughts thing -->
  362.  
  363. <div class="justify-content-between">
  364.  
  365. <div class="col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  366.  
  367. <img src="https://64.media.tumblr.com/0ff753a082ba73e4df8aa35e40699698/tumblr_ow8p86L0o51us4msbo2_r1_400.png" style="max-width: 100px; max-height: 100px; vertical-align: middle">
  368.  
  369. </div>
  370.  
  371. <!-- arrows and opinions -->
  372.  
  373. <div class="col-lg-6 col-sm-12">
  374.  
  375. <!-- arrow -->
  376. <div class="col-12 mb-5 ">
  377.  
  378. <div class="col-12 p-1 mb-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  379.  
  380. ayo this shit dont expand i wouldnt recommend writing too much
  381.  
  382. </div>
  383.  
  384. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  385. <div class="progress-bar" style="height: 100%; width: 100%; background-color: white;"></div>
  386. <div style="margin: -8px">
  387. <i class="fa-solid fa-angle-right fa-2x"></i>
  388. </div>
  389. </div>
  390. </div>
  391.  
  392. <!-- other arrow -->
  393.  
  394. <div class="col-12">
  395.  
  396.  
  397. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  398. <div class="progress-bar" style="height: 100%; width: 5%; background-color: white;"></div>
  399. <div style="margin: -8px">
  400. <i class="fa-solid fa-angle-left fa-2x"></i>
  401. </div>
  402. </div>
  403.  
  404. <div class="col-12 p-1 mt-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  405.  
  406. ayo this shit dont expand i wouldnt recommend writing too much
  407.  
  408. </div>
  409.  
  410. </div>
  411.  
  412.  
  413. <!-- end -->
  414.  
  415. </div>
  416.  
  417. <!-- img -->
  418.  
  419. <div class="col-lg-1 col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  420. <div class="justify-content-center">
  421. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-width: 100px; max-height: 100px">
  422. </div>
  423. </div>
  424.  
  425. <!-- end -->
  426. </div>
  427.  
  428. <!-- end thoughts -->
  429.  
  430.  
  431. </div>
  432.  
  433. <!-- end -->
  434.  
  435.  
  436. </div>
  437.  
  438. </div>
  439.  
  440. </div>
  441.  
  442. <!-- person 3 -->
  443.  
  444. <div class="accordion-item">
  445.  
  446. <div id="person3" class="accordion-collapse collapse" style="background-color: #242424; border: 4px #141414 solid" aria-labelledby="person3" data-parent="#accordion">
  447.  
  448. <div class="col-12 m-0">
  449.  
  450. <div style="text-align: center;">
  451.  
  452. <a href="#character" class="mb-2" style="z-index: 1; ">
  453. <img src="https://64.media.tumblr.com/610313136ba541e34c6a143044282348/tumblr_ow8p86L0o51us4msbo3_r1_250.png" style="margin-top: -4em; max-width: 100px; max-height: 100px" class="p-1 border-1 rounded-0 btn btn-outline-secondary mb-2">
  454. </a>
  455.  
  456. <h1 style="font-weight: 300; color: #fff"><em>DAMMEK ??????</em></h1>
  457.  
  458. <p style="font-weight: 300; color: #fff; font-size: smaller"><em> age . pronouns . orientation </em></p>
  459.  
  460. <hr style="border-color: #fff; border-style: solid">
  461.  
  462. </div>
  463.  
  464. <!-- quick stats -->
  465.  
  466. <div class="col-12 p-0 mt-2 mb-2" style="color: #fff">
  467.  
  468. <!-- quick stats 1 -->
  469.  
  470. <div class="justify-content-between">
  471.  
  472. <span>
  473. <em> KNOWN EACHOTHER FOR... </em>
  474. </span>
  475.  
  476.  
  477. <span>
  478. <em> X YEARS </em>
  479. </span>
  480.  
  481. </div>
  482.  
  483. <!-- stat 1 end -->
  484.  
  485. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  486.  
  487. <!-- quick stats 2 -->
  488.  
  489. <div class="justify-content-between">
  490.  
  491. <span>
  492. <em> CLOSENESS </em>
  493. </span>
  494.  
  495.  
  496. <span>
  497. <em> DISTANT / CLOSE / ON-OFF </em>
  498. </span>
  499.  
  500. </div>
  501.  
  502. <!-- stat 2 end -->
  503.  
  504. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  505.  
  506. <!-- quick stats 3 -->
  507.  
  508. <div class="justify-content-between">
  509.  
  510. <span>
  511. <em> TOGETHER FOR... </em>
  512. </span>
  513.  
  514.  
  515. <span>
  516. <em> X YEARS </em>
  517. </span>
  518.  
  519. </div>
  520.  
  521. <!-- stat 3 end -->
  522.  
  523. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  524.  
  525. <!-- quick stats 4 -->
  526.  
  527. <div class="justify-content-between">
  528.  
  529. <span>
  530. <em> STABILITY </em>
  531. </span>
  532.  
  533.  
  534. <span>
  535. <em> ROCKY / SO-SO / GOOD / LIKE STEEL </em>
  536. </span>
  537.  
  538. </div>
  539.  
  540. <!-- stat 4 end -->
  541.  
  542. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  543.  
  544. <!-- music player -->
  545.  
  546. <div class="justify-content-between">
  547.  
  548. <span>
  549. <em> THEME </em>
  550. </span>
  551.  
  552.  
  553. <span>
  554.  
  555.  
  556. <!-- not explaining this again you already know probably remove the "2Z4m4lnjxkY" replace it with the thing -->
  557. <iframe class="flex-fill"
  558. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  559. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  560. allowfullscreen
  561. src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
  562.  
  563. <i class="fas fa-spade fa-beat mt-1"></i>
  564.  
  565. </span>
  566.  
  567. </div>
  568.  
  569. <!-- music player end -->
  570.  
  571. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  572.  
  573. <!-- thoughts thing -->
  574.  
  575. <div class="justify-content-between">
  576.  
  577. <div class="col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  578.  
  579. <img src="https://64.media.tumblr.com/610313136ba541e34c6a143044282348/tumblr_ow8p86L0o51us4msbo3_r1_250.png" style="max-width: 100px; max-height: 100px; vertical-align: middle">
  580.  
  581. </div>
  582.  
  583. <!-- arrows and opinions -->
  584.  
  585. <div class="col-lg-6 col-sm-12">
  586.  
  587. <!-- arrow -->
  588. <div class="col-12 mb-5 ">
  589.  
  590. <div class="col-12 p-1 mb-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  591.  
  592. ayo this shit dont expand i wouldnt recommend writing too much
  593.  
  594. </div>
  595.  
  596. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  597. <div class="progress-bar" style="height: 100%; width: 100%; background-color: white;"></div>
  598. <div style="margin: -8px">
  599. <i class="fa-solid fa-angle-right fa-2x"></i>
  600. </div>
  601. </div>
  602. </div>
  603.  
  604. <!-- other arrow -->
  605.  
  606. <div class="col-12">
  607.  
  608.  
  609. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  610. <div class="progress-bar" style="height: 100%; width: 5%; background-color: white;"></div>
  611. <div style="margin: -8px">
  612. <i class="fa-solid fa-angle-left fa-2x"></i>
  613. </div>
  614. </div>
  615.  
  616. <div class="col-12 p-1 mt-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  617.  
  618. ayo this shit dont expand i wouldnt recommend writing too much
  619.  
  620. </div>
  621.  
  622. </div>
  623.  
  624.  
  625. <!-- end -->
  626.  
  627. </div>
  628.  
  629. <!-- img -->
  630.  
  631. <div class="col-lg-1 col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  632. <div class="justify-content-center">
  633. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-width: 100px; max-height: 100px">
  634. </div>
  635. </div>
  636.  
  637. <!-- end -->
  638. </div>
  639.  
  640. <!-- end thoughts -->
  641.  
  642.  
  643. </div>
  644.  
  645. <!-- end -->
  646.  
  647.  
  648. </div>
  649.  
  650. </div>
  651.  
  652. </div>
  653.  
  654. <!-- person 4 -->
  655.  
  656. <div class="accordion-item">
  657.  
  658. <div id="person4" style="background-color: #242424; border: 4px #141414 solid" class="accordion-collapse collapse" aria-labelledby="person4" data-parent="#accordion">
  659.  
  660. <div class="col-12 m-0">
  661.  
  662. <div style="text-align: center;">
  663.  
  664. <a href="#character" class="mb-2" style="z-index: 1; ">
  665. <img src="https://64.media.tumblr.com/4c2e54b946a693f4ffb20e78549880b6/tumblr_ow8p86L0o51us4msbo5_r2_250.png" style="margin-top: -4em; max-width: 100px; max-height: 100px" class="p-1 border-1 rounded-0 btn btn-outline-secondary mb-2">
  666. </a>
  667.  
  668. <h1 style="font-weight: 300; color: #fff"><em>TRIZZA TETHIS</em></h1>
  669.  
  670. <p style="font-weight: 300; color: #fff; font-size: smaller"><em> age . pronouns . orientation </em></p>
  671.  
  672. <hr style="border-color: #fff; border-style: solid">
  673.  
  674. </div>
  675.  
  676. <!-- quick stats -->
  677.  
  678. <div class="col-12 p-0 mt-2 mb-2" style="color: #fff">
  679.  
  680. <!-- quick stats 1 -->
  681.  
  682. <div class="justify-content-between">
  683.  
  684. <span>
  685. <em> KNOWN EACHOTHER FOR... </em>
  686. </span>
  687.  
  688.  
  689. <span>
  690. <em> X YEARS </em>
  691. </span>
  692.  
  693. </div>
  694.  
  695. <!-- stat 1 end -->
  696.  
  697. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  698.  
  699. <!-- quick stats 2 -->
  700.  
  701. <div class="justify-content-between">
  702.  
  703. <span>
  704. <em> CLOSENESS </em>
  705. </span>
  706.  
  707.  
  708. <span>
  709. <em> DISTANT / CLOSE / ON-OFF </em>
  710. </span>
  711.  
  712. </div>
  713.  
  714. <!-- stat 2 end -->
  715.  
  716. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  717.  
  718. <!-- quick stats 3 -->
  719.  
  720. <div class="justify-content-between">
  721.  
  722. <span>
  723. <em> TOGETHER FOR... </em>
  724. </span>
  725.  
  726.  
  727. <span>
  728. <em> X YEARS </em>
  729. </span>
  730.  
  731. </div>
  732.  
  733. <!-- stat 3 end -->
  734.  
  735. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  736.  
  737. <!-- quick stats 4 -->
  738.  
  739. <div class="justify-content-between">
  740.  
  741. <span>
  742. <em> STABILITY </em>
  743. </span>
  744.  
  745.  
  746. <span>
  747. <em> ROCKY / SO-SO / GOOD / LIKE STEEL </em>
  748. </span>
  749.  
  750. </div>
  751.  
  752. <!-- stat 4 end -->
  753.  
  754. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  755.  
  756. <!-- music player -->
  757.  
  758. <div class="justify-content-between">
  759.  
  760. <span>
  761. <em> THEME </em>
  762. </span>
  763.  
  764.  
  765. <span>
  766.  
  767.  
  768. <!-- not explaining this again you already know probably remove the "2Z4m4lnjxkY" replace it with the thing -->
  769. <iframe class="flex-fill"
  770. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  771. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  772. allowfullscreen
  773. src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
  774.  
  775. <i class="fas fa-club fa-beat mt-1"></i>
  776.  
  777. </span>
  778.  
  779. </div>
  780.  
  781. <!-- music player end -->
  782.  
  783. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  784.  
  785. <!-- thoughts thing -->
  786.  
  787. <div class="justify-content-between">
  788.  
  789. <div class="col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  790.  
  791. <img src="https://64.media.tumblr.com/4c2e54b946a693f4ffb20e78549880b6/tumblr_ow8p86L0o51us4msbo5_r2_250.png" style="max-width: 100px; max-height: 100px; vertical-align: middle">
  792.  
  793. </div>
  794.  
  795. <!-- arrows and opinions -->
  796.  
  797. <div class="col-lg-6 col-sm-12">
  798.  
  799. <!-- arrow -->
  800. <div class="col-12 mb-5 ">
  801.  
  802. <div class="col-12 p-1 mb-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  803.  
  804. ayo this shit dont expand i wouldnt recommend writing too much
  805.  
  806. </div>
  807.  
  808. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  809. <div class="progress-bar" style="height: 100%; width: 100%; background-color: white;"></div>
  810. <div style="margin: -8px">
  811. <i class="fa-solid fa-angle-right fa-2x"></i>
  812. </div>
  813. </div>
  814. </div>
  815.  
  816. <!-- other arrow -->
  817.  
  818. <div class="col-12">
  819.  
  820.  
  821. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  822. <div class="progress-bar" style="height: 100%; width: 5%; background-color: white;"></div>
  823. <div style="margin: -8px">
  824. <i class="fa-solid fa-angle-left fa-2x"></i>
  825. </div>
  826. </div>
  827.  
  828. <div class="col-12 p-1 mt-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  829.  
  830. ayo this shit dont expand i wouldnt recommend writing too much
  831.  
  832. </div>
  833.  
  834. </div>
  835.  
  836.  
  837. <!-- end -->
  838.  
  839. </div>
  840.  
  841. <!-- img -->
  842.  
  843. <div class="col-lg-1 col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  844. <div class="justify-content-center">
  845. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-width: 100px; max-height: 100px">
  846. </div>
  847. </div>
  848.  
  849. <!-- end -->
  850. </div>
  851.  
  852. <!-- end thoughts -->
  853.  
  854.  
  855. </div>
  856.  
  857. <!-- end -->
  858.  
  859.  
  860. </div>
  861.  
  862. </div>
  863.  
  864. </div>
  865.  
  866. <!-- person 5 -->
  867.  
  868. <div class="accordion-item">
  869.  
  870. <div id="person5" class="accordion-collapse collapse" style="background-color: #242424; border: 4px #141414 solid" aria-labelledby="person5" data-parent="#accordion">
  871.  
  872. <div class="col-12 m-0">
  873.  
  874. <div style="text-align: center;">
  875.  
  876. <a href="#character" class="mb-2" style="z-index: 1; ">
  877. <img src="http://pm1.narvii.com/6761/dc6389add1e1cb85586632801abde82b4b423544v2_00.jpg" style="margin-top: -4em; max-width: 100px; max-height: 100px" class="p-1 border-1 rounded-0 btn btn-outline-secondary mb-2">
  878. </a>
  879.  
  880. <h1 style="font-weight: 300; color: #fff"><em>KARAKO PIEROT</em></h1>
  881.  
  882. <p style="font-weight: 300; color: #fff; font-size: smaller"><em> age . pronouns . orientation </em></p>
  883.  
  884. <hr style="border-color: #fff; border-style: solid">
  885.  
  886. </div>
  887.  
  888. <!-- quick stats -->
  889.  
  890. <div class="col-12 p-0 mt-2 mb-2" style="color: #fff">
  891.  
  892. <!-- quick stats 1 -->
  893.  
  894. <div class="justify-content-between">
  895.  
  896. <span>
  897. <em> KNOWN EACHOTHER FOR... </em>
  898. </span>
  899.  
  900.  
  901. <span>
  902. <em> X YEARS </em>
  903. </span>
  904.  
  905. </div>
  906.  
  907. <!-- stat 1 end -->
  908.  
  909. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  910.  
  911. <!-- quick stats 2 -->
  912.  
  913. <div class="justify-content-between">
  914.  
  915. <span>
  916. <em> CLOSENESS </em>
  917. </span>
  918.  
  919.  
  920. <span>
  921. <em> DISTANT / CLOSE / ON-OFF </em>
  922. </span>
  923.  
  924. </div>
  925.  
  926. <!-- stat 2 end -->
  927.  
  928. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  929.  
  930. <!-- quick stats 3 -->
  931.  
  932. <div class="justify-content-between">
  933.  
  934. <span>
  935. <em> TOGETHER FOR... </em>
  936. </span>
  937.  
  938.  
  939. <span>
  940. <em> X YEARS </em>
  941. </span>
  942.  
  943. </div>
  944.  
  945. <!-- stat 3 end -->
  946.  
  947. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  948.  
  949. <!-- quick stats 4 -->
  950.  
  951. <div class="justify-content-between">
  952.  
  953. <span>
  954. <em> STABILITY </em>
  955. </span>
  956.  
  957.  
  958. <span>
  959. <em> ROCKY / SO-SO / GOOD / LIKE STEEL </em>
  960. </span>
  961.  
  962. </div>
  963.  
  964. <!-- stat 4 end -->
  965.  
  966. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  967.  
  968. <!-- music player -->
  969.  
  970. <div class="justify-content-between">
  971.  
  972. <span>
  973. <em> THEME </em>
  974. </span>
  975.  
  976.  
  977. <span>
  978.  
  979.  
  980. <!-- not explaining this again you already know probably remove the "2Z4m4lnjxkY" replace it with the thing -->
  981. <iframe class="flex-fill"
  982. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  983. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  984. allowfullscreen
  985. src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
  986.  
  987. <i class="fas fa-club fa-beat mt-1"></i>
  988.  
  989. </span>
  990.  
  991. </div>
  992.  
  993. <!-- music player end -->
  994.  
  995. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  996.  
  997. <!-- thoughts thing -->
  998.  
  999. <div class="justify-content-between">
  1000.  
  1001. <div class="col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  1002.  
  1003. <img src="http://pm1.narvii.com/6761/dc6389add1e1cb85586632801abde82b4b423544v2_00.jpg" style="max-width: 100px; max-height: 100px; vertical-align: middle">
  1004.  
  1005. </div>
  1006.  
  1007. <!-- arrows and opinions -->
  1008.  
  1009. <div class="col-lg-6 col-sm-12">
  1010.  
  1011. <!-- arrow -->
  1012. <div class="col-12 mb-5 ">
  1013.  
  1014. <div class="col-12 p-1 mb-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  1015.  
  1016. ayo this shit dont expand i wouldnt recommend writing too much
  1017.  
  1018. </div>
  1019.  
  1020. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  1021. <div class="progress-bar" style="height: 100%; width: 100%; background-color: white;"></div>
  1022. <div style="margin: -8px">
  1023. <i class="fa-solid fa-angle-right fa-2x"></i>
  1024. </div>
  1025. </div>
  1026. </div>
  1027.  
  1028. <!-- other arrow -->
  1029.  
  1030. <div class="col-12">
  1031.  
  1032.  
  1033. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  1034. <div class="progress-bar" style="height: 100%; width: 5%; background-color: white;"></div>
  1035. <div style="margin: -8px">
  1036. <i class="fa-solid fa-angle-left fa-2x"></i>
  1037. </div>
  1038. </div>
  1039.  
  1040. <div class="col-12 p-1 mt-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  1041.  
  1042. ayo this shit dont expand i wouldnt recommend writing too much
  1043.  
  1044. </div>
  1045.  
  1046. </div>
  1047.  
  1048.  
  1049. <!-- end -->
  1050.  
  1051. </div>
  1052.  
  1053. <!-- img -->
  1054.  
  1055. <div class="col-lg-1 col-sm-12 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  1056. <div class="justify-content-center">
  1057. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-width: 100px; max-height: 100px">
  1058. </div>
  1059. </div>
  1060.  
  1061. <!-- end -->
  1062. </div>
  1063.  
  1064. <!-- end thoughts -->
  1065.  
  1066.  
  1067. </div>
  1068.  
  1069. <!-- end -->
  1070.  
  1071.  
  1072. </div>
  1073.  
  1074. </div>
  1075.  
  1076. </div>
  1077.  
  1078. <!-- person 6 -->
  1079.  
  1080. <div class="accordion-item">
  1081.  
  1082. <div id="person6" class="accordion-collapse collapse" style="background-color: #242424; border: 4px #141414 solid" aria-labelledby="person6" data-parent="#accordion">
  1083. <div class="col-12 m-0">
  1084.  
  1085. <div style="text-align: center;">
  1086.  
  1087. <a href="#character" class="mb-2" style="z-index: 1; ">
  1088. <img src="https://64.media.tumblr.com/28a4aa62285c92dd756546963db8952f/tumblr_ow8p86L0o51us4msbo4_r1_250.png" style="margin-top: -4em; max-width: 100px; max-height: 100px" class="p-1 border-1 rounded-0 btn btn-outline-primary mb-2">
  1089. </a>
  1090.  
  1091. <h1 style="font-weight: 300; color: #fff"><em>JUDE HARLEY</em></h1>
  1092.  
  1093. <p style="font-weight: 300; color: #fff; font-size: smaller"><em> brother </em>
  1094.  
  1095. <br>
  1096.  
  1097. <em> age . pronouns . orientation </em></p>
  1098.  
  1099. <hr style="border-color: #fff; border-style: solid">
  1100.  
  1101. </div>
  1102.  
  1103. <!-- quick stats -->
  1104.  
  1105. <div class="col-12 p-0 mt-2 mb-2" style="color: #fff">
  1106.  
  1107. <!-- quick stats 1 -->
  1108.  
  1109. <div class="justify-content-between">
  1110.  
  1111. <span>
  1112. <em> KNOWN EACHOTHER FOR... </em>
  1113. </span>
  1114.  
  1115.  
  1116. <span>
  1117. <em> X YEARS </em>
  1118. </span>
  1119.  
  1120. </div>
  1121.  
  1122. <!-- stat 1 end -->
  1123.  
  1124. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  1125.  
  1126. <!-- quick stats 2 -->
  1127.  
  1128. <div class="justify-content-between">
  1129.  
  1130. <span>
  1131. <em> CLOSENESS </em>
  1132. </span>
  1133.  
  1134.  
  1135. <span>
  1136. <em> DISTANT / CLOSE / ON-OFF </em>
  1137. </span>
  1138.  
  1139. </div>
  1140.  
  1141. <!-- stat 2 end -->
  1142.  
  1143. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  1144.  
  1145. <!-- quick stats 3 -->
  1146.  
  1147. <div class="justify-content-between">
  1148.  
  1149. <span>
  1150. <em> FRIENDS/WHATEVER FOR... </em>
  1151. </span>
  1152.  
  1153.  
  1154. <span>
  1155. <em> X YEARS </em>
  1156. </span>
  1157.  
  1158. </div>
  1159.  
  1160. <!-- stat 3 end -->
  1161.  
  1162. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  1163.  
  1164. <!-- quick stats 4 -->
  1165.  
  1166. <div class="justify-content-between">
  1167.  
  1168. <span>
  1169. <em> STABILITY </em>
  1170. </span>
  1171.  
  1172.  
  1173. <span>
  1174. <em> ROCKY / SO-SO / GOOD / LIKE STEEL </em>
  1175. </span>
  1176.  
  1177. </div>
  1178.  
  1179. <!-- stat 4 end -->
  1180.  
  1181. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  1182.  
  1183. <!-- music player -->
  1184.  
  1185. <div class="justify-content-between">
  1186.  
  1187. <span>
  1188. <em> THEME </em>
  1189. </span>
  1190.  
  1191.  
  1192. <span>
  1193.  
  1194.  
  1195. <!-- not explaining this again you already know probably remove the "2Z4m4lnjxkY" replace it with the thing -->
  1196. <iframe class="flex-fill"
  1197. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  1198. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  1199. allowfullscreen
  1200. src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
  1201.  
  1202. <i class="fas fa-circle fa-beat mt-1"></i>
  1203.  
  1204. </span>
  1205.  
  1206. </div>
  1207.  
  1208. <!-- music player end -->
  1209.  
  1210. <hr class=" mt-1" style="border-color: #fff; border-style: dashed">
  1211.  
  1212. <!-- thoughts thing -->
  1213.  
  1214. <div class="justify-content-between">
  1215.  
  1216. <div class="col-sm-12 col-md-6 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  1217.  
  1218. <img src="https://64.media.tumblr.com/28a4aa62285c92dd756546963db8952f/tumblr_ow8p86L0o51us4msbo4_r1_250.png" style="max-width: 100px; max-height: 100px; vertical-align: middle">
  1219.  
  1220. </div>
  1221.  
  1222. <!-- arrows and opinions -->
  1223.  
  1224. <div class="col-lg-6 col-md-6col-sm-2">
  1225.  
  1226. <!-- arrow -->
  1227. <div class="col-lg-12 col-sm-2 mb-5 ">
  1228.  
  1229. <div class="col-12 p-1 mb-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  1230.  
  1231. ayo this shit dont expand i wouldnt recommend writing too much
  1232.  
  1233. </div>
  1234.  
  1235. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  1236. <div class="progress-bar" style="height: 100%; width: 100%; background-color: white;"></div>
  1237. <div style="margin: -8px">
  1238. <i class="fa-solid fa-angle-right fa-2x"></i>
  1239. </div>
  1240. </div>
  1241. </div>
  1242.  
  1243. <!-- other arrow -->
  1244.  
  1245. <div class="col-12">
  1246.  
  1247.  
  1248. <div class="progress" style="height: 3px; margin-top: 2px; overflow: visible; background-color: white">
  1249. <div class="progress-bar" style="height: 100%; width: 5%; background-color: white;"></div>
  1250. <div style="margin: -8px">
  1251. <i class="fa-solid fa-angle-left fa-2x"></i>
  1252. </div>
  1253. </div>
  1254.  
  1255. <div class="col-12 p-1 mt-3" style="background-color: #141414; border: #000000 2px solid; color: white">
  1256.  
  1257. ayo this shit dont expand i wouldnt recommend writing too much
  1258.  
  1259. </div>
  1260.  
  1261. </div>
  1262.  
  1263.  
  1264. <!-- end -->
  1265.  
  1266. </div>
  1267.  
  1268. <!-- img -->
  1269.  
  1270. <div class="col-lg-1 col-sm-1 p-0 m-0 align-items-center" style="max-width: 100px; vertical-align: middle">
  1271. <div class="justify-content-center">
  1272. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-width: 100px; max-height: 100px">
  1273. </div>
  1274. </div>
  1275.  
  1276. <!-- end -->
  1277. </div>
  1278.  
  1279. <!-- end thoughts -->
  1280.  
  1281.  
  1282. </div>
  1283.  
  1284. <!-- end -->
  1285.  
  1286.  
  1287. </div>
  1288.  
  1289. </div>
  1290. </div>
  1291.  
  1292. </div>
  1293.  
  1294.  
  1295.  
  1296. <!-- end character collapses -->
  1297.  
  1298. <!-- character buttons -->
  1299.  
  1300. <div class="p-3 overflow-auto" style="max-height: 10em">
  1301. <div class="row no-gutters">
  1302.  
  1303. <!-- ok they start here -->
  1304.  
  1305. <div class="col-lg-6 col-sm-6 mb-3">
  1306. <div class="row no-gutters">
  1307.  
  1308.  
  1309. <div class="col-md-6 m-0 col-sm-6">
  1310. <i class="fas fa-heart fa-5x" style="color: rgba(255, 0, 0, 0.5); margin: 0px"></i>
  1311.  
  1312. <a data-toggle="collapse" data-parent="#accordion" href="#person1" aria-expanded="true" aria-controls="person1">
  1313.  
  1314. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-height: 60px; max-width: 60px; margin-top: -1.8em; margin-left: -3.5em" class="p-1 border-1 rounded-0 btn btn-outline-danger">
  1315.  
  1316. </a>
  1317.  
  1318. </div>
  1319.  
  1320. <!-- name -->
  1321.  
  1322. <div class="col-lg-6 m-0 col-sm-6 mt-3">
  1323. <span style="margin-top: -5em"><a data-toggle="collapse" data-parent="#accordion" href="#person1" aria-expanded="true" aria-controls="person1" style="color: rgba(255, 0, 0, 1);">sixlet ternae</a></span>
  1324. </div>
  1325.  
  1326. </div>
  1327.  
  1328. </div>
  1329.  
  1330. <!-- first one done -->
  1331.  
  1332. <!-- second one -->
  1333.  
  1334. <div class="col-lg-6 col-sm-6 mb-3">
  1335. <div class="row no-gutters">
  1336.  
  1337.  
  1338. <div class="col-md-6 m-0 col-sm-6">
  1339. <i class="fas fa-diamond fa-5x" style="color: rgba(255, 196, 218, 0.7); margin: 0px"></i>
  1340.  
  1341. <a data-toggle="collapse" data-parent="#accordion" href="#person2" aria-expanded="true" aria-controls="person2">
  1342.  
  1343. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-height: 60px; max-width: 60px; margin-top: -1.8em; margin-left: -3.5em" class="p-1 border-1 rounded-0 btn btn-outline-info">
  1344.  
  1345. </a>
  1346. </div>
  1347.  
  1348. <!-- name -->
  1349.  
  1350. <div class="col-lg-6 m-0 col-sm-6 mt-3">
  1351. <span style="margin-top: -5em"><a data-toggle="collapse" data-parent="#accordion" href="#person2" aria-expanded="true" aria-controls="person2" style="color: #ffc4da;">sixlet ternae</a></span>
  1352. </div>
  1353.  
  1354. </div>
  1355.  
  1356. </div>
  1357.  
  1358. <!-- third one -->
  1359.  
  1360. <div class="col-lg-6 col-sm-6 mb-3">
  1361. <div class="row no-gutters">
  1362.  
  1363.  
  1364. <div class="col-md-6 m-0 col-sm-6">
  1365. <i class="fas fa-spade fa-5x" style="color: rgba(0, 0, 0, 0.5); margin: 0px"></i>
  1366.  
  1367. <a data-toggle="collapse" data-parent="#accordion" href="#person3" aria-expanded="true" aria-controls="person3">
  1368.  
  1369. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-height: 60px; max-width: 60px; margin-top: -1.8em; margin-left: -3.5em" class="p-1 border-1 rounded-0 btn btn-outline-secondary">
  1370.  
  1371. </a>
  1372. </div>
  1373.  
  1374. <!-- name -->
  1375.  
  1376. <div class="col-lg-6 m-0 col-sm-6 mt-3">
  1377. <span style="margin-top: -5em"><a data-toggle="collapse" data-parent="#accordion" href="#person3" aria-expanded="true" aria-controls="person3" style="color: #000; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">sixlet ternae</a></span>
  1378. </div>
  1379.  
  1380. </div>
  1381.  
  1382. </div>
  1383.  
  1384.  
  1385. <!-- fourth one -->
  1386.  
  1387. <div class="col-lg-6 col-sm-6 mb-3">
  1388. <div class="row no-gutters">
  1389.  
  1390.  
  1391. <div class="col-md-6 m-0 col-sm-6">
  1392. <i class="fas fa-club fa-5x" style="color: rgba(0, 0, 0, 0.5); margin: 0px"></i>
  1393.  
  1394. <a data-toggle="collapse" data-parent="#accordion" href="#person4" aria-expanded="true" aria-controls="person4">
  1395.  
  1396. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-height: 60px; max-width: 60px; margin-top: -1.8em; margin-left: -3.5em" class="p-1 border-1 rounded-0 btn btn-outline-secondary">
  1397.  
  1398. </a>
  1399. </div>
  1400.  
  1401. <!-- name -->
  1402.  
  1403. <div class="col-lg-6 m-0 col-sm-6 mt-3">
  1404. <span style="margin-top: -5em"><a data-toggle="collapse" data-parent="#accordion" href="#person4" aria-expanded="true" aria-controls="person4" style="color: #000; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">sixlet ternae</a></span>
  1405. </div>
  1406.  
  1407. </div>
  1408.  
  1409. </div>
  1410.  
  1411. <!-- fifth one -->
  1412.  
  1413. <div class="col-lg-6 col-sm-6 mb-3">
  1414. <div class="row no-gutters">
  1415.  
  1416.  
  1417. <div class="col-md-6 m-0 col-sm-6">
  1418. <i class="fas fa-club fa-5x" style="color: rgba(0, 0, 0, 0.5); margin: 0px"></i>
  1419.  
  1420. <a data-toggle="collapse" data-parent="#accordion" href="#person5" aria-expanded="true" aria-controls="person5" >
  1421.  
  1422. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-height: 60px; max-width: 60px; margin-top: -1.8em; margin-left: -3.5em" class="p-1 border-1 rounded-0 btn btn-outline-secondary">
  1423.  
  1424. </a>
  1425. </div>
  1426.  
  1427. <!-- name -->
  1428.  
  1429. <div class="col-lg-6 m-0 col-sm-6 mt-3">
  1430. <span style="margin-top: -5em"><a data-toggle="collapse" data-parent="#accordion" href="#person5" aria-expanded="true" aria-controls="person5" style="color: #000; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">sixlet ternae</a></span>
  1431. </div>
  1432.  
  1433. </div>
  1434.  
  1435. </div>
  1436.  
  1437. <!-- sixth one -->
  1438.  
  1439. <div class="col-lg-6 col-sm-6 mb-3">
  1440. <div class="row no-gutters">
  1441.  
  1442.  
  1443. <div class="col-md-6 m-0 col-sm-6">
  1444. <i class="fas fa-circle fa-5x" style="color: rgba(0, 0, 0, 0.3); margin: 0px"></i>
  1445.  
  1446. <a data-toggle="collapse" data-parent="#accordion" href="#person6" aria-expanded="true" aria-controls="person6" >
  1447.  
  1448. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/11349381?1622646027" style="max-height: 60px; max-width: 60px; margin-top: -1.8em; margin-left: -3.5em" class="p-1 border-1 rounded-0 btn btn-outline-primary">
  1449.  
  1450. </a>
  1451. </div>
  1452.  
  1453. <!-- name -->
  1454.  
  1455. <div class="col-lg-6 m-0 col-sm-6 mt-3">
  1456. <span style="margin-top: -5em"><a data-toggle="collapse" data-parent="#accordion" href="#person6" aria-expanded="true" aria-controls="person6" style="color: #000; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">any name</a></span>
  1457. </div>
  1458.  
  1459. </div>
  1460.  
  1461. </div>
  1462.  
  1463. <!-- i would not recommend adding more unless u kno what ur doing lol.... maybe ask me because we'd need another collapse for that -->
  1464. </div>
  1465. <!-- yay -->
  1466.  
  1467.  
  1468. <!-- end -->
  1469.  
  1470. </div>
  1471. <p style="text-align: center"><a href="/micro-wave" target=_blank><i class="fas fa-microwave"></i></a></p>
  1472. </div>
  1473.  
  1474.  
  1475. <!-- end character buttons -->
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!