<!-- DOOMSDAY BLUE: by chosenfate
do not redistribute, resell, remove credit
feel free to edit, frankenstein, etc
accent: #517fc4 -->
<div class="container bg-faded pt-3 pb-2" style="max-width:950px;">
<div class="card rounded-0 bg-transparent border-0">
<div class="row no-gutters">
<div class="col-12 col-lg-auto w-100">
<div class="card rounded-0" style="width:inherit; padding-bottom:3px;">
<div class="d-flex flex-row nav nav-tabs border-0 justify-content-around">
<a class="btn active p-0 py-1 rounded-0" data-toggle="tab" href="#basics" style="font-size:1.5rem; width:50px; height:40px; color:#517fc4; box-shadow:none;">
<!-- i suggest replacing this with whatever icon best fits your character. KEEP THE M-AUTO -->
<i class="fa-light fa-cross m-auto"></i>
</a>
<a class="btn btn-block p-0 py-1 rounded-0" data-toggle="tab" href="#personality" style="font-size:1.5rem; width:50px; height:40px; color:#517fc4; box-shadow:none;">
<i class="fa-light fa-user m-auto"></i>
</a>
<a class="btn p-0 py-1 rounded-0" data-toggle="tab" href="#backstory" style="font-size:1.5rem; width:50px; height:40px; color:#517fc4; box-shadow:none;">
<i class="fa-light fa-book m-auto"></i>
</a>
<a class="btn p-0 py-1 rounded-0" data-toggle="tab" href="#design" style="font-size:1.5rem; width:50px; height:40px; color:#517fc4; box-shadow:none;">
<i class="fa-light fa-paintbrush m-auto"></i>
</a>
<a class="btn p-0 py-1 rounded-0" data-toggle="tab" href="#relationships" style="font-size:1.5rem; width:50px; height:40px; color:#517fc4; box-shadow:none;">
<i class="fa-light fa-hands-holding-heart m-auto"></i>
</a>
</div>
</div>
</div>
<div class="col-12">
<div class="tab-content">
<div class="tab-pane fade active show" id="basics">
<div class="row no-gutters">
<div class="col-12 col-lg pr-lg-1 mt-2">
<!-- IMAGE
replace 'https://files.catbox.moe/6iqloe.PNG' with your image link' -->
<div class="card rounded-0 h-100 p-2" style="min-height:550px;">
<img src="https://files.catbox.moe/6iqloe.PNG" style="height:inherit; width: 100%; object-fit: cover; object-position:center;">
</div>
</div>
<div class="col-12 col-lg pl-lg-1 mt-2">
<div class="card rounded-0 px-2 pt-1" style="border-bottom:0px;">
<div class="row no-gutters align-items-center">
<!-- FA ICON -->
<div class="col-auto pr-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-moon-stars"></i>
</div>
<div class="col">
<hr>
</div>
<!-- NAME -->
<div class="col-auto pl-3 pr-3 text-right text-lowercase" style="letter-spacing:2px; font-size:1.15rem; font-weight:300;"> first middle last </div>
<div class="col">
<hr>
</div>
<!-- FA ICON -->
<div class="col-auto pl-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-moon-stars" style=" transform: scale(-1,1);"></i>
</div>
</div>
</div>
<div class="card rounded-0" style="border-top:0px;">
<div class="row no-gutters text-center">
<!-- SONG NAME -->
<div class="col-12" style="letter-spacing: 1px;"> doomsday blue </div>
<!-- ARTIST NAME -->
<div class="col-12 text-muted" style="letter-spacing:2px; font-style:italic; font-size:0.75rem;"> bambie thug </div>
</div>
<div class="row no-gutters mb-1">
<div class="col">
<hr>
</div>
<div class="col-auto text-center px-3" style="font-size:1.25rem; color:#517fc4;">
<i class="fa-light fa-list-music"></i>
<!-- SONG
go to youtube, find a song, copy the string at the end of the URL, replace 'PcFyY6hrhI4' with it -->
<iframe style="height:25px; width:27px; opacity:.01; position:absolute; margin-top:4px; margin-left:-24px;" frameborder="0" src="https://www.youtube.com/embed/PcFyY6hrhI4?modestbranding=1"></iframe>
</div>
<div class="col">
<hr>
</div>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-lg-6 pr-lg-1">
<div class="card rounded-0 px-2 py-1">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-venus-mars m-auto"></i>
</div>
</div>
<!-- GENDER -->
<div class="col">
<div class="row no-gutters">
<div class="col-12" style="letter-spacing:1px;"> female </div>
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> gender </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-cake-candles m-auto"></i>
</div>
</div>
<!-- AGE -->
<div class="col">
<div class="row no-gutters">
<div class="col-12" style="letter-spacing:1px;"> eighteen </div>
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> age </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-briefcase m-auto"></i>
</div>
</div>
<!-- OCCUPATION -->
<div class="col">
<div class="row no-gutters">
<div class="col-12" style="letter-spacing:1px;"> unemployed </div>
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> occupation </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 pl-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 px-2 py-1">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-tag m-auto"></i>
</div>
</div>
<!-- PRONOUNS -->
<div class="col">
<div class="row no-gutters">
<div class="col-12" style="letter-spacing:1px;"> she/her </div>
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> pronouns </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-calendar-day m-auto"></i>
</div>
</div>
<!-- DATE OF BIRTH -->
<div class="col">
<div class="row no-gutters">
<div class="col-12" style="letter-spacing:1px;"> january 1, 1970 </div>
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> date of birth </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-location-dot m-auto"></i>
</div>
</div>
<!-- LOCATION -->
<div class="col">
<div class="row no-gutters">
<div class="col-12" style="letter-spacing:1px;"> the holy see </div>
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> location </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-2 rounded-0">
<div class="card-body px-2 py-1 text-justify" style="font-size:0.75rem; line-height:1.2rem;">
<!-- SUMMARY/INTRO --> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum.
</div>
</div>
<div class="card mt-2 rounded-0 border-0 bg-transparent">
<div class="d-flex flex-row justify-content-between">
<!-- MOODBOARD -->
<div class="card p-2 rounded-0">
<img src="https://i.pinimg.com/564x/d1/eb/bd/d1ebbdb8edda41f472daabe7e1445a88.jpg" style="height:80px; width:80px; object-fit:cover;">
</div>
<div class="card p-2 rounded-0">
<img src="https://i.pinimg.com/564x/d1/eb/bd/d1ebbdb8edda41f472daabe7e1445a88.jpg" style="height:80px; width:80px; object-fit:cover;">
</div>
<div class="card p-2 rounded-0">
<img src="https://i.pinimg.com/564x/d1/eb/bd/d1ebbdb8edda41f472daabe7e1445a88.jpg" style="height:80px; width:80px; object-fit:cover;">
</div>
<div class="card p-2 rounded-0">
<img src="https://i.pinimg.com/564x/d1/eb/bd/d1ebbdb8edda41f472daabe7e1445a88.jpg" style="height:80px; width:80px; object-fit:cover;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="personality">
<div class="row no-gutters mt-2">
<div class="col-12">
<div class="card rounded-0 bg-transparent border-0">
<div class="row no-gutters">
<div class="col-lg-4 pr-lg-1 order-first order-lg-0">
<div class="card rounded-0">
<div class="card-header px-2 py-1 border-0 bg-transparent">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75">
<i class="fa-light fa-stars"></i>
</div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto" style="font-size:1.15rem; font-weight:300; letter-spacing:2px;"> first face </div>
<div class="col px-3" style="opacity:0;">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; opacity:0;">
<i class="fa-light fa-stars"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 px-lg-1 order-2 order-lg-0 mt-2 mt-lg-0">
<div class="card rounded-0">
<div class="card-header px-2 py-1 border-0 bg-transparent">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; opacity:0;">
<i class="fa-light fa-stars"></i>
</div>
<div class="col px-3" style="opacity:0;">
<hr>
</div>
<div class="col-auto" style="font-size:1.15rem; font-weight:300; letter-spacing:2px;"> second face </div>
<div class="col px-3" style="opacity:0;">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; opacity:0;">
<i class="fa-light fa-stars"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 pl-lg-1 order-4 order-lg-0 mt-2 mt-lg-0">
<div class="card rounded-0">
<div class="card-header px-2 py-1 border-0 bg-transparent">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="opacity:0;">
<i class="fa-light fa-stars"></i>
</div>
<div class="col px-3" style="opacity:0;">
<hr>
</div>
<div class="col-auto" style="font-size:1.15rem; font-weight:300; letter-spacing:2px;"> third face </div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; transform:scale(-1,1); opacity:0.75;">
<i class="fa-light fa-stars"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 pr-lg-1 order-1 order-lg-0">
<div class="card mt-2 rounded-0 text-justify border-0 bg-transparent" style="font-size:0.75rem; line-height:1.2rem;">
<div class="card rounded-0 px-2 py-1">
<!-- TRAITS -->
<div class="card-header px-0 py-1 bg-transparent border-0 d-flex flex-row justify-content-around">
<span class="card card-outline-success px-2 text-muted bg-faded" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> positive </span>
<span class="card card-outline-warning px-2 text-muted bg-faded" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> neutral </span>
<span class="card card-outline-danger px-2 text-muted bg-faded" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> negative </span>
</div>
</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="card rounded-0 px-2 py-1 mt-2" style="max-height:300px; overflow:auto; scrollbar-width:none;">
<p>write about how your character is when with strangers. this box scrolls. lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
</div>
<div class="col-lg-4 px-lg-1 order-3 order-lg-0">
<div class="card mt-2 rounded-0 text-justify border-0 bg-transparent" style="font-size:0.75rem; line-height:1.2rem;">
<div class="card rounded-0 px-2 py-1">
<!-- TRAITS -->
<div class="card-header px-0 py-1 bg-transparent border-0 d-flex flex-row justify-content-around">
<span class="card card-outline-success px-2 text-muted" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> positive </span>
<span class="card card-outline-warning px-2 text-muted" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> neutral </span>
<span class="card card-outline-danger px-2 text-muted" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> negative </span>
</div>
</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="card rounded-0 px-2 py-1 mt-2" style="max-height:300px; overflow:auto; scrollbar-width:none;">
<p>write about how your character is when with friends. this box scrolls. lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
</div>
<div class="col-lg-4 pl-lg-1 order-last order-lg-0">
<div class="card mt-2 rounded-0 text-justify border-0 bg-transparent" style="font-size:0.75rem; line-height:1.2rem;">
<div class="card rounded-0 px-2 py-1">
<!-- TRAITS -->
<div class="card-header px-0 py-1 bg-transparent border-0 d-flex flex-row justify-content-around">
<span class="card card-outline-success px-2 text-muted" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> positive </span>
<span class="card card-outline-warning px-2 text-muted" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> neutral </span>
<span class="card card-outline-danger px-2 text-muted" style="padding-top:2px; padding-bottom:2px; letter-spacing:1px; font-style:italic;"> negative </span>
</div>
</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="card rounded-0 px-2 py-1 mt-2" style="max-height:300px; overflow:auto; scrollbar-width:none;">
<p>write about how your character is when alone. this box scrolls. lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-12">
<div class="card mb-2 rounded-0 px-2 py-1 hidden-md-down">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; opacity:0.75; color:#517fc4;">
<i class="fa-light fa-quote-left"></i>
</div>
<div class="col px-3">
<hr>
</div>
<!-- QUOTE -->
<div class="col-auto text-muted text-uppercase" style="font-size:1.2rem; letter-spacing:2px; font-weight:300;"> avada kedavra, i speak to destroy </div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; opacity:0.75; color:#517fc4;">
<i class="fa-light fa-quote-right"></i>
</div>
</div>
</div>
<div class="card rounded-0 bg-transparent border-0">
<div class="row no-gutters">
<div class="col">
<div class="card rounded-0 bg-transparent border-0">
<div class="row no-gutters">
<div class="col-6 col-lg-2 pr-lg-1 order-first order-lg-0 pr-1">
<!-- LIKES -->
<div class="card rounded-0 border-0 bg-transparent h-100">
<div class="card rounded-0 px-2 py-1 text-center text-muted" style="letter-spacing:2px;"> likes </div>
<div class="card rounded-0 mt-2 h-100">
<div class="card-body px-2 py-1">
<!-- copy paste the row to add new entries -->
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry one</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry two</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry three </div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry four </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-2 px-lg-1 mt-2 mt-lg-0 order-2 order-lg-0 pr-1">
<!-- HOBBIES -->
<div class="card rounded-0 border-0 bg-transparent h-100">
<div class="card rounded-0 px-2 py-1 text-center text-muted" style="letter-spacing:2px;"> hobbies </div>
<div class="card rounded-0 mt-2 h-100">
<div class="card-body px-2 py-1">
<!-- copy paste the row to add new entries -->
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-star"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry one</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-star"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry two</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-star"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry three </div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-star"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry four </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-2 px-lg-1 mt-2 mt-lg-0 order-4 order-lg-0 pr-1">
<!-- DISLIKES -->
<div class="card rounded-0 border-0 bg-transparent">
<div class="card rounded-0 px-2 py-1 text-center text-muted h-100" style="letter-spacing:2px;"> dislikes </div>
<div class="card rounded-0 mt-2 h-100">
<div class="card-body px-2 py-1">
<!-- copy paste the row to add new entries -->
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart-crack"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry one</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart-crack"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry two</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart-crack"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry three </div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1rem; color:#517fc4;">
<i class="fa-light fa-heart-crack"></i>
</div>
<div class="col ml-2" style="letter-spacing:1px; font-size:0.75rem;"> entry four </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-2 px-lg-1 d-flex flex-column justify-content-between order-1 order-lg-0 pl-1">
<!-- STRENGTH -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> strength </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- DEXTERITY -->
<div class="card rounded-0 mt-2 mt-lg-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> dexterity </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter: brightness(120%);"></div>
</div>
</div>
<!-- STAMINA -->
<div class="card rounded-0 mt-2 mt-lg-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> stamina </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter: brightness(140%);"></div>
</div>
</div>
</div>
<div class="col-6 col-lg-2 px-lg-1 d-flex flex-column justify-content-between mt-2 mt-lg-0 order-3 order-lg-0 pl-1">
<!-- PRESENCE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1" style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> presence </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; "></div>
</div>
</div>
<!-- MANIPULATION -->
<div class="card rounded-0 mt-2 mt-lg-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> manipulation </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter: brightness(120%);"></div>
</div>
</div>
<!-- COMPOSURE -->
<div class="card rounded-0 mt-2 mt-lg-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> composure </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter: brightness(140%);"></div>
</div>
</div>
</div>
<div class="col-6 col-lg-2 px-lg-1 d-flex flex-column justify-content-between mt-2 mt-lg-0 order-last order-lg-0 pl-1">
<!-- INTELLECT -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> intellect </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- WITS -->
<div class="card rounded-0 mt-2 mt-lg-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> wits </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter: brightness(120%);"></div>
</div>
</div>
<!-- RESOLVE -->
<div class="card rounded-0 mt-2 mt-lg-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> resolve </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter: brightness(140%);"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-lg-6 pr-lg-1">
<div class="card rounded-0 border-0">
<!-- MBTI
navigate to the cell that holds your character's cell, add 'style="background:#517fc4;' to the card element -->
<table class="table text-center border-0 m-0">
<tbody>
<tr>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0"> ISTJ </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> ISFJ </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> INFJ </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> INTJ </div>
</td>
</tr>
<tr>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0"> ISTP </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> ISFP </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 p-1 border-bottom-0 border-left-0" style="background:#517fc4;"> INFP </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> INTP </div>
</td>
</tr>
<tr>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0"> ESTP </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> ESFP </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> ENFP </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-bottom-0 border-left-0"> ENTP </div>
</td>
</tr>
<tr>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1"> ESTJ </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-left-0"> ESFJ </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-left-0"> ENFJ </div>
</td>
<td style="padding:0px;">
<div class="card rounded-0 text-muted p-1 border-left-0"> ENTJ </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-6 pl-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 border-0 h-100">
<!-- ALIGNMENT
navigate to the cell that holds your character's cell, add 'style="background:#517fc4;' to the card element -->
<table class="table text-center border-0 m-0 h-100">
<tbody>
<tr>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-bottom-0">
<div class="m-auto" style="letter-spacing:1px;"> lawful good </div>
</div>
</td>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-bottom-0 border-left-0">
<div class="m-auto" style="letter-spacing:1px;"> neutral good </div>
</div>
</td>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-bottom-0 border-left-0">
<div class="m-auto" style="letter-spacing:1px;"> chaotic good </div>
</div>
</td>
</tr>
<tr>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-bottom-0">
<div class="m-auto" style="letter-spacing:1px;"> lawful neutral </div>
</div>
</td>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 p-1 border-bottom-0 border-left-0" style="background:#517fc4;">
<div class="m-auto" style="letter-spacing:1px;"> true neutral </div>
</div>
</td>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-bottom-0 border-left-0">
<div class="m-auto" style="letter-spacing:1px;"> chaotic neutral </div>
</div>
</td>
</tr>
<tr>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1">
<div class="m-auto" style="letter-spacing:1px;"> lawful evil </div>
</div>
</td>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-left-0">
<div class="m-auto" style="letter-spacing:1px;"> neutral evil </div>
</div>
</td>
<td style="padding:0px; height:33%;">
<div class="card h-100 rounded-0 text-muted p-1 border-left-0">
<div class="m-auto" style="letter-spacing:1px;"> chaotic evil </div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="backstory">
<div class="row no-gutters mt-2">
<div class="col-12">
<div class="card rounded-0 bg-transparent border-0">
<div class="row no-gutters">
<div class="col-lg-4 pr-lg-1">
<div class="row no-gutters sticky-top" style="top:10px;">
<div class="col-12">
<div class="card rounded-0 border-0 bg-transparent">
<div class="card p-2" style=" overflow:hidden;">
<!-- IMAGE -->
<img class="card-img-top rounded-0" src="https://i.pinimg.com/564x/c6/dd/be/c6ddbefa8b8a1fa00d1f5e43c601024b.jpg" style="height:125px; width:100%; object-fit:cover; object-position:center;" alt="">
</div>
<!-- TAGS/CONTENT WARNINGS -->
<div class="card mt-2 rounded-0 border-0 bg-transparent">
<div class="card-body d-flex flex-row justify-content-around align-items-center flex-wrap">
<span class="card text-muted px-2" style="letter-spacing:1px; font-size:0.75rem; font-style:italic; padding-bottom:2px; padding-top:2px; border:1px solid #517fc4;"> tag </span>
<span class="card text-muted px-2" style="letter-spacing:1px; font-size:0.75rem; font-style:italic; padding-bottom:2px; padding-top:2px; border:1px solid #517fc4;"> another one </span>
<span class="card text-muted px-2" style="letter-spacing:1px; font-size:0.75rem; font-style:italic; padding-bottom:2px; padding-top:2px; border:1px solid #517fc4;"> 123 </span>
</div>
</div>
<!-- SUMMARY -->
<div class="card mt-2 px-2 py-1 rounded-0 text-justify" style="font-size:0.75rem; line-height:1.3rem;">
<ul class="pl-3 mb-1">
<li>summarize the character's backstory</li>
<li>write however much you please in here</li>
<li>but, well, it's a summary, it should probably stay on the short side.</li>
<li>but, hey, what do i know</li>
</ul>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-music m-auto"></i>
<!-- SONG
go to youtube, find a song, copy the string at the end of the URL, replace 'PcFyY6hrhI4' with it -->
<iframe style="height:47px; width:45px; opacity: 0.01; position:absolute; margin-top:0px; margin-left:px;" frameborder="0" src="https://www.youtube.com/embed/PcFyY6hrhI4?modestbranding=1"></iframe>
</div>
</div>
<!-- SONG -->
<div class="col">
<div class="row no-gutters">
<!-- SONG NAME -->
<div class="col-12" style="letter-spacing:1px;"> doomsday blue </div>
<!-- ARTIST NAME -->
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> bambie thug </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-music m-auto"></i>
<!-- SONG
go to youtube, find a song, copy the string at the end of the URL, replace 'PcFyY6hrhI4' with it -->
<iframe style="height:47px; width:45px; opacity: 0.01; position:absolute; margin-top:0px; margin-left:px;" frameborder="0" src="https://www.youtube.com/embed/PcFyY6hrhI4?modestbranding=1"></iframe>
</div>
</div>
<!-- SONG -->
<div class="col">
<div class="row no-gutters">
<!-- SONG NAME -->
<div class="col-12" style="letter-spacing:1px;"> doomsday blue </div>
<!-- ARTIST NAME -->
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> bambie thug </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-music m-auto"></i>
<!-- SONG
go to youtube, find a song, copy the string at the end of the URL, replace 'PcFyY6hrhI4' with it -->
<iframe style="height:47px; width:45px; opacity: 0.01; position:absolute; margin-top:0px; margin-left:px;" frameborder="0" src="https://www.youtube.com/embed/PcFyY6hrhI4?modestbranding=1"></iframe>
</div>
</div>
<!-- SONG -->
<div class="col">
<div class="row no-gutters">
<!-- SONG NAME -->
<div class="col-12" style="letter-spacing:1px;"> doomsday blue </div>
<!-- ARTIST NAME -->
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> bambie thug </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-music m-auto"></i>
<!-- SONG
go to youtube, find a song, copy the string at the end of the URL, replace 'PcFyY6hrhI4' with it -->
<iframe style="height:47px; width:45px; opacity: 0.01; position:absolute; margin-top:0px; margin-left:px;" frameborder="0" src="https://www.youtube.com/embed/PcFyY6hrhI4?modestbranding=1"></iframe>
</div>
</div>
<!-- SONG -->
<div class="col">
<div class="row no-gutters">
<!-- SONG NAME -->
<div class="col-12" style="letter-spacing:1px;"> doomsday blue </div>
<!-- ARTIST NAME -->
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> bambie thug </div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters align-items">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100 " style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-music m-auto"></i>
<!-- SONG
go to youtube, find a song, copy the string at the end of the URL, replace 'PcFyY6hrhI4' with it -->
<iframe style="height:47px; width:45px; opacity: 0.01; position:absolute; margin-top:0px; margin-left:px;" frameborder="0" src="https://www.youtube.com/embed/PcFyY6hrhI4?modestbranding=1"></iframe>
</div>
</div>
<!-- SONG -->
<div class="col">
<div class="row no-gutters">
<!-- SONG NAME -->
<div class="col-12" style="letter-spacing:1px;"> doomsday blue </div>
<!-- ARTIST NAME -->
<div class="col-12 text-muted" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> bambie thug </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 bg-transparent border-0">
<div class="card rounded-0 px-2 py-1">
<div class="row no-gutters align-items-center">
<!-- CHAPTER TITLE -->
<div class="col mr-2" style="letter-spacing:1px; font-size:1.15rem; font-weight:300;"> chapter one </div>
<!-- CONTENT WARNINGS -->
<div class="col-auto text-muted text-right" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> animal abuse, death </div>
<div class="col-12">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-quote-left"></i>
</div>
<div class="col px-3">
<hr>
</div>
<!-- QUOTE -->
<div class="col-auto text-muted" style="text-align:center; letter-spacing:1px; line-height:1.2rem; max-width:150px;"> i guess you'd rather have a star than the moon </div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-quote-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 mt-2 px-2 py-1 text-justify" style="text-indent:20px; font-size:0.75rem; line-height:1.2rem;">
<p style="text-indent:0px;"> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
<div class="card rounded-0 bg-transparent mt-2 border-0">
<div class="card rounded-0 px-2 py-1">
<div class="row no-gutters align-items-center">
<!-- CONTENT WARNINGS -->
<div class="col-auto text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> animal abuse, death </div>
<!-- CHAPTER TITLE -->
<div class="col ml-2 text-right" style="letter-spacing:1px; font-size:1.15rem; font-weight:300;"> chapter two </div>
<div class="col-12">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-quote-left"></i>
</div>
<div class="col px-3">
<hr>
</div>
<!-- QUOTE -->
<div class="col-auto text-muted" style="text-align:center; letter-spacing:1px; line-height:1.2rem; max-width:150px;"> i guess you'd rather have a star than the moon </div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-quote-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 mt-2 px-2 py-1 text-justify" style="text-indent:20px; font-size:0.75rem; line-height:1.2rem;">
<p style="text-indent:0px;"> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
<div class="card rounded-0 bg-transparent mt-2 border-0">
<div class="card rounded-0 px-2 py-1">
<div class="row no-gutters align-items-center">
<!-- CHAPTER TITLE -->
<div class="col mr-2" style="letter-spacing:1px; font-size:1.15rem; font-weight:300;"> chapter three </div>
<!-- CONTENT WARNINGS -->
<div class="col-auto text-muted text-right" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> animal abuse, death </div>
<div class="col-12">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-quote-left"></i>
</div>
<div class="col px-3">
<hr>
</div>
<!-- QUOTE -->
<div class="col-auto text-muted" style="text-align:center; letter-spacing:1px; line-height:1.2rem; max-width:150px;"> i guess you'd rather have a star than the moon </div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-quote-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card rounded-0 mt-2 px-2 py-1 text-justify" style="text-indent:20px; font-size:0.75rem; line-height:1.2rem;">
<p style="text-indent:0px;"> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="design">
<div class="row no-gutters mt-2">
<div class="col pr-lg-1">
<div class="card rounded-0 bg-transparent h-100 border-0">
<div class="card rounded-0 px-2 py-1">
<div class="row no-gutters align-items-center">
<div class="col-auto" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-light fa-clouds-moon"></i>
</div>
<div class="col px-3">
<hr>
</div>
<div class="col-auto text-muted" style="letter-spacing:2px; font-size:0.85rem; font-weight:400; font-style:italic;"> design notes </div>
</div>
</div>
<div class="card mt-2 rounded-0 px-2 py-1 h-100" style="max-height:125px; overflow:auto; scrollbar-width:none;">
<ul class="pl-3 mb-1" style="font-size:0.75rem; line-height:1.2rem; text-align:justify;">
<!-- DESIGN NOTES -->
<li>design notes here</li>
<li>design notes here</li>
<li>design notes here</li>
<li>design notes here</li>
<li>design notes here</li>
<li>this scrolls btw</li>
<li>design notes here</li>
</ul>
</div>
<div class="card mt-2 rounded-0 px-2 py-1 h-100" style="font-size:0.75rem; line-height:1.2rem; max-height:131px; overflow:auto; scrollbar-width:none; text-align:justify;">
<!-- DESCRIPTION -->
<p> lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
</div>
</div>
<div class="col-lg-7 px-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 p-2">
<div class="card border-0" style="height:40px; width:50px; position: absolute; bottom:0px; z-index:10; right:0px; margin-bottom:8px; border-radius: 10px 0px 0px 0px;">
<!-- ART CREDIT -->
<a href="LINK_TO_ARTIST" style="font-size:1.25rem; margin-top:7px; margin-left:14px" class="text-muted">
<i class="fa-regular fa-copyright mx-auto"></i>
</a>
</div>
<!-- DESIGN IMAGE -->
<img src="https://files.catbox.moe/6iqloe.PNG" alt="" style="height:300px; width:100%; object-fit:cover; object-position:center;">
</div>
</div>
<div class="col-auto pl-lg-1 hidden-md-down" style="width:35px;">
<div class="card rounded-0 h-100 w-100 p-2">
<div class="d-flex flex-row flex-lg-column h-100 w-100 bg-primary">
<!-- PALETTE
copy paste the element and change background color to add more colors -->
<div class="flex-grow-1" style="background: #19426c"></div>
<div class="flex-grow-1" style="background: #3a6892"></div>
<div class="flex-grow-1" style="background: #4f7fa4"></div>
<div class="flex-grow-1" style="background: #91aece"></div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 pr-lg-1 d-flex flex-column justify-content-between">
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-skeleton-ribs m-auto"></i>
</div>
</div>
<!-- BUILD -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> build </div>
<div class="col-auto text-right" style="letter-spacing:1px;">willowy, slender </div>
</div>
</div>
</div>
<!-- BUILD DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-head-side m-auto"></i>
</div>
</div>
<!-- FACE -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> face </div>
<div class="col-auto text-right" style="letter-spacing:1px;">oval, narrow </div>
</div>
</div>
</div>
<!-- FACE DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-eye m-auto"></i>
</div>
</div>
<!-- EYES -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> eyes </div>
<div class="col-auto text-right" style="letter-spacing:1px;">blue, almond </div>
</div>
</div>
</div>
<!-- EYES DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-spray-can-sparkles m-auto"></i>
</div>
</div>
<!-- HAIR -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> hair </div>
<div class="col-auto text-right" style="letter-spacing:1px;">long, black </div>
</div>
</div>
</div>
<!-- HAIR DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-knife m-auto"></i>
</div>
</div>
<!-- SCARS -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> scars </div>
<div class="col-auto text-right" style="letter-spacing:1px;">x scars</div>
</div>
</div>
</div>
<!-- HAIR DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
</div>
<div class="col-lg-6 pl-lg-1 d-flex flex-column justify-content-between">
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-hand-dots m-auto"></i>
</div>
</div>
<!-- SKIN -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> skin </div>
<div class="col-auto text-right" style="letter-spacing:1px;">pale, clear </div>
</div>
</div>
</div>
<!-- SCENT DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-clothes-hanger m-auto"></i>
</div>
</div>
<!-- STYLE -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> style </div>
<div class="col-auto text-right" style="letter-spacing:1px;">casual, practical </div>
</div>
</div>
</div>
<!-- STYLE DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-wind m-auto"></i>
</div>
</div>
<!-- SCENT -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> scent </div>
<div class="col-auto text-right" style="letter-spacing:1px;">flowery, sweet </div>
</div>
</div>
</div>
<!-- SCENT DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-stars m-auto"></i>
</div>
</div>
<!-- mannerisms -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> mannerisms </div>
<div class="col-auto text-right" style="letter-spacing:1px;">confident, self-assured </div>
</div>
</div>
</div>
<!-- HAIR DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
<div class="card rounded-0 px-2 py-1 mt-2">
<div class="row no-gutters">
<div class="col-auto mr-2 mt-n1 mb-n1 ml-n2">
<div class="card rounded-0 h-100" style="border-left:0px; border-top: 0px; border-bottom: 0px; width:45px; background:#517fc4;">
<i class="fa-regular fa-syringe m-auto"></i>
</div>
</div>
<!-- TATTOOS -->
<div class="col">
<div class="row no-gutters align-items-center py-1">
<div class="col text-muted mr-2" style="font-style: italic; letter-spacing:1px; font-size:0.75rem;"> tattoos </div>
<div class="col-auto text-right" style="letter-spacing:1px;">x tattoos </div>
</div>
</div>
</div>
<!-- HAIR DESCRIPTION -->
<div class="card px-2 py-2 mt-1 ml-n2 mr-n2 mb-n1 text-justify rounded-0" style="font-style: italic; font-size:0.75rem; border-right:0px; border-left:0px; border-bottom:0px;"> lorem ipsum dolor sit amet. a longer description of the trait being handled right now. </div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="relationships">
<!-- RELATIONSHIPS
copypaste the row to add more relationships yayyyyy -->
<div class="row no-gutters mt-2">
<div class="col-lg-4 pr-lg-1">
<div class="card rounded-0 bg-transparent border-0">
<div class="card rounded-0 text-center px-2 py-1" style="height:47px;">
<!-- CHARACTER NAME/LINK -->
<a href="LINK_HERE" class="m-auto" style="letter-spacing:2px;font-size:1.15rem;color:#517fc4;"> character name </a>
</div>
<div class="card rounded-0 mt-2 p-2">
<!-- IMAGE -->
<img alt="" src="https://files.catbox.moe/6iqloe.PNG" style="height:250px; max-width:100%; object-fit:cover; object-position:center;">
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 bg-transparent h-100 border-0">
<div class="card px-2 py-1">
<div class="row no-gutters align-items-center">
<div class="col-auto mr-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-regular fa-quote-left"></i>
</div>
<!-- QUOTE -->
<div class="col text-center text-muted" style="font-style:italic; letter-spacing:0.5px;"> a quote that describes their relationship. </div>
<div class="col-auto ml-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-regular fa-quote-right"></i>
</div>
</div>
</div>
<div class="card mt-2 rounded-0 px-2 py-1" style="line-height:1.2rem; font-size:0.75rem; text-align:justify; max-height: 125px; overflow: auto; scrollbar-width:none;">
<!-- RELATIONSHIP DESCRIPTION -->
<p>lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
<div class="card mt-2 bg-transparent rounded-0 border-0" style="height:135px;">
<div class="row no-gutters">
<div class="col-6 pr-1 d-flex flex-column justify-content-between" style="height:135px;">
<!-- LIKE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> like </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- RESPECT -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> respect </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(120%);"></div>
</div>
</div>
<!-- JEALOUSY -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> jealousy </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(140%);"></div>
</div>
</div>
</div>
<div class="col-6 pl-1 d-flex flex-column justify-content-between" style="height:135px;">
<!-- DISLIKE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> dislike </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- SECURITY -->
<div class="card rounded-0 mt-1" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> security </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(120%);"></div>
</div>
</div>
<!-- TRUST -->
<div class="card rounded-0 mt-1" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> trust </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(140%);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS
copypaste the row to add more relationships yayyyyy -->
<div class="row no-gutters mt-2">
<div class="col-lg-4 pr-lg-1">
<div class="card rounded-0 bg-transparent border-0">
<div class="card rounded-0 text-center px-2 py-1" style="height:47px;">
<!-- CHARACTER NAME/LINK -->
<a href="LINK_HERE" class="m-auto" style="letter-spacing:2px;font-size:1.15rem;color:#517fc4;"> character name </a>
</div>
<div class="card rounded-0 mt-2 p-2">
<!-- IMAGE -->
<img alt="" src="https://files.catbox.moe/6iqloe.PNG" style="height:250px; max-width:100%; object-fit:cover; object-position:center;">
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 bg-transparent h-100 border-0">
<div class="card px-2 py-1">
<div class="row no-gutters align-items-center">
<div class="col-auto mr-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-regular fa-quote-left"></i>
</div>
<!-- QUOTE -->
<div class="col text-center text-muted" style="font-style:italic; letter-spacing:0.5px;"> a quote that describes their relationship. </div>
<div class="col-auto ml-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-regular fa-quote-right"></i>
</div>
</div>
</div>
<div class="card mt-2 rounded-0 px-2 py-1" style="line-height:1.2rem; font-size:0.75rem; text-align:justify; max-height: 125px; overflow: auto; scrollbar-width:none;">
<!-- RELATIONSHIP DESCRIPTION -->
<p>lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
<div class="card mt-2 bg-transparent rounded-0 border-0" style="height:135px;">
<div class="row no-gutters">
<div class="col-6 pr-1 d-flex flex-column justify-content-between" style="height:135px;">
<!-- LIKE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> like </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- RESPECT -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> respect </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(120%);"></div>
</div>
</div>
<!-- JEALOUSY -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> jealousy </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(140%);"></div>
</div>
</div>
</div>
<div class="col-6 pl-1 d-flex flex-column justify-content-between" style="height:135px;">
<!-- DISLIKE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> dislike </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- SECURITY -->
<div class="card rounded-0 mt-1" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> security </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(120%);"></div>
</div>
</div>
<!-- TRUST -->
<div class="card rounded-0 mt-1" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> trust </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(140%);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS
copypaste the row to add more relationships yayyyyy -->
<div class="row no-gutters mt-2">
<div class="col-lg-4 pr-lg-1">
<div class="card rounded-0 bg-transparent border-0">
<div class="card rounded-0 text-center px-2 py-1" style="height:47px;">
<!-- CHARACTER NAME/LINK -->
<a href="LINK_HERE" class="m-auto" style="letter-spacing:2px;font-size:1.15rem;color:#517fc4;"> character name </a>
</div>
<div class="card rounded-0 mt-2 p-2">
<!-- IMAGE -->
<img alt="" src="https://files.catbox.moe/6iqloe.PNG" style="height:250px; max-width:100%; object-fit:cover; object-position:center;">
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-1 mt-2 mt-lg-0">
<div class="card rounded-0 bg-transparent h-100 border-0">
<div class="card px-2 py-1">
<div class="row no-gutters align-items-center">
<div class="col-auto mr-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-regular fa-quote-left"></i>
</div>
<!-- QUOTE -->
<div class="col text-center text-muted" style="font-style:italic; letter-spacing:0.5px;"> a quote that describes their relationship. </div>
<div class="col-auto ml-3" style="font-size:1.5rem; color:#517fc4; opacity:0.75;">
<i class="fa-regular fa-quote-right"></i>
</div>
</div>
</div>
<div class="card mt-2 rounded-0 px-2 py-1" style="line-height:1.2rem; font-size:0.75rem; text-align:justify; max-height: 125px; overflow: auto; scrollbar-width:none;">
<!-- RELATIONSHIP DESCRIPTION -->
<p>lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions of lorem ipsum. </p>
</div>
<div class="card mt-2 bg-transparent rounded-0 border-0" style="height:135px;">
<div class="row no-gutters">
<div class="col-6 pr-1 d-flex flex-column justify-content-between" style="height:135px;">
<!-- LIKE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> like </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- RESPECT -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> respect </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(120%);"></div>
</div>
</div>
<!-- JEALOUSY -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> jealousy </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(140%);"></div>
</div>
</div>
</div>
<div class="col-6 pl-1 d-flex flex-column justify-content-between" style="height:135px;">
<!-- DISLIKE -->
<div class="card rounded-0" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> dislike </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%;"></div>
</div>
</div>
<!-- SECURITY -->
<div class="card rounded-0 mt-1" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> security </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(120%);"></div>
</div>
</div>
<!-- TRUST -->
<div class="card rounded-0 mt-1" style="">
<div class="row no-gutters align-items-center px-1 " style="padding-top:4px;padding-bottom:4px;">
<div class="col-auto" style="letter-spacing:1px;"> trust </div>
<!-- you should put this as the same percent you put in the progress bar -->
<div class="col text-right text-muted" style="font-size:0.75rem; letter-spacing:2px; font-style:italic;"> 50% </div>
</div>
<!-- PROGRESS BAR
change 'width:50%' to whatever you want your percent to be -->
<div class="card rounded-0" style="height:5px; border-bottom:0px; border-left:0px; border-right:0px;">
<div class="card border-0 rounded-0 h-100" style="background: #517fc4; width:50%; filter:brightness(140%);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center text-center">
<div class="col-12 mt-2">
<a class="tooltipster" href="https://toyhou.se/chosenfate" data-toggle="tooltip" data-placement="bottom" title="html by chosenfate">
<i class="fa-solid fa-code" style="opacity:0.85; color:#517fc4;"></i>
</a>
</div>
</div>
</div>
</div>
