Code

<!--=============================================

================In Chordus Code==================

===============Code by B0xerdancer===============

Made for the RP IN CHORDUS but would work for a warriors character too!

Accent Color #F1BFAE

Notes:

-works with Font Awesome

-if using css get rid of font family

==============================================-->

<div class="container px-2 px-lg-0 py-4" style="max width:100px; font-family: Georgia, Serif;">

<div class="row no-gutters">

<!-- LEFT STICKY SIDEBAR -->

<div class="col-12 col-lg-4 p-2">

<div style="position: sticky; top: 20px;">

<!-- MAIN IMAGE -->

<div class="card bg-faded p-2 mb-3" style="border-radius: 4 4 4 4; border-top: double 6px #F1BFAE; border-left: double 6px #F1BFAE; border-right: double 6px #F1BFAE">

<div class="card p-1" style="border-radius: 4 4 4 4;">

<div style="height: 420px; border-radius: 4 4 4 4; background-image: url(https://i.pinimg.com/736x/f8/23/40/f82340dfdfea6a3ced6404f378e5b196.jpg); background-size: cover; background-position: center; position: relative; overflow: hidden;">

<i class="fas fa-snowflake" style="position: absolute; top: 15px; left: 15px; color: rgba(255,255,255,.8); text-shadow: 0 0 8px rgba(0,0,0,.5);"></i>

<i class="fas fa-paw" style="position: absolute; bottom: 15px; right: 15px; color: rgba(255,255,255,.9); text-shadow: 0 0 8px rgba(0,0,0,.5);"></i>

</div>

</div>

</div>

<!-- BASIC INFO -->

<div class="card p-2 mb-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>C</b>lan</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card p-2 mb-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>R</b>ank</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card p-2 mb-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>A</b>ge</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card p-2 mb-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>M</b>entor</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card p-2 mb-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>A</b>pprentice</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card p-2 mb-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>S</b>tatus</div>

<div class="col-auto text-right">Alive / Dead / Missing</div>

</div>

</div>

<div class="card p-2" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><b>A</b>ffiliation</div>

<div class="col-auto text-right">Clan / Rogue / Loner </div>

</div>

</div>

</div>

</div>

<!-- MAIN CONTENT -->

<div class="col-12 col-lg-8 p-2">

<!-- NAME -->

<div class="card text-center py-3 mb-2" style="border-radius: 3 0 0 0; border-style: double; border-width: 5px; color: #F1BFAE;">

<div class="display-4"> NAME</div>

</div>

<div class="row no-gutters mb-3">

<div class="col"><hr></div>

<div class="col-auto px-2 text-muted"><i class="fas fa-paw"></i></div>

<div class="col"><hr></div>

</div>

<!-- QUOTE -->

<div class="card bg-faded p-3 text-center text-muted mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<i>

<i class="fas fa-quote-left mr-1"></i>

<b>Q</b>uote or short line here.

<i class="fas fa-quote-right ml-1"></i>

</i>

</div>

<!-- OVERVIEW -->

<div class="card p-4 mb-4" style="box-shadow: 2px 2px 10px rgba(0,0,0,.12); border-radius: 0;">

<div class="card bg-faded mx-auto mt-n5 py-1 px-3" style="border-top: double 5px #F1BFAE; border-radius: 0 0 1.5em 1.5em;">

<span style="color: #F1BFAE;"><i class="fas fa-leaf"></i></span>

</div>

<h2 class="text-center text-muted mt-2">Overview</h2>

<hr class="w-50">

<p class="text-justify">

<b>W</b>rite a short overview of your warrior here. You can summarize their role in the Clan, reputation, general demeanor, and how others tend to view them.

</p>

</div>

<!-- PERSONALITY -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Personality</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="row">

<div class="col-12 col-lg-7 p-2">

<!-- scale -->

<div class="mb-2">

<div class="row no-gutters justify-content-between">

<span>Gentle</span>

<span>Harsh</span>

</div>

<div class="card rounded-0" style="border-left: double 5px #F1BFAE; border-right: double 5px #F1BFAE;">

<div class="progress bg-transparent rounded-0">

<div class="progress-bar" style="background:none; width: 60%; height: 6px;">

<div style="background:#F1BFAE; width:6px; height:6px;"></div>

</div>

</div>

</div>

</div>

<div class="mb-2">

<div class="row no-gutters justify-content-between">

<span>Loyal</span>

<span>Rebellious</span>

