[F2U] ♱ IDEATION / HOT BOY
created by:Praying
HTMLCustom ColorsCharacter
Copy
<!-- ✦✦ 【F2U】IDEATION by diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables AND Normal accents. 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. For accents, you are suggested to use CMD+F
[MAC] / CTRL+F [WIN].
- 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 colour
acc-bg: Secondary background
acc-bg2:a Tertiary background
bg-border: Border colour for the primary bg
border: Primary border colour
overlay: Optional background image overlay
hdr-overlay: Header photo overlay
text: Primary text colour
acc1: First accent text colour
flavour: Flavour text colour
font: Font family (Has to be TH safe)
ally: good standing colour - used for meters
partner: some sort of partner - used for meters
opp: bad standind colour - used for meters
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ VERY ACCENTED COLOURS:
Colours so accent, no variable is needed
- Meter bgs: rgba(255,255,255,0.2)
- Relationship pfp shadows: rgba(255,255,255,0.4)
- Ability headers: rgba(255,255,255,.18) rgba(255,255,255,0)
- Backstory Inset: #5a116c
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ QUICK FINDS:
CMD+F [MAC] / CTRL+F [WIN]!
> IMGLNK = put an img here
> VIDEOLINKHERE = put YT video id here
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--bg: #6e5b7c;
--acc-bg:#a698b0;
--acc-bg2:#a08caf;
--bg-border:#f6effa;
--border:#fff;
--overlay:rgba(93,39,112,0.74);
--hdr-overlay:rgba(95,41,126,0.74);
--text:#f3e8f7;
--acc1:#ffaceb;
--acc2:#7f129e;
--flavour:#fff;
--font:monospace;
--ally: #fff;
--partner: #f796f5;
--opp: #ff9a9a;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ===================================================== -->
<div class="col" style="
background-color: var(--overlay);
background-image:url(IMGLNK);
background-size:cover; background-position:center;
background-blend-mode:overlay">
<div class="row no-gutters justify-content-center" style="column-gap:10px">
<!-- ==================================================== ✦✦
COL 1 / BASICS
✧✧ ===================================================== -->
<div class="p-2" style="
background:var(--bg);
border-left:5px solid var(--bg-border);
border-right:5px solid var(--bg-border);
box-shadow:
inset 10px 0 15px -10px var(--bg-border),
inset -10px 0 15px -10px var(--bg-border);">
<div style="
position:sticky; top:0;
height:490px; width:210px;">
<!-- ==================== [01] pfp ===================== -->
<div class="justify-content-center mb-1">
<div style="
height:200px;
width: 200px;
background-image:url(IMGLNK);
background-size: cover;
background-position:center;
border-radius:20px; border:2px solid var(--border);
box-shadow:0px 2px 2px var(--border);
box-shadow: inset 0 0 10px 3px rgba(250,250,250,0.5);"></div>
</div>
<!-- ================ [02] flavour text ================= -->
<p class="text-center text-uppercase mb-2" style="
color:var(--flavour);
font-family:var(--font);
font-size:8px;
text-shadow:1px 1px 5px var(--flavour)">
respect the intelligence of mine
</p>
<!-- ==================== [03] name ===================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-wave fa-fw"></i> <b>name</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== [04] species ================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-dolphin fa-fw"></i> <b>species</b>
</span>
<span>
or race
</span>
</div>
<!-- ==================== [05] idea ===================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-buoy fa-fw"></i> <b>idea</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== [06] gender =================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-crab fa-fw"></i> <b>gender</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== [07] pronouns ================= -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-fish fa-fw"></i> <b>pronouns</b>
</span>
<span>
con/tent
</span>
</div>
<!-- ==================== [08] trope ==================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-lobster fa-fw"></i> <b>trope</b>
</span>
<span>
content
</span>
</div>
<!-- ================== [09] alignment ================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-lighthouse fa-fw"></i> <b>alignment</b>
</span>
<span>
content
</span>
</div>
<!-- ================== [10] archetype ================== -->
<div class="justify-content-between mb-4" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-person-swimming fa-fw"></i> <b>archetype</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== music ========================= -->
<div class="col justify-content-center align-items-center pt-0" style="
height:70px;
background-color:var(--bg);
background-image:url(IMGLNK);
background-blend-mode:overlay;
border-radius:30px;
border:2px solid var(--border);
background-size:cover;
background-position:center">
<span class="d-inline-block tooltipster"
title="song - artist name" data-toggle="tooltip" style="
position:relative; overflow:hidden;
color:var(--text);">
<i class="fas fa-compact-disc fa-spin" style="
font-size:30px;"></i>
<iframe style="width:300vh; height:230vh; position:absolute; top:-99vh; left:-99vh; opacity:0; z-index:1;"
src="https://www.youtube.com/embed/VIDEOLINKHERE"></iframe>
</span>
</div>
<!-- =================== End of COL 1 =================== -->
</div>
</div>
<!-- ==================================================== ✦✦
COL 2 / OTHERS
✧✧ ===================================================== -->
<div class="p-0" style="
width:570px; min-height:1497px; height:auto;
background-color:var(--bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border)">
<!-- ==================================================== ✦✦
PERSONALITY
✧✧ ===================================================== -->
<div class="p-1 text-center pt-4" style="
height:100px;
position:relative;
overflow:hidden;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;">
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:1;
background:linear-gradient(to bottom, var(--hdr-overlay),
var(--hdr-overlay));
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border);">
</div>
<h1 class="text-uppercase" style="
color:var(--text);
font-family:var(--font);
font-size:35px;
position:relative;
z-index:2;
letter-spacing:2px;
text-shadow:0 0 5px var(--text)">
Personality
</h1>
<p class="text-uppercase" style="
margin-top:-10px;
color:var(--flavour);
font-family:var(--font);
font-size:7px;
position:relative;
z-index:2;
text-shadow:0 0 5px var(--flavour)">
↘↘     I am who I act I am. Persona of all attributed
</p>
</div>
<!-- ================== Persona holder ================== -->
<div class="p-2 mb-2" style="
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);">
<!-- ================== Personality yap ================ -->
<div class="col p-3 mb-2" style="
background:var(--bg);
border-radius:30px;
border:2px solid var(--border);
font-size:9px;
font-family:var(--font);
color:var(--text)">
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>
<!-- ================== adective row ================== -->
<div class="row no-gutters justify-content-center" style="
column-gap:10px">
<!-- ================== [01] adj 1 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-- ================== [02] adj 2 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-- ================== [03] adj 3 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-- ================== [04] adj 4 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-------------------- add more above ------------------->
<!-- ================= End of Persona area ============== -->
</div>
</div>
<!-- ==================================================== ✦✦
Row Container | Abstraction
✧✧ ===================================================== -->
<div class="row no-gutters mb-2">
<div class="col-md-6">
<div class="text-center" style="
height:150px;
padding-top:54px;
background-color: var(--bg);
color:var(--flavour);
text-shadow:0 0 20px var(--flavour);
font-family:var(--font);
font-size:20px;
border-top: 2px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 2px solid var(--border)">
<u>ABST<span style="color:var(--acc1)">RACT</span>ION</u>
</div>
</div>
<div class="col pr-1 pt-2">
<!-- ================== [01] abstract 1 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-person-swimming fa-fw"></i> abstraction idea
</div>
<!-- ================== [02] abstract 2 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-squid fa-fw"></i> abstraction idea
</div>
<!-- ================== [03] abstract 3 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-narwhal fa-fw"></i> abstraction idea
</div>
<!-- ================== [04] abstract 4 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-wave fa-fw"></i> abstraction idea
</div>
<!-- ================= End of abstracton ================ -->
</div>
</div>
<!-- ==================================================== ✦✦
ABILITIES
✧✧ ===================================================== -->
<div class="row no-gutters mb-2" style="column-gap:3px">
<!-- ============== [01] ABILITY ==================== -->
<div class="col-md-6 p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-person-swimming fa-fw"></i> Ability one
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- ============== [02] ABILITY ==================== -->
<div class="col p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),
var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-narwhal fa-fw"></i> Ability Two
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- ============== [03] ABILITY ==================== -->
<div class="col-md-6 p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),
var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-buoy fa-fw"></i> Ability three
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- ============== [02] ABILITY ==================== -->
<div class="col p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),
var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-mask-snorkel fa-fw"></i> Ability four
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- end of row -->
</div>
<!-- ==================================================== ✦✦
BACKSTORY
✧✧ ===================================================== -->
<div class="p-1 text-center pt-4" style="
height:100px;
position:relative;
overflow:hidden;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;">
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:1;
background:linear-gradient(to bottom, var(--hdr-overlay),
var(--hdr-overlay));
border-top:5px solid var(--bg-border);
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border);">
</div>
<h1 class="text-uppercase" style="
color:var(--text);
font-family:var(--font);
font-size:35px;
position:relative;
z-index:2;
letter-spacing:2px;
text-shadow:0 0 5px var(--text)">
Backstory
</h1>
<p class="text-uppercase" style="
margin-top:-10px;
color:var(--flavour);
font-family:var(--font);
font-size:7px;
position:relative;
z-index:2;
text-shadow:0 0 5px var(--flavour)">
✦✦     Blessed be thee lore of mine
</p>
</div>
<!-- ================== Backstory holder =============== -->
<div class="p-2 mb-2" style="
height:300px;
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);
color:var(--acc2);
font-family:var(--font);
font-size:10px;
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg) rgba(213,139,139,0);
scrollbar-width: thin;
box-shadow: inset 0 14px 30px -10px #5a116c">
<!-- [OPT] Pagedoll -->
<img src="IMGLNK"
class="float-sm-left d-block mr-2 p-1 mr-1 hidden-sm-down hidden-md-down"
style="max-height:290px;">
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.
<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.
</div>
<!-- ==================================================== ✦✦
Relationships
✧✧ ===================================================== -->
<div class="col p-2 mb-2" style="
height:200px;
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg) rgba(213,139,139,0);
scrollbar-width: thin;">
<!-- ================== [01] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:50%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-- ================== [02] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:20%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-- ================== [03] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:5%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-- ================== [02] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:95%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-------------------- add more above ------------------->
<!-- ============== End of RELATIONS area ============= -->
</div>
<!-- ==================================================== ✦✦
TRIVIA
✧✧ ===================================================== -->
<div class="p-1 text-center pt-4" style="
height:100px;
position:relative;
overflow:hidden;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;">
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:1;
background:linear-gradient(to bottom, var(--hdr-overlay),
var(--hdr-overlay));
border-top:5px solid var(--bg-border);
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border);">
</div>
<h1 class="text-uppercase" style="
color:var(--text);
font-family:var(--font);
font-size:35px;
position:relative;
z-index:2;
letter-spacing:2px;
text-shadow:0 0 5px var(--text)">
Trivia
</h1>
<p class="text-uppercase" style="
margin-top:-10px;
color:var(--flavour);
font-family:var(--font);
font-size:7px;
position:relative;
z-index:2;
text-shadow:0 0 5px var(--flavour)">
↘↘     Perhaps more is need to know of me
</p>
</div>
<!-- ================== Trivia holder =============== -->
<div class="col p-3 mb-0" style="
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:4px solid var(--bg-border);
box-shadow: inset 0px -10px 10px -10px var(--bg-border);">
<div style="
background:var(--bg);
border:1px solid var(--border);
box-shadow:
inset 0 8px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- ================== trivia header ================== -->
<div class="text-uppercase justify-content-between p-1"
style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--bg);
border-bottom:1px solid var(--border);
text-shadow:0 0 5px var(--flavour);">
<span><i class="fa-solid fa-umbrella-beach fa-fw"></i> trivia</span>
<span>✦</span>
</div>
<!-- =================== trivia list =================== -->
<ul class="mb-0 p-2 pl-4" style="
height:90px;
font-size:9px;
line-height:1.45;
background: var(--acc-bg2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg) rgba(213,139,139,0);
scrollbar-width: thin;">
<li class="mb-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li class="mb-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li class="mb-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="mb-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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<!-------------------- add more above ------------------->
<!-- ========= End of Trivia area + COL 2 ============== -->
</ul>
</div>
</div>
</div>
<!-- ============== ✦✦ End of code! ================= ✦✦ -->
</div>
</div>
<!-- ==================================================== ✦✦
credits / do not remove
moving OK! Must be clickable
✧✧ ===================================================== -->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" class="text-muted" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; font-size:10px; font-family:monospace">✦✦✦</a></p>
</div>
Copy
<!-- ✦✦ 【F2U】HOT BOY by diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables AND Normal accents. 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. For accents, you are suggested to use CMD+F
[MAC] / CTRL+F [WIN].
- 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 colour
acc-bg: Secondary background
acc-bg2:a Tertiary background
bg-border: Border colour for the primary bg
border: Primary border colour
overlay: Optional background image overlay
hdr-overlay: Header photo overlay
text: Primary text colour
acc1: First accent text colour
flavour: Flavour text colour
font: Font family (Has to be TH safe)
ally: good standing colour - used for meters
partner: some sort of partner - used for meters
opp: bad standind colour - used for meters
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ VERY ACCENTED COLOURS:
Colours so accent, no variable is needed
- Meter bgs: rgba(255,255,255,0.2)
- Relationship pfp shadows: rgba(255,255,255,0.4)
- Ability headers: rgba(255,255,255,.18) rgba(255,255,255,0)
- Backstory Inset: #227c8a
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ QUICK FINDS:
CMD+F [MAC] / CTRL+F [WIN]!
> IMGLNK = put an img here
> VIDEOLINKHERE = put YT video id here
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--bg: #428388;
--acc-bg:#badee1;
--acc-bg2:#85abae;
--bg-border:#eff9fa;
--border:#fff;
--overlay:hsla(183,61%,72%,0.51);
--hdr-overlay:rgba(41,122,126,0.74);
--text:#d5f1f3;
--acc1:#74f6ff;
--acc2:#083a3e;
--flavour:#fff;
--font:monospace;
--ally: #fff;
--partner: #f796f5;
--opp: #ff9a9a;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ===================================================== -->
<div class="col" style="
background-color: var(--overlay);
background-image:url(IMGLNK);
background-size:20%; background-position:center;
background-blend-mode:overlay">
<div class="row no-gutters justify-content-center" style="column-gap:10px">
<!-- ==================================================== ✦✦
COL 1 / BASICS
✧✧ ===================================================== -->
<div class="p-2" style="
background:var(--bg);
border-left:5px solid var(--bg-border);
border-right:5px solid var(--bg-border);
box-shadow:
inset 10px 0 15px -10px var(--bg-border),
inset -10px 0 15px -10px var(--bg-border);">
<div style="
position:sticky; top:0;
height:490px; width:210px;">
<!-- ==================== [01] pfp ===================== -->
<div class="justify-content-center mb-1">
<div style="
height:200px;
width: 200px;
background-image:url(IMGLNK);
background-size: cover;
background-position:center;
border-radius:20px; border:2px solid var(--border);
box-shadow:0px 2px 2px var(--border);
box-shadow: inset 0 0 10px 3px rgba(250,250,250,0.5);"></div>
</div>
<!-- ================ [02] flavour text ================= -->
<p class="text-center text-uppercase mb-2" style="
color:var(--flavour);
font-family:var(--font);
font-size:8px;
text-shadow:1px 1px 5px var(--flavour)">
🛟 Hot Boy Summer all day every day 🏖
</p>
<!-- ==================== [03] name ===================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-wave fa-fw"></i> <b>name</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== [04] species ================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-dolphin fa-fw"></i> <b>species</b>
</span>
<span>
or race
</span>
</div>
<!-- ==================== [05] age ===================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-buoy fa-fw"></i> <b>age</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== [06] gender =================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-crab fa-fw"></i> <b>gender</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== [07] pronouns ================= -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-fish fa-fw"></i> <b>pronouns</b>
</span>
<span>
con/tent
</span>
</div>
<!-- ==================== [08] orientation ============ -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-lobster fa-fw"></i> <b>orientation</b>
</span>
<span>
content
</span>
</div>
<!-- ================== [09] alignment ================== -->
<div class="justify-content-between mb-1" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-lighthouse fa-fw"></i> <b>alignment</b>
</span>
<span>
content
</span>
</div>
<!-- ================== [10] MBTI ================== -->
<div class="justify-content-between mb-4" style="
color:var(--text);
font-size:10px;
font-family:var(--font)">
<span style="color:var(--acc1)">
<i class="fa-solid fa-person-swimming fa-fw"></i> <b>Myers Briggs</b>
</span>
<span>
content
</span>
</div>
<!-- ==================== music ========================= -->
<div class="col justify-content-center align-items-center pt-0" style="
height:70px;
background-color:var(--bg);
background-image:url(IMGLNK);
background-blend-mode:overlay;
border-radius:30px;
border:2px solid var(--border);
background-size:cover;
background-position:center">
<span class="d-inline-block tooltipster"
title="song - artist name" data-toggle="tooltip" style="
position:relative; overflow:hidden;
color:var(--text);">
<i class="fas fa-compact-disc fa-spin" style="
font-size:30px;"></i>
<iframe style="width:300vh; height:230vh; position:absolute; top:-99vh; left:-99vh; opacity:0; z-index:1;"
src="https://www.youtube.com/embed/VIDEOLINKHERE"></iframe>
</span>
</div>
<!-- =================== End of COL 1 =================== -->
</div>
</div>
<!-- ==================================================== ✦✦
COL 2 / OTHERS
✧✧ ===================================================== -->
<div class="p-0" style="
width:570px; min-height:1497px; height:auto;
background-color:var(--bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border)">
<!-- ==================================================== ✦✦
PERSONALITY
✧✧ ===================================================== -->
<div class="p-1 text-center pt-4" style="
height:100px;
position:relative;
overflow:hidden;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;">
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:1;
background:linear-gradient(to bottom, var(--hdr-overlay),
var(--hdr-overlay));
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border);">
</div>
<h1 class="text-uppercase" style="
color:var(--text);
font-family:var(--font);
font-size:35px;
position:relative;
z-index:2;
letter-spacing:2px;
text-shadow:0 0 5px var(--text)">
Personality
</h1>
<p class="text-uppercase" style="
margin-top:-10px;
color:var(--flavour);
font-family:var(--font);
font-size:7px;
position:relative;
z-index:2;
text-shadow:0 0 5px var(--flavour)">
↘↘     thats me babieeeeee! Complete with a coconut 🥥
</p>
</div>
<!-- ================== Persona holder ================== -->
<div class="p-2 mb-2" style="
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);">
<!-- ================== Personality yap ================ -->
<div class="col p-3 mb-2" style="
background:var(--bg);
border-radius:30px;
border:2px solid var(--border);
font-size:9px;
font-family:var(--font);
color:var(--text)">
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>
<!-- ================== adective row ================== -->
<div class="row no-gutters justify-content-center" style="
column-gap:10px">
<!-- ================== [01] adj 1 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-- ================== [02] adj 2 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-- ================== [03] adj 3 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-- ================== [04] adj 4 ===================== -->
<div class="col-auto p-2" style="
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:10px;
text-align:center;
display:inline-block;
clip-path:polygon(
0% 30%, 5% 15%, 12% 5%, 20% 10%, 28% 3%, 36% 12%, 44% 4%, 52% 10%, 60% 3%, 68% 12%, 76% 5%, 84% 15%, 92% 8%, 100% 20%,
100% 75%, 95% 88%, 88% 96%, 80% 90%, 72% 97%, 64% 88%, 56% 96%, 48% 90%, 40% 97%, 32% 88%, 24% 96%, 16% 90%, 8% 95%, 0% 80%);
box-shadow:
inset 0 4px 6px -4px var(--bg-border),
inset 0 -4px 6px -4px var(--bg-border);">
adjective
</div>
<!-------------------- add more above ------------------->
<!-- ================= End of Persona area ============== -->
</div>
</div>
<!-- ==================================================== ✦✦
Row Container | HOBBIES
✧✧ ===================================================== -->
<div class="row no-gutters mb-2">
<div class="col-md-6">
<div class="text-center" style="
height:150px;
padding-top:54px;
background-color: var(--bg);
color:var(--flavour);
text-shadow:0 0 20px var(--flavour);
font-family:var(--font);
font-size:20px;
border-top: 2px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 2px solid var(--border)">
<u>HO<span style="color:var(--acc1)">BB</span>IES</u>
</div>
</div>
<div class="col pr-1 pt-2">
<!-- ================== [01] hobby 1 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-person-swimming fa-fw"></i> hobby
</div>
<!-- ================== [02] hobby 2 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-squid fa-fw"></i> hobby
</div>
<!-- ================== [03] hobby 3 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-narwhal fa-fw"></i> hobby
</div>
<!-- ================== [04] hobby 4 ================= -->
<div class="col p-1 pr-2 text-right mb-2" style="
background:var(--bg);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius:0 20px 20px 0;
box-shadow: inset 10px 0px 10px -10px var(--border);
font-family:var(--font);
font-size:12px;
color:var(--text)">
<i class="fa-solid fa-wave fa-fw"></i> hobby
</div>
<!-- ================= End of abstracton ================ -->
</div>
</div>
<!-- ==================================================== ✦✦
ABILITIES
✧✧ ===================================================== -->
<div class="row no-gutters mb-2" style="column-gap:3px">
<!-- ============== [01] ABILITY ==================== -->
<div class="col-md-6 p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-person-swimming fa-fw"></i> Ability one
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- ============== [02] ABILITY ==================== -->
<div class="col p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),
var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-narwhal fa-fw"></i> Ability Two
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- ============== [03] ABILITY ==================== -->
<div class="col-md-6 p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),
var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-buoy fa-fw"></i> Ability three
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- ============== [02] ABILITY ==================== -->
<div class="col p-1">
<div style="
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),
var(--bg);
border:1px solid var(--border);
box-shadow:inset 0 6px 9px -7px var(--bg-border),inset 0 -6px 9px -7px var(--bg-border);
font-family:var(--font);
color:var(--text);
font-size:9px;
overflow:hidden;">
<div class="text-uppercase" style="
padding:4px 7px;
background:linear-gradient(to right,var(--hdr-overlay),rgba(255,255,255,.12));
border-bottom:1px solid var(--border);
color:var(--flavour);
letter-spacing:1px;">
<i class="fa-solid fa-mask-snorkel fa-fw"></i> Ability four
</div>
<div class="p-1" style="
height:60px;
line-height:1.3;
background:var(--acc-bg2);
color:var(--acc2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--acc-bg) rgba(213,139,139,0)">
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.
</div>
</div>
</div>
<!-- end of row -->
</div>
<!-- ==================================================== ✦✦
BACKSTORY
✧✧ ===================================================== -->
<div class="p-1 text-center pt-4" style="
height:100px;
position:relative;
overflow:hidden;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;">
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:1;
background:linear-gradient(to bottom, var(--hdr-overlay),
var(--hdr-overlay));
border-top:5px solid var(--bg-border);
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border);">
</div>
<h1 class="text-uppercase" style="
color:var(--text);
font-family:var(--font);
font-size:35px;
position:relative;
z-index:2;
letter-spacing:2px;
text-shadow:0 0 5px var(--text)">
Backstory
</h1>
<p class="text-uppercase" style="
margin-top:-10px;
color:var(--flavour);
font-family:var(--font);
font-size:7px;
position:relative;
z-index:2;
text-shadow:0 0 5px var(--flavour)">
✦✦     My lore is very insightful, promise 🛟
</p>
</div>
<!-- ================== Backstory holder =============== -->
<div class="p-2 mb-2" style="
height:300px;
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);
color:var(--acc2);
font-family:var(--font);
font-size:10px;
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg) rgba(213,139,139,0);
scrollbar-width: thin;
box-shadow: inset 0 14px 30px -10px #227c8a">
<!-- [OPT] Pagedoll -->
<img src="IMGLNK"
class="float-sm-left d-block mr-2 p-1 mr-1 hidden-sm-down hidden-md-down"
style="max-height:290px;
border:2px solid var(--border);">
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.
<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.
</div>
<!-- ==================================================== ✦✦
Relationships
✧✧ ===================================================== -->
<div class="col p-2 mb-2" style="
height:200px;
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:6px solid var(--bg-border);
border-bottom:6px solid var(--bg-border);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg) rgba(213,139,139,0);
scrollbar-width: thin;">
<!-- ================== [01] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:50%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-- ================== [02] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:20%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-- ================== [03] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:5%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-- ================== [02] RELATION =================== -->
<div class="col p-2 mb-2" style="
background:var(--bg);
border-radius:25px;
border:2px solid var(--border);
box-shadow:
inset 0 6px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- RELATIONSHIP / CHAARACTER NAME -->
<div class="text-uppercase" style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
margin-bottom:6px;
text-shadow:0 0 6px var(--flavour);">
<i class="fa-solid fa-heart fa-fw"></i>
relationship // name
</div>
<div class="row no-gutters align-items-center" style="
column-gap:8px;">
<!-- CHARACTER PFP -->
<div style="
width:55px;height:55px;
background-image:url(IMGLNK);
background-size:cover;
background-position:center;
border-radius:15px;
border:2px solid var(--border);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);">
</div>
<!-- INFO -->
<div class="col">
<!-- bar headers -->
<div class="justify-content-between text-uppercase" style="
font-size:9px;
margin-bottom:3px;">
<span style="color:var(--ally)">ally</span>
<span style="color:var(--partner)">partner</span>
<span style="color:var(--opp)">enemy</span>
</div>
<!-- meter / change width below -->
<div style="
height:6px;
background:rgba(255,255,255,0.2);
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;">
<div style="
width:95%;
height:100%;
background:
linear-gradient(to right,var(--ally), var(--partner), var(--opp));
box-shadow:0 0 6px var(--acc1);">
</div>
</div>
<!-- short desc abt relation -->
<div style="
font-size:9px;
line-height:1.3;
background:var(--overlay);
padding:3px 5px;
border-radius:10px;">
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.
</div>
</div>
</div>
</div>
<!-------------------- add more above ------------------->
<!-- ============== End of RELATIONS area ============= -->
</div>
<!-- ==================================================== ✦✦
TRIVIA
✧✧ ===================================================== -->
<div class="p-1 text-center pt-4" style="
height:100px;
position:relative;
overflow:hidden;
background-image:url(https://i.pinimg.com/originals/b0/98/6f/b0986feffca62796c74a2bd2bdd406bb.gif);
background-size:cover;
background-position:center;">
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:1;
background:linear-gradient(to bottom, var(--hdr-overlay),
var(--hdr-overlay));
border-top:5px solid var(--bg-border);
box-shadow:
inset 0 8px 8px -8px var(--bg-border),
inset 0 -8px 8px -8px var(--bg-border);">
</div>
<h1 class="text-uppercase" style="
color:var(--text);
font-family:var(--font);
font-size:35px;
position:relative;
z-index:2;
letter-spacing:2px;
text-shadow:0 0 5px var(--text)">
Trivia
</h1>
<p class="text-uppercase" style="
margin-top:-10px;
color:var(--flavour);
font-family:var(--font);
font-size:7px;
position:relative;
z-index:2;
text-shadow:0 0 5px var(--flavour)">
↘↘     Real hot boy shit! We stay cooking 🐋
</p>
</div>
<!-- ================== Trivia holder =============== -->
<div class="col p-3 mb-0" style="
background-color:var(--acc-bg);
background-image:url(https://file.toyhou.se/images/12345886_v1UEGpHn61GgamC.png);
border-top:4px solid var(--bg-border);
box-shadow: inset 0px -10px 10px -10px var(--bg-border);">
<div style="
background:var(--bg);
border:1px solid var(--border);
box-shadow:
inset 0 8px 10px -8px var(--bg-border),
inset 0 -6px 10px -8px var(--bg-border);
font-family:var(--font);
color:var(--text);">
<!-- ================== trivia header ================== -->
<div class="text-uppercase justify-content-between p-1"
style="
font-size:10px;
letter-spacing:1px;
color:var(--flavour);
background:
linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--bg);
border-bottom:1px solid var(--border);
text-shadow:0 0 5px var(--flavour);">
<span><i class="fa-solid fa-umbrella-beach fa-fw"></i> trivia</span>
<span>✦</span>
</div>
<!-- =================== trivia list =================== -->
<ul class="mb-0 p-2 pl-4" style="
height:90px;
font-size:9px;
line-height:1.45;
background: var(--acc-bg2);
overflow:auto;
overflow-x:hidden;
scrollbar-color:var(--bg) rgba(213,139,139,0);
scrollbar-width: thin;">
<li class="mb-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li class="mb-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li class="mb-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="mb-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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<!-------------------- add more above ------------------->
<!-- ========= End of Trivia area + COL 2 ============== -->
</ul>
</div>
</div>
</div>
<!-- ============== ✦✦ End of code! ================= ✦✦ -->
</div>
</div>
<!-- ==================================================== ✦✦
credits / do not remove
moving OK! Must be clickable
✧✧ ===================================================== -->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" class="text-muted" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; font-size:10px; font-family:monospace">✦✦✦</a></p>
</div>