[F2U] ♱ REPRISE
created by:Praying
HTMLCustom ColorsCharacter
Copy
<!-- ✦✦
"REPRISE" by Diadem (https://toyhou.se/diadem)
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://fluxer.gg/aaKwuWIX
꒰ა ˚₊ 𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟 ₊˚໒꒱
♥︎ NOTES:
- This code uses Variables. Meaning that if you edit
the hex/rgba codes and font family type, it'll change every
instance of the colours/fonts for the rest of the code
- As a reminder, do not remove the parenthesis for image
URLs. This is to make sure they work.
꒰ა ˚₊ 𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟 ₊˚໒꒱
♥︎ DESCRIPTION OF VARIABLES:
this is only to tell what each variable is responsible
for and to make your editing a little easier.
bg - primary background color
bg2 - secondary bg color / also a likely accent
shade - box shadow
decorbg - bg color for background-blend-mode
> may also be an accent
border - primary border color
border2 - accent border color
radius - overall border radius
btnbg - navbutton bg
btntext - navbutton text color
text - primary text color [likely accent]
rgbtext - accent text color
acctext - priamry accent text color
quotext - text color for green box quote
font - primary font (Has to be TH safe)
accfont - accent font (Has to be TH safe)
꒰ა ˚₊ 𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟 ₊˚໒꒱
♥︎ QUICK FINDS:
CMD+F [MAC] / CTRL+F [WIN]!
> IMGLINK = put an img here
> LINK_HERE = put a link or username here
> FONTMEME = fontmeme text here [hex - #8D1818]
https://fontmeme.com/fonts/gossip-font/
✧✧ -->
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--bg:#f3f8fc;
--bg2:#455556;
--shade:#2d0303;
--decorbg:rgba(65,84,110,0.72);
--border:#5a6673;
--border2:#f3f8fc;
--radius:10px;
--btnbg:#5d1616;
--btntext:#CBBFAF;
--text:#4e0d0d;
--rgbtext:rgba(58,73,100,0.41);
--acctext:#3b4e5e;
--quotext:#f3f7fb;
--font:serif;
--accfont:cursive;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ====================================================== -->
<div class="col-md-10 mx-auto p-3 text-center"
style="
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover; background-position:center;
background-color:var(--decorbg);
background-blend-mode:exclusion;
border:4px solid var(--border);
border-radius: var(--radius) var(--radius) 0 0;
box-shadow:3px 3px 3px var(--shade)">
<img src="https://fontmeme.com/permalink/261012/88a0ee12.png"
style="height:70px;
filter:drop-shadow(-2px 0px 5px #fff)
drop-shadow(2px 0px 5px #fff)">
</div>
<!-- ==================================================== ✦✦
Button Row
✧✧ ===================================================== -->
<div class="row nav no-gutters justify-content-center m-0" style="
font-size:14px; font-family:var(--font);
column-gap:0px;">
<!-- ================== [ D E C O R ] ==================== -->
<div class="hidden-sm-down p-2 col-1 text-center" style="
background:var(--btnbg); color:var(--btntext);
border-bottom:4px solid var(--border);
border-left:4px solid var(--border);">
<i class="fa-solid fa-clover"></i>
</div>
<!-- ================== [ A B T ] ==================== -->
<a href="#abt"
data-toggle="tab"
class="btn col-md-2 p-2 text-uppercase active"
style="
color:var(--btntext);
background-color:var(--btnbg);
border:0;
border-bottom:4px solid var(--border);
border-radius:0px;">
about
</a>
<!-- ================== [ S T O R Y ] =================== -->
<a href="#story"
data-toggle="tab"
class="
btn col-md-2 p-2 text-uppercase"
style="
color:var(--btntext);
background-color:var(--btnbg);
border:0;
border-bottom:4px solid var(--border);
border-radius:0px;">
story
</a>
<!-- ================== [ R E L A T ] ================== -->
<a href="#relations"
data-toggle="tab"
class="
btn col-md-2 p-2 text-uppercase "
style="
color:var(--btntext);
background-color:var(--btnbg);
border:0;
border-bottom:4px solid var(--border);
border-radius:0px;">
relationships
</a>
<!-- ================== [ T R I V I A ] ================ -->
<a href="#trivia"
data-toggle="tab"
class="
btn col-md-2 p-2 text-uppercase"
style="
color:var(--btntext);
background-color:var(--btnbg);
border:0;
border-bottom:4px solid var(--border);
border-radius:0px;">
trivia
</a>
<!-- ================== [ D E C O R ] ================== -->
<div class="hidden-sm-down p-2 col-1 text-center" style="
background:var(--btnbg); color:var(--btntext);
border-bottom:4px solid var(--border);
border-right:4px solid var(--border);
box-shadow:3px 3px 3px var(--shade)">
<i class="fa-solid fa-clover"></i>
</div>
</div>
<!-- ==================================================== ✦✦
TAB CONTENT START
✧✧ ====================================================== -->
<div class="p-2 mx-auto col-md-10" style="
background-color:var(--decorbg);
background-image:url(https://mobileimages.lowes.com/productimages/0438e9de-fc24-4fc9-8f04-3097c75eaaec/67141889.jpeg);
background-size:30%;
background-position:center;
background-blend-mode:exclusion;
border-right:4px solid var(--border);
border-bottom:4px solid var(--border);
border-left:4px solid var(--border);
box-shadow:3px 3px 3px var(--shade)">
<div class="tab-content" style="
background:var(--bg);">
<!-- ==================================================== ✦✦
TAB 1 | ABT
✧✧ ====================================================== -->
<div class="tab-pane fade active show" id="abt" style="
transition-duration:1s">
<div class="p-0" style="color:var(--text)">
<div class="row no-gutters justify-content-center"
style="column-gap:10px;
color:var(--text); font-family:var(--font)">
<!-- ==================================================== ✦✦
T1 / COL 1 / basic
✧✧ ====================================================== -->
<div class="col-md-4" style="
background:var(--bg2);
box-shadow: inset -12px 0px 5px -10px var(--border2);
background-image:url(https://mobileimages.lowes.com/productimages/0438e9de-fc24-4fc9-8f04-3097c75eaaec/67141889.jpeg);
background-size:cover;
background-position:center;
background-blend-mode:multiply;
border:2px solid var(--border2)">
<!-- ================== [ I M A G E ] =================== -->
<div class="mb-1 col text-center p-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/118870884_2NM.png" class="p-2" style="
width:200px;
height:200px;
object-fit:cover;
background:var(--decorbg);
border-radius:var(--radius) var(--radius) 0 0;
border:2px solid var(--border2);
box-shadow:0 0 10px var(--border2)">
</div>
<!-- ================== [ N A M E ] ==================== -->
<div class="row no-gutters col pt-0 pb-0 pl-1 pr-2
justify-content-between mb-1"
style="background: var(--bg); font-size:12px ">
<span class="col p-0 text-uppercase" style="
color:var(--acctext)">
<i class="far fa-signature"></i> name
</span>
<span class="col-auto p-0">
content
</span>
</div>
<!-- ================== [ A G E ] ==================== -->
<div class="row no-gutters col pt-0 pb-0 pl-1 pr-2
justify-content-between mb-1"
style="background: var(--bg); font-size:12px ">
<span class="col p-0 text-uppercase" style="
color:var(--acctext)">
<i class="far fa-calendar"></i> age
</span>
<span class="col-auto p-0">
content
</span>
</div>
<!-- =============== [ S P E C I E S ] ================ -->
<div class="row no-gutters col pt-0 pb-0 pl-1 pr-2
justify-content-between mb-1"
style="background: var(--bg); font-size:12px ">
<span class="col p-0 text-uppercase" style="
color:var(--acctext)">
<i class="far fa-paw"></i> species
</span>
<span class="col-auto p-0">
or race
</span>
</div>
<!-- ================== [ G E N D E R ] ================= -->
<div class="row no-gutters col pt-0 pb-0 pl-1 pr-2
justify-content-between mb-1"
style="background: var(--bg); font-size:12px ">
<span class="col p-0 text-uppercase" style="
color:var(--acctext)">
<i class="far fa-venus-mars"></i> gender
</span>
<span class="col-auto p-0">
content ・ pro/noun
</span>
</div>
<!-- ============= [ O R I E N T A T I O N] ============= -->
<div class="row no-gutters col pt-0 pb-0 pl-1 pr-2
justify-content-between mb-1"
style="background: var(--bg); font-size:12px ">
<span class="col p-0 text-uppercase" style="
color:var(--acctext)">
<i class="far fa-flag"></i> orientation
</span>
<span class="col-auto p-0">
content
</span>
</div>
<!-- ============== [ O C C U P A T I O N ] ============= -->
<div class="row no-gutters col pt-0 pb-0 pl-1 pr-2
justify-content-between mb-1"
style="background: var(--bg); font-size:12px ">
<span class="col p-0 text-uppercase" style="
color:var(--acctext)">
<i class="far fa-briefcase"></i> occupation
</span>
<span class="col-auto p-0">
content
</span>
</div>
<div class="row no-gutters text-center mt-2" style="
column-gap:10px">
<!-- ============== [ W O R T H ] ============= -->
<div class="col-md-3 mx-auto p-1 mb-2 text-center" style="
background:var(--bg);
border-radius:var(--radius);
box-shadow:0px -3px 3px var(--shade)">
<span style="
position:relative; display:inline-block">
<i class="fa-solid fa-dollar-sign" style="
color:var(--rgbtext)"></i>
<span style="
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
white-space:nowrap">
$$$
</span>
</span>
</div>
<!-- ============== [ W O R T H ] ============= -->
<a href="/LINK_HERE" class="col-md-3 mx-auto p-1 mb-2
text-center tooltipster text-uppercase"
title="Designer (change only link)"
data-toggle="tooltip"
style="
background:var(--bg);
border-radius:var(--radius);
box-shadow:0px 3px 3px var(--shade);
color:var(--text)">
<span style="
position:relative; display:inline-block">
<i class="fa-solid fa-palette" style="
color:var(--rgbtext)"></i>
<span style="
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
white-space:nowrap">
designer
</span>
</span>
</a>
<!-- ============== [ C O D E C R E D ] ============= -->
<a href="/diadem" class="col-md-3 mx-auto p-1 mb-2 text-center
text-uppercase" style="
background:var(--bg);
border-radius:var(--radius);
box-shadow:0px -3px 3px var(--shade);
color:var(--acctext)">
<span style="
position:relative; display:inline-block">
<i class="fa-solid fa-code" style="
color:var(--rgbtext)"></i>
<span style="
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
white-space:nowrap">
diadem
</span>
</span>
</a>
</div>
</div>
<!-- ==================================================== ✦✦
T1 / COL 2 / ABT SHT
✧✧ ====================================================== -->
<div class="col pt-3 pb-3 pr-3">
<div class="p-3" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;">
<div class="pt-1 pb-1 pl-0 pr-0" style="
background:var(--bg);
height:350px;
overflow:auto; overflow-x:hidden;
scrollbar-width:none;">
<!-- ============== [ H E A D E R || ABT] ============= -->
<div class="p-0 mb-2" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;
height:20px;">
<h2 class="text-right p-0 m-0 text-uppercase"
style="
color:var(--bg);
font-family:arial black;
transform:scaleY(2);">
about me
</h2>
</div>
<!-- ============== [ OPT | I C O N ] ============= -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/126047179_4VnmlFzS08GFL8M.png"
class="float-sm-left d-block mx-1 mb-1 p-2 mr-1
hidden-sm-down hidden-md-down"
style="max-height:200px;
filter:drop-shadow(10px 10px 0px var(--shade))">
<!-- ============== [ P A R A G R A P H ] ============= -->
<p class="text-justify mt-4 pr-3 pl-3" style="
font-size:12px">
<span style="color:var(--acctext)"><i>Lorem ipsum dolor sit amet,</i></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. 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.
<br><br>
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.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.
<!-- ADD MORE ABOVE -->
</p>
<div class="row no-gutters justify-content-center mb-3 pt-2"
style="column-gap:10px">
<!-- ============== [ D E C O R ] ============= -->
<div class="col pt-1 pb-0 pl-0 pr-0 text-center" style="
color:var(--acctext); font-family:var(--accfont);
border-right:2px dotted var(--border)">
<i class="far fa-sparkle fa-spin"></i>
</div>
<!-- ============== [ T R A I T ] ============= -->
<div class="col-md-3 pt-1 pb-0 pl-0 pr-0 text-center" style="
color:var(--acctext); font-family:var(--accfont);
border-right:2px dotted var(--border)">
trait
</div>
<!-- ============== [ T R A I T ] ============= -->
<div class="col-md-3 pt-1 pb-0 pl-0 pr-0 text-center" style="
color:var(--acctext); font-family:var(--accfont);
border-right:2px dotted var(--border)">
trait
</div>
<!-- ============== [ T R A I T ] ============= -->
<div class="col-md-3 pt-1 pb-0 pl-0 pr-0 text-center" style="
color:var(--acctext); font-family:var(--accfont);
border-right:2px dotted var(--border)">
trait
</div>
<!-- ============== [ D E C O R ] ============= -->
<div class="col pt-1 pb-0 pl-0 pr-0 text-center" style="
color:var(--acctext); font-family:var(--accfont);">
<i class="far fa-clover fa-spin fa-spin-reverse"></i>
</div>
</div>
<!-- ========== [ D E S I G N N O T E S || ABT] ====== -->
<div class="p-0 mb-2" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;
height:20px;">
<h2 class="text-LEFT p-0 m-0 text-uppercase"
style="
color:var(--bg);
font-family:arial black;
transform:scaleY(2);">
What makes me me?
</h2>
</div>
<!-- ============== [ D E S I G N P A R A ] ============= -->
<div class="pl-2 mb-2">
<div class="pl-2 pr-2" style="font-size:12px;
border-left:5px solid var(--bg2)">
<p>
Describe physical attributes or just add notes! 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>
<div class="row no-gutters justify-content-center pl-2 pr-2 pb-2" style="
column-gap:5px">
<!-- ============== [ Q U O T E ] ============= -->
<div class="col-4 p-2" style="
background:var(--bg2);
border-radius:var(--radius)">
<div class="p-4" style="
border:2px dashed var(--border);
border-radius:var(--radius);
font-family:var(--accfont); color:var(--quotext)">
<span class="d-block text-left">
<i class="fa-solid fa-quote-left"></i>
</span>
<span class="d-block" style="font-size:13px">
along the grand horizon, he gallops away...
</span>
<span class="d-block text-right">
<i class="fa-solid fa-quote-right"></i>
</span>
</div>
</div>
<!-- ============== [ D E S I G N I N F O ] =========== -->
<div class="col p-2" style="
background:var(--decorbg);
border-radius:var(--radius)">
<div class="p-2 h-100" style="
border:2px dashed var(--border2);
border-radius:var(--radius);
font-family:var(--accfont); color:var(--quotext)">
<div style="height:130px; overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg2) rgba(0,0,0,0);
scrollbar-width:thin">
<ul class="pl-2 mb-0" style="
list-style-type:none;
color:var(--text); font-family:var(--font);
font-size:12px">
<!-- N1 -->
<li class="mb-1">
<i class="fas fa-leaf fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- N2 -->
<li class="mb-1">
<i class="fas fa-leaf fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- N3 -->
<li class="mb-1">
<i class="fas fa-leaf fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- N4 -->
<li class="mb-1">
<i class="fas fa-leaf fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<!-- N5 -->
<li class="mb-1">
<i class="fas fa-leaf fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<!-- N6 -->
<li class="mb-0">
<i class="fas fa-leaf fa-fw"></i> 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.
</li>
<!-- ADD MORE ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<div class="row no-gutters justify-content-center mb-2">
<!-- ============== [ H E I G H T ] ============= -->
<div class="col-md-3 pt-0 pb-0 pl-2 pr-2 text-center" style="
border-right:2px dotted var(--border)">
<span class="d-block" style="color:var(--acctext);
font-family:var(--accfont); font-size:10px">
height
</span>
<span class="d-block" style="color:var(--text);
font-family:var(--font); font-size:13px">
00ft / 000cm
</span>
</div>
<!-- ============== [ B U I L D ] ============= -->
<div class="col-md-3 pt-0 pb-0 pl-2 pr-2 text-center" style="
border-right:2px dotted var(--border)">
<span class="d-block" style="color:var(--acctext);
font-family:var(--accfont); font-size:10px">
build
</span>
<span class="d-block" style="color:var(--text);
font-family:var(--font); font-size:13px">
content
</span>
</div>
<!-- ============== [ W E I G H T ] ============= -->
<div class="col-md-3 pt-0 pb-0 pl-2 pr-2 text-center" style="
border-right:2px dotted var(--border)">
<span class="d-block" style="color:var(--acctext);
font-family:var(--accfont); font-size:10px">
weight
</span>
<span class="d-block" style="color:var(--text);
font-family:var(--font); font-size:13px">
000lbs / 000kg
</span>
</div>
<!-- ========= [ D O M I N A N T H A N D ] ============ -->
<div class="col-md-3 pt-0 pb-0 pl-2 pr-2 text-center">
<span class="d-block" style="color:var(--acctext);
font-family:var(--accfont); font-size:10px">
dominant hand
</span>
<span class="d-block" style="color:var(--text);
font-family:var(--font); font-size:13px">
left/right/ambi
</span>
</div>
</div>
<!-- ============== [ D E C O R P H O T O ] ============= -->
<div class="col" style="
height:50px;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/119131860_iK78yzvMeLfM79H.png);
background-size:cover; background-position:center;
background-color:var(--decorbg);
background-blend-mode:overlay;
border-top:4px double var(--border2);
border-bottom:4px double var(--border2);"></div>
<div class="row no-gutters p-2" style="column-gap:12px">
<!-- ============== [ L I K E S ] ============= -->
<div class="col-md-6 pt-1 pb-0" style="color:var(--acctext);
font-size:11px; border:2px dotted var(--border);
font-family:var(--accfont)">
<h2 class="text-center p-1" style="border-bottom:2px dotted var(--border);">
I like...
</h2>
<ul class="pl-2 mb-0" style="list-style-type:none;
height:150px; overflow:auto; overflow-x:hidden;
font-family:var(--text);
scrollbar-color:var(--border) rgba(0,0,0,0);
scrollbar-width:thin;">
<!-- L1 -->
<li class="mb-1">
<i class="fa-solid fa-flower fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L2 -->
<li class="mb-1">
<i class="fa-solid fa-flower fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L3 -->
<li class="mb-1">
<i class="fa-solid fa-flower fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L4 -->
<li class="mb-1">
<i class="fa-solid fa-flower fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L5 -->
<li class="mb-1">
<i class="fa-solid fa-flower fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L6 -->
<li class="mb-1">
<i class="fa-solid fa-flower fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<!-- ADD MORE ABOVE -->
</ul>
</div>
<!-- ============== [ D I S L I K E S ] ============= -->
<div class="col pt-1 pb-0" style="color:var(--text);
font-size:11px;;
font-family:var(--accfont)">
<h2 class="text-center p-1">
I <u>Dislike</u>...
</h2>
<ul class="pl-2 mb-0" style="list-style-type:none;
height:150px; overflow:auto; overflow-x:hidden;
font-family:var(--text);
scrollbar-color:var(--text) rgba(0,0,0,0);
scrollbar-width:thin;">
<!-- L1 -->
<li class="mb-1">
<i class="fa-solid fa-skull fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L2 -->
<li class="mb-1">
<i class="fa-solid fa-skull fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L3 -->
<li class="mb-1">
<i class="fa-solid fa-skull fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L4 -->
<li class="mb-1">
<i class="fa-solid fa-skull fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L5 -->
<li class="mb-1">
<i class="fa-solid fa-skull fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- L6 -->
<li class="mb-1">
<i class="fa-solid fa-skull fa-spin mr-1" style="animation-duration:5s"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<!-- ADD MORE ABOVE -->
</ul>
</div>
</div>
<div class="p-1">
<div class="col p-3" style="
border-left:3px solid var(--border); border-right:3px dashed var(--border);
border-radius:var(--radius);
font-family:var(--accfont); font-size:12px;">
<div class="row">
<div class="col-6 mb-1">
<p class="text-left" style="color:var(--text)"> Charisma</p>
<div class="w-100 progress mb-2 bg-transparent pb-1"
style="height:1px; border: 1px solid var(--bg2)">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: linear-gradient(to right, var(--bg2) 50%, var(--bg));"
></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-right" style="color:var(--text)"> Integrity</p>
<div class="w-100 progress mb-2 bg-transparent pb-1"
style="height:1px; border: 1px solid var(--bg2)">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: linear-gradient(to right, var(--bg2) 50%, var(--bg));"
></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-left" style="color:var(--text)"> Temperment</p>
<div class="w-100 progress mb-2 bg-transparent pb-1"
style="height:1px; border: 1px solid var(--bg2)">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: linear-gradient(to right, var(--bg2) 50%, var(--bg));"
></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-right" style="color:var(--text)"> Confidence</p>
<div class="w-100 progress mb-2 bg-transparent pb-1"
style="height:1px; border: 1px solid var(--bg2)">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: linear-gradient(to right, var(--bg2) 50%, var(--bg));"
></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-left" style="color:var(--text)"> Empathy</p>
<div class="w-100 progress mb-2 bg-transparent pb-1"
style="height:1px; border: 1px solid var(--bg2)">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: linear-gradient(to right, var(--bg2) 50%, var(--bg));"
></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-right" style="color:var(--text)"> Patience</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1"
style="height:1px; border: 1px solid var(--bg2)">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: linear-gradient(to right, var(--bg2) 50%, var(--bg));"
></div></div>
</div>
<!-- END OF STATS -->
</div>
</div>
</div>
<!-- ============= ✦✦ End of ABT ================== ✦✦ -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================================================== ✦✦
TAB 2 | Story
✧✧ ====================================================== -->
<div class="tab-pane fade" id="story" style="
transition-duration:1s">
<div class="pt-0 pb-1 pl-0 pr-0" style="color:var(--text);
height:414px; overflow:auto; overflow-x:hidden;
scrollbar-width:none">
<!-- ============== [ C. W A R N S ] ============= -->
<div class="p-1" >
<p class="text-center p-2 mt-2 mb-2" style="
color:var(--text); font-family:var(--accfont);
font-size:12px;
border-left:3px solid var(--border);
border-right:3px solid var(--border)">
content warning / content warning / content warning
</p>
</div>
<!-- ============== [ H E A D E R || CHILD] ============= -->
<div class="p-0 mb-2" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;
height:25px;
position:sticky; top:0; z-index:2">
<h2 class="text-center p-0 m-0 text-uppercase"
style="
color:var(--bg);
font-family:arial black;
transform:scaleY(2);">
beginning of my life
</h2>
</div>
<p class=" pl-2 pt-2 pr-2" style="color:var(--text);
font-family:var(--font); font-size:12px">
<!-- ============== [ OPT | I M A G E ] ============= -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/118870866_jlhpfsqGgYAGldu.png"
class="float-sm-left d-block mx-2 mb-1 p-2 mr-1 hidden-sm-down hidden-md-down"
style="height:300px; max-width:150px; object-fit:cover;
border-radius: var(--radius) 0 0 var(--radius);
filter:drop-shadow(2px 2px 3px var(--shade))">
<span style="color:var(--acctext)">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. 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. 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.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.
<br><br>
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.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.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.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. 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.
<br><br>
<span style="color:var(--acctext)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</span> 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. 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. 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.
<!-- ADD MORE AS NEEDED -->
</p>
<!-- ============== [ H E A D E R || TEEN ] ============= -->
<div class="p-0 mb-2" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;
height:25px;
position:sticky; top:0; z-index:2">
<h2 class="text-center p-0 m-0 text-uppercase"
style="
color:var(--bg);
font-family:arial black;
transform:scaleY(2);">
grasping the world
</h2>
</div>
<p class=" pl-2 pt-2 pr-2" style="color:var(--text);
font-family:var(--font); font-size:12px">
<span style="color:var(--acctext)">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. 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. 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.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.
<br><br>
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.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.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.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. 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.
<br><br>
<span style="color:var(--acctext)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</span> 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. 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. 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.
<!-- ADD MORE AS NEEDED -->
</p>
<!-- ============== [ H E A D E R || ADULT ] =========== -->
<div class="p-0 mb-2" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;
height:25px;
position:sticky; top:0; z-index:2">
<h2 class="text-center p-0 m-0 text-uppercase"
style="
color:var(--bg);
font-family:arial black;
transform:scaleY(2);">
becoming my own person
</h2>
</div>
<p class=" pl-2 pt-2 pr-2" style="color:var(--text);
font-family:var(--font); font-size:12px">
<!-- ============== [ OPT | I M A G E ] ============= -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/118870780_rtf1435L1fRHlE7.png"
class="float-sm-right d-block mx-2 mb-1 p-2 mr-1 hidden-sm-down hidden-md-down"
style="height:300px; max-width:150px; object-fit:cover;
border-radius: 0 var(--radius) var(--radius) 0;
filter:drop-shadow(-2px -2px 3px var(--shade))">
<span style="color:var(--acctext)">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. 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. 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.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.
<br><br>
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.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.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.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. 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.
<br><br>
<span style="color:var(--acctext)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</span> 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. 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. 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.
<!-- ADD MORE AS NEEDED -->
</p>
<!-- ============= ✦✦ End of STORY ================== ✦✦ -->
</div>
</div>
<!-- ==================================================== ✦✦
TAB 3 | RELATIONSHIPS
✧✧ ====================================================== -->
<div class="tab-pane fade" id="relations" style="
transition-duration:1s">
<div class="p-1" style="color:var(--text);
height:414px">
<div class="p-3" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;">
<div class="pt-1 pb-1 pl-0 pr-0" style="
background:var(--bg);
height:374px;
overflow:auto; overflow-x:hidden;
scrollbar-width:none;">
<!-- ============== [ OPT | QUOTE ] =========== -->
<div class="p-2 mb-2 text-center">
<div class="p-3" style="
border-left:2px solid var(--border);
border-right:3px solid var(--border);
border-radius:20px;
color:var(--rgbtext); font-family:var(--accfont)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="d-block text-center col mt-1">
<i class="fa-solid fa-clover fa-spin"></i>
</span>
</div>
</div>
<!-- ============== [ C H A R A 01 ] ============= -->
<div class="col-12 p-3 mb-2" style="
font-family:var(--font)">
<div class="d-flex">
<img src="https://i.pinimg.com/736x/84/e9/6f/84e96ffd26345abe54ada2a8ca0689c4.jpg"
class="p-1"
style="
width:100px;
height:100px;
object-fit:cover;
border-radius:17px;
flex-shrink:0;
border:3px solid var(--border)">
<div class="col pl-2 pr-0">
<div class="d-flex justify-content-between align-items-center">
<a href="LINK_HERE" class="text-uppercase" style="
color:var(--accent);
font-weight:bold;
font-size:15px;">
CHARACTER NAME
</a>
<span class="text-uppercase" style="
color:var(--text);
font-size:11px;
letter-spacing:.5px;">
RELATIONSHIP
<i class="fa-solid fa-rings-wedding"></i>
</span>
</div>
<div style="
color:var(--text);
font-size:14px;">
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.
</div>
</div>
</div>
</div>
<!-- ============== [ C H A R A 02 ] ============= -->
<div class="col-12 p-3 mb-2" style="
font-family:var(--font)">
<div class="d-flex">
<img src="https://i.pinimg.com/736x/84/e9/6f/84e96ffd26345abe54ada2a8ca0689c4.jpg"
class="p-1"
style="
width:100px;
height:100px;
object-fit:cover;
border-radius:17px;
flex-shrink:0;
border:3px solid var(--border)">
<div class="col pl-2 pr-0">
<div class="d-flex justify-content-between align-items-center">
<a href="LINK_HERE" class="text-uppercase" style="
color:var(--accent);
font-weight:bold;
font-size:15px;">
CHARACTER NAME
</a>
<span class="text-uppercase" style="
color:var(--text);
font-size:11px;
letter-spacing:.5px;">
RELATIONSHIP
<i class="fa-solid fa-heart"></i>
</span>
</div>
<div style="
color:var(--text);
font-size:14px;">
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.
</div>
</div>
</div>
</div>
<!-- ============== [ C H A R A 03 ] ============= -->
<div class="col-12 p-3 mb-2" style="
font-family:var(--font)">
<div class="d-flex">
<img src="https://i.pinimg.com/736x/84/e9/6f/84e96ffd26345abe54ada2a8ca0689c4.jpg"
class="p-1"
style="
width:100px;
height:100px;
object-fit:cover;
border-radius:17px;
flex-shrink:0;
border:3px solid var(--border)">
<div class="col pl-2 pr-0">
<div class="d-flex justify-content-between align-items-center">
<a href="LINK_HERE" class="text-uppercase" style="
color:var(--accent);
font-weight:bold;
font-size:15px;">
CHARACTER NAME
</a>
<span class="text-uppercase" style="
color:var(--text);
font-size:11px;
letter-spacing:.5px;">
RELATIONSHIP
<i class="fa-solid fa-users"></i>
</span>
</div>
<div style="
color:var(--text);
font-size:14px;">
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.
</div>
</div>
</div>
</div>
<!-- ============== [ C H A R A 04 ] ============= -->
<div class="col-12 p-3 mb-2" style="
font-family:var(--font)">
<div class="d-flex">
<img src="https://i.pinimg.com/736x/84/e9/6f/84e96ffd26345abe54ada2a8ca0689c4.jpg"
class="p-1"
style="
width:100px;
height:100px;
object-fit:cover;
border-radius:17px;
flex-shrink:0;
border:3px solid var(--border)">
<div class="col pl-2 pr-0">
<div class="d-flex justify-content-between align-items-center">
<a href="LINK_HERE" class="text-uppercase" style="
color:var(--accent);
font-weight:bold;
font-size:15px;">
CHARACTER NAME
</a>
<span class="text-uppercase" style="
color:var(--text);
font-size:11px;
letter-spacing:.5px;">
RELATIONSHIP
<i class="fa-solid fa-skull"></i>
</span>
</div>
<div style="
color:var(--text);
font-size:14px;">
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.
</div>
</div>
</div>
</div>
<!-- Add more above -->
</div>
</div>
</div>
</div>
<!-- ==================================================== ✦✦
TAB 4 | TRIVIA
✧✧ ====================================================== -->
<div class="tab-pane fade" id="trivia" style="
transition-duration:1s">
<div class="col pt-3 pb-3 pr-3">
<div class="p-3" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;">
<div class="pt-0 pb-1 pl-0 pr-0 col-md-9 container" style="
background:var(--bg);
height:350px;
border:3px solid var(--border)">
<!-- ============== [ H E A D E R || ABT] ============= -->
<div class="p-0 pt-1 mb-2" style="
background:var(--bg2);
background-color:var(--decorbg);
background-image:url(https://i.pinimg.com/1200x/c3/91/22/c39122450b782e7a0d9ff1258fc26acd.jpg);
background-size:cover;
background-position:center;
background-blend-mode:exclusion;
height:26px;">
<h2 class="text-left p-0 m-0 text-uppercase"
style="
color:var(--bg);
font-family:arial black;
transform:scaleY(2);">
my misc facts
</h2>
</div>
<div class="pt-0 px-md-3 px-4 pb-md-1 pb-4" style="
max-height:100%; scrollbar-width:none;
scrollbar-color:var(--bg2) rgba(0,0,0,0);">
<!-- ============== [ OPT | I M A G E ] ============= -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/129324317_APXkrQU2dNwv3YS.png" class="float-lg-left
mr-lg-2 mb-lg-0 d-block mx-auto mb-3; hidden-sm-down"
style="max-height:300px;">
<!-- ==================================================== ✦✦
TRIVIA
✧✧ ====================================================== -->
<ul class="mt-2 " style="
color:var(--text); font-family:var(--font);
font-size:13px; list-style-type:decimal;
height:290px; overflow:auto; overflow-x: hidden">
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li class="my-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li class="my-1">
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.
</li>
<li class="my-1">
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.
</li>
<!-- ADD MORE ABOVE -->
</ul>
</div>
</div>
</div>
<!-- ============= ✦✦ End of code! ================== ✦✦ -->
</div>
</div>
</div>
</div>
</div>