API tools faq
paste
Advertisement
Lareihia

Sunlit Meadow [TH]

Lareihia
Nov 14th, 2022 (edited)
2,713
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 75.46 KB | None | 1 0
raw download clone embed print report
  1. <!---
  2.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  3.  
  4.    SUNLIT MEADOW
  5.    2022 Code by Lairai, made for the November Coders' Quarters Challenge
  6.    F2U, do not redistribute as a paid code, do not remove the credit.
  7.  
  8.    This code is so long. There's so much stuff. Good luck.
  9.    Edit the code where indicated. If there's an issue with that, let me know,
  10.    but if you edit something else
  11.    e.g. by adding new boxes to the layout, increasing or decreasing the size of a section, adding new columns, etc.),
  12.    and it breaks, I'm not responsible and I recommend you copy and paste the code again to fix the issue.
  13.  
  14.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  15. ------------------->  
  16.  
  17.  
  18. <div class="container pt-5" style="font-size:12px;font-family:Georgia;color:#FDF5E7;letter-spacing:0.5px">
  19.  
  20.     <!---TOP BANNER WITH PROFILE IMAGE --->
  21.     <div class="p-1 row no-gutters justify-content-center" style="background:#DAA345;border-radius: 1em 1em 0 0;height:5em;color:#FDF5E7;overflow:hidden;filter:drop-shadow(0px 3px #9A670F);background-image:url(https://i.postimg.cc/d1K7nnnL/Texture-Yellow.png);background-repeat:repeat;background-size:35%">
  22.      
  23.     <!---LEFT FLOWERS --->
  24.     <div class="col-sm text-right hidden-md-down" style="line-height:5em;">
  25.       <span style="font-size:2em">
  26.         - - - - - - - - - - - - - - - - - - - - - - -
  27.       </span>
  28.       <i class="fa-regular fa-trillium fa-2x" style="transform:rotate(-30deg);color:#F2C77B"></i>
  29.       <i class="fa-regular fa-trillium fa-3x fa-fade" style="animation-duration: 10s;"></i>
  30.     </div>
  31.     <!---LEFT FLOWERS --->
  32.    
  33.     <div class="col-md-2 col-8 p-1 mx-auto"></div>
  34.    
  35.     <!---RIGHT FLOWERS --->
  36.     <div class="col-sm hidden-md-down" style="line-height:5em;">
  37.       <i class="fa-regular fa-trillium fa-3x fa-fade" style="animation-duration: 10s;"></i>
  38.       <i class="fa-regular fa-trillium fa-2x" style="transform:rotate(30deg);color:#F2C77B"></i>
  39.       <span style="font-size:2em">
  40.         - - - - - - - - - - - - - - - - - - - - - - -
  41.       </span>
  42.     </div>
  43.     <!---RIGHT FLOWERS --->
  44. </div>
  45.     <!---TOP BANNER WITH PROFILE IMAGE END --->
  46.    
  47. <!---
  48.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  49.    PROFILE IMAGE
  50.    This is where you put an image of your character.
  51.    The container is square so ideally crop out a part of the ref that is also square, so it fits nicely.
  52.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  53. ------------------->    
  54.    
  55. <!--- PROFILE IMAGE BOX--->
  56. <div class="col-md-2 col-8 p-1 mx-auto" style="background:#F2C77B;margin-top:-8em;border:0.5em solid #DAA345;border-radius:0.2em;filter:drop-shadow(0 3px #9A670F)">
  57.     <div class="p-1" style="border: 0.2em dashed #FDF5E7;border-radius:0.2em;">
  58.     <div class="p-1 m-auto" style="height:150px;background-image:url(
  59.    
  60.    https://cdn.pixabay.com/photo/2019/10/26/14/14/white-4579641_960_720.jpg
  61.    
  62.    );background-size:cover;border-radius:0.2em;"></div>
  63.     </div>
  64.     </div>  
  65.     <!--- PROFILE IMAGE BOX END--->
  66.  
  67. <!---
  68.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  69.    COLOR PALETTE
  70.    Replace the hex codes with codes of your character's colors.
  71.    Do not add more colors, the code will break.
  72.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  73. ------------------->
  74. <div class="hidden-md-up" style="margin-top:8em;"></div>
  75. <!--- COLOR PALETTE AND NAME SURNAME BOX --->
  76.     <div class="row no-gutters mb-3" style="margin-top:-6em">
  77.       <div class="col-md-5 col-12 row no-gutters">
  78.       <div class="col-2 mr-1 text-center" style="background:
  79.      
  80.      #533708
  81.      
  82.      "><i class="fa-regular fa-flower-tulip fa-2x my-3"></i></div>
  83.       <div class="col-2 mx-1 text-center" style="background:
  84.      
  85.      #9A670F
  86.      
  87.      "><i class="fa-regular fa-flower-tulip fa-2x my-3"></i></div>
  88.       <div class="col-2 mx-1 text-center" style="background:
  89.      
  90.      #DAA345
  91.      
  92.      "><i class="fa-regular fa-flower-tulip fa-2x my-3"></i></div>
  93.       <div class="col-2 mx-1 text-center" style="background:
  94.      
  95.      #F2C77B
  96.      
  97.      "><i class="fa-regular fa-flower-tulip fa-2x my-3"></i></div>
  98.       <div class="col-md col-2 ml-1 mr-2 text-center" style="background:
  99.      
  100.      #FDF5E7
  101.      
  102.      "><i class="fa-regular fa-flower-tulip fa-2x my-3"></i></div>  
  103.      
  104.       </div>
  105.       <div class="col-md-2 col-8 p-1 mx-auto"></div>
  106.       <div class="col-sm">
  107.      
  108.       <p class="p-1 text-center" style="font-size:2.3em;font-variant:small-caps;font-weight:bold;letter-spacing:0.1em;text-shadow:0 1px 0 #DAA345;color:#9A670F"><i class="fa-regular fa-flower hidden-md-down" style="color:#DAA345"></i>
  109. <!---
  110.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  111.    NAME
  112.    Add the name and surname. Do not remove the <span> brackets.
  113.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  114. ------------------->          
  115.        
  116.         <span style="color:#F2C77B;">
  117.         Name
  118.    
  119.         </span>
  120.        
  121.         Surname
  122.      
  123.       <i class="fa-regular fa-flower hidden-md-down" style="color:#DAA345"></i></p>
  124.      
  125.       </div>  
  126.     </div>
  127. <!--- COLOR PALETTE AND NAME SURNAME BOX END --->
  128.  
  129. <!---
  130.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  131.    NAVIGATION
  132.    Don't touch this section.
  133.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  134. ------------------->
  135. <!--- MAIN CONTAINER START --->
  136.     <div class="row no-gutters mt-4">
  137.    
  138.     <div class="col-md-3 col-11 py-1 pr-1 v-pills-tab nav nav-pills flex-column">
  139.     <a class="nav-link p-2 mb-2" style="background:#DAA345;border-radius: 0 0.2em 0.2em 0;filter:drop-shadow(0px 3px #9A670F);color:#FDF5E7;font-variant:small-caps;font-size:1.2em;letter-spacing:0.1em;" id="v-pills-one-tab" data-toggle="pill" href="#v-pills-one" role="tab" aria-controls="v-pills-one" aria-selected="true">
  140.      
  141.       <i class="fa-regular fa-flower fa-lg mr-2"></i>
  142.      
  143.       Basic information
  144.      
  145.       </a>
  146.     <a class="nav-link p-2 mb-2" style="background:#DAA345;border-radius: 0 0.2em 0.2em 0;filter:drop-shadow(0px 3px #9A670F);color:#FDF5E7;font-variant:small-caps;font-size:1.2em;letter-spacing:0.1em;" id="v-pills-two-tab" data-toggle="pill" href="#v-pills-two" role="tab" aria-controls="v-pills-two" aria-selected="true">
  147.      
  148.       <i class="fa-regular fa-flower-daffodil fa-lg mr-2"></i>
  149.      
  150.       Stats & Skills
  151.      
  152.      </a>  
  153.    <a class="nav-link p-2 mb-2" style="background:#DAA345;border-radius: 0 0.2em 0.2em 0;filter:drop-shadow(0px 3px #9A670F);color:#FDF5E7;font-variant:small-caps;font-size:1.2em;letter-spacing:0.1em;" id="v-pills-three-tab" data-toggle="pill" href="#v-pills-three" role="tab" aria-controls="v-pills-three" aria-selected="true">
  154.      
  155.       <i class="fa-regular fa-flower-tulip fa-lg mr-2"></i>
  156.      
  157.       Personality
  158.      
  159.       </a>    
  160.     <a class="nav-link p-2 mb-2" style="background:#DAA345;border-radius: 0 0.2em 0.2em 0;filter:drop-shadow(0px 3px #9A670F);color:#FDF5E7;font-variant:small-caps;font-size:1.2em;letter-spacing:0.1em;" id="v-pills-four-tab" data-toggle="pill" href="#v-pills-four" role="tab" aria-controls="v-pills-four" aria-selected="true">
  161.      
  162.       <i class="fa-regular fa-trillium fa-lg mr-2"></i>
  163.      
  164.       History
  165.      
  166.       </a>  
  167.     <a class="nav-link p-2 mb-2" style="background:#DAA345;border-radius: 0 0.2em 0.2em 0;filter:drop-shadow(0px 3px #9A670F);color:#FDF5E7;font-variant:small-caps;font-size:1.2em;letter-spacing:0.1em;" id="v-pills-five-tab" data-toggle="pill" href="#v-pills-five" role="tab" aria-controls="v-pills-five" aria-selected="true">
  168.      
  169.       <i class="fa-regular fa-seedling fa-lg mr-2"></i>
  170.      
  171.       Relationships
  172.      
  173.       </a>
  174.    
  175.     <!--- CODE CREDIT BOX --->
  176.     <div class="p-1" style="background:#FDF5E7;border:0.15em solid #DAA345;color:#DAA345">
  177.     <div class="p-1 text-center" style="background:#FDF5E7;border:0.2em dashed #F2C77B;border-top:0;border-bottom:0;">
  178.      
  179.       <a href="https://toyhou.se/Lairai" target="_Blank" style="color:#DAA345"><i class="fa fa-code fa-lg tooltipster" title="Code by Lairai"></i></a>
  180.      
  181.     </div></div>
  182.     <!--- CODE CREDIT BOX --->
  183.  
  184. <!---
  185.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  186.    QUOTE
  187.    Add a quote here. It can be shorter or longer, but the box expands, so keep that in mind.
  188.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  189. ------------------->    
  190.     <div class="p-2 mt-2 mb-3 font-italic" style="background:#533708;box-shadow:0 2px #DAA345;overflow:hidden !important;font-size:1.5em;background-image:url(https://i.postimg.cc/d1K7nnnL/Texture-Yellow.png);background-size:50%"><p style="text-shadow: 0 0px 5px #9A670F;color:#F2C77B">
  191.        
  192.     Look at the sky; I'm still here. I'll be alive next year. I can make something good..
  193.    
  194.     </p></div>
  195.     <!--- QUOTE BOX --->
  196.    
  197. <!---
  198.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  199.    INVENTORY
  200.    Replace the baguettes (both icons and text) with your character's items.
  201.    The recommended number is three items.
  202.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  203. ------------------->
  204.     <div class="p-1 mb-1 flex-fill" style="background:#FDF5E7;color:#533708;border-top:0.2em solid #DAA345">
  205.      
  206.     <p class="text-center mt-n4"><i class="fal fa-sack fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></p>  
  207.     <div class="row no-gutters mt-1" style="border-bottom:0.1em dashed #DAA345">
  208.       <div class="col-2 text-center">
  209.       <i class="fa-regular
  210.      
  211.      fa-baguette
  212.      
  213.      fa-2x my-2" style="color:#DAA345"></i>
  214.       </div>
  215.       <div class="col-md col-9"><div class="pl-1 m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#9A670F;">
  216.        
  217.       Baguette  
  218.        
  219.       </div><div class="pl-1 my-0" style="font-size:11px;">
  220.        
  221.       How tasty.
  222.        
  223.       </div></div></div>
  224.     <div class="row no-gutters mt-1" style="border-bottom:0.1em dashed #DAA345">
  225.         <div class="col-2 text-center">
  226.       <i class="fa-regular
  227.      
  228.      fa-baguette
  229.      
  230.      fa-2x my-2" style="color:#DAA345"></i>
  231.       </div>
  232.       <div class="col-md col-9"><div class="pl-1 m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#9A670F;">
  233.        
  234.       Another Baguette  
  235.        
  236.       </div><div class="pl-1 my-0" style="font-size:11px;">
  237.        
  238.       What a coincidence.
  239.        
  240.       </div></div>
  241.     </div>
  242.     <div class="row no-gutters mt-1" style="border-bottom:0.1em dashed #DAA345">
  243.       <div class="col-2 text-center">
  244.       <i class="fa-regular
  245.      
  246.      fa-baguette
  247.      
  248.      fa-2x my-2" style="color:#DAA345"></i>
  249.         </div><div class="col-md col-9"><div class="pl-1 m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#9A670F;">
  250.        
  251.       Oh wow this is yet Another Baguette  
  252.        
  253.       </div><div class="pl-1 my-0" style="font-size:11px;">
  254.        
  255.       Maybe they're a baker?
  256.        
  257.       </div></div></div></div>
  258.     <!--- INVENTORY --->
  259.     </div>
  260.    
  261.     <!--- right box --->
  262.     <div class="col-sm p-1">
  263.     <div class="p-1" style="background:#FDF5E7;border:0.15em solid #DAA345;color:#533708;">
  264.     <div class="p-1" style="background:#FDF5E7;border:0.2em dashed #F2C77B">
  265.    
  266.     <div class="tab-content" id="v-pills-tabContent">
  267.    
  268. <!---
  269.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  270.    BASIC INFORMATION TAB
  271.    This is the first tab, the one that is open by default.
  272.    Edit the text to add information about your character.
  273.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  274. ------------------->
  275.     <div class="tab-pane fade show active" id="v-pills-one" role="tabpanel" aria-labelledby="v-pills-one-tab">
  276.      
  277.     <div class="row no-gutters">
  278.     <div class="col-md-5 col-12 p-1">
  279.        
  280.     <div class="p-2 row no-gutters" style="overflow:hidden;border-bottom:0.1em solid #F2C77B;line-height:4px">
  281.     <div class="col-2"><i class="fal fa-signature fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9 text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  282.      
  283.         Name Surname
  284.        
  285.     </div></div>  
  286.     <div class="p-2 row no-gutters" style="overflow:hidden;border-bottom:0.1em solid #F2C77B;line-height:4px">
  287.     <div class="col-2"><i class="fal fa-birthday-cake fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9 text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  288.      
  289.         XX years
  290.        
  291.     </div></div>
  292.     <div class="p-2 row no-gutters" style="overflow:hidden;border-bottom:0.1em solid #F2C77B;line-height:4px">
  293.     <div class="col-2"><i class="fal fa-ruler fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9 text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  294.      
  295.         XXcm / Xft
  296.        
  297.     </div></div>
  298.     <div class="p-2 row no-gutters" style="overflow:hidden;border-bottom:0.1em solid #F2C77B;line-height:4px">
  299.     <div class="col-2"><i class="fal fa-venus-mars fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9  text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  300.      
  301.         Gender (They / them)
  302.        
  303.     </div></div>
  304.     <div class="p-2 row no-gutters" style="overflow:hidden;border-bottom:0.1em solid #F2C77B;line-height:4px">
  305.     <div class="col-2"><i class="fal fa-heart fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9 text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  306.      
  307.         Sexuality
  308.        
  309.     </div></div>
  310.     <div class="p-2 row no-gutters" style="overflow:hidden;border-bottom:0.1em solid #F2C77B;line-height:4px">
  311.     <div class="col-2"><i class="fal fa-dna fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9 text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  312.      
  313.         Species
  314.        
  315.     </div></div>
  316.     <div class="p-2 row no-gutters" style="overflow:hidden;line-height:4px">
  317.     <div class="col-2"><i class="fal fa-briefcase fa-2x rounded-circle fa-fw pt-2 mr-2" style="background:#DAA345;color:#FDF5E7;height:40px;width:40px;"></i></div><div class="col-md col-9 text-left my-auto" style="font-variant:small-caps;font-size:1.2em;">
  318.      
  319.         Occupation
  320.        
  321.     </div></div> </div>
  322.     <div class="col-md col-12 p-1">
  323. <!---
  324.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  325.    DESIGN NOTES
  326.    Add some design notes here.
  327.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  328. ------------------->      
  329.     <p class="p-1" style="font-size:2em;font-variant:small-caps;font-weight:bold;color:#9A670F"><i class="far fa-flower-tulip mr-2" style="color:#F2C77B;"></i>
  330.     <span style="color:#DAA345">Design</span> Notes
  331.     </p><div class="pl-5">
  332.     <p class="my-2"><i class="fa-regular fa-trillium mr-2" style="color:#DAA345"></i>
  333.    
  334.     Note about your character. You can make it shorter or longer, it's up to you.
  335.    
  336.     </p><p class="my-2"><i class="fa-regular fa-trillium mr-2" style="color:#DAA345"></i>
  337.    
  338.     Note about your character. You can make it shorter or longer, it's up to you.
  339.    
  340.     </p><p class="mt-2 mb-4"><i class="fa-regular fa-trillium mr-2" style="color:#DAA345"></i>
  341.    
  342.     Note about your character. You can make it shorter or longer, it's up to you.
  343.    
  344.     </p></div>
  345.  <!---
  346.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  347.    LIKES
  348.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  349. ------------------->    
  350.     <div class="row no-gutters justify-content-center">
  351.       <div class="col-md-5 col-sm px-2 py-1 rounded m-1" style="background:#DAA345;">
  352.       <i class="fa-regular fa-flower fa-3x" style="color:#FDF5E7;text-shadow:0 1px 0 #9A670F,0 2px 0 #9A670F;position:absolute;transform:rotate(-20deg);margin-top:-0.5em"></i>
  353.       <p class="pl-5 mt-0 mb-1" style="font-variant:small-caps;letter-spacing:0.6px;font-size:1.5em;font-weight:bold;color:#FDF5E7;text-shadow: 0 1px 0 #9A670F,0 2px 0 #9A670F;">Likes</p>
  354.      
  355.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  356.    
  357.     Short text
  358.    
  359.     </p>  
  360.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  361.    
  362.     Short text
  363.    
  364.     </p>
  365.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  366.    
  367.     Short text
  368.    
  369.     </p>
  370.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  371.    
  372.     Short text
  373.    
  374.     </p></div><div class="col-md-5 col-sm py-1 px-2 rounded m-1" style="background:#DAA345;">
  375. <!---
  376.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  377.    DISLIKES
  378.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  379. ------------------->        
  380.     <p class="text-center mt-0 mb-1" style="font-variant:small-caps;letter-spacing:0.6px;font-size:1.5em;font-weight:bold;color:#FDF5E7;text-shadow: 0 1px 0 #9A670F,0 2px 0 #9A670F;">Dislikes</p>
  381.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  382.    
  383.     Short text
  384.    
  385.     </p>  
  386.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  387.    
  388.     Short text
  389.    
  390.     </p>
  391.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  392.    
  393.     Short text
  394.    
  395.     </p>
  396.     <p class="mb-2 text-justify"><i class="fa-regular fa-trillium mr-1" style="color:#FDF5E7"></i>
  397.    
  398.     Short text
  399.    
  400.     </p><i class="fa-regular fa-flower fa-3x" style="color:#FDF5E7;text-shadow:0 1px 0 #9A670F,0 2px 0 #9A670F;position:absolute;transform:rotate(-20deg);margin-top:-0.5em;right:0"></i></div>
  401.     </div> <!---END OF ROW--->
  402.      
  403.     <p class="text-center mt-2">
  404.       <i class="fa-regular fa-flower-tulip fa-2x" style="color:#F2C77B"></i>
  405.       <i class="fa-regular fa-trillium fa-3x" style="color:#DAA345"></i>
  406.       <i class="fa-regular fa-flower-tulip fa-2x" style="color:#F2C77B"></i>  
  407.     </p></div></div></div>
  408.    
  409.    
  410. <!---
  411.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  412.    STATS TAB
  413.    Add the greatest strength first, then the greatest weakness.
  414.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  415. ------------------->
  416.     <div class="tab-pane fade" id="v-pills-two" role="tabpanel" aria-labelledby="v-pills-two-tab">
  417.    
  418.     <div class="row no-gutters">
  419.     <div class="col-md-6 col-12 p-2">
  420.    
  421.     <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">Greatest Strength</p>
  422.     <p class="text-justify">
  423.      
  424.       Vestibulum scelerisque elit vitae facilisis pretium. Integer et augue neque. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  425.      
  426.     </p>
  427.    
  428.     <p class="m-0 text-right" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">Greatest Weakness</p>
  429.     <p class="text-justify">
  430.      
  431.       Vestibulum scelerisque elit vitae facilisis pretium. Integer et augue neque. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  432.      
  433.     </p>
  434.     </div><div class="col-md-6 col-12"><div class="row no-gutters justify-content-between px-4 mt-2" >
  435.  
  436. <!---
  437.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  438.    STAT NUMBERS
  439.    Strength, Dexterity, Constitution, Wisdom, Intelligence, Charisma, in this order.
  440.    Edit only the percentages to fit your character's abilities.
  441.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  442. ------------------->        
  443.     <div class="col-md-5 col-sm my-auto" style="font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.6px">
  444.       <i class="fa-regular fa-shield-halved fa-lg mr-2 fa-fw"></i>
  445.       <span style="color:#DAA345">S</span>trength</div>
  446.       <div class="col-md-5 col-sm">
  447.       <div class="progress my-2 rounded" style="background:#9A670F"><div class="progress-bar" role="progressbar"   style="width:
  448.      
  450.      45%
  451.      
  453.      ;height:12px;background:#9A670F;border-right:5px solid #F2C77B"></div></div></div>
  454.     </div>
  455.     <div class="row no-gutters justify-content-between px-4" >
  456.      
  457.     <div class="col-md-5 col-sm my-auto" style="font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.6px">
  458.       <i class="fa-regular fa-wind fa-lg mr-2 fa-fw"></i>
  459.       <span style="color:#DAA345">D</span>exterity</div>
  460.       <div class="col-md-5 col-sm">
  461.       <div class="progress my-2 rounded" style="background:#DAA345"><div class="progress-bar" role="progressbar"   style="width:
  462.      
  464.      85%
  465.      
  467.      ;height:12px;background:#DAA345;border-right:5px solid #FDF5E7"></div></div></div>
  468.     </div>
  469.     <div class="row no-gutters justify-content-between px-4" >
  470.      
  471.     <div class="col-md-5 col-sm my-auto" style="font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.6px">
  472.       <i class="fa-regular fa-heart-pulse fa-lg mr-2 fa-fw"></i>
  473.       <span style="color:#DAA345">C</span>onstitution</div>
  474.       <div class="col-md-5 col-sm">
  475.       <div class="progress my-2 rounded" style="background:#9A670F"><div class="progress-bar" role="progressbar"   style="width:
  476.      
  478.      35%
  479.      
  481.      ;height:12px;background:#9A670F;border-right:5px solid #F2C77B"></div></div></div>
  482.     </div>
  483.     <div class="row no-gutters justify-content-between px-4" >
  484.      
  485.     <div class="col-md-5 col-sm my-auto" style="font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.6px">
  486.       <i class="fa-regular fa-head-side-brain fa-lg mr-2 fa-fw"></i>
  487.       <span style="color:#DAA345">W</span>isdom</div>
  488.       <div class="col-md-5 col-sm">
  489.       <div class="progress my-2 rounded" style="background:#DAA345"><div class="progress-bar" role="progressbar"   style="width:
  490.      
  492.      15%
  493.      
  495.      ;height:12px;background:#DAA345;border-right:5px solid #FDF5E7"></div></div></div>
  496.     </div>
  497.     <div class="row no-gutters justify-content-between px-4" >
  498.      
  499.     <div class="col-md-5 col-sm my-auto" style="font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.6px">
  500.       <i class="fa-regular fa-book-open fa-lg mr-2 fa-fw"></i>
  501.       <span style="color:#DAA345">I</span>ntelligence</div>
  502.       <div class="col-md-5 col-sm">
  503.       <div class="progress my-2 rounded" style="background:#9A670F"><div class="progress-bar" role="progressbar"   style="width:
  504.      
  506.      65%
  507.      
  509.      ;height:12px;background:#9A670F;border-right:5px solid #F2C77B"></div></div></div>
  510.     </div>
  511.     <div class="row no-gutters justify-content-between px-4" >
  512.      
  513.     <div class="col-md-5 col-sm my-auto" style="font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.6px">
  514.       <i class="fa-regular fa-cards fa-lg mr-2 fa-fw"></i>
  515.       <span style="color:#DAA345">C</span>harisma</div>
  516.       <div class="col-md-5 col-sm">
  517.       <div class="progress my-2 rounded" style="background:#DAA345"><div class="progress-bar" role="progressbar"   style="width:
  518.      
  520.      55%
  521.      
  523.      ;height:12px;background:#DAA345;border-right:5px solid #FDF5E7"></div></div></div>
  524.     </div></div></div>
  525.    
  526.     <!---DIVIDER--->
  527.     <div class="row no-gutters justify-content-center mt-2">
  528.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  529.       <div class="col-1 text-center"><i class="fa fa-flower fa-lg"></i></div>
  530.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  531.     </div>
  532.     <!---DIVIDER--->
  533.    
  534. <!---
  535.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  536.    INFORMATION
  537.    Replace the text where indicated.
  538.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  539. ------------------->    
  540.     <div class="row no-gutters">
  541.       <div class="col-md-4 col-12 py-1 pl-4 mr-2">
  542.         <div class="col-md col-sm" style="border-bottom:0.1em solid #F2C77B;">
  543.          
  544.         <span style="color:#9A670F">
  545.          
  546.         Lv. 1
  547.        
  548.         </span>
  549.        
  550.        
  551.         Warrior
  552.          
  553.         </div>
  554.         <div class="col-md col-sm text-right mb-1" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">Class</div>
  555.         <div class="col-md col-sm" style="border-bottom:0.1em solid #F2C77B;">
  556.          
  557.         Noble
  558.          
  559.         </div>
  560.         <div class="col-md col-sm text-right mb-1" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">Background</div>  
  561.         <div class="col-md col-sm" style="border-bottom:0.1em solid #F2C77B;">
  562.          
  563.         Baguette Good
  564.          
  565.         </div>
  566.         <div class="col-md col-sm text-right mb-1" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">Alignment</div>    
  567.         <div class="col-md col-sm" style="border-bottom:0.1em solid #F2C77B;">
  568.          
  569.         Proficiency one
  570.          
  571.         </div>
  572.         <div class="col-md col-sm text-right mb-1 py-1" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;"></div>  
  573.         <div class="col-md col-sm" style="border-bottom:0.1em solid #F2C77B;">
  574.          
  575.         Proficiency two
  576.          
  577.         </div><div class="col-md col-sm text-right mb-1" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">Proficiencies</div></div>
  578.    
  579.     <div class="col-md col-12 px-2 pt-1">
  580.    
  581.     <!---
  582.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  583.    SKILLS
  584.    Replace the "Skill name" with the skill names.
  585.    Use "fas" to make a solid clover.
  586.    Use "fal" to make an empty clover.
  587.    The clovers denote the character's mastery of the skill.
  588.    Replace the lorem ipsum with a short description of the skill.
  589.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  590. ------------------->  
  591.       <div class="row no-gutters">
  592.       <div class="col-2 p-1" style="background:#533708;filter:drop-shadow(0 2px 0 #DAA345)">
  593.       <div class="w-100 text-center pt-3 h-100" style="border:0.2em dashed #DAA345;border-top:0;border-bottom:0">
  594.         <i class="fal fa-flower-daffodil fa-fw fa-2x my-auto"style="color:#F2C77B"></i>
  595.        
  596.         </div></div><div class="col-9 col-md-3 pl-2 my-auto"><p style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">
  597.          
  598.           Skill name
  599.          
  600.           </p>
  601.           <i class="
  602.          
  603.          fas
  604.          
  605.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  606.           <i class="
  607.          
  608.          fas
  609.          
  610.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  611.           <i class="
  612.          
  613.          fas
  614.          
  615.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  616.           <i class="
  617.          
  618.          fal
  619.          
  620.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  621.           <i class="
  622.          
  623.          fal
  624.          
  625.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>      
  626.          
  627.         </div>
  628.         <div class="col-12 col-md pl-2 text-justify"><p style="font-size:11px;letter-spacing:0.15em;">
  629.          
  630.           Duis sed orci sit amet nisl fringilla ultrices. Mauris aliquet condimentum elit tristique fermentum. Pellentesque pellentesque arcu sem, at posuere lorem auctor id.
  631.          
  632.         </p>
  633.                
  634.     </div> </div>
  635.     <!-----------------SKILL BOX------------->  
  636.     <!-----------------SKILL BOX------------->  
  637.       <div class="row no-gutters">
  638.       <div class="col-2 p-1" style="background:#533708;filter:drop-shadow(0 2px 0 #DAA345)">
  639.       <div class="w-100 text-center pt-3 h-100" style="border:0.2em dashed #DAA345;border-top:0;border-bottom:0">
  640.        <i class="fal fa-flower-tulip fa-fw fa-2x my-auto"style="color:#F2C77B"></i>
  641.        
  642.         </div></div><div class="col-9 col-md-3 pl-2 my-auto"><p style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">
  643.          
  644.           Skill name
  645.          
  646.           </p>
  647.           <i class="
  648.          
  649.          fas
  650.          
  651.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  652.           <i class="
  653.          
  654.          fas
  655.          
  656.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  657.           <i class="
  658.          
  659.          fas
  660.          
  661.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  662.           <i class="
  663.          
  664.          fal
  665.          
  666.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  667.           <i class="
  668.          
  669.          fal
  670.          
  671.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>      
  672.          
  673.         </div>
  674.         <div class="col-12 col-md pl-2 text-justify">
  675.           <p style="font-size:11px;letter-spacing:0.15em;color:#DAA345">
  676.          
  677.           Duis sed orci sit amet nisl fringilla ultrices. Mauris aliquet condimentum elit tristique fermentum. Pellentesque pellentesque arcu sem, at posuere lorem auctor id.
  678.          
  679.           </p>
  680.                
  681.     </div> </div>
  682.     <!-----------------SKILL BOX------------->
  683.     <!-----------------SKILL BOX------------->  
  684.       <div class="row no-gutters">
  685.       <div class="col-2 p-1" style="background:#533708;filter:drop-shadow(0 2px 0 #DAA345)">
  686.       <div class="w-100 text-center pt-3 h-100" style="border:0.2em dashed #DAA345;border-top:0;border-bottom:0">
  687.        <i class="fal fa-seedling fa-fw fa-2x my-auto"style="color:#F2C77B"></i>
  688.        
  689.         </div></div><div class="col-9 col-md-3 pl-2 my-auto"><p style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;">
  690.          
  691.           Skill name
  692.          
  693.           </p>
  694.           <i class="
  695.          
  696.          fas
  697.          
  698.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  699.           <i class="
  700.          
  701.          fas
  702.          
  703.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  704.           <i class="
  705.          
  706.          fas
  707.          
  708.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  709.           <i class="
  710.          
  711.          fal
  712.          
  713.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>
  714.           <i class="
  715.          
  716.          fal
  717.          
  718.          fa-fw fa-clover fa-lg" style="color:#9A670F"></i>      
  719.          
  720.         </div>
  721.         <div class="col-12 col-md pl-2 text-justify">
  722.           <p style="font-size:11px;letter-spacing:0.15em;">
  723.          
  724.           Duis sed orci sit amet nisl fringilla ultrices. Mauris aliquet condimentum elit tristique fermentum. Pellentesque pellentesque arcu sem, at posuere lorem auctor id.
  725.          
  726.           </p>
  727.                
  728.     </div> </div>
  729.     <!-----------------SKILL BOX------------->
  730.     </div></div></div>
  731.     <!--- STATS TAB --->
  732.    
  733.    
  734. <!---
  735.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  736.    PERSONALITY TAB
  737.    Replace the Lorem Ipsum with Positive, Neutral and Negative trait descriptions.
  738.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  739. ------------------->
  740.     <div class="tab-pane fade" id="v-pills-three" role="tabpanel" aria-labelledby="v-pills-three-tab">
  741.           <div class="row no-gutters justify-content-center mt-2">
  742.            <div class="col-12 col-md-4 px-2">
  743.            <p class="text-center m-0"><i class="fa-regular fa-flower-tulip fa-lg"></i></p>
  744.            <p class="text-center m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345">Positive Traits</p>
  745.            <p class="text-justify mt-1">
  746.              
  747.              Donec in vulputate libero. Nullam posuere tortor arcu. Pellentesque non consequat ipsum. Vivamus at arcu nec leo vehicula dignissim. Aliquam posuere urna ut sem luctus rhoncus. Aenean ut sollicitudin sem. Maecenas in viverra mi. Mauris commodo nulla dolor, eget varius elit scelerisque at.
  748.              
  749.            </p></div>
  750.            <div class="col-12 col-md-4 px-2">
  751.             <p class="text-center m-0"><i class="fa-regular fa-seedling fa-lg"></i></p>
  752.            <p class="text-center m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345">Neutral Traits</p>
  753.            <p class="text-justify mt-1">
  754.              
  755.              Donec in vulputate libero. Nullam posuere tortor arcu. Pellentesque non consequat ipsum. Vivamus at arcu nec leo vehicula dignissim. Aliquam posuere urna ut sem luctus rhoncus. Aenean ut sollicitudin sem. Maecenas in viverra mi. Mauris commodo nulla dolor, eget varius elit scelerisque at.
  756.              
  757.            </p></div>
  758.            <div class="col-12 col-md-4 px-2">
  759.             <p class="text-center m-0"><i class="fa-regular fa-plant-wilt fa-lg"></i></p>
  760.            <p class="text-center m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345">Negative Traits</p>
  761.            <p class="text-justify mt-1">
  762.              
  763.              Donec in vulputate libero. Nullam posuere tortor arcu. Pellentesque non consequat ipsum. Vivamus at arcu nec leo vehicula dignissim. Aliquam posuere urna ut sem luctus rhoncus. Aenean ut sollicitudin sem. Maecenas in viverra mi. Mauris commodo nulla dolor, eget varius elit scelerisque at.
  764.              
  765.            </p></div></div>
  766.    
  767.     <!---DIVIDER--->
  768.     <div class="row no-gutters justify-content-center mt-2">
  769.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  770.       <div class="col-1 text-center"><i class="fa fa-flower fa-lg"></i></div>
  771.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  772.     </div>
  773.     <!---DIVIDER--->
  774.    
  775.     <div class="row no-gutters">
  776.       <div class="col-md-4 col-12 p-2">
  777.        
  778. <!---
  779.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  780.    TRAITS
  781.    This code is for the little widgets with attitude, honesty, etc.
  782.    Replace the second bit of text (Introverted, Emotional, Deceptive, Affectionate).
  783.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  784. ------------------->      
  785.       <div class="row no-gutters mb-2">
  786.       <div class="col-3 mr-1 text-center pt-3" style="background:#533708;border-radius: 0.4em 0 0 0.4em;color:#F2C77B"><i class="fa-light fa-masks-theater fa-2x"></i>
  787.       </div>
  788.       <div class="col-8">
  789.       <div class="p-1" style="background:#9A670F;border-radius:0 0.4em 0 0;font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#FDF5E7;filter:drop-shadow(0 2px 0 #DAA345)">
  790.          
  791.         Attitude  
  792.          
  793.         </div>
  794.         <div class="p-1 mt-1 text-center" style="border:0.1em solid #F2C77B;border-radius: 0 0 0.4em; border-top:0;border-left:0">
  795.          
  796.         Introverted  
  797.          
  798.       </div></div>
  799.       </div>  
  800.     <!--- PERSONALITY WIDGET--->  
  801.     <!--- PERSONALITY WIDGET--->      
  802.       <div class="row no-gutters mb-2">
  803.       <div class="col-3 mr-1 text-center pt-3" style="background:#9A670F;border-radius: 0.4em 0 0 0.4em;color:#FDF5E7"><i class="fa-light fa-face-sad-tear fa-2x"></i>
  804.       </div>
  805.       <div class="col-8">
  806.       <div class="p-1" style="background:#533708;border-radius:0 0.4em 0 0;font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#F2C77B;filter:drop-shadow(0 2px 0 #DAA345)">
  807.          
  808.         Composure  
  809.          
  810.         </div>
  811.         <div class="p-1 mt-1 text-center" style="border:0.1em solid #F2C77B;border-radius: 0 0 0.4em; border-top:0;border-left:0">
  812.          
  813.         Emotional  
  814.          
  815.       </div></div>
  816.       </div>  
  817.     <!--- PERSONALITY WIDGET--->  
  818.     <!--- PERSONALITY WIDGET--->      
  819.       <div class="row no-gutters mb-2">
  820.       <div class="col-3 mr-1 text-center pt-3" style="background:#533708;border-radius: 0.4em 0 0 0.4em;color:#F2C77B"><i class="fa-light fa-hand-holding-seedling fa-2x"></i>
  821.       </div>
  822.       <div class="col-8">
  823.       <div class="p-1" style="background:#9A670F;border-radius:0 0.4em 0 0;font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#FDF5E7;filter:drop-shadow(0 2px 0 #DAA345)">
  824.          
  825.         Honesty  
  826.          
  827.         </div>
  828.         <div class="p-1 mt-1 text-center" style="border:0.1em solid #F2C77B;border-radius: 0 0 0.4em; border-top:0;border-left:0">
  829.          
  830.         Deceptive  
  831.          
  832.       </div></div>
  833.       </div>  
  834.     <!--- PERSONALITY WIDGET--->  
  835.     <!--- PERSONALITY WIDGET--->      
  836.       <div class="row no-gutters mb-2">
  837.       <div class="col-3 mr-1 text-center pt-3" style="background:#9A670F;border-radius: 0.4em 0 0 0.4em;color:#FDF5E7"><i class="fa-light fa-hand-heart fa-2x"></i>
  838.       </div>
  839.       <div class="col-8">
  840.       <div class="p-1" style="background:#533708;border-radius:0 0.4em 0 0;font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#F2C77B;filter:drop-shadow(0 2px 0 #DAA345)">
  841.          
  842.         Affection  
  843.          
  844.         </div>
  845.         <div class="p-1 mt-1 text-center" style="border:0.1em solid #F2C77B;border-radius: 0 0 0.4em; border-top:0;border-left:0">
  846.          
  847.         Affectionate  
  848.          
  849.       </div></div>
  850.       </div>  
  851.     <!--- PERSONALITY WIDGET---></div>
  852.       <div class="col-md-7 col-12">
  853.    
  854. <!---
  855.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  856.    OTHERS' PERCEPTION
  857.    Describe how other people see your character.
  858.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  859. ------------------->        
  860.     <p class="p-1 mb-0" style="font-size:2em;font-variant:small-caps;font-weight:bold;color:#9A670F"><i class="far fa-trillium mr-2" style="color:#F2C77B;"></i>
  861.     <span style="color:#DAA345">Others'</span> Perception
  862.     </p><p class="text-left m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345">Friends</p>
  863.     <p class="text-justify mt-1">
  864.              
  865.     How do the character's loved ones see them? Keep this description short for the sake of both your profile's appearance and my sanity.
  866.              
  867.     </p><p class="text-right m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;border-top:0.15em dashed #F2C77B">Strangers</p>
  868.     <p class="text-justify mt-1">
  869.              
  870.     How do strangers see them? Keep this description short for the sake of both your profile's appearance and my sanity.
  871.              
  872.     </p><p class="text-left m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.15em;color:#DAA345;border-top:0.15em dashed #F2C77B">Enemies</p>
  873.     <p class="text-justify mt-1">
  874.              
  875.     How do their enemies see them? Keep this description short for the sake of both your profile's appearance and my sanity.
  876.              
  877.     </p></div></div></div>
  878.     <!--- PERSONALITY TAB --->
  879.                    
  880.  <!---
  881.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  882.    HISTORY
  883.    Don't edit this first section, it's the navigation bar at the top.
  884.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  885. ------------------->
  886.     <div class="tab-pane fade" id="v-pills-four" role="tabpanel" aria-labelledby="v-pills-four-tab">
  887.      
  888.     <div class="row no-gutters nav nav-pills p-1 justify-content-center my-2" style="background:#DAA345;filter:drop-shadow(0 2px 0px #9A670F);border-radius:0.3em">
  889.      
  890.     <a class="col-md-3 col-5 nav-link active text-center p-1 my-auto" style="background:transparent;color:#FDF5E7;font-variant:small-caps;letter-spacing:0.8px;border-right:0.1em solid #F2C77B;border-radius:0" id="pills-childhood-tab" data-toggle="pill" href="#pills-childhood" role="tab" aria-controls="pills-childhood" aria-selected="true">
  891.      
  892.     <i class="fa-regular fa-acorn fa-lg mr-2"></i>
  893.    
  894.       Childhood
  895.      
  896.     </a>
  897.     <a class="col-md-3 col-5 nav-link text-center p-1 my-auto" style="background:transparent;color:#FDF5E7;font-variant:small-caps;letter-spacing:0.8px;border-right:0.1em solid #F2C77B;border-radius:0" id="pills-early-tab" data-toggle="pill" href="#pills-early" role="tab" aria-controls="pills-early" aria-selected="false">
  898.      
  899.     <i class="fa-regular fa-seedling fa-lg mr-2"></i>
  900.    
  901.       Early Life
  902.      
  903.     </a>
  904.     <a class="col-md-3 col-5 nav-link text-center p-1 my-auto" style="background:transparent;color:#FDF5E7;font-variant:small-caps;letter-spacing:0.8px;border-right:0.1em solid #F2C77B;border-radius:0" id="pills-adult-tab" data-toggle="pill" href="#pills-adult" role="tab" aria-controls="pills-adult" aria-selected="false">
  905.      
  906.     <i class="fa-regular fa-flower-daffodil fa-lg mr-2"></i>
  907.    
  908.       Adult Life
  909.      
  910.     </a>
  911.     <a class="col-md-3 col-5 nav-link text-center p-1 my-auto" style="background:transparent;color:#FDF5E7;font-variant:small-caps;letter-spacing:0.8px;border-radius:0" id="pills-ongoing-tab" data-toggle="pill" href="#pills-ongoing" role="tab" aria-controls="pills-ongoing" aria-selected="false">
  912.      
  913.     <i class="fa-regular fa-flower fa-lg mr-2"></i>
  914.    
  915.       Ongoing Story
  916.      
  917.     </a></div>
  918.     <!--- TOP NAV END --->
  919.  
  920. <!---
  921.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  922.    LEFT IMAGE BANNER
  923.    These images do not show on mobile, but do appear on PC.
  924.    Replace the url with the url of an image related to your character.
  925.    They're universal to all history sections.
  926.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  927. ------------------->
  928.     <div class="row no-gutters mt-2 justify-content-between">
  929.       <div class="col-1 hidden-md-down my-auto" style="background-image:url(
  930.      
  931.    https://cdn.pixabay.com/photo/2014/10/22/17/37/telescope-498317_960_720.jpg
  932.      
  933.      );background-size:cover;width:130px;height:300px;border-right:0.2em solid #DAA345"></div>
  934.       <div class="col-md-8 col-12 p-2">
  935.        
  936.     <div class="tab-content" id="pills-tabContent">
  937.  
  938. <!---
  939.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  940.    CHILDHOOD
  941.    Describe your character's childhood.
  942.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  943. ------------------->
  944.     <div class="tab-pane fade show active" id="pills-childhood" role="tabpanel" aria-labelledby="pills-childhood-tab">
  945.     <p class="font-italic text-right" style="font-weight:bold;letter-spacing:0.8px;font-variant:small-caps;color:#9A670F"><i class="fal fa-quotes fa-3x ml-n5" style="position:absolute;opacity:0.25;color:#DAA345"></i>
  946.        
  947.         Quote about this part of your character's life here.
  948.    
  949.     </p><p class="text-justify mt-4 p-2">
  950.      
  951.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  952.      
  953.     </p>
  954.    
  955.     <!---DIVIDER--->
  956.     <div class="row no-gutters justify-content-center mt-2">
  957.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  958.       <div class="col-1 text-center"><i class="fa fa-flower fa-lg"></i></div>
  959.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  960.     </div>
  961.     <!---DIVIDER--->
  962.      
  963.     <p class="text-justify mt-1 p-2">
  964.      
  965.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  966.      
  967.     </p>  
  968.     </div>
  969.     <!--- CHILDHOOD HISTORY TAB --->
  970.    
  971. <!---
  972.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  973.    EARLY LIFE
  974.    Describe your character's early life.
  975.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  976. ------------------->
  977.     <div class="tab-pane fade" id="pills-early" role="tabpanel" aria-labelledby="pills-early-tab">
  978.     <p class="font-italic text-right" style="font-weight:bold;letter-spacing:0.8px;font-variant:small-caps;color:#9A670F"><i class="fal fa-quotes fa-3x ml-n5" style="position:absolute;opacity:0.25;color:#DAA345"></i>
  979.        
  980.         You can make these quotes longer if you wish This box doesn't scroll, however.
  981.  
  982.     </p><p class="text-justify mt-4 p-2">
  983.      
  984.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  985.      
  986.     </p>
  987.    
  988.     <!---DIVIDER--->
  989.     <div class="row no-gutters justify-content-center mt-2">
  990.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  991.       <div class="col-1 text-center"><i class="fa fa-flower fa-lg"></i></div>
  992.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  993.     </div>
  994.     <!---DIVIDER--->
  995.      
  996.     <p class="text-justify mt-1 p-2">
  997.      
  998.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  999.      
  1000.     </p>  
  1001.     </div>
  1002.     <!--- EARLY LIFE HISTORY TAB --->
  1003.    
  1004.  <!---
  1005.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  1006.    ADULTHOOD
  1007.    Describe your character's adulthood.
  1008.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  1009. ------------------->
  1010.     <div class="tab-pane fade" id="pills-adult" role="tabpanel" aria-labelledby="pills-adult-tab">
  1011.     <p class="font-italic text-right" style="font-weight:bold;letter-spacing:0.8px;font-variant:small-caps;color:#9A670F"><i class="fal fa-quotes fa-3x ml-n5" style="position:absolute;opacity:0.25;color:#DAA345"></i>
  1012.        
  1013.         You can make these quotes longer if you wish This box doesn't scroll, however.
  1014.    
  1015.     </p><p class="text-justify mt-4 p-2">
  1016.      
  1017.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1018.      
  1019.     </p>
  1020.    
  1021.     <!---DIVIDER--->
  1022.     <div class="row no-gutters justify-content-center mt-2">
  1023.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  1024.       <div class="col-1 text-center"><i class="fa fa-flower fa-lg"></i></div>
  1025.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  1026.     </div>
  1027.     <!---DIVIDER--->
  1028.      
  1029.     <p class="text-justify mt-1 p-2">
  1030.      
  1031.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1032.      
  1033.     </p>
  1034.     </div>
  1035.     <!--- ADULTHOOD HISTORY TAB --->
  1036.    
  1037. <!---
  1038.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  1039.    ONGOING STORY
  1040.    Describe the ongoing story of your character here.
  1041.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  1042. ------------------->
  1043.     <div class="tab-pane fade" id="pills-ongoing" role="tabpanel" aria-labelledby="pills-ongoing-tab">
  1044.      
  1045.     <p class="font-italic text-right" style="font-weight:bold;letter-spacing:0.8px;font-variant:small-caps;color:#9A670F"><i class="fal fa-quotes fa-3x ml-n5" style="position:absolute;opacity:0.25;color:#DAA345"></i>
  1046.        
  1047.     Last tab!
  1048.  
  1049.     </p><p class="text-justify mt-4 p-2">
  1050.      
  1051.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1052.      
  1053.     </p>
  1054.    
  1055.     <!---DIVIDER--->
  1056.     <div class="row no-gutters justify-content-center mt-2">
  1057.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  1058.       <div class="col-1 text-center"><i class="fa fa-flower fa-lg"></i></div>
  1059.       <div class="col-5 mx-1" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  1060.     </div>
  1061.     <!---DIVIDER--->
  1062.      
  1063.     <p class="text-justify mt-1 p-2">
  1064.      
  1065.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1066.      
  1067.     </p>  
  1068.      
  1069.     </div>
  1070.     <!--- ONGOING STORY HISTORY TAB ---></div>  
  1071. <!---
  1072.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  1073.    SECOND IMAGE
  1074.    Put the right-hand image url for the history tab here.
  1075.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  1076. ------------------->        
  1077.     </div>
  1078.     <div class="col-1 hidden-md-down my-auto" style="background-image:url(
  1079.      
  1080.    https://cdn.pixabay.com/photo/2014/10/22/17/37/telescope-498317_960_720.jpg
  1081.      
  1082.      );background-size:cover;height:300px;width:130px;border-left:0.2em solid #DAA345"></div>
  1083.     </div></div>
  1084.     <!--- HISTORY TAB --->      
  1085.          
  1086.          
  1087.  <!---
  1088.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  1089.    RELATIONSHIPS
  1090.    Almost done! Replace the text where indicated.
  1091.    Replace image URLs with images of the characters' acquaintances.
  1092.    Edit the percentages to denote:
  1093.    - Comfort
  1094.    - Trust
  1095.    - Respect
  1096.    - Fondness
  1097.    In this order.
  1098.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  1099. ------------------->
  1100.     <div class="tab-pane fade" id="v-pills-five" role="tabpanel" aria-labelledby="v-pills-five-tab"><p class="text-center mt-2">
  1101.     <i class="fa-regular fa-trillium fa-2x" style="color:#DAA345"></i> </p>
  1102.     <p class="text-justify px-2 col-12 col-md-8 mx-auto">
  1103.    
  1104.    
  1105.     How good is this character at making friends? Where are most of their acquaintances from? Have they made a lot of enemies anywhere? Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor.
  1106.      
  1107.      
  1108.     </p>
  1109.     <!---DIVIDER--->
  1110.     <div class="row no-gutters justify-content-center mt-2">
  1111.       <div class="col-5 mx-1 my-auto" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  1112.       <div class="col-1 text-center"><i class="fa fa-trillium fa-2x"></i></div>
  1113.       <div class="col-5 mx-1 my-auto" style="height:5px;border-bottom:0.1em solid #F2C77B"></div>
  1114.     </div>
  1115.     <!---DIVIDER--->
  1116.    
  1117.     <div id="carouselFade" class="carousel slide carousel-fade" data-interval="false" data-bs-interval="false" data-pause="true"><div class="carousel-inner">
  1118.    
  1119.     <!---FIRST RELATIONSHIP--->
  1120.     <div class="carousel-item active">
  1121.    
  1122.     <div class="row no-gutters">
  1123.      
  1124.       <div class="col-12 col-md-3 mx-auto">
  1125.        
  1126.         <div class="p-1 rounded mb-2" style="background:#DAA345;filter:drop-shadow(0 2px 0px #9A670F)">
  1127.         <div class="p-1 rounded" style="height:100px;width:100%;background-image:url(
  1128.      
  1129.        
  1130.        https://cdn.pixabay.com/photo/2020/02/19/11/18/maidens-tower-4861979_960_720.jpg
  1131.      
  1132.        
  1133.        );background-size:cover;border:0.2em solid #F2C77B"></div>
  1134.         </div>
  1135.    
  1136.         <div class="p-1">
  1137.        
  1138.         <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Comfort
  1139.         <i class="fal fa-fw fa-flower fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1140.         </p>  
  1141.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1142.      
  1143.      
  1144.      55%
  1145.      
  1146.      
  1147.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1148.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Trust
  1149.         <i class="fal fa-fw fa-flower-tulip fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1150.         </p>  
  1151.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1152.      
  1153.      
  1154.      55%
  1155.      
  1156.      
  1157.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1158.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Respect
  1159.         <i class="fal fa-fw fa-trillium fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1160.         </p>  
  1161.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1162.      
  1163.      
  1164.      55%
  1165.      
  1166.      
  1167.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1168.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Fondness
  1169.         <i class="fal fa-fw fa-flower-daffodil fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1170.         </p>  
  1171.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1172.      
  1173.      
  1174.      55%
  1175.      
  1176.      
  1177.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1178.          
  1179.         </div>
  1180.        
  1181.       </div>
  1182.       <div class="col-12 col-md-8 py-2">
  1183.        
  1184.     <p class="p-1 my-0" style="font-size:2em;font-variant:small-caps;font-weight:bold;color:#9A670F">
  1185.     <span style="color:#DAA345">
  1186.      
  1187.       Name
  1188.      
  1189.       </span>
  1190.      
  1191.       Surname
  1192.      
  1193.     </p>
  1194.    
  1195.     <p class="my-0">( <span style="color:#DAA345">
  1196.      
  1197.       Relationship
  1198.      
  1199.       </span> )</p>
  1200.    
  1201.     <p class="text-justify mt-2 pr-3">
  1202.      
  1203.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1204.      
  1205.     </p>
  1206.    
  1207.     <div class="row no-gutters mt-2">
  1208.     <div class="col-1 px-1" style="border-left:0.2em solid #DAA345"><i class="fa-thin fa-quotes fa-fw fa-2x"></i></div>
  1209.     <div class="col-9 font-italic" style="color:#DAA345;font-variant:small-caps;letter-spacing:0.8px">
  1210.        
  1211.         Quote about this character. What does your character think about them?
  1212.        
  1213.     </div></div></div></div>
  1214.    
  1215.     </div>
  1216.     <!---FIRST RELATIONSHIP--->
  1217.    
  1218.     <!---SECOND RELATIONSHIP--->
  1219.         <div class="carousel-item">
  1220.          
  1221.     <div class="row no-gutters">
  1222.      
  1223.       <div class="col-12 col-md-3 mx-auto">
  1224.        
  1225.         <div class="p-1 rounded mb-2" style="background:#DAA345;filter:drop-shadow(0 2px 0px #9A670F)">
  1226.         <div class="p-1 rounded" style="height:100px;width:100%;background-image:url(
  1227.      
  1228.        
  1229.        https://cdn.pixabay.com/photo/2020/02/19/11/18/maidens-tower-4861979_960_720.jpg
  1230.      
  1231.        
  1232.        );background-size:cover;border:0.2em solid #F2C77B"></div>
  1233.         </div>
  1234.    
  1235.         <div class="p-1">
  1236.        
  1237.         <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Comfort
  1238.         <i class="fal fa-fw fa-flower fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1239.         </p>  
  1240.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1241.      
  1242.      
  1243.      55%
  1244.      
  1245.      
  1246.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1247.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Trust
  1248.         <i class="fal fa-fw fa-flower-tulip fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1249.         </p>  
  1250.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1251.      
  1252.      
  1253.      55%
  1254.      
  1255.      
  1256.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1257.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Respect
  1258.         <i class="fal fa-fw fa-trillium fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1259.         </p>  
  1260.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1261.      
  1262.      
  1263.      55%
  1264.      
  1265.      
  1266.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1267.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Fondness
  1268.         <i class="fal fa-fw fa-flower-daffodil fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1269.         </p>  
  1270.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1271.      
  1272.      
  1273.      55%
  1274.      
  1275.      
  1276.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1277.          
  1278.         </div>
  1279.        
  1280.       </div>
  1281.       <div class="col-12 col-md-8 py-2">
  1282.        
  1283.     <p class="p-1 my-0" style="font-size:2em;font-variant:small-caps;font-weight:bold;color:#9A670F">
  1284.     <span style="color:#DAA345">
  1285.      
  1286.       Name
  1287.      
  1288.       </span>
  1289.      
  1290.       Surname
  1291.      
  1292.     </p>
  1293.    
  1294.     <p class="my-0">( <span style="color:#DAA345">
  1295.      
  1296.       Relationship
  1297.      
  1298.       </span> )</p>
  1299.    
  1300.     <p class="text-justify mt-2 pr-3">
  1301.      
  1302.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1303.      
  1304.     </p>
  1305.    
  1306.     <div class="row no-gutters mt-2">
  1307.     <div class="col-1 px-1" style="border-left:0.2em solid #DAA345"><i class="fa-thin fa-quotes fa-fw fa-2x"></i></div>
  1308.     <div class="col-9 font-italic" style="color:#DAA345;font-variant:small-caps;letter-spacing:0.8px">
  1309.        
  1310.         Quote about this character. What does your character think about them?
  1311.        
  1312.     </div></div></div></div>      
  1313.          
  1314.         </div>
  1315.     <!---SECOND RELATIONSHIP--->
  1316.    
  1317.     <!---THIRD RELATIONSHIP--->
  1318.         <div class="carousel-item">
  1319.    
  1320.     <div class="row no-gutters">
  1321.      
  1322.       <div class="col-12 col-md-3 mx-auto">
  1323.        
  1324.         <div class="p-1 rounded mb-2" style="background:#DAA345;filter:drop-shadow(0 2px 0px #9A670F)">
  1325.         <div class="p-1 rounded" style="height:100px;width:100%;background-image:url(
  1326.      
  1327.        
  1328.        https://cdn.pixabay.com/photo/2020/02/19/11/18/maidens-tower-4861979_960_720.jpg
  1329.      
  1330.        
  1331.        );background-size:cover;border:0.2em solid #F2C77B"></div>
  1332.         </div>
  1333.    
  1334.         <div class="p-1">
  1335.        
  1336.         <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Comfort
  1337.         <i class="fal fa-fw fa-flower fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1338.         </p>  
  1339.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1340.      
  1341.      
  1342.      55%
  1343.      
  1344.      
  1345.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1346.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Trust
  1347.         <i class="fal fa-fw fa-flower-tulip fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1348.         </p>  
  1349.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1350.      
  1351.      
  1352.      55%
  1353.      
  1354.      
  1355.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1356.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Respect
  1357.         <i class="fal fa-fw fa-trillium fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1358.         </p>  
  1359.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1360.      
  1361.      
  1362.      55%
  1363.      
  1364.      
  1365.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1366.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Fondness
  1367.         <i class="fal fa-fw fa-flower-daffodil fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1368.         </p>  
  1369.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1370.      
  1371.      
  1372.      55%
  1373.      
  1374.      
  1375.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1376.          
  1377.         </div>
  1378.        
  1379.       </div>
  1380.       <div class="col-12 col-md-8 py-2">
  1381.        
  1382.     <p class="p-1 my-0" style="font-size:2em;font-variant:small-caps;font-weight:bold;color:#9A670F">
  1383.     <span style="color:#DAA345">
  1384.      
  1385.       Name
  1386.      
  1387.       </span>
  1388.      
  1389.       Surname
  1390.      
  1391.     </p>
  1392.    
  1393.     <p class="my-0">( <span style="color:#DAA345">
  1394.      
  1395.       Relationship
  1396.      
  1397.       </span> )</p>
  1398.    
  1399.     <p class="text-justify mt-2 pr-3">
  1400.      
  1401.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1402.      
  1403.     </p>
  1404.    
  1405.     <div class="row no-gutters mt-2">
  1406.     <div class="col-1 px-1" style="border-left:0.2em solid #DAA345"><i class="fa-thin fa-quotes fa-fw fa-2x"></i></div>
  1407.     <div class="col-9 font-italic" style="color:#DAA345;font-variant:small-caps;letter-spacing:0.8px">
  1408.        
  1409.         Quote about this character. What does your character think about them?
  1410.        
  1411.     </div></div></div></div>
  1412.    
  1413.         </div>
  1414.     <!---THIRD RELATIONSHIP--->
  1415.    
  1416.     <!---FOURTH RELATIONSHIP--->
  1417.         <div class="carousel-item">
  1418.          
  1419.     <div class="row no-gutters">
  1420.      
  1421.       <div class="col-12 col-md-3 mx-auto">
  1422.        
  1423.         <div class="p-1 rounded mb-2" style="background:#DAA345;filter:drop-shadow(0 2px 0px #9A670F)">
  1424.         <div class="p-1 rounded" style="height:100px;width:100%;background-image:url(
  1425.      
  1426.        
  1427.        https://cdn.pixabay.com/photo/2020/02/19/11/18/maidens-tower-4861979_960_720.jpg
  1428.      
  1429.        
  1430.        );background-size:cover;border:0.2em solid #F2C77B"></div>
  1431.         </div>
  1432.    
  1433.         <div class="p-1">
  1434.        
  1435.         <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Comfort
  1436.         <i class="fal fa-fw fa-flower fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1437.         </p>  
  1438.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1439.      
  1440.      
  1441.      55%
  1442.      
  1443.      
  1444.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1445.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Trust
  1446.         <i class="fal fa-fw fa-flower-tulip fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1447.         </p>  
  1448.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1449.      
  1450.      
  1451.      55%
  1452.      
  1453.      
  1454.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1455.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Respect
  1456.         <i class="fal fa-fw fa-trillium fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1457.         </p>  
  1458.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1459.      
  1460.      
  1461.      55%
  1462.      
  1463.      
  1464.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1465.           <p class="m-0" style="font-variant:small-caps;font-weight:bold;letter-spacing:0.8px">Fondness
  1466.         <i class="fal fa-fw fa-flower-daffodil fa-lg pull-right mt-2" style="color:#DAA345"></i>
  1467.         </p>  
  1468.         <div class="progress my-1 rounded" style="background:#F2C77B"><div class="progress-bar" role="progressbar"   style="width:
  1469.      
  1470.      
  1471.      55%
  1472.      
  1473.      
  1474.      ;height:7px;background:#F2C77B;border-right:5px solid #9A670F"></div></div>
  1475.          
  1476.         </div>
  1477.        
  1478.       </div>
  1479.       <div class="col-12 col-md-8 py-2">
  1480.        
  1481.     <p class="p-1 my-0" style="font-size:2em;font-variant:small-caps;font-weight:bold;color:#9A670F">
  1482.     <span style="color:#DAA345">
  1483.      
  1484.       Name
  1485.      
  1486.       </span>
  1487.      
  1488.       Surname
  1489.      
  1490.     </p>
  1491.    
  1492.     <p class="my-0">( <span style="color:#DAA345">
  1493.      
  1494.       Relationship
  1495.      
  1496.       </span> )</p>
  1497.    
  1498.     <p class="text-justify mt-2 pr-3">
  1499.      
  1500.       Vivamus ut commodo purus. Nullam in consectetur nisl. Donec et libero non nulla aliquam maximus nec ac tortor. In hac habitasse platea dictumst. Pellentesque dignissim, risus vel molestie fermentum, diam ex mollis lacus, sit amet accumsan ante orci non lacus. Morbi placerat sollicitudin dui quis cursus. Duis eget commodo magna. Nunc sollicitudin nec nisi sit amet luctus. Ut id sagittis lorem. Nulla facilisi. Suspendisse ullamcorper lobortis magna ac porta.
  1501.      
  1502.     </p>
  1503.    
  1504.     <div class="row no-gutters mt-2">
  1505.     <div class="col-1 px-1" style="border-left:0.2em solid #DAA345"><i class="fa-thin fa-quotes fa-fw fa-2x"></i></div>
  1506.     <div class="col-9 font-italic" style="color:#DAA345;font-variant:small-caps;letter-spacing:0.8px">
  1507.        
  1508.         Quote about this character. What does your character think about them?
  1509.        
  1510.     </div></div></div></div>  
  1511.        
  1512.         </div>
  1513.     <!---FOURTH RELATIONSHIP--->
  1514.        
  1515.       </div>
  1516.         </div>
  1517.    
  1518.     <!--- NAVIGATION ARROWS --->
  1519.     <div class="row no-gutters justify-content-center">
  1520.      
  1521.     <div class="col-2 text-right pt-1"><a class="p-1" href="#carouselFade" role="button" data-slide="prev" style="color:#DAA345">
  1522.     <i class="fas fa-seedling fa-2x" style="transform:rotate(90deg)"></i>
  1523.     </a></div>
  1524.      
  1525.     <div class="col-1 text-center py-2" style="background:#9A670F;color:#FDF5E7;filter:drop-shadow(0 2px 0 #F2C77B)"><i class="fa-regular fa-flower-tulip fa-lg p-1"></i></div>
  1526.      
  1527.     <div class="col-2 text-left pt-1"><a class="p-1" href="#carouselFade" role="button" data-slide="next" style="color:#DAA345;">
  1528.     <i class="fas fa-seedling fa-2x" style="transform:rotate(-90deg)"></i>  
  1529.     </a></div></div>
  1530.     <!--- NAVIGATION ARROWS ---></div>
  1531.     <!--- RELATIONSHIPS TAB ---></div>
  1532.     </div></div>
  1533.    
  1534. <!---
  1535.    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
  1536.    MOODBOARD
  1537.    Replace the URLs with images that fit your character.
  1538.    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
  1539. ------------------->    
  1540.     <div class="col-md col-12 mt-2 p-0">
  1541.     <div class="row no-gutters">
  1542.       <div class="col-md-4 col-sm mb-1 mr-1" style="height:60px;background-image:url(
  1543.      
  1544.      https://cdn.pixabay.com/photo/2019/10/26/14/14/white-4579641_960_720.jpg
  1545.      
  1546.      );background-size:cover;"></div>
  1547.       <div class="col-md mb-1 mr-1col-sm" style="background-image:url(
  1548.      
  1549.      https://cdn.pixabay.com/photo/2022/03/04/17/08/yellow-building-7047762_960_720.jpg
  1550.      
  1551.      );background-size:cover;"></div>
  1552.      
  1553.     </div><div class="row no-gutters flex-fill">
  1554.      
  1555.       <div class="col-md-7 mb-1 mr-1 col-sm" style="height:60px;background-image:url(
  1556.      
  1557.      https://cdn.pixabay.com/photo/2020/10/03/10/13/balcony-5623123_960_720.jpg
  1558.      
  1559.      );background-size:cover;"></div>
  1560.       <div class="col-md mb-1 col-sm" style="background-image:url(
  1561.      
  1562.      https://cdn.pixabay.com/photo/2019/10/26/14/14/white-4579641_960_720.jpg
  1563.      
  1564.      );background-size:cover;"></div>
  1565.      
  1566.     </div></div></div></div>
  1567.     <!--- MAIN CONTAINER END--->
  1568.     <div class="hidden-md-up" style="margin-top:4em"></div>
  1569.     <!---BOTTOM BANNER WITH IMAGE --->
  1570.     <div class="p-1 row no-gutters justify-content-center" style="background:#DAA345;border-radius: 0em 0em 1em 1em;height:5em;color:#FDF5E7;overflow:hidden;filter:drop-shadow(0px 3px #9A670F);background-image:url(https://i.postimg.cc/d1K7nnnL/Texture-Yellow.png);background-repeat:repeat;background-size:35%">
  1571.     <!---LEFT FLOWERS --->
  1572.     <div class="col-sm text-right hidden-md-down" style="line-height:5em;">
  1573.       <span style="font-size:2em">
  1574.         - - - - - - - - - - - - - - - - - - - - - - -
  1575.       </span>
  1576.       <i class="fa-regular fa-trillium fa-2x" style="transform:rotate(-30deg);color:#F2C77B"></i>
  1577.       <i class="fa-regular fa-trillium fa-3x fa-fade" style="animation-duration: 10s;"></i>
  1578.     </div>
  1579.     <!---LEFT FLOWERS --->
  1580.     <div class="col-md-2 col-8 p-1 mx-auto"></div>
  1581.     <!---RIGHT FLOWERS --->
  1582.     <div class="col-sm hidden-md-down" style="line-height:5em;">
  1583.       <i class="fa-regular fa-trillium fa-3x fa-fade" style="animation-duration: 10s;"></i>
  1584.       <i class="fa-regular fa-trillium fa-2x" style="transform:rotate(30deg);color:#F2C77B"></i>
  1585.       <span style="font-size:2em">
  1586.         - - - - - - - - - - - - - - - - - - - - - - -
  1587.       </span>
  1588.     </div>
  1589.     <!---RIGHT FLOWERS --->
  1590.     </div>
  1591.     <!---BOTTOM BANNER WITH PROFILE IMAGE END --->
  1592.     <!--- PROFILE IMAGE BOX--->
  1593.     <div class="col-md-1 col-3 p-1 mx-auto" style="background:#F2C77B;margin-top:-6em;border:0.5em solid #DAA345;border-radius:0.2em;filter:drop-shadow(0 3px #9A670F)">
  1594.     <div class="p-1" style="border: 0.2em dashed #FDF5E7;border-radius:0.2em;">
  1595.     <div class="p-1 m-auto text-center" style="height:60px;border-radius:0.2em;">
  1596.       <i class="far fa-flower-tulip fa-3x mt-2" style="text-shadow: 0 1px #9A670F,0 2px #9A670F;"></i>
  1597.       </div>
  1598.     </div>
  1599.     </div>  
  1600.     </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!