API tools faq
paste
Advertisement
LeafJelly

Celestial Character Code - Bootstrap Colors

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