hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
Embellish — Custom Coloured version (21/11/2022).
(f2u custom code by jiko, for guinenapig)
------------------------------
RULES
> Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
> turn OFF WYSIWYG (in display settings)
> turn ON Code Editor
------------------------------
TIPPY TIPS
> insert your img links INSIDE or quotation marks!!
> looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
COLOUR PALETTE
> accent ----------------- #89a4bb
> text in accent --------- #fff
> background ------------- #eee
( will only appear if there's no background-image )
> card bg ---------------- #fefefe
> border ----------------- rgba(0,0,0,0.2)
> text ------------------- #404040
> font (faded) ----------- #6a6a6a
> shadow ----------------- rgba(0,0,0,0.1)
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto" style="max-width:900px; color:#404040; font-size:90%;">
<!------------------------------------------------
MAIN BACKGROUND IMAGE
------------------------------------------------->
<div class="card border-0 rounded-0 p-2" style="box-shadow:0px 0px 40px rgba(0,0,0,0.1);
/* PASTE IMAGE INSIDE ''
---------------------------------------- */;
background-image:url('https://images.unsplash.com/photo-1612028430503-c3842bf8ee7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1936&q=80');
/* IMAGE SETTINGS
---------------------------------------- */;
background-color:#eee;
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
<div class="card rounded-0 bg-transparent p-3" style="border:1px solid #fff">
<div class="row no-gutters">
<!------------------------------------------------
QUICK GLIMPSE
------------------------------------------------->
<div class="col-lg-4 flex-column px-2 my-n3">
<div class="p-3 flex-grow-1 flex-column" style="background:#fefefe; box-shadow:0px 0px 15px rgba(0,0,0,0.1)">
<!-- IMAGE
---------------------------------------------->
<div class="flex-grow-1 mb-2">
<div class="h-100 card rounded-0 bg-transparent pt-2 pl-2 border-right-0 border-bottom-0" style="border-width:2px; border-color:#89a4bb;">
<div class="h-100" style="min-height:200px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#89a4bb;
background-repeat:no-repeat;"></div>
</div>
</div>
<!-- QUOTE OR SUBTITLE
---------------------------------------------->
<div class="flex-grow-3 mb-2">
<div class="card border-0 bg-transparent h-100">
<div class="row no-gutters align-items-center">
<div class="col-auto pr-2">
<i class="fa-solid fa-quote-left"></i>
</div>
<div class="col">
<hr class="my-1" style="border-width:2px; border-color:#89a4bb">
<hr class="my-1" style="border-style:dashed; border-top-width:1px; border-color:#89a4bb">
</div>
</div>
<div class="my-1 p-3 text-center font-italic" style="background:#89a4bb; color:#fff; text-shadow:2px 2px 0px rgba(0,0,0,0.2); line-height:15px; font-family:courier new; letter-spacing:-1px;">
<!-- highlight a word inside the span! -->
quote here but <span class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; letter-spacing:0px">cool word</span> here.
</div>
<div class="row no-gutters align-items-center">
<div class="col">
<hr class="my-1" style="border-style:dashed; border-top-width:1px; border-color:#89a4bb">
<hr class="my-1" style="border-width:2px; border-color:#89a4bb">
</div>
<div class="col-auto pl-2">
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
</div>
</div>
<!-- BASIC INFO
---------------------------------------------->
<div class="flex-grow-2 mb-2">
<div class="my-1 h-100">
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-pen-field fa-fw mr-1"></i>
Name
</div>
</div>
<div class="col text-right">
content
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-calendar fa-fw mr-1"></i>
Age
</div>
</div>
<div class="col text-right">
content
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-cake fa-fw mr-1"></i>
B-day
</div>
</div>
<div class="col text-right">
00/00
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-venus-mars fa-fw mr-1"></i>
Gender
</div>
</div>
<div class="col text-right">
content
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-comments-alt fa-fw mr-1"></i>
Pronouns
</div>
</div>
<div class="col text-right">
con / tent
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-heart fa-fw mr-1"></i>
Orient.
</div>
</div>
<div class="col text-right">
content
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-dna fa-fw mr-1"></i>
Race
</div>
</div>
<div class="col text-right">
or species
</div>
</div><hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!----------------------------------------->
<div class="row no-gutters mb-0">
<div class="col">
<div class="text-uppercase" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb; font-size:90%">
<i class="fa-regular fa-globe fa-fw mr-1"></i>
Universe
</div>
</div>
<div class="col text-right">
content
</div>
</div>
</div>
</div>
<!-- MUSIC PLAYER
---------------------------------------------->
<div class="flex-grow-2">
<div class="h-100 card rounded-0 bg-transparent pb-2 pr-2 border-top-0 border-left-0" style="border-width:2px; border-color:#89a4bb">
<div class="card rounded-0 p-2" style="background:#89a4bb">
<!-- SONG INFO -------------------------------------->
<div class="row no-gutters align-items-center" style="color:#fff">
<div class="col-auto pr-3">
<i class="fa-light fa-circle-play fa-fw" style="font-size:22px"></i>
</div>
<div class="col text-right">
<div class="text-uppercase" style="text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<p class="font-italic mb-1" style="font-weight:900; font-family:'georgia', serif; line-height:13px">
Song Title
</p>
<p style="font-family:courier new; line-height:13px">
Artist
</p>
</div>
</div>
</div>
<!-- YOUTUBE ID HERE -------------------------------------->
<div class="w-50" style="position:absolute; bottom:-20px; left:-30px; height:80px; overflow:hidden;">
<!--
→ replace [ R3iVVMiEWO0 ] with your youtube video ID (found after https://www.youtube.com/watch?v=)
→ keep the [ ?controls=0 ] at the end !!
-->
<iframe src="https://www.youtube.com/embed/R3iVVMiEWO0?controls=0"
class="w-100" frameborder="0"
style="position:absolute; top:-160px; left:0; height:400px; opacity:0.01">
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
MAIN CONTENT
------------------------------------------------->
<div class="col-lg p-2 pl-lg-3 mt-lg-0 mt-4 mb-lg-0 mb-n4">
<div class="mb-0" style="box-shadow:0px 0px 15px rgba(0,0,0,0.1)">
<!-- TOP HEADER
---------------------------------------------->
<div class="py-3" style="background:#fefefe; text-shadow:4px 4px 0px rgba(0,0,0,0.1)">
<div class="row no-gutters align-items-center">
<div class="col-auto px-3">
<!-- FA ICON -->
<i class="fa-solid fa-snowflakes fa-fw fa-lg"></i>
</div>
<div class="col">
<hr class="my-1" style="border-top:2px solid #89a4bb">
<hr class="my-1" style="border-top:1px dashed #89a4bb">
</div>
</div>
<div class="text-center my-3 px-3">
<p class="mb-1 text-uppercase" style="font-family:'georgia', serif; font-weight:900; font-size:30px; line-height: 30px;">
<!-- NAME -->
Name Surname
</p>
<p class="text-uppercase" style="font-family:courier new; font-size:18px;">
<!-- OCCUPATION (OR A SUBTITLE IF UNEMPLOYED LOL) -->
content
</p>
</div>
<div class="row no-gutters align-items-center fa-flip-horizontal">
<div class="col-auto px-3">
<!-- FA ICON 2 -->
<i class="fa-solid fa-snowflakes fa-fw fa-lg"></i>
</div>
<div class="col">
<hr class="my-1" style="border-top:1px dashed #89a4bb">
<hr class="my-1" style="border-top:2px solid #89a4bb">
</div>
</div>
</div>
<!-- TAB BUTTONS
---------------------------------------------->
<div class="mb-0">
<ul class="nav row no-gutters">
<li class="col nav-item" style="background:#89a4bb;">
<a href="#embellish_one" data-toggle="tab"
class="nav-link btn p-3 btn-outline-warning border-0 active rounded-0" style="box-shadow:none; mix-blend-mode:luminosity">
<i class="fa-regular fa-spa fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item" style="background:#89a4bb;">
<a href="#embellish_two" data-toggle="tab"
class="nav-link btn p-3 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity">
<i class="fa-regular fa-chart-column fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item" style="background:#89a4bb;">
<a href="#embellish_three" data-toggle="tab"
class="nav-link btn p-3 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity">
<i class="fa-regular fa-book-bookmark fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item" style="background:#89a4bb;">
<a href="#embellish_four" data-toggle="tab"
class="nav-link btn p-3 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity">
<i class="fa-regular fa-swatchbook fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item" style="background:#89a4bb;">
<a href="#embellish_five" data-toggle="tab"
class="nav-link btn p-3 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity">
<i class="fa-regular fa-message-lines fa-lg" style="color:#fff;"></i>
</a>
</li>
</ul>
</div>
<div class="card border-0 rounded-0" style="background:#fefefe">
<div class="mx-3" style="border-width:0 2px; border-style:solid; border-color:rgba(0,0,0,0.2)">
<div class="mx-1" style="height:520px; overflow:auto; border-width:0 1px; border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!-----------------------------------------------
TAB CONTENT
------------------------------------------------->
<!--
> if your browser uses a bulky scrollbar, add [pr-4] next to the p-3 for more spacing
-->
<div class="tab-content p-3">
<!------------------------------------------------
PERSONALITY
------------------------------------------------->
<div class="tab-pane fade active show" id="embellish_one">
<!-- PERSONALITY STATS
---------------------------------------------->
<div class="mb-4">
<!-- HEADER -------------------------------------->
<div class="row no-gutters align-items-center mb-3" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900;">
Stats
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-sliders"></i>
</div>
</div>
<!-- CONTENT -------------------------------------->
<!--
> change [width:50%] to any value between 0–100%
> to highlight the winning trait, add [style="color:#89a4bb;] in the div of the word!
the first one is done for you, but if not wanted, just delete it
-->
<div class="text-uppercase" style="letter-spacing:0.5px; font-family:courier new; color:#6a6a6a">
<div class="row no-gutters align-items-center">
<div class="col-3">
<div class="text-truncate" style="color:#89a4bb;">
Emotional
</div>
</div>
<div class="col px-3">
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px; overflow:visible;">
<div class="progress-bar" style="
width:10%;
height:100%; background:#89a4bb"></div>
<div style="margin:-20px 0 0 -5px; color:#89a4bb">
<i class="fa-solid fa-angle-down fa-lg"></i>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="text-right text-truncate">
Rational
</div>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters align-items-center my-3">
<div class="col-3">
<div class="text-truncate">
Social
</div>
</div>
<div class="col px-3">
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px; overflow:visible;">
<div class="progress-bar" style="
width:30%;
height:100%; background:#89a4bb"></div>
<div style="margin:-20px 0 0 -5px; color:#89a4bb">
<i class="fa-solid fa-angle-down fa-lg"></i>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="text-right text-truncate">
Lone-wolf
</div>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters align-items-center my-3">
<div class="col-3">
<div class="text-truncate">
Instinctive
</div>
</div>
<div class="col px-3">
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px; overflow:visible;">
<div class="progress-bar" style="
width:50%;
height:100%; background:#89a4bb"></div>
<div style="margin:-20px 0 0 -5px; color:#89a4bb">
<i class="fa-solid fa-angle-down fa-lg"></i>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="text-right text-truncate">
Calculating
</div>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters align-items-center my-3">
<div class="col-3">
<div class="text-truncate">
Careful
</div>
</div>
<div class="col px-3">
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px; overflow:visible;">
<div class="progress-bar" style="
width:70%;
height:100%; background:#89a4bb"></div>
<div style="margin:-20px 0 0 -5px; color:#89a4bb">
<i class="fa-solid fa-angle-down fa-lg"></i>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="text-right text-truncate" >
Implusive
</div>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters align-items-center mt-3">
<div class="col-3">
<div class="text-truncate">
Productive
</div>
</div>
<div class="col px-3">
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px; overflow:visible;">
<div class="progress-bar" style="
width:90%;
height:100%; background:#89a4bb"></div>
<div style="margin:-20px 0 0 -5px; color:#89a4bb">
<i class="fa-solid fa-angle-down fa-lg"></i>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="text-right text-truncate" >
Lazy
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY
---------------------------------------------->
<div class="mb-3">
<!-- HEADER -------------------------------------->
<div class="row no-gutters align-items-center" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Personality
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-spa"></i>
</div>
</div>
<!-- 3+ ADJECTIVES -------------------------------------->
<div class="text-center text-uppercase my-2" style="letter-spacing:0.5px; color:#89a4bb; font-family:courier new">
trait / trait / trait
</div>
<!-- SUMMARY -------------------------------------->
<div class="text-justify">
<!-- put the first five words into the span! -->
<p><span class="text-uppercase font-italic">Lorem ipsum dolor sit amet</span> consectetur, adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
</div>
<!-- MOODBOARD
---------------------------------------------->
<div class="row no-gutters">
<!-- ONE -------------------------------------->
<div class="col p-1">
<div style="min-height:30px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#eee"></div>
</div>
<!-- TWO -------------------------------------->
<div class="col p-1">
<div style="min-height:30px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#eee"></div>
</div>
<!-- THREE -------------------------------------->
<div class="col p-1">
<div style="min-height:30px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#eee"></div>
</div>
<!-- add more images ABOVE this line! -->
</div>
</div>
<!------------------------------------------------
BATTLE
------------------------------------------------->
<div class="tab-pane fade" id="embellish_two">
<!-- HEADER
---------------------------------------------->
<div class="row no-gutters align-items-center mb-2" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Battle
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-chart-column"></i>
</div>
</div>
<!-- TABLE
---------------------------------------------->
<!--
> this table is inspiried by the Miitopia Stats where you have a 'job' and your stats can level up, depending on the grub/food and clothing you have
> change whatever you want to make it fit your character's universe
-->
<div class="mb-3">
<table class="table-bordered table-md-responsive text-center w-100" style="border-color:#fefefe">
<tbody class="text-uppercase" style="font-family:courier new">
<!-- ICONS -------------------------------------->
<tr>
<td class="p-1" style="width:20%; border-width:0 1px 1px 0; border-color:rgba(0,0,0,0.2); border-style:dashed">
<!-- BLANK -->
</td>
<td class="p-1" style="width:20%; border-width:0 1px 1px 1px; border-color:rgba(0,0,0,0.2); border-style:dashed">
<i class="fa-solid fa-smile fa-lg"></i>
</td>
<td class="p-1" style="width:20%; border-width:0 1px 1px 1px; border-color:rgba(0,0,0,0.2); border-style:dashed">
<i class="fa-solid fa-utensils fa-lg"></i>
</td>
<td class="p-1" style="width:20%; border-width:0 1px 1px 1px; border-color:rgba(0,0,0,0.2); border-style:dashed; letter-spacing:-4px">
<div class="d-flex justify-content-center" style="flex-wrap:nowrap">
<i class="fa-solid fa-shirt fa-lg"></i>
<i class="fa-solid fa-sword fa-lg"></i>
</div>
</td>
<td class="p-1" style="width:20%; border-width:0 0 1px 1px; border-color:rgba(0,0,0,0.2); border-style:dashed">
<i class="fa-solid fa-equals fa-lg"></i>
</td>
</tr>
<!-- HP -------------------------------------->
<tr>
<td class="p-1 px-2 text-right" style="border-left:0; border-right:1px dashed; border-color:rgba(0,0,0,0.2); font-family:'georgia', serif; font-weight:900">
HP
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2);">
0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:0; border-color:rgba(0,0,0,0.2); font-weight:700">
0
</td>
</tr>
<!-- MP -------------------------------------->
<tr>
<td class="p-1 px-2 text-right" style="border-left:0; border-right:1px dashed; border-color:rgba(0,0,0,0.2); font-family:'georgia', serif; font-weight:900">
MP
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2);">
0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:0; border-color:rgba(0,0,0,0.2); font-weight:700">
0
</td>
</tr>
<!-- ATTACK -------------------------------------->
<tr>
<td class="p-1 px-2 text-right" style="border-left:0; border-right:1px dashed; border-color:rgba(0,0,0,0.2); font-family:'georgia', serif; font-weight:900">
ATTACK
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2);">
0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:0; border-color:rgba(0,0,0,0.2); font-weight:700">
0
</td>
</tr>
<!-- MAGIC -------------------------------------->
<tr>
<td class="p-1 px-2 text-right" style="border-left:0; border-right:1px dashed; border-color:rgba(0,0,0,0.2); font-family:'georgia', serif; font-weight:900">
MAGIC
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2);">
0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:0; border-color:rgba(0,0,0,0.2); font-weight:700">
0
</td>
</tr>
<!-- DEFENCE -------------------------------------->
<tr>
<td class="p-1 px-2 text-right" style="border-left:0; border-right:1px dashed; border-color:rgba(0,0,0,0.2); font-family:'georgia', serif; font-weight:900">
DEFENCE
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2);">
0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:0; border-color:rgba(0,0,0,0.2); font-weight:700">
0
</td>
</tr>
<!-- SPEED -------------------------------------->
<tr>
<td class="p-1 px-2 text-right" style="border-left:0; border-right:1px dashed; border-color:rgba(0,0,0,0.2); font-family:'georgia', serif; font-weight:900">
SPEED
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2);">
0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:1px dashed; border-color:rgba(0,0,0,0.2); color:#89a4bb;">
+0
</td>
<td class="p-1" style="border-left:1px dashed; border-right:0; border-color:rgba(0,0,0,0.2); font-weight:700">
0
</td>
</tr>
</tbody>
</table>
</div>
<!-- WEAPON N STUFF
---------------------------------------------->
<div class="row no-gutters mx-n2 mb-3">
<!-- LEFT SIDE -------------------------------------->
<div class="col-sm-6 p-1 px-2">
<div class="row no-gutters">
<div class="col-auto">
<i class="fa-light fa-sword fa-fw"
style="font-size:30px; opacity:0.2"></i>
</div>
<div class="col py-1 pl-2" style="line-height:13px">
<p class="text-uppercase mb-0" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb;">
Weapon
</p>
<p style="font-family:courier new;">
content
</p>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters mt-3">
<div class="col-auto">
<i class="fa-light fa-helmet-battle fa-fw"
style="font-size:30px; opacity:0.2"></i>
</div>
<div class="col py-1 pl-2" style="line-height:13px">
<p class="text-uppercase mb-0" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb;">
Head
</p>
<p style="font-family:courier new;">
content
</p>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters mt-3">
<div class="col-auto">
<i class="fa-light fa-shirt fa-fw"
style="font-size:30px; opacity:0.2"></i>
</div>
<div class="col py-1 pl-2" style="line-height:13px">
<p class="text-uppercase mb-0" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb;">
Body
</p>
<p style="font-family:courier new;">
content
</p>
</div>
</div>
</div>
<!-- RIGHT SIDE -------------------------------------->
<div class="col-sm-6 p-1 px-2 my-auto">
<div class="row no-gutters">
<div class="col-auto">
<i class="fa-light fa-megaphone fa-fw"
style="font-size:30px; opacity:0.2"></i>
</div>
<div class="col py-1 pl-2" style="line-height:13px">
<p class="text-uppercase mb-0" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb;">
War Cry
</p>
<p style="font-family:courier new;">
"quote here?"
</p>
</div>
</div>
<!------------------------------------------>
<div class="row no-gutters mt-3">
<div class="col-auto">
<i class="fa-light fa-pot-food fa-fw"
style="font-size:30px; opacity:0.2"></i>
</div>
<div class="col py-1 pl-2" style="line-height:13px">
<p class="text-uppercase mb-0" style="font-weight:900; font-family:'georgia', serif; color:#89a4bb;">
Fav Food
</p>
<p style="font-family:courier new;">
content
</p>
</div>
</div>
</div>
</div>
<hr class="mt-2" style="border-style:dashed; border-color:rgba(0,0,0,0.2)">
<!-- SKILLS
---------------------------------------------->
<div class="row no-gutters mt-n2 mb-n1 mx-n2">
<!-- ONE -------------------------------------->
<div class="col-sm-6 p-1 px-2 mt-2">
<p class="mb-n1 text-uppercase" style="color:#89a4bb; font-family:'georgia', serif; font-weight:900;">
Title
</p>
<p>
description of skill here.
</p>
</div>
<!-- TWO -------------------------------------->
<div class="col-sm-6 p-1 px-2 mt-2">
<p class="mb-n1 text-uppercase" style="color:#89a4bb; font-family:'georgia', serif; font-weight:900;">
Title
</p>
<p>
description of skill here.
</p>
</div>
<!-- THREE -------------------------------------->
<div class="col-sm-6 p-1 px-2 mt-2">
<p class="mb-n1 text-uppercase" style="color:#89a4bb; font-family:'georgia', serif; font-weight:900;">
Title
</p>
<p>
description of skill here.
</p>
</div>
<!-- FOUR -------------------------------------->
<div class="col-sm-6 p-1 px-2 mt-2">
<p class="mb-n1 text-uppercase" style="color:#89a4bb; font-family:'georgia', serif; font-weight:900;">
Title
</p>
<p>
description of skill here.
</p>
</div>
<!-- add more skills ABOVE this line! -->
</div>
</div>
<!------------------------------------------------
BACKSTORY
------------------------------------------------->
<div class="tab-pane fade" id="embellish_three">
<!-- SUMMARY
---------------------------------------------->
<div class="mt-0">
<!-- HEADER -------------------------------------->
<div class="row no-gutters align-items-center" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Summary
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-book-bookmark"></i>
</div>
</div>
<!-- CONTENT -------------------------------------->
<ul class="mb-0 fa-ul" style="color:#6a6a6a">
<li class="my-1">
<span class="fa-li"><i class="fa-regular fa-bookmark fa-sm mr-1"></i></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li class="my-1">
<span class="fa-li"><i class="fa-regular fa-bookmark fa-sm mr-1"></i></span>
<p>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</li>
<li class="my-1">
<span class="fa-li"><i class="fa-regular fa-bookmark fa-sm mr-1"></i></span>
<p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</li>
<!-- add more notes above this line! -->
</ul>
</div>
<!-- PAST
---------------------------------------------->
<div class="mt-4">
<!-- HEADER -------------------------------------->
<div class="row no-gutters align-items-center" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Past
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-book-open-cover"></i>
</div>
</div>
<!-- CONTENT -------------------------------------->
<div class="text-justify" style="color:#6a6a6a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- PRESENT
---------------------------------------------->
<div class="mt-4">
<!-- HEADER -------------------------------------->
<div class="row no-gutters align-items-center" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Present
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-book-open-cover"></i>
</div>
</div>
<!-- CONTENT -------------------------------------->
<div class="text-justify" style="color:#6a6a6a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- add more ABOVE this line! -->
</div>
<!------------------------------------------------
DESIGN
------------------------------------------------->
<div class="tab-pane fade" id="embellish_four">
<div class="row no-gutters">
<!-- HEADER
---------------------------------------------->
<div class="col-12 row no-gutters align-items-center mb-3" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Design Notes
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-comment-alt-lines"></i>
</div>
</div>
<!-- FOCAL IMAGE
---------------------------------------------->
<div class="col-md-5 mb-md-0 mb-3">
<div class="card rounded-0 pb-2 pl-2 bg-transparent border-top-0 border-right-0" style="border-width:2px; border-color:#89a4bb">
<div class="card rounded-0 border-0 h-100 bg-transparent" style="min-height:390px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center">
</div>
</div>
</div>
<!-- DESIGN NOTES
---------------------------------------------->
<!--
> for some extra fun, you can change the [fa-angle-right] to something more specific about your character!
e.g. [fa-scissors] for a note related to hair!
-->
<div class="col-md-7">
<div class="card bg-transparent border-0 rounded-0 d-block d-md-flex" style="min-height:100%;">
<div style="flex:1 1 0; overflow:auto;">
<ul class="fa-ul mb-0" style="color:#6a6a6a">
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
content
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
content
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
content
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
content
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<li class="my-1"><span class="fa-li">
<i class="fa-regular fa-angle-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- add more notes above this line! -->
</ul>
</div>
</div>
</div>
<!-- COLOUR PALETTE
---------------------------------------------->
<div class="col-12 mt-3">
<div class="row no-gutters">
<div class="col" style="height:20px;
background-color:#c3ccd5;"></div>
<div class="col" style="height:20px;
background-color:#83a1b1;"></div>
<div class="col" style="height:20px;
background-color:#50818f;"></div>
<!-- add more colours above this line! -->
</div>
</div>
</div>
</div>
<!------------------------------------------------
RELATIONSHIPS
------------------------------------------------->
<div class="tab-pane fade" id="embellish_five">
<!-- HEADER
---------------------------------------------->
<div class="row no-gutters align-items-center" style="font-size:20px; font-family:'georgia', serif; text-shadow:2px 2px 0px rgba(0,0,0,0.2);">
<div class="col-auto">
<div class="text-uppercase" style="font-weight:900">
Relations
</div>
</div>
<div class="col px-3">
<hr style="border-color:rgba(0,0,0,0.2)">
</div>
<div class="col-auto">
<i class="fa-regular fa-comment-alt-lines"></i>
</div>
</div>
<!-- RELATION ONE
---------------------------------------------->
<!--
> just a note that the height of the scroll of the summary is dependant on the height of the image + quote box, but will be flat/non-scroll upon smaller screens
-->
<div class="row no-gutters mt-3">
<!-- LEFT SIDE -------------------------------------->
<div class="col-md-5 mb-md-0 mb-2">
<div class="card rounded-0 bg-transparent pt-2 px-2 border-bottom-0" style="border-width:2px; border-color:#89a4bb;">
<!-- IMAGE ------>
<div style="min-height:200px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#89a4bb"></div>
</div>
<!-- QUOTE BOX ------>
<div class="mt-n1">
<div class="card rounded-0 mx-auto" style="background:#fefefe; width:30px; height:30px; border-color:rgba(0,0,0,0.2); transform:rotate(45deg); margin-bottom:-15px;"></div>
<div class="card rounded-0 bg-transparent pb-2 px-2 border-top-0" style="border-width:2px; border-color:#89a4bb;">
<div class="card rounded-0 p-2 px-3 text-center font-italic" style="background:#fefefe; border-color:rgba(0,0,0,0.2); font-size:90%">
<i class="fa-regular fa-quote-left faded"
style="position:absolute; left:5px; top:5px; color:#89a4bb"></i>
<!-- QUOTE ABOUT RELATION -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<i class="fa-regular fa-quote-right faded"
style="position:absolute; right:5px; bottom:5px; color:#89a4bb"></i>
</div>
</div>
</div>
</div>
<!-- RIGHT SIDE -------------------------------------->
<div class="col-md pl-md-3 flex-column">
<!-- NAME + TAGS ------>
<div class="flex-grow-2">
<div class="h-100">
<div class="d-flex flex-wrap mx-n1 mb-n1">
<!-- LINK TO CHARACTER -->
<div class="flex-grow-2 m-1 px-2 text-center text-uppercase align-items-center" style="font-family:'georgia', serif; font-weight:900;">
<a class="text-reset"
href="LINK_TO_CHARACTER">
NAME HERE
</a>
</div>
<!-- TAG -->
<div class="flex-grow-1 card border-0 rounded-0 m-1 p-1 font-italic text-center" style="font-family:courier new; background:#89a4bb; color:#fff; font-size:90%;">
tag
</div>
<!-- add more tags ABOVE this line! -->
</div>
</div>
</div>
<!-- SUMMARY ------>
<div class="flex-grow-1 my-2">
<div class="card border-0 rounded-0 bg-transparent d-block d-md-flex" style="min-height:100%;">
<div class="text-justify pr-md-3" style="flex:1 1 0; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
</div>
</div>
<!-- RELATION STATS ------>
<!--
> change [width:50%] to any value between 0–100%
-->
<div class="flex-grow-2">
<div class="h-100">
<div class="row no-gutters my-n1 mx-n2" style="font-family:courier new">
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Respect
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Trust
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Comfort
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Fondness
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATION TWO
---------------------------------------------->
<div class="row no-gutters mt-5">
<!-- LEFT SIDE -------------------------------------->
<div class="col-md-5 mb-md-0 mb-2">
<div class="card rounded-0 bg-transparent pt-2 px-2 border-bottom-0" style="border-width:2px; border-color:#89a4bb;">
<!-- IMAGE ------>
<div style="min-height:200px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#89a4bb"></div>
</div>
<!-- QUOTE BOX ------>
<div class="mt-n1">
<div class="card rounded-0 mx-auto" style="background:#fefefe; width:30px; height:30px; border-color:rgba(0,0,0,0.2); transform:rotate(45deg); margin-bottom:-15px;"></div>
<div class="card rounded-0 bg-transparent pb-2 px-2 border-top-0" style="border-width:2px; border-color:#89a4bb;">
<div class="card rounded-0 p-2 px-3 text-center font-italic" style="background:#fefefe; border-color:rgba(0,0,0,0.2); font-size:90%">
<i class="fa-regular fa-quote-left faded"
style="position:absolute; left:5px; top:5px; color:#89a4bb"></i>
<!-- QUOTE ABOUT RELATION -->
<p>Lorem.</p>
<i class="fa-regular fa-quote-right faded"
style="position:absolute; right:5px; bottom:5px; color:#89a4bb"></i>
</div>
</div>
</div>
</div>
<!-- RIGHT SIDE -------------------------------------->
<div class="col-md pl-md-3 flex-column">
<!-- NAME + TAGS ------>
<div class="flex-grow-2">
<div class="h-100">
<div class="d-flex flex-wrap mx-n1 mb-n1">
<!-- LINK TO CHARACTER -->
<div class="flex-grow-2 m-1 px-2 text-center text-uppercase align-items-center" style="font-family:'georgia', serif; font-weight:900;">
<a class="text-reset"
href="LINK_TO_CHARACTER">
NAME HERE
</a>
</div>
<!-- TAG -->
<div class="flex-grow-1 card border-0 rounded-0 m-1 p-1 font-italic text-center" style="font-family:courier new; background:#89a4bb; color:#fff; font-size:90%;">
tag
</div>
<!-- TAG -->
<div class="flex-grow-1 card border-0 rounded-0 m-1 p-1 font-italic text-center" style="font-family:courier new; background:#89a4bb; color:#fff; font-size:90%;">
tag
</div>
<!-- add more tags ABOVE this line! -->
</div>
</div>
</div>
<!-- SUMMARY ------>
<div class="flex-grow-1 my-2">
<div class="card border-0 rounded-0 bg-transparent d-block d-md-flex" style="min-height:100%;">
<div class="text-justify pr-md-3" style="flex:1 1 0; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
</div>
</div>
<!-- RELATION STATS ------>
<!--
> change [width:50%] to any value between 0–100%
-->
<div class="flex-grow-2">
<div class="h-100">
<div class="row no-gutters my-n1 mx-n2" style="font-family:courier new">
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Respect
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Trust
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Comfort
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Fondness
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATION THREE
---------------------------------------------->
<div class="row no-gutters mt-5">
<!-- LEFT SIDE -------------------------------------->
<div class="col-md-5 mb-md-0 mb-2">
<div class="card rounded-0 bg-transparent pt-2 px-2 border-bottom-0" style="border-width:2px; border-color:#89a4bb;">
<!-- IMAGE ------>
<div style="min-height:200px;
background-image:url('IMG_URL_HERE');
background-size:cover;
background-position:center;
background-color:#89a4bb"></div>
</div>
<!-- QUOTE BOX ------>
<div class="mt-n1">
<div class="card rounded-0 mx-auto" style="background:#fefefe; width:30px; height:30px; border-color:rgba(0,0,0,0.2); transform:rotate(45deg); margin-bottom:-15px;"></div>
<div class="card rounded-0 bg-transparent pb-2 px-2 border-top-0" style="border-width:2px; border-color:#89a4bb;">
<div class="card rounded-0 p-2 px-3 text-center font-italic" style="background:#fefefe; border-color:rgba(0,0,0,0.2); font-size:90%">
<i class="fa-regular fa-quote-left faded"
style="position:absolute; left:5px; top:5px; color:#89a4bb"></i>
<!-- QUOTE ABOUT RELATION -->
<p>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<i class="fa-regular fa-quote-right faded"
style="position:absolute; right:5px; bottom:5px; color:#89a4bb"></i>
</div>
</div>
</div>
</div>
<!-- RIGHT SIDE -------------------------------------->
<div class="col-md pl-md-3 flex-column">
<!-- NAME + TAGS ------>
<div class="flex-grow-2">
<div class="h-100">
<div class="d-flex flex-wrap mx-n1 mb-n1">
<!-- LINK TO CHARACTER -->
<div class="flex-grow-2 m-1 px-2 text-center text-uppercase align-items-center" style="font-family:'georgia', serif; font-weight:900;">
<a class="text-reset"
href="LINK_TO_CHARACTER">
NAME HERE
</a>
</div>
<!-- TAG -->
<div class="flex-grow-1 card border-0 rounded-0 m-1 p-1 font-italic text-center" style="font-family:courier new; background:#89a4bb; color:#fff; font-size:90%;">
tag
</div>
<!-- TAG -->
<div class="flex-grow-1 card border-0 rounded-0 m-1 p-1 font-italic text-center" style="font-family:courier new; background:#89a4bb; color:#fff; font-size:90%;">
tag
</div>
<!-- TAG -->
<div class="flex-grow-1 card border-0 rounded-0 m-1 p-1 font-italic text-center" style="font-family:courier new; background:#89a4bb; color:#fff; font-size:90%;">
longer tag
</div>
<!-- add more tags ABOVE this line! -->
</div>
</div>
</div>
<!-- SUMMARY ------>
<div class="flex-grow-1 my-2">
<div class="card border-0 rounded-0 bg-transparent d-block d-md-flex" style="min-height:100%;">
<div class="text-justify pr-md-3" style="flex:1 1 0; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
</div>
</div>
<!-- RELATION STATS ------>
<!--
> change [width:50%] to any value between 0–100%
-->
<div class="flex-grow-2">
<div class="h-100">
<div class="row no-gutters my-n1 mx-n2" style="font-family:courier new">
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Respect
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Trust
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Comfort
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
<!------------------------------------------>
<div class="col-sm-6 p-1 px-2">
<div class="text-center text-uppercase">
Fondness
</div>
<div class="card rounded-0 p-1 bg-transparent" style="box-shadow:5px 5px 0px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); border-width:1px 4px; border-style:double;">
<div class="progress rounded-0 bg-transparent" style="height:4px;">
<div class="progress-bar" style="
width:50%;
background:#89a4bb"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- add more relations ABOVE this line! -->
</div>
</div></div></div></div></div></div></div></div></div>
<!------------------------------------------------
CREDITS
do not remove
------------------------------------------------->
<div class="text-center mt-1">
<a href="https://toyhou.se/18873582." class="text-muted faded tooltipster" title="custom code by jiko">
<i class="fa-regular fa-code small"></i>
</a>
</div>
</div>