</div>

<div class="card rounded-0" style="border-left: double 5px #F1BFAE; border-right: double 5px #F1BFAE;">

<div class="progress bg-transparent rounded-0">

<div class="progress-bar" style="background:none; width: 35%; height: 6px;">

<div style="background:#F1BFAE; width:6px; height:6px;"></div>

</div>

</div>

</div>

</div>

<div class="mb-2">

<div class="row no-gutters justify-content-between">

<span>Patient</span>

<span>Impulsive</span>

</div>

<div class="card rounded-0" style="border-left: double 5px #F1BFAE; border-right: double 5px #F1BFAE;">

<div class="progress bg-transparent rounded-0">

<div class="progress-bar" style="background:none; width: 70%; height: 6px;">

<div style="background:#F1BFAE; width:6px; height:6px;"></div>

</div>

</div>

</div>

</div>

<div class="mb-2">

<div class="row no-gutters justify-content-between">

<span>Open</span>

<span>Guarded</span>

</div>

<div class="card rounded-0" style="border-left: double 5px #F1BFAE; border-right: double 5px #F1BFAE;">

<div class="progress bg-transparent rounded-0">

<div class="progress-bar" style="background:none; width: 75%; height: 6px;">

<div style="background:#F1BFAE; width:6px; height:6px;"></div>

</div>

</div>

</div>

</div>

<div class="mb-2">

<div class="row no-gutters justify-content-between">

<span>Merciful</span>

<span>Ruthless</span>

</div>

<div class="card rounded-0" style="border-left: double 5px #F1BFAE; border-right: double 5px #F1BFAE;">

<div class="progress bg-transparent rounded-0">

<div class="progress-bar" style="background:none; width: 50%; height: 6px;">

<div style="background:#F1BFAE; width:6px; height:6px;"></div>

</div>

</div>

</div>

</div>

<hr style="border-top-style: dashed; border-top-width: 2px;">

<div class="card px-2 py-1 mb-1" style="border-radius: 2em;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><i class="fas fa-mask mr-1" style="color:#F1BFAE;"></i><b>A</b>ttitude</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card px-2 py-1 mb-1" style="border-radius: 2em;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><i class="fas fa-star mr-1" style="color:#F1BFAE;"></i><b>B</b>est trait</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

<div class="card px-2 py-1" style="border-radius: 2em;">

<div class="row no-gutters justify-content-between">

<div class="col text-muted"><i class="fas fa-bolt mr-1" style="color:#F1BFAE;"></i><b>W</b>orst trait</div>

<div class="col-auto text-right">CONTENT</div>

</div>

</div>

</div>

<div class="col-12 col-lg-5 p-2 text-muted">

<div class="py-1">

<h4>Leadership</h4>

<div class="card progress p-1 rounded-0"><div class="progress-bar" style="width: 60%; background:#F1BFAE; height:6px;"></div></div>

</div>

<div class="py-1">

<h4>Loyalty</h4>

<div class="card progress p-1 rounded-0"><div class="progress-bar" style="width: 85%; background:#F1BFAE; height:6px;"></div></div>

</div>

<div class="py-1">

<h4>Patience</h4>

<div class="card progress p-1 rounded-0"><div class="progress-bar" style="width: 40%; background:#F1BFAE; height:6px;"></div></div>

</div>

<div class="py-1">

<h4>Empathy</h4>

<div class="card progress p-1 rounded-0"><div class="progress-bar" style="width: 55%; background:#F1BFAE; height:6px;"></div></div>

</div>

<div class="py-1">

<h4>Confidence</h4>

<div class="card progress p-1 rounded-0"><div class="progress-bar" style="width: 75%; background:#F1BFAE; height:6px;"></div></div>

</div>

<div class="py-1">

<h4>Temper</h4>

<div class="card progress p-1 rounded-0"><div class="progress-bar" style="width: 35%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

</div>

</div>

<!-- HABITS -->

<div class="card p-4 mb-3" style="box-shadow: 2px 2px 10px rgba(0,0,0,.12); border-radius: 0;">

<h2 class="text-center text-muted">Habits & Mannerisms</h2>

<hr class="w-50">

<p class="text-justify"><b>W</b>rite about their habits here: tail flicks, ear twitches, grooming habits, pacing, how they sleep, how they react when tense, etc.</p>

</div>

<!-- PREFERENCES -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Preferences</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="row">

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 h-100" style="border-top: double 6px #F1BFAE; border-radius: 0;">

