API tools faq
paste
Advertisement
LeafJelly

Celestial Character Code - Accent Color

LeafJelly
Nov 20th, 2022 (edited)
1,008
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.74 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--------------------------------------------
  2.    Free to Use- Celestial Character Code
  3.        Accent Color Theme
  4.        By Leaf Jelly
  5.  
  6. Use ctrl+F and replace all to easily change all of the colors
  7. Accent Color: #5F3CBE
  8.    Symbols Colors
  9. Gold: #C2954F
  10. Light Gold: #CFB976
  11.  
  12.        Rules
  13. 1. DO NOT REMOVE credits
  14. 2. DO NOT redistribute purchased codes
  15. 3. Turn off WYSIWYG before using my HTML codes and while editing, it'll break otherwise
  16. 4. You can modify and frankestein my codes with credit to all the source codes, and only if the other coders allow it.
  17. 5. You may NOT redistribute frankesteined codes under your own name, claiming it as your own work. Copy and pasting parts of my code without credit is theft, and takes advantage of my work that's provided for free.
  18. 6.You're allowed to heavily modify my codes, as long as credit to me stays on the page. If the credit breaks, feel free to write it in somewhere instead or at the bottom.
  19. --------------------------------------------->
  20. <div class="col-12 p-3 py-4 mx-auto" style="font-family:Garamond; font-size:1em;"><div class="row no-gutters">
  21.    
  22. <div class="col-12 col-lg-3 my-2 py-2 h-100 order-2 order-lg-1" style="top:5px; position:sticky"><div class="text-center mx-auto">
  23. <!-------Character Image, must be square-------
  24.  
  25.   Replace the URL with a Image Url/Address
  26.  
  27. ----------------------------------------------->
  28.     <img class="rounded-circle my-2 bg-faded" src="
  29.    
  30.    https://i.psnprofiles.com/guides/13126/5af617.png
  31.    
  32.    " style="height:200px;width:200px;border:1px solid #CFB976;" >
  33.    
  34. <!--------Font Awesome Decorations-------------
  35. Change the symbols with the fa-icon-name-here using https://fontawesome.com/
  36. fad means font awesome duotone. if you want it in the other weights, change the d in fad to the first letter of the other weight.
  37.  
  38. The avaliable weights from thicknest to thinnest are below (except duotone is 2 tones)
  39. fas - solid   far - regular   fal - light   fat - thin   fad- duotone
  40. ----------------------------------------------->    
  41.     <div class="col-12" style="color:#C2954F">
  42.         <i class="fas fa-star" style="position:absolute; bottom:-5px; margin:0px -10px; font-size:20px; color:#CFB976"></i>
  43.         <i class="fas fa-star" style="position:absolute; bottom:15px; margin:0px -60px; font-size:15px; color:#C2954F"></i>
  44.         <i class="fas fa-star" style="position:absolute; bottom:15px; margin:0px 40px; font-size:15px; color:#C2954F"></i>
  45.         <i class="fas fa-star" style="position:absolute; bottom:50px; margin:0px -100px; font-size:20px; color:#C2954F"></i>
  46.         <i class="fas fa-star" style="position:absolute; bottom:50px; margin:0px 75px; font-size:20px; color:#C2954F"></i>
  47.         <i class="fas fa-moon" style="position:absolute; bottom:100px; margin:0px -107px; font-size:25px; color:#CFB976"></i>
  48.         <i class="fas fa-sun" style="position:absolute; bottom:100px; margin:0px 85px; font-size:25px; color:#CFB976"></i>
  49.        
  50.         <i class="fas fa-star" style="position:absolute; bottom:160px; margin:0px -90px; font-size:12px; color:#C2954F"></i>
  51.         <i class="fas fa-star" style="position:absolute; bottom:160px; margin:0px 75px; font-size:12px; color:#C2954F"></i>
  52.         <i class="fas fa-star" style="position:absolute; bottom:188px; margin:0px -60px; font-size:15px; color:#CFB976"></i>
  53.         <i class="fas fa-star" style="position:absolute; bottom:188px; margin:0px 40px; font-size:15px; color:#CFB976"></i>
  54.         <i class="fas fa-moon-over-sun" style="position:absolute; bottom:200px; margin:0px -10px; font-size:22px; color:#"></i>
  55.     </div>
  56.    
  57. <!----------------------------------
  58.  
  59.        Title or Quote
  60.  
  61. ---------------------------------->    
  62. <div class="col-8 mx-auto my-2" style="font-size:1.2em;border-bottom:1px solid #5F3CBE;"><i>
  63.     Night Incarnate
  64. </i></div>
  65.  
  66. <!----------------------------------
  67.  
  68.        Basic Stats
  69.  
  70. ---------------------------------->      
  71. <div class="col-12 card bg-faded rounded-0 p-0 py-2 mx-auto" style="width:300px;border:1px solid #5F3CBE;"><div class="row no-gutters">
  72. <div class="col-5 p-0 text-right text-muted">
  73.     Name
  74.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  75.     Character Name
  76. </div>
  77.  
  78. <div class="col-5 p-0 text-right text-muted">
  79.     Nicknames
  80.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  81.     Content, Content, Content
  82. </div>
  83.  
  84. <div class="col-5 p-0 text-right text-muted">
  85.     Age
  86.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  87.     Content
  88. </div>
  89.  
  90. <div class="col-5 p-0 text-right text-muted">
  91.     Pronouns
  92.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  93.     Content, Content , Content
  94. </div>
  95.  
  96. <div class="col-5 p-0 text-right text-muted">
  97.     Gender
  98.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  99.     Content Content
  100. </div>
  101.  
  102. <div class="col-5 p-0 text-right text-muted">
  103.     Sexuality
  104.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  105.     Content
  106. </div>
  107.  
  108. <div class="col-5 p-0 text-right text-muted">
  109.     Height
  110.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  111.     Content
  112. </div>
  113.  
  114. <div class="col-5 p-0 text-right text-muted">
  115.     Alignment
  116.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  117.     Content
  118. </div>
  119.  
  120. <div class="col-5 p-0 text-right text-muted">
  121.     Race/Species
  122.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  123.     Content
  124. </div>
  125.  
  126. <div class="col-5 p-0 text-right text-muted">
  127.     Occupation
  128.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  129.     Content
  130. </div>
  131.  
  132. <div class="col-5 p-0 text-right text-muted">
  133.     Affiliation
  134.     <i class="fal px-1 fa-angles-right"></i></div><div class="col-7 pl-1 text-left">
  135.     Content
  136. </div>
  137.  
  138. <!-----Copy and Paste above here for more----->  
  139. </div></div>
  140.  
  141. <!----------------------------------
  142.  
  143.        Music Player
  144. Replaced the ID_HERE with the youtube video ID.
  145. You can find this by clicking on the share button then copy and pasting the string of numbers and letters after the https://youtu.be/ID_HERE
  146. ---------------------------------->  
  147. <div class="col-12 mx-auto" style="width:300px"><div class="card border-0 p-0 rounded-0">
  148.     <div class="row no-gutters mb-0"><div class="col-2 p-1">
  149.     <a class="p-0 mt-2 btn melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  150.     <!---- Youtube ID ----->
  151.      <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100"
  152.     src="
  153.    
  154.     https://www.youtube-nocookie.com/embed/ID_HERE
  155.    
  156.     " frameborder="0"></iframe>
  157.       <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i></a></div>
  158.      
  159.      <!--- line --->
  160.      <div class="col ml-2 my-auto" style="height:1px;border-bottom:1px solid #999"></div>
  161.      
  162.      <!--- SONG INFO --->
  163.      <div class="col-7 p-1 text-center mt-1">
  164.         <div class="text-truncate">
  165.          Song Name - Artist
  166.         </div>
  167. </div></div></div></div>
  168.  
  169. <div class="col-8 mx-auto mb-2" style="border-top:1px solid #5F3CBE;"></div>
  170. </div></div>
  171.  
  172.  
  173. <!-------->
  174. <div class="col-12 col-lg-9 my-1 my-lg-0 mx-auto px-0 px-lg-2 order-1 order-lg-2"><div class="row no-gutters">
  175. <div class="col-8 mx-auto" style="border-top:1px solid #5F3CBE;"></div>
  176. <!-----Divider------>
  177. <div class="col-12 mx-auto py-2 text-center row no-gutters" style="color:#5F3CBE"><div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div>
  178.     <i class="fal fa-moon px-3"></i>
  179. <div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div></div>    
  180. <!----------------------------------
  181.  
  182.        Moodboard
  183. Replace the URLs with a Image Url/Address
  184.  
  185. ---------------------------------->
  186. <div class="col-12 p-1 my-1 mx-auto"><div class="row no-gutters">
  187.  
  188. <!--------Image 1------------>
  189.     <div class="col-3 p-1"><div style="height:100px;background-repeat:no-repeat;background-size:cover; background-image: url(
  190.    
  191.    https://i.pinimg.com/736x/04/7f/1c/047f1c8d188e66d49e837505712dce69.jpg
  192.    
  193.    ); background-position:center;"></div></div>
  194.  
  195. <!--------Image 2------------>
  196.     <div class="col-3 p-1"><div style="height:100px;background-repeat:no-repeat;background-size:cover; background-image: url(
  197.    
  198.    https://images.unsplash.com/photo-1496748161186-63985e911efc?fit=max&fm=jpg&ixid=MXwzNTY3MHwwfDF8YWxsfHx8fHx8fHw&ixlib=rb-1.2.1&q=75&w=720&utm_medium=referral&utm_source=vocal.media
  199.    
  200.    ); background-position:center;"></div></div>
  201.  
  202. <!--------Image 3------------>
  203.     <div class="col-3 p-1"><div style="height:100px;background-repeat:no-repeat;background-size:cover; background-image: url(
  204.    
  205.    https://images.squarespace-cdn.com/content/v1/5c59d36f9b8fe839e7009e6e/1550865327209-RBT5TR8L5HUH1G630SPQ/amethyst+brazil+%281%29.jpg
  206.    
  207.    ); background-position:center;"></div></div>
  208.  
  209. <!--------Image 4------------>
  210.     <div class="col-3 p-1"><div style="height:100px;background-repeat:no-repeat;background-size:cover; background-image: url(
  211.    
  212.    https://lakecity.com/wp-content/uploads/milky-way-984050_1920.jpg
  213.    
  214.    ); background-position:center;"></div></div>
  215.    
  216. </div></div>
  217.    
  218. <!----------------------------------
  219.  
  220.        About Section / Text Blurb
  221.  
  222. ---------------------------------->
  223. <div class="col-12 col-lg-7 p-2 "><div class="card bg-faded border-0 rounded-0 p-3 h-100"><div class="my-auto">
  224.     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  225.         Write about the Character here. Paragraphs Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
  226.     </p>
  227.  
  228.     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  229.         Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
  230.     </p>
  231.    
  232.     <!----------Copy and paste above here for more paragraphs---------------------->
  233. </div></div></div>
  234.  
  235.  
  236. <div class="col-12 col-lg-5  p-1 pr-2"><div class="card bg-faded border-0 rounded-0 p-2" style="height:100%">
  237. <div class="col mx-auto text-center" style="color:#5F3CBE"><div class="row no-gutters"><div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div>
  238. <!----------------------------------
  239.  
  240.        Trivia
  241.  
  242. ---------------------------------->      
  243. <p class="px-2 text-uppercase">
  244.     Trivia
  245. </p>
  246.  
  247. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div></div></div>
  248. <ul class="h-100">
  249.      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  250.      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  251.      <li>Aliquam tincidunt mauris eu risus.</li>
  252.      <li>Vestibulum auctor dapibus neque.</li>
  253.      <li>Nunc dignissim risus id metus.</li>
  254.    
  255.     <!-----Copy and Paste Above here for more------>
  256. </ul>
  257. </div></div>
  258.  
  259.  
  260. <div class="col-12 col-lg-6  p-2 pr-2"><div class="card bg-faded border-0 rounded-0 p-2" style="max-height:240px; overflow:auto">
  261. <div class="col mx-auto text-center" style="color:#5F3CBE"><div class="row no-gutters"><div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div>
  262. <!----------------------------------
  263.  
  264.        Powers
  265.  
  266. You can change the current symbols, for example: fa-eye to fa-icon-name-here using https://fontawesome.com/
  267. Search their website for the symbol you want, then change the text after fa- to the symbols name.
  268.  
  269. ---------------------------------->  
  270. <p class="px-2 text-uppercase">
  271.     Powers
  272. </p>
  273.  
  274. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div></div></div>
  275. <ul class="pl-3 m-0" style="list-style-type:none">
  276.    
  277. <!------- Skill 1 ------------>    
  278. <div class="row no-gutters py-1">
  279.     <!------- Symbol-------->    
  280.     <i class="fad fa-eye fa-3x" style="position:absolute;opacity:.7; margin:-10px 20px; color:#5F3CBE"></i>
  281.     <!------- Text -------->
  282.     <p><strong>
  283.         Clairvoyance &mdash;
  284.     </strong>
  285.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p></div>
  286.  
  287. <!------- Skill 2 ------------>    
  288. <div class="row no-gutters py-1">
  289.     <!------- Symbol-------->    
  290.     <i class="fad fa-moon-stars fa-3x" style="position:absolute;opacity:.7; margin:-10px 30px; color:#5F3CBE"></i>
  291.     <!------- Text -------->
  292.     <p><strong>
  293.         Umbrakinesis &mdash;
  294.     </strong>
  295.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p></div>
  296.  
  297. <!------- Skill 3 ------------>    
  298. <div class="row no-gutters py-1">
  299.     <!------- Symbol-------->    
  300.     <i class="fad fa-hand-sparkles fa-3x" style="position:absolute;opacity:.7; margin:-10px 20px; color:#5F3CBE"></i>
  301.     <!------- Text -------->
  302.     <p><strong>
  303.         Make Sparkles From Hand &mdash;
  304.     </strong>
  305.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p></div>
  306.    
  307. <!-----Copy and Paste Above here for more------>
  308. </div>
  309.  
  310.  
  311. <!----------------------------------
  312.  
  313.        Personality Silders
  314.    
  315. Change the width:50% to move the symbol left or right.
  316. 0% to the far left. 100% to the far right
  317. Change the symbols using FontAwesome
  318. ---------------------------------->
  319. <div class="col-12 py-2 px-0 "><div class="card bg-faded border-0 rounded-0 p-2 text-center"><div class="row no-gutters">
  320. <!-----------Bar 1---------->
  321. <div class="col-12 p-1 mx-auto row no-gutters">
  322. <span class="col-3">Introvert</span>
  323.     <div class="progress col m-2" style="height:2px;overflow:visible">
  324.     <div class="progress-bar bg-transparent" style="
  325.    
  326.        width:50%
  327.    
  328.    "></div>
  329.     <div  style="margin:-6px -7px; color:#5F3CBE">
  330.         <!-------Symbol------->
  331.         <i class="fa-solid fa-moon fa-lg"></i></div></div>
  332. <span class="col-3">Extrovert</span>    
  333. </div>
  334.  
  335. <!-----------Bar 2---------->
  336. <div class="col-12 p-1 mx-auto row no-gutters">
  337. <span class="col-3">Calculated</span>
  338.     <div class="progress col m-2" style="height:2px;overflow:visible">
  339.     <div class="progress-bar bg-transparent" style="
  340.    
  341.        width:50%
  342.    
  343.    "></div>
  344.     <div  style="margin:-6px -7px; color:#5F3CBE">
  345.         <!-------Symbol------->
  346.         <i class="fa-solid fa-sparkles fa-lg"></i></div></div>
  347. <span class="col-3">Intuitive</span>    
  348. </div>
  349.  
  350. <!-----------Bar 3---------->
  351. <div class="col-12 p-1 mx-auto row no-gutters">
  352. <span class="col-3">Polite</span>
  353.     <div class="progress col m-2" style="height:2px;overflow:visible">
  354.     <div class="progress-bar bg-transparent" style="
  355.    
  356.        width:50%
  357.    
  358.    "></div>
  359.     <div  style="margin:-6px -7px; color:#5F3CBE">
  360.         <!-------Symbol------->
  361.         <i class="fa-solid fa-stars fa-lg"></i></div></div>
  362. <span class="col-3">Blunt</span>    
  363. </div>
  364.  
  365. <!-----------Bar 4---------->
  366. <div class="col-12 p-1 mx-auto row no-gutters">
  367. <span class="col-3">Rigid</span>
  368.     <div class="progress col m-2" style="height:2px;overflow:visible">
  369.     <div class="progress-bar bg-transparent" style="
  370.    
  371.        width:50%
  372.    
  373.    "></div>
  374.     <div  style="margin:-6px -7px; color:#5F3CBE">
  375.         <!-------Symbol------->
  376.         <i class="fa-solid fa-moon-over-sun fa-lg"></i></div></div>
  377. <span class="col-3">Flexible</span>    
  378. </div>
  379.  
  380. <!-----------Bar 5---------->
  381. <div class="col-12 p-1 mx-auto row no-gutters">
  382. <span class="col-3">Deceptive</span>
  383.     <div class="progress col m-2" style="height:2px;overflow:visible">
  384.     <div class="progress-bar bg-transparent" style="
  385.    
  386.        width:50%
  387.    
  388.    "></div>
  389.     <div  style="margin:-6px -7px; color:#5F3CBE">
  390.         <!-------Symbol------->
  391.         <i class="fa-solid fa-stars fa-lg"></i></div></div>
  392. <span class="col-3">Sincere</span>    
  393. </div>
  394.  
  395. <!-----------Bar 6---------->
  396. <div class="col-12 p-1 mx-auto row no-gutters">
  397. <span class="col-3">Pessimistic</span>
  398.     <div class="progress col m-2" style="height:2px;overflow:visible">
  399.     <div class="progress-bar bg-transparent" style="
  400.    
  401.        width:50%
  402.    
  403.    "></div>
  404.     <div  style="margin:-6px -7px; color:#5F3CBE">
  405.         <!-------Symbol------->
  406.         <i class="fa-solid fa-sparkles fa-lg"></i></div></div>
  407. <span class="col-3">Optimistic</span>    
  408. </div>
  409.  
  410. <!-----------Bar 7---------->
  411. <div class="col-12 p-1 mx-auto row no-gutters">
  412. <span class="col-3">Kind</span>
  413.     <div class="progress col m-2" style="height:2px;overflow:visible">
  414.     <div class="progress-bar bg-transparent" style="
  415.    
  416.        width:50%
  417.    
  418.    "></div>
  419.     <div  style="margin:-6px -7px; color:#5F3CBE">
  420.         <!-------Symbol------->
  421.         <i class="fa-solid fa-moon fa-lg"></i></div></div>
  422. <span class="col-3">Cruel</span>    
  423. </div>
  424.  
  425. <!----------- Copy and paste above here for more bars ----------------->
  426. </div></div></div>
  427.  
  428. </div>
  429.  
  430. <div class="col-12 col-lg-6"><div class="row no-gutters">
  431. <div class="col-12 col-lg-6 p-2 m-0"><div class="card bg-faded border-0 rounded-0 p-2 h-100" style="max-height:170px; overflow:auto">
  432. <div class="col mx-auto text-center" style="color:#5F3CBE"><div class="row no-gutters">
  433. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div>
  434. <!----------------------------------
  435.  
  436.        Likes
  437.  
  438. The checkmark symbols can be changed using fontawesome
  439. change fa-check to whatever you want using the websites symbol names.
  440. ---------------------------------->    
  441. <p class="px-2 text-uppercase">
  442.     Likes
  443. </p>
  444. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div></div></div>
  445. <ul class="pl-3 m-0 h-100" style="list-style-type:none">
  446.      <li><i class="far fa-check fa-sm mr-1"></i>
  447.         One
  448.      </li>
  449.      
  450.      <li><i class="far fa-check fa-sm mr-1"></i>
  451.         Two
  452.      </li>
  453.      
  454.      <li><i class="far fa-check fa-sm mr-1"></i>
  455.         Three
  456.      </li>
  457.      
  458.      <li><i class="far fa-check fa-sm mr-1"></i>
  459.         Four
  460.      </li>
  461.      
  462.      <li><i class="far fa-check fa-sm mr-1"></i>
  463.         Five
  464.      </li>
  465.      
  466.      <li><i class="far fa-check fa-sm mr-1"></i>
  467.         six
  468.      </li>
  469.      
  470.    
  471.     <!-----Copy and Paste Above here for more------>
  472. </ul>
  473. </div></div>
  474.  
  475.  
  476. <div class="col-12 col-lg-6 p-2"><div class="card bg-faded border-0 rounded-0 p-2 h-100"  style="max-height:170px; overflow:auto">
  477. <div class="col mx-auto text-center" style="color:#5F3CBE"><div class="row no-gutters">
  478. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div>
  479. <!----------------------------------
  480.  
  481.        Dislike
  482.  
  483. The checkmark symbols can be changed using fontawesome
  484. change fa-check to whatever you want using the websites symbol names.
  485. ---------------------------------->  
  486. <p class="px-2 text-uppercase">
  487.     Disikes
  488. </p>
  489. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div></div></div>
  490. <ul class="pl-3 m-0 h-100" style="list-style-type:none">
  491.      <li><i class="far fa-xmark fa-sm mr-1"></i>
  492.         One
  493.      </li>
  494.      
  495.      <li><i class="far fa-xmark fa-sm mr-1"></i>
  496.         Two
  497.      </li>
  498.      
  499.      <li><i class="far fa-xmark fa-sm mr-1"></i>
  500.         Three
  501.      </li>
  502.      
  503.      <li><i class="far fa-xmark fa-sm mr-1"></i>
  504.         Four
  505.      </li>
  506.      
  507.      <li><i class="far fa-xmark fa-sm mr-1"></i>
  508.         Five
  509.      </li>
  510.      
  511.      <li><i class="far fa-xmark fa-sm mr-1"></i>
  512.         six
  513.      </li>
  514.      
  515.     <!-----Copy and Paste Above here for more------>
  516. </ul>
  517. </div></div>
  518.  
  519. <div class="col-12 p-2"><div class="card bg-faded border-0 rounded-0 p-2"  style="max-height:290px; overflow:auto">
  520. <div class="col mx-auto text-center" style="color:#5F3CBE"><div class="row no-gutters"><div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div>
  521. <!----------------------------------
  522.  
  523.        Design Notes
  524.  
  525. ---------------------------------->
  526. <p class="px-2 text-uppercase">
  527.     Design Notes
  528. </p>
  529. <div class="col mt-2" style="border-top:1px solid #5F3CBE;"></div></div></div>
  530. <ul class=" h-100">
  531.      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  532.      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  533.      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.</li>
  534.      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc</li>
  535.      
  536.     <!-----Copy and Paste Above here for more------>
  537. </ul>
  538.  
  539. <!----------------------------------
  540.  
  541.        Color Palete
  542.  
  543. Change the background #Hex Codes to change the color.
  544. You can remove or add more colors by deleteing/copy and pasting1 line of code
  545. ---------------------------------->
  546. <div class="col-12 p-0 mb-2"><div class="row no-gutters">
  547.      <div class="col p-3" style="background: #140E30"></div>
  548.      <div class="col p-3" style="background: #2C2B40"></div>
  549.      <div class="col p-3" style="background: #C4B981"></div>
  550.      <div class="col p-3" style="background: #ECE2A1"></div>
  551.      <div class="col p-3" style="background: #9440BE"></div>
  552.      
  553.     <!-------Copy and paste above here for more colors------->
  554. </div></div></div></div>
  555. </div></div>
  556.  
  557.  
  558.  
  559. <!----------------------------------
  560.  
  561.        Background or Story
  562. Delete this section if you don't want it
  563.  
  564. ---------------------------------->
  565. <div class="col-10 mx-auto py-2 text-center row no-gutters" style="color:#5F3CBE"><div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div>
  566.     <i class="fal fa-book-sparkles px-3"></i>
  567. <div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div></div>
  568. <div class="col-12 p-1 pr-2"><div class="card bg-faded border-0 rounded-0 py-2 px-3" style="height:100%">
  569.  
  570.  
  571. <!------ Story Section 1 Start ---------->
  572. <div class="col text-left my-2">
  573. <div class="row no-gutters text-muted"><hr class="col-1 mt-2"><h4 class="mx-3"><strong>
  574.     <!------- Symbol -------->
  575.     <i class="fad fa-clouds-moon px-2"></i>
  576.    Subheader 1
  577.  
  578. </strong></h4><hr class="col mt-2">
  579. </div>
  580.     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  581.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus fermentum dolor, vitae gravida nisi pharetra sed. Etiam non massa ac lectus iaculis congue et ut velit. Curabitur sit amet eleifend tellus. Vivamus dignissim nibh quis fringilla pharetra. Proin sapien lectus, bibendum sed rhoncus id, vestibulum sed mi. Phasellus hendrerit sit amet velit eget placerat. Maecenas volutpat nulla erat, vitae volutpat neque fermentum eget. Sed ut mauris non neque suscipit facilisis ut at tortor.
  582.      </p>
  583.      
  584.      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  585.         Cras tempus tortor vel urna fermentum porta. Proin in accumsan lacus, sed placerat lectus. Suspendisse erat enim, facilisis vitae vulputate non, dapibus elementum velit. Pellentesque in ultrices nulla. Donec vel felis erat. Nulla facilisi. Suspendisse nec augue diam. Maecenas suscipit laoreet viverra. Donec placerat posuere nulla, vitae rhoncus orci. In porttitor tempor turpis, eu gravida tortor tempor rutrum. Donec vestibulum, dolor quis sagittis luctus, sapien nulla porta sem, nec elementum est felis ut ex. Cras blandit dapibus tellus, in sagittis mi pulvinar at. Sed scelerisque pharetra massa, tincidunt suscipit ligula mollis a. Maecenas et varius mi, ac sodales neque. Aliquam lacinia lacinia tellus.
  586.      </p>
  587.      
  588.      <!-----Copy and Paste Above here for more paragraphs------>
  589. </div>
  590. <!------ Story Section 1 END---------->
  591.  
  592. <!------ Story Section 2 start ---------->
  593. <div class="col text-left my-2">
  594. <div class="row no-gutters text-muted"><hr class="col-1 mt-2"><h4 class="mx-3"><strong>
  595.     <!------- Symbol -------->
  596.     <i class="fad fa-moon-over-sun px-2"></i>
  597.    Subheader 2
  598.  
  599. </strong></h4><hr class="col mt-2">
  600. </div>
  601.     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  602.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus fermentum dolor, vitae gravida nisi pharetra sed. Etiam non massa ac lectus iaculis congue et ut velit. Curabitur sit amet eleifend tellus. Vivamus dignissim nibh quis fringilla pharetra. Proin sapien lectus, bibendum sed rhoncus id, vestibulum sed mi. Phasellus hendrerit sit amet velit eget placerat. Maecenas volutpat nulla erat, vitae volutpat neque fermentum eget. Sed ut mauris non neque suscipit facilisis ut at tortor.Cras tempus tortor vel urna fermentum porta. Proin in accumsan lacus, sed placerat lectus. Suspendisse erat enim, facilisis vitae vulputate non, dapibus elementum velit. Pellentesque in ultrices nulla. Donec vel felis erat. Nulla facilisi. Suspendisse nec augue diam. Maecenas suscipit laoreet viverra. Donec placerat posuere nulla, vitae rhoncus orci. In porttitor tempor turpis, eu gravida tortor tempor rutrum.
  603.      
  604.      <!-----Copy and Paste Above here for more paragraphs------>
  605. </div>
  606. <!------ Story Section 2 END ---------->
  607.  
  608. <!------ Story Section 3 start ---------->
  609. <div class="col text-left my-2">
  610. <div class="row no-gutters text-muted"><hr class="col-1 mt-2"><h4 class="mx-3"><strong>
  611.     <!------- Symbol -------->
  612.     <i class="fad fa-hand-sparkles px-2"></i>
  613.    Subheader 3
  614.  
  615. </strong></h4><hr class="col mt-2">
  616. </div>
  617.     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  618.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus fermentum dolor, vitae gravida nisi pharetra sed. Etiam non massa ac lectus iaculis congue et ut velit. Curabitur sit amet eleifend tellus. Vivamus dignissim nibh quis fringilla pharetra. Proin sapien lectus, bibendum sed rhoncus id, vestibulum sed mi. Phasellus hendrerit sit amet velit eget placerat. Maecenas volutpat nulla erat, vitae volutpat neque fermentum eget. Sed ut mauris non neque suscipit facilisis ut at tortor.
  619.      </p>
  620.      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  621.         Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
  622.      </p>
  623.      
  624.      <!-----Copy and Paste Above here for more paragraphs------>
  625. </div>
  626. <!------ Story Section 3 END ---------->
  627.  
  628.  
  629. <!----------------- Copy and paste above here for more Sections ----------------------->
  630. </div></div>
  631. <!---- Background/Story End ------>
  632.  
  633.  
  634.  
  635. <!-----Divider------>
  636. <div class="col-10 mx-auto py-2 text-center row no-gutters" style="color:#5F3CBE"><div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div>
  637.     <i class="fal fa-users px-3"></i>
  638. <div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div></div>
  639.  
  640. <div class="col-12 p-2 pr-2"><div class="card bg-faded border-0 rounded-0 p-2"><div class="row no-gutters">
  641. <!----------------------------------
  642.  
  643.        Relationships
  644.  
  645. ---------------------------------->
  646.  
  647. <!---------- Relationship 1 Start -------------->
  648.     <div class="col-12 col-lg-4 px-2 text-center  mx-auto"><div>
  649.     <!--------TH Chara Page Link------>
  650.     <a href="URL_HERE" class="text-uppercase" style="color:#5F3CBE"><strong>
  651.        
  652.     <!-------Image, must be square-------
  653.        Replace the URL with a Image Url/Address
  654.    ----------------------------------------------->
  655.         <img class="card rounded-circle my-2 mx-auto " src="
  656.        
  657.        https://static.wikia.nocookie.net/hades_gamepedia_en/images/3/32/FP_Zagreus.png
  658.        
  659.        " width="150" height="150" >
  660.    
  661.     <!---- Name & Info------->
  662.         Character Name
  663.        
  664.     </strong></a><p>
  665.         <i class="fal fa-hand-holding-heart"></i>
  666.         Relationship Type
  667.    
  668.     </p><div class="justify-content-around">
  669.     <span><i class="fal fa-hourglass"></i>
  670.         Age
  671.    
  672.     </span><span><i class="fal fa-user"></i>
  673.         Pronouns
  674.        
  675.     </span></div> <hr class="my-1">
  676.    
  677.     <!---- Text ----->
  678.     <div style="max-height:200px; overflow:auto"><p>
  679.         This will scroll if you add a lot. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
  680.     </p></div>
  681.    
  682. </div></div>
  683. <!---------- Relationship 1 End ---------------->
  684.  
  685. <!---------- Relationship 2 Start -------------->
  686.     <div class="col-12 col-lg-4 px-2 text-center mx-auto"><div>
  687.     <!--------TH Chara Page Link------>
  688.     <a href="URL_HERE" class="text-uppercase" style="color:#5F3CBE"><strong>
  689.        
  690.     <!-------Image, must be square-------
  691.        Replace the URL with a Image Url/Address
  692.    ----------------------------------------------->
  693.         <img class="card rounded-circle my-2 mx-auto " src="
  694.        
  695.        https://static.wikia.nocookie.net/hades_gamepedia_en/images/0/0a/FP_Hades.png
  696.        
  697.        " width="150" height="150" >
  698.    
  699.     <!---- Name & Info------->
  700.         Character Name
  701.        
  702.     </strong></a><p>
  703.         <i class="fal fa-face-meh"></i>
  704.         Relationship Type
  705.    
  706.     </p><div class="justify-content-around">
  707.     <span><i class="fal fa-hourglass"></i>
  708.         Age
  709.    
  710.     </span><span><i class="fal fa-user"></i>
  711.         Pronouns
  712.        
  713.     </span></div> <hr class="my-1">
  714.    
  715.     <!---- Text ----->
  716.     <div style="max-height:200px; overflow:auto"><p>
  717.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
  718.     </p></div>
  719.    
  720. </div></div>
  721. <!---------- Relationship 2 End ---------------->
  722.  
  723. <!---------- Relationship 3 Start -------------->
  724.     <div class="col-12 col-lg-4 px-2 text-center  mx-auto"><div>
  725.     <!--------TH Chara Page Link------>
  726.     <a href="URL_HERE" class="text-uppercase" style="color:#5F3CBE"><strong>
  727.        
  728.     <!-------Image, must be square-------
  729.        Replace the URL with a Image Url/Address
  730.    ----------------------------------------------->
  731.         <img class="card rounded-circle my-2 mx-auto " src="
  732.        
  733.        https://static.wikia.nocookie.net/hades_gamepedia_en/images/d/de/FP_Thanatos.png
  734.        " width="150" height="150" >
  735.    
  736.     <!---- Name & Info------->
  737.         Character Name
  738.        
  739.     </strong></a><p>
  740.         <i class="fal fa-family"></i>
  741.         Relationship Type
  742.    
  743.     </p><div class="justify-content-around">
  744.     <span><i class="fal fa-hourglass"></i>
  745.         Age
  746.    
  747.     </span><span><i class="fal fa-user"></i>
  748.         Pronouns
  749.        
  750.     </span></div> <hr class="my-1">
  751.    
  752.     <!---- Text ----->
  753.     <div style="max-height:200px; overflow:auto"><p>
  754.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
  755.     </p></div>
  756.    
  757. </div></div>
  758. <!---------- Relationship 3 End ---------------->
  759.  
  760. <!----------------- Copy and Paste above here for more Relationship Sections ---------------------->
  761. </div></div></div>
  762.  
  763.  
  764. <!-----Divider------>
  765. <div class="col-12 mx-auto py-2 text-center row no-gutters" style="color:#5F3CBE"><div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div>
  766.     <i class="fal fa-sun px-3"></i>
  767. <div class="col mt-1" style="border-top:1px solid #5F3CBE;"></div></div>
  768. <!-----Divider------>
  769. <div class="col-8 mx-auto" style="border-top:1px solid #5F3CBE;"></div>
  770.  
  771. </div>
  772. <!-----CREDIT DO NOT REMOVE------>
  773. <div class="col-12 text-right mt-2"><a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly" class="tooltipster text-muted"><i class="fal fa-code fa-sm"></i></a></div>
  774. </div>
  775. <!---------------->
  776.  
  777.    
  778. </div></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!