cryfest
created by:8byte
HTMLBootstrapCharacter
Copy
<!---
==== Cryfest Character - 500 Subscribers Raffle Prize
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="raffle-font container p-0" style="max-width: 1000px;">
<div class="row no-gutters">
<div class="col-md-3 mr-md-n3 d-flex align-items-center" style="position: relative; z-index: 9999;">
<!--- left image --->
<img src="IMGURL">
</div>
<!--- tabbed section --->
<div class="col-md-9">
<div class="container p-1 bg-dark text-light">
<h1 class="text-center mb-0" style="font-size: 30px;">Character Name</h1>
</div>
<div class="row no-gutters my-2">
<div class="col-md-11 order-md-1 order-2">
<div class="tab-content">
<!--- demographics tab --->
<div class="tab-pane active" id="ONE">
<div class="container bg-dark p-2">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="card border-0 rounded-0 p-2 d-flex flex-column" style="height: 310px;">
<div class="container bg-dark p-2">
<h3 class="text-center text-uppercase mb-0 text-light">Demographics</h3>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Age</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">00</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Pronouns</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">prn / prn</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Orientation</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">orientation</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Height</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">00'00"</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Location</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">location</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Story Role</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">story role</div>
</div>
<!--- end of content --->
</div>
</div>
<div class="col-md-6 p-1">
<div class="row no-gutters m-n1" style="height: 310px;">
<div class="col-6 p-1">
<!--- moodboard image --->
<div class="container h-100" style="background: url(IMGURL); background-size: cover; background-position: center; height: 130px;"></div>
</div>
<div class="col-6 p-1">
<!--- moodboard image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; height: 130px;"></div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 border-0 p-1">
<h2 class="text-center mb-0">Aesthetic</h2>
</div>
</div>
<div class="col-6 p-1">
<!--- moodboard image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; height: 130px;"></div>
</div>
<div class="col-6 p-1">
<!--- moodboard image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; height: 130px;"></div>
</div>
</div>
</div>
<!--- tab title --->
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-2">
<h2 class="text-center mb-0">Demographics</h2>
</div>
</div>
</div>
</div>
</div>
<!--- design tab --->
<div class="tab-pane" id="TWO">
<div class="container bg-dark p-2">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="card border-0 rounded-0 p-2" style="height: 310px;">
<!--- content --->
<div class="container bg-dark text-light h-100 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Scent</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">scent</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Style</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">style</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Dominant Side</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">left / right / ambi</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Dialect</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">dialect</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Feature</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center">feature</div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Voice Canon</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center"><a href="LINK">link</a></div>
</div>
<!--- content --->
<div class="container bg-dark text-light h-100 mt-2 row no-gutters">
<div class="col-6 d-flex align-items-center"><strong>Theme Song</strong></div>
<div class="col-6 d-flex align-items-center justify-content-center"><a href="LINK">link</a></div>
</div>
<!--- end of content --->
</div>
</div>
<div class="col-md-6 d-flex flex-column p-1">
<!--- main reference image --->
<div class="container h-100" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 200px;"></div>
<!--- color palette --->
<div class="card border-0 rounded-0 p-2 mt-2">
<div class="d-flex flex-row mx-n1">
<!--- color --->
<div style="background: #000000; height: 20px;" class="card w-100 border-0 mx-1"></div>
<!--- color --->
<div style="background: #000000; height: 20px;" class="card w-100 border-0 mx-1"></div>
<!--- color --->
<div style="background: #000000; height: 20px;" class="card w-100 border-0 mx-1"></div>
<!--- color --->
<div style="background: #000000; height: 20px;" class="card w-100 border-0 mx-1"></div>
<!--- color --->
<div style="background: #000000; height: 20px;" class="card w-100 border-0 mx-1"></div>
</div>
</div>
</div>
<!--- tab title --->
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-2">
<h2 class="text-center mb-0">Design</h2>
</div>
</div>
</div>
</div>
</div>
<!--- personality + backstory tab --->
<div class="tab-pane" id="THREE">
<div class="container bg-dark p-2">
<div class="row no-gutters">
<!--- personality --->
<div class="col-md-6 p-1">
<div class="card overflow-auto border-0 rounded-0 p-2" style="height: 310px;">
<!--- title card --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Traits</h3>
</div>
<!--- character traits --->
<div class="container bg-dark text-light p-2 my-2">
<!--- input text here --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum. Nunc pulvinar convallis nisi sit amet blandit. Aliquam consectetur dolor ac arcu porttitor cursus.</p>
</div>
<!--- title card --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Ideals</h3>
</div>
<!--- character ideals --->
<div class="container bg-dark text-light p-2 my-2">
<!--- input text here --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum. Nunc pulvinar convallis nisi sit amet blandit. Aliquam consectetur dolor ac arcu porttitor cursus.</p>
</div>
<!--- title card --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Bonds</h3>
</div>
<!--- character bonds --->
<div class="container bg-dark text-light p-2 my-2">
<!--- input text here --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum. Nunc pulvinar convallis nisi sit amet blandit. Aliquam consectetur dolor ac arcu porttitor cursus.</p>
</div>
<!--- end of cards --->
</div>
</div>
<!--- backstory --->
<div class="col-md-6 p-1">
<div class="card overflow-auto border-0 rounded-0 p-2" style="height: 310px;">
<!--- subheading --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Childhood</h3>
</div>
<!--- childhood --->
<div class="container bg-dark text-light p-2 my-2">
<!--- input text here --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum. Nunc pulvinar convallis nisi sit amet blandit. Aliquam consectetur dolor ac arcu porttitor cursus.</p>
</div>
<!--- subheading --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Adulthood</h3>
</div>
<!--- adulthood --->
<div class="container bg-dark text-light p-2 my-2">
<!--- input text here --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum. Nunc pulvinar convallis nisi sit amet blandit. Aliquam consectetur dolor ac arcu porttitor cursus.</p>
</div>
<!--- subheading --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Present</h3>
</div>
<!--- present --->
<div class="container bg-dark text-light p-2 my-2">
<!--- input text here --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum. Nunc pulvinar convallis nisi sit amet blandit. Aliquam consectetur dolor ac arcu porttitor cursus.</p>
</div>
<!--- end of cards --->
</div>
</div>
<!--- tab title --->
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-2">
<h2 class="text-center mb-0">Personality & Backstory</h2>
</div>
</div>
</div>
</div>
</div>
<!--- inventory/skills tab --->
<div class="tab-pane" id="FOUR">
<div class="container bg-dark p-2">
<div class="row no-gutters">
<!--- inventory --->
<div class="col-md-6 p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<!--- inventory item (long) --->
<div class="container bg-dark text-light p-2">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
<div class="container bg-dark text-light mt-2 p-1">
<!--- description of item --->
<p><strong>Item Title:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
<!--- inventory item (square) --->
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of item --->
<p><strong>Item Title:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
</div>
<!--- inventory item (long) --->
<div class="container bg-dark text-light p-2">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
<div class="container bg-dark text-light mt-2 p-1">
<!--- description of item --->
<p><strong>Item Title:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
<!--- end of items --->
</div>
</div>
<!--- skills --->
<div class="col-md-6 p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<!--- skill --->
<div class="container bg-dark text-light p-1">
<!--- description of skill --->
<p><strong>Skill Name:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- element image --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of element --->
<p><strong>Element:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
</div>
<!--- skill --->
<div class="container bg-dark text-light p-1">
<!--- description of skill --->
<p><strong>Skill Name:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- element image --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of element --->
<p><strong>Element:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
</div>
<!--- end of skills --->
</div>
</div>
<!--- tab title --->
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-2">
<h2 class="text-center mb-0">Inventory & Skills</h2>
</div>
</div>
</div>
</div>
</div>
<!--- statistics tab --->
<div class="tab-pane" id="FIVE">
<div class="container bg-dark p-2">
<div class="row no-gutters">
<div class="col-md-3 p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<!--- stat --->
<div class="container bg-dark text-light p-1">
<h5 class="text-uppercase mb-0">00 | Strength</h5>
</div>
<div class="container bg-dark text-light my-2 p-1">
<ul class="list-unstyled mb-0">
<!--- mod --->
<li class="text-success">00 | MOD</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- end of mods --->
</ul>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1">
<h5 class="text-uppercase mb-0" style="font-size: 15px;">00 | Dexterity</h5>
</div>
<div class="container bg-dark text-light my-2 p-1">
<ul class="list-unstyled mb-0">
<!--- mod --->
<li class="text-success">00 | MOD</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- end of mods --->
</ul>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1">
<h5 class="text-uppercase mb-0" style="font-size: 12px;">00 | Constitution</h5>
</div>
<div class="container bg-dark text-light my-2 p-1">
<ul class="list-unstyled mb-0">
<!--- mod --->
<li class="text-success">00 | MOD</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- end of mods --->
</ul>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1">
<h5 class="text-uppercase mb-0" style="font-size: 12px;">00 | Intelligence</h5>
</div>
<div class="container bg-dark text-light my-2 p-1">
<ul class="list-unstyled mb-0">
<!--- mod --->
<li class="text-success">00 | MOD</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- end of mods --->
</ul>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1">
<h5 class="text-uppercase mb-0">00 | Wisdom</h5>
</div>
<div class="container bg-dark text-light my-2 p-1">
<ul class="list-unstyled mb-0">
<!--- mod --->
<li class="text-success">00 | MOD</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- end of mods --->
</ul>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1">
<h5 class="text-uppercase mb-0">00 | Charisma</h5>
</div>
<div class="container bg-dark text-light my-2 p-1">
<ul class="list-unstyled mb-0">
<!--- mod --->
<li class="text-success">00 | MOD</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- mod --->
<li>00 | Saving Throw</li>
<!--- end of mods --->
</ul>
</div>
<!--- end of stats --->
</div>
</div>
<div class="col-md p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<!--- stat --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase mb-0" style="font-size: 15px;">00 | Passive Perception</h5>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase mb-0">00 | Max <span class="text-success">Hit Points</span></h5>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase mb-0">00 | Armor Points</h5>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase mb-0">00 | Hit Dice</h5>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase mb-0">00 | Initiative</h5>
</div>
<!--- stat --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase mb-0">00 | Speed</h5>
</div>
<!--- end of stats --->
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase text-center mb-0">Proficiencies</h5>
</div>
<div class="container bg-dark text-light p-2">
<!--- category --->
<strong>Languages:</strong>
<ul class="pl-3">
<!--- proficient languages --->
<li>Language</li>
<li>Language</li>
<li>Language</li>
</ul>
<!--- category --->
<strong>Weapons:</strong>
<ul class="pl-3">
<!--- proficient weapons --->
<li>Weapon</li>
<li>Weapon</li>
<li>Weapon</li>
</ul>
<!--- end of categories --->
</div>
</div>
</div>
<div class="col-md p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<div class="container bg-dark text-light p-1 mb-2">
<h5 class="text-uppercase text-center mb-0">Death Saves</h5>
</div>
<div class="row no-gutters mt-n1 mx-n1 mb-1">
<div class="col-6 p-1">
<!--- x's --->
<div class="container bg-dark text-light p-1 text-center">
<span>
<i class="fas fa-times fa-2x text-danger"></i> <!--- red --->
<i class="fas fa-times fa-2x text-danger"></i>
<i class="fas fa-times fa-2x text-muted"></i> <!--- not red --->
</span>
</div>
</div>
<div class="col-6 p-1">
<!--- checks --->
<div class="container bg-dark text-light p-1 text-center">
<span>
<i class="fas fa-check fa-2x text-success"></i> <!--- green --->
<i class="fas fa-check fa-2x text-success"></i>
<i class="fas fa-check fa-2x text-muted"></i> <!--- not green --->
</span>
</div>
</div>
</div>
<div class="container bg-dark text-light p-1 mb-2">
<!--- near death experiences --->
<h5 class="text-uppercase mb-0" style="font-size: 12px;">00 | Near Death Experiences</h5>
</div>
<div class="container bg-dark text-light p-1 mb-2">
<!--- class level --->
<h5 class="text-uppercase mb-0">00 | Class Level</h5>
</div>
<div class="container bg-dark text-light p-1 mb-2">
<!--- information about the class --->
<p><strong>Class Information:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
<div class="container bg-dark text-light p-1 mb-2">
<!--- species --->
<h5 class="text-uppercase text-center mb-0">Species</h5>
</div>
<div class="container bg-dark text-light p-1 mb-2">
<!--- information about the species --->
<p><strong>Species Trait/Information:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
</div>
<!--- tab title --->
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-2">
<h2 class="text-center mb-0">Statistics</h2>
</div>
</div>
</div>
</div>
</div>
<!--- relationships tab --->
<div class="tab-pane" id="SIX">
<div class="container bg-dark p-2">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<!--- relationship category --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">Party</h3>
</div>
<!--- relationship --->
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- profile picture --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of relationship --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
<div class="col-12 p-1">
<div class="container bg-dark text-light p-1">
<!--- link to character --->
<a href="LINK"><h5 class="text-center text-uppercase mb-0">Character Name</h5></a>
</div>
</div>
</div>
<!--- relationship --->
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- profile picture --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of relationship --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
<div class="col-12 p-1">
<div class="container bg-dark text-light p-1">
<!--- link to character --->
<a href="LINK"><h5 class="text-center text-uppercase mb-0">Character Name</h5></a>
</div>
</div>
</div>
<!--- end of relationship --->
</div>
</div>
<div class="col-md-6 p-1">
<div class="card border-0 rounded-0 p-2 overflow-auto" style="height: 310px;">
<!--- relationship category --->
<div class="container bg-dark text-light p-2">
<h3 class="text-center text-uppercase mb-0">NPCs</h3>
</div>
<!--- relationship --->
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- profile picture --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of relationship --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
<div class="col-12 p-1">
<div class="container bg-dark text-light p-1">
<!--- link to character --->
<a href="LINK"><h5 class="text-center text-uppercase mb-0">Character Name</h5></a>
</div>
</div>
</div>
<!--- relationship --->
<div class="row no-gutters mx-n1 my-1">
<div class="col-4 p-1">
<div class="container bg-dark text-light p-2">
<!--- profile picture --->
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 75px;"></div>
</div>
</div>
<div class="col-8 p-1">
<div class="container bg-dark text-light overflow-auto p-1" style="height: calc(75px + 1rem);">
<!--- description of relationship --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare feugiat lorem ac fermentum.</p>
</div>
</div>
<div class="col-12 p-1">
<div class="container bg-dark text-light p-1">
<!--- link to character --->
<a href="LINK"><h5 class="text-center text-uppercase mb-0">Character Name</h5></a>
</div>
</div>
</div>
<!--- end of relationship --->
</div>
</div>
<!--- tab title --->
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-2">
<h2 class="text-center mb-0">Relationships</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 order-md-2 order-1">
<!--- tabs, do not touch this section --->
<ul class="nav nav-tabs d-flex flex-column my-n1 border-0" style="justify-content: space-between; height: calc(100% + .5rem);">
<li class="nav-item bg-dark h-100 my-1" style="opacity: .5;"><a href="#ONE" class="nav-link d-flex justify-content-center align-items-center px-1 h-100 border-0 active" data-toggle="tab" style="border-radius: 0; mix-blend-mode: color-dodge;"><i class="fas fa-id-card fa-fw fa-2x"></i></a></li>
<li class="nav-item bg-dark h-100 my-1" style="opacity: .5;"><a href="#TWO" class="nav-link d-flex justify-content-center align-items-center px-1 h-100 border-0" data-toggle="tab" style="border-radius: 0; mix-blend-mode: color-dodge;"><i class="fas fa-brush fa-fw fa-2x"></i></a></li>
<li class="nav-item bg-dark h-100 my-1" style="opacity: .5;"><a href="#THREE" class="nav-link d-flex justify-content-center align-items-center px-1 h-100 border-0" data-toggle="tab" style="border-radius: 0; mix-blend-mode: color-dodge;"><i class="fas fa-pen fa-fw fa-2x"></i></a></li>
<li class="nav-item bg-dark h-100 my-1" style="opacity: .5;"><a href="#FOUR" class="nav-link d-flex justify-content-center align-items-center px-1 h-100 border-0" data-toggle="tab" style="border-radius: 0; mix-blend-mode: color-dodge;"><i class="fas fa-briefcase fa-fw fa-2x"></i></a></li>
<li class="nav-item bg-dark h-100 my-1" style="opacity: .5;"><a href="#FIVE" class="nav-link d-flex justify-content-center align-items-center px-1 h-100 border-0" data-toggle="tab" style="border-radius: 0; mix-blend-mode: color-dodge;"><i class="fas fa-dice-d20 fa-fw fa-2x"></i></a></li>
<li class="nav-item bg-dark h-100 my-1" style="opacity: .5;"><a href="#SIX" class="nav-link d-flex justify-content-center align-items-center px-1 h-100 border-0" data-toggle="tab" style="border-radius: 0; mix-blend-mode: color-dodge;"><i class="fas fa-heart fa-fw fa-2x"></i></a></li>
</ul>
</div>
</div>
<div class="container p-1 bg-dark text-light">
<div class="row no-gutters justify-content-center">
<div class="col-md-4 col-6 order-1">
<!--- designer --->
<strong>Designer:</strong> @username
</div>
<div class="col-md-4 col-6 order-md-2 order-3 text-center">
<!--- character worth --->
<strong>Value:</strong> $00.00
</div>
<div class="col-md-4 col-6 order-md-3 order-2 text-right">
<!--- code credit --->
<strong>Code:</strong> @8byte
</div>
</div>
</div>
</div>
</div>
</div>