<h3 class="text-muted"><b>L</b>ikes <span class="pull-right"><i class="fas fa-heart" style="color:#F1BFAE;"></i></span></h3>

<ul class="font-italic mb-0">

<li>Fresh-kill</li>

<li>Leaf-bare sun patches</li>

<li>Training apprentices</li>

<li>Night patrols</li>

</ul>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 h-100" style="border-top: double 6px #F1BFAE; border-radius: 0;">

<h3 class="text-muted"><b>D</b>islikes <span class="pull-right"><i class="fas fa-heart-broken" style="color:#F1BFAE;"></i></span></h3>

<ul class="font-italic mb-0">

<li>Fox scent</li>

<li>Needless arguments</li>

<li>Wet nests</li>

<li>Broken promises</li>

</ul>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 h-100" style="border-bottom: double 6px #F1BFAE; border-radius: 0;">

<h3 class="text-muted"><b>F</b>ears <span class="pull-right"><i class="fas fa-skull" style="color:#F1BFAE;"></i></span></h3>

<ul class="font-italic mb-0">

<li>Losing their Clan</li>

<li>Failing an apprentice</li>

<li>Drowning</li>

<li>Being forgotten</li>

</ul>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 h-100" style="border-bottom: double 6px #F1BFAE; border-radius: 0;">

<h3 class="text-muted"><b>P</b>rey Preferences <span class="pull-right"><i class="fas fa-feather" style="color:#F1BFAE;"></i></span></h3>

<ul class="font-italic mb-0">

<li>Mouse</li>

<li>Thrush</li>

<li>Vole</li>

<li>Fish</li>

</ul>

</div>

</div>

</div>

</div>

<!-- APPEARANCE -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Appearance</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="row">

<div class="col-12 col-lg-4 p-2">

<div class="card p-2 square mb-2" style="height: 150px; width: 150px; margin:auto;">

<div class="square h-100" style="background-image:url(https://i.pinimg.com/736x/8b/47/96/8b4796bdc66abed84452ca0b058b696a.jpg); background-size:cover; background-position:center;"></div>

</div>

<div class="card p-2 square mb-2" style="height: 150px; width: 150px; margin:auto;">

<div class="square h-100" style="background-image:url(https://i.pinimg.com/736x/a1/99/7b/a1997b697b3566a44bac73103c98221e.jpg); background-size:cover; background-position:center;"></div>

</div>

<div class="card p-2 square mb-2" style="height: 150px; width: 150px; margin:auto;">

<div class="square h-100" style="background-image:url(https://i.pinimg.com/736x/90/f5/59/90f559f8997c5824afb54744bf2a6d75.jpg); background-size:cover; background-position:center;"></div>

</div>

</div>

<div class="col-12 col-lg-8 p-2">

<div class="card p-3" style="border-radius:0;">

<div class="row no-gutters justify-content-between mb-2">

<div class="col text-muted"><b>P</b>elt</div>

<div class="col-auto text-right">CONTENT</div>

</div>

<div class="row no-gutters justify-content-between mb-2">

<div class="col text-muted"><b>E</b>yes</div>

<div class="col-auto text-right">CONTENT</div>

</div>

<div class="row no-gutters justify-content-between mb-2">

<div class="col text-muted"><b>B</b>uild</div>

<div class="col-auto text-right">CONTENT</div>

</div>

<div class="row no-gutters justify-content-between mb-3">

<div class="col text-muted"><b>S</b>cent</div>

<div class="col-auto text-right">CONTENT</div>

</div>

<hr style="border-top-style:dashed; border-top-width:2px;">

<h3 class="text-center text-muted">Scars & Distinguishing Marks</h3>

<hr class="w-50">

<p class="text-justify"><b>D</b>escribe scars, torn ears, unusual markings, nicked tails, or anything Clanmates would recognize them by.</p>

<hr style="border-top-style:dashed; border-top-width:2px;">

<h3 class="text-center text-muted">Overall Appearance</h3>

<hr class="w-50">

<p class="text-justify"><b>W</b>rite about how they move, how intimidating or pretty they seem, if they look well-kept or battle-worn, and what kind of impression they leave at a glance.</p>

</div>

</div>

</div>

</div>

<!-- BELIEFS -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Beliefs</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="row">

<div class="col-12 col-lg-4 p-2">

<div class="card p-2 text-center h-100" style="border-radius:0; box-shadow: 2px 2px 10px rgba(0,0,0,.12);">

<h3>Heavenly Pack</h3>

<div class="card progress p-1 my-2 rounded-0">

<div class="progress-bar" style="width: 80%; background:#F1BFAE; height:6px;"></div>

</div>

<p class="small mb-0">Strength of faith / connection</p>

</div>

</div>

<div class="col-12 col-lg-4 p-2">

<div class="card p-2 text-center h-100" style="border-radius:0; box-shadow: 2px 2px 10px rgba(0,0,0,.12);">

<h3>Code</h3>

<div class="card progress p-1 my-2 rounded-0">

<div class="progress-bar" style="width: 65%; background:#F1BFAE; height:6px;"></div>

</div>

<p class="small mb-0">How closely they follow the hunter's code</p>

</div>

</div>

<div class="col-12 col-lg-4 p-2">

<div class="card p-2 text-center h-100" style="border-radius:0; box-shadow: 2px 2px 10px rgba(0,0,0,.12);">

<h3>Omens</h3>

<div class="card progress p-1 my-2 rounded-0">

<div class="progress-bar" style="width: 40%; background:#F1BFAE; height:6px;"></div>

</div>

<p class="small mb-0">Belief in signs and prophecies</p>

</div>

</div>

</div>

<div class="card p-3 mt-3" style="border-radius:0;">

<h3 class="text-center text-muted">Thoughts on the Heavenly Pack, The Outcasts, and the Code</h3>

<hr class="w-50">

<p class="text-justify"><b>W</b>rite what your puo believes here. Are they devout? Doubtful? Bitter? Frightened of the outsiders? Do they trust epsilons and omens?</p>

</div>

</div>

<!-- STORY -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Story</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="card p-3 mb-3" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<h3 style="color:#F1BFAE;">Puphood</h3>

<hr class="w-50 ml-0">

<p class="text-justify"><b>W</b>rite about their birth, parents, littermates, nursery life, and earliest formative memories.</p>

</div>

<div class="card p-3 mb-3" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<h3 style="color:#F1BFAE;">Apprenticeship</h3>

<hr class="w-50 ml-0">

<p class="text-justify"><b>W</b>rite about training, mentor relationships, first battles, first hunts, rivalries, friendships, and mistakes.</p>

</div>

<div class="card p-3" style="border-left: double 6px #F1BFAE; border-radius: 0;">

<h3 style="color:#F1BFAE;">Huntership</h3>

<hr class="w-50 ml-0">

<p class="text-justify"><b>W</b>rite about their present life, reputation, major turning points, losses, achievements, and where their story is headed next.</p>

</div>

</div>

<!-- ABILITIES -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Abilities</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="row">

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 rounded-0 text-muted" style="border-left: double 6px #F1BFAE;">

<div class="row no-gutters justify-content-between">

<div class="col"><b>H</b>unting</div>

<div class="col-auto">8/10</div>

</div>

<div class="progress rounded-0 mt-1"><div class="progress-bar" style="width:80%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 rounded-0 text-muted" style="border-left: double 6px #F1BFAE;">

<div class="row no-gutters justify-content-between">

<div class="col"><b>F</b>ighting</div>

<div class="col-auto">7/10</div>

</div>

<div class="progress rounded-0 mt-1"><div class="progress-bar" style="width:70%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 rounded-0 text-muted" style="border-left: double 6px #F1BFAE;">

<div class="row no-gutters justify-content-between">

<div class="col"><b>S</b>tealth</div>

<div class="col-auto">9/10</div>

</div>

<div class="progress rounded-0 mt-1"><div class="progress-bar" style="width:90%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 rounded-0 text-muted" style="border-left: double 6px #F1BFAE;">

<div class="row no-gutters justify-content-between">

<div class="col"><b>T</b>racking</div>

<div class="col-auto">6/10</div>

</div>

<div class="progress rounded-0 mt-1"><div class="progress-bar" style="width:60%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 rounded-0 text-muted" style="border-left: double 6px #F1BFAE;">

<div class="row no-gutters justify-content-between">

<div class="col"><b>C</b>limbing</div>

<div class="col-auto">5/10</div>

</div>

<div class="progress rounded-0 mt-1"><div class="progress-bar" style="width:50%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

<div class="col-12 col-lg-6 p-2">

<div class="card p-2 rounded-0 text-muted" style="border-left: double 6px #F1BFAE;">

<div class="row no-gutters justify-content-between">

<div class="col"><b>S</b>wimming</div>

<div class="col-auto">2/10</div>

</div>

<div class="progress rounded-0 mt-1"><div class="progress-bar" style="width:20%; background:#F1BFAE; height:6px;"></div></div>

</div>

</div>

</div>

<div class="card p-3 mt-3 rounded-0">

<h3 class="text-center text-muted">Fighting Style</h3>

<hr class="w-50">

<p class="text-justify"><b>D</b>escribe whether they rely on speed, brute force, ambushes, endurance, feints, tree-leaping, defensive holds, or clever use of terrain.</p>

</div>

</div>

<!-- RELATIONSHIPS -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Relationships</p>

</div>

<div class="card bg-faded p-3 mb-4" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="row no-gutters mb-3">

<div class="col-12 col-lg-3 p-2">

<div class="card square p-2" style="height:180px; width:180px; margin:auto; border: solid 2px #F1BFAE;">

<div class="square h-100" style="background-image:url(URLHERE); background-size:cover; background-position:center;"></div>

</div>

</div>

<div class="col-12 col-lg-9 p-2">

<div class="card h-100 p-3" style="border-radius:0;">

<h3 style="color:#F1BFAE;">Character Name</h3>

<hr class="mt-0">

<p class="text-muted mb-1"><b>R</b>elationship: Clanmate / sibling / mate / rival / mentor</p>

<p class="text-justify mb-0"><b>W</b>rite about this relationship here.</p>

</div>

</div>

</div>

<div class="row no-gutters mb-3">

<div class="col-12 col-lg-3 p-2">

<div class="card square p-2" style="height:180px; width:180px; margin:auto; border: solid 2px #F1BFAE;">

<div class="square h-100" style="background-image:url(URLHERE); background-size:cover; background-position:center;"></div>

</div>

</div>

<div class="col-12 col-lg-9 p-2">

<div class="card h-100 p-3" style="border-radius:0;">

<h3 style="color:#F1BFAE;">Character Name</h3>

<hr class="mt-0">

<p class="text-muted mb-1"><b>R</b>elationship: Clanmate / sibling / mate / rival / mentor</p>

<p class="text-justify mb-0"><b>W</b>rite about this relationship here.</p>

</div>

</div>

</div>

<div class="row no-gutters">

<div class="col-12 col-lg-3 p-2">

<div class="card square p-2" style="height:180px; width:180px; margin:auto; border: solid 2px #F1BFAE;">

<div class="square h-100" style="background-image:url(URLHERE); background-size:cover; background-position:center;"></div>

</div>

</div>

<div class="col-12 col-lg-9 p-2">

<div class="card h-100 p-3" style="border-radius:0;">

<h3 style="color:#F1BFAE;">Character Name</h3>

<hr class="mt-0">

<p class="text-muted mb-1"><b>R</b>elationship: Clanmate / sibling / mate / rival / mentor</p>

<p class="text-justify mb-0"><b>W</b>rite about this relationship here.</p>

</div>

</div>

</div>

</div>

<!-- TRIVIA -->

<div class="card border-0 bg-transparent" style="z-index: 5; position: relative;">

<p class="text-center display-4 mt-2 mb-2" style="position: relative; z-index: 5;">Trivia</p>

</div>

<div class="card bg-faded p-3" style="border-top: double 8px #F1BFAE; border-radius: 0;">

<div class="card p-2 my-1" style="border-right: double 6px #F1BFAE; border-radius: 1em 0 0 1em;">

<p class="mb-0"><i class="fas fa-feather-alt mr-2" style="color:#F1BFAE;"></i>Trivia point here.</p>

</div>

<div class="card p-2 my-1" style="border-right: double 6px #F1BFAE; border-radius: 1em 0 0 1em;">

<p class="mb-0"><i class="fas fa-feather-alt mr-2" style="color:#F1BFAE;"></i>Trivia point here.</p>

</div>

<div class="card p-2 my-1" style="border-right: double 6px #F1BFAE; border-radius: 1em 0 0 1em;">

<p class="mb-0"><i class="fas fa-feather-alt mr-2" style="color:#F1BFAE;"></i>Trivia point here.</p>

</div>

</div>

</div>

</div>

<!-- CREDIT DO NOT REMOVE-->

<p class="text-center mt-3">

<span style="color:#F1BFAE;"><i class="fas fa-code mr-1"></i>B0xerdancer</span>

</p>

</div>