<!-- CUSTOM COLORS GUIDE - You can change any element's color manually, but if you want a coherent theme, you can just find and replace these default colors.
DARKER BACKGROUND - #000000
LIGHTER BACKGROUND - #222222
TEXT - #ffffff [ this will also change the color of icons ]
MUTED TEXT, PROGRESS BAR ICONS - #bbb
HRs, STAT PROGRESS BARS - #777
LINKS/BUTTON TEXT - #cecece - [ NOTE: Without CSS, the links will not change color when hovered over.
If you're a premium user and would like to customize the link colors more, see the CSS tab on this code's page. ]
"CHARACTER NAME" TEXT - #fff6b8
-->
<div class="container p-0" style="font-family: Verdana; color: #ffffff" id="mafioso">
<div class="mt-3 p-lg-4 p-2 mx-auto" style="border-radius: 5px; overflow: hidden; max-width: 1000px; background-color: #000000;">
<div class="row p-0 mx-auto">
<!-- TOP BOX -->
<div class="col-lg-12 p-0">
<div class="border-0 p-3 mb-2" style="border-radius: 5px; background-color: #222222;">
<h1 class="mb-0">
<a href="FOLDER URL" style="color:#cecece">FOLDER NAME</a>
<i class="far fa-chevron-double-right fa-fw"></i>
<a href="SUBFOLDER URL" style="color:#cecece">SUBFOLDER NAME</a>
<i class="far fa-chevron-double-right fa-fw"></i>
<span style="color: #fff6b8">CHARACTER NAME</span>
<i class="far fa-star fa-fw pull-right"></i>
</h1>
</div>
</div>
<!-- TOP BOX END -->
<!-- LEFT COLUMN -->
<div class="col-lg-4 p-0">
<div class="row mx-auto">
<!-- FOCAL IMAGE AND NAME BOX-->
<div class="col-12 mb-2 p-0">
<div class="border-0 p-3" style="border-radius: 5px; background-color: #222222">
<div class="mx-3" style="border-radius: 5px;">
<!-- FOCAL IMAGE -->
<div class="d-block mx-auto" style="border-radius: 5px; height: 260px; background-image: url(URL); background-position: center; background-size: cover; background-color: #000000;"></div>
<!-- FOCAL IMAGE END-->
</div>
<hr class="mx-0" style="background-color: #777;"/>
<h1 class="text-center mb-0">NAME SURNAME</h1>
</div>
</div>
<!-- FOCAL IMAGE AND NAME BOX END -->
<!-- NAV BUTTONS - DO NOT REMOVE OR ADD MORE - YOU CAN EDIT THE NAMES -->
<div class="col-12 p-0">
<ul class="nav nav-justified row no-gutters mb-0">
<li class="nav-item col-6">
<a class="nav-link active btn text-truncate d-block text-left border-0 mb-2 mr-1" data-toggle="tab" href="#PROFILE" style="padding: 14px; font-size: 19.2px; border-radius: 5px; background-color: #222222; color: #cecece; box-shadow: none;">
<i class="fas fa-chevron-right"></i> PROFILE</a>
</li>
<li class="nav-item col-6">
<a class="nav-link btn text-truncate d-block text-left border-0 mb-2 ml-1" data-toggle="tab" href="#STATS" style="padding: 14px; font-size: 19.2px; border-radius: 5px; background-color: #222222; color: #cecece; box-shadow: none;">
<i class="fas fa-chevron-right"></i> STATS</a>
</li>
<li class="nav-item col-6">
<a class="nav-link btn text-truncate d-block text-left border-0 mb-2 mb-lg-0 mr-1" data-toggle="tab" href="#HISTORY" style="padding: 14px; font-size: 19.2px; border-radius: 5px; background-color: #222222; color: #cecece; box-shadow: none;">
<i class="fas fa-chevron-right"></i> HISTORY</a>
</li>
<li class="nav-item col-6">
<a class="nav-link btn text-truncate d-block text-left border-0 mb-2 mb-lg-0 ml-1" data-toggle="tab" href="#RELATED" style="padding: 14px; font-size: 19.2px; border-radius: 5px; background-color: #222222; color: #cecece; box-shadow: none;">
<i class="fas fa-chevron-right"></i> RELATED</a>
</li>
</ul>
</div>
<!-- NAV BUTTONS END -->
</div>
</div>
<!-- LEFT COLUMN END -->
<!-- RIGHT COLUMN - CONTENT AREA -->
<div class="col-lg-8 pr-lg-0 pl-lg-2 p-0 p-0">
<div class="tab-content border-0 p-3 h-100" style="border-radius: 5px; background-color: #222222">
<!-- PROFILE TAB -->
<div data-toggle="tab" class="tab-pane fade in active show pb-0" id="PROFILE">
<h1 style="color: #">PROFILE <i class="fas fa-bookmark pull-right fa-fw"></i></h1>
<hr class="my-2" style="background-color: #777;">
<div class="p-0" style="height: 399px; overflow: auto;">
<!-- PROFILE DETAILS-->
<div class="row mx-auto">
<div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">NAME</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">ALIAS</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">SPECIES</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">AGE</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">GENDER</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">SEXUALITY</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div><div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">HEIGHT</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb"><i class="far fa-heart fa-fw"></i> S.O.</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div><div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-lg-0 mb-2">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">ALIGNMENT</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
<hr class="w-100 mt-1 mb-0 visible-md-down hidden-lg-up" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">VOICE CLAIM</span>
<span class="pull-right" style="color: #">Content</span>
</h6>
</div>
</div>
<!-- PROFILE DETAILS END -->
<hr class="my-2" style="background-color: #777"/>
<!-- COLOR PALLETTE -->
<div class="row mx-auto">
<div class="col px-1"><div class="pt-3 pb-2" style="background-color: #747474; border-radius: 5px;"></div></div>
<div class="col px-1"><div class="pt-3 pb-2" style="background-color: #b1b1b1; border-radius: 5px;"></div></div>
<div class="col px-1"><div class="pt-3 pb-2" style="background-color: #747474; border-radius: 5px;"></div></div>
<div class="col px-1"><div class="pt-3 pb-2" style="background-color: #b1b1b1; border-radius: 5px;"></div></div>
<div class="col px-1"><div class="pt-3 pb-2" style="background-color: #747474; border-radius: 5px;"></div></div>
<div class="col px-1"><div class="pt-3 pb-2" style="background-color: #b1b1b1; border-radius: 5px;"></div></div>
</div>
<!-- COLOR PALLETTE END -->
<hr class="my-2" style="background-color: #777"/>
<!-- PROFILE SUMMARY -->
<p style="text-indent: 15px; color:#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p style="text-indent: 15px; color:#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- PROFILE SUMMARY END -->
</div>
</div>
<!-- PROFILE TAB END -->
<!-- STATS TAB -->
<div data-toggle="tab" class="tab-pane fade pb-0" id="STATS">
<h1 style="color: #">STATS <i class="fas fa-theater-masks pull-right fa-fw"></i></h1>
<hr class="my-2" style="background-color: #777">
<div class="p-0" style="height: 399px; overflow: auto;">
<!-- ICON STATS -->
<div class="row mx-auto">
<div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">INTELLIGENCE</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">EMPATHY</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">CHARISMA</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">HUMOR</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">SANITY</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">COURAGE</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div><div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">INTEGRITY</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0 mb-1">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">STRENGTH</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-1" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div><div class="col-lg-6 pl-lg-0 pr-lg-2 p-0 mb-lg-0 mb-2">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">ENDURANCE</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
<hr class="w-100 mt-1 mb-0 visible-md-down hidden-lg-up" style="border-top-width:1px; border-top-style:dashed; background-color: #777">
</div>
<div class="col-lg-6 pr-lg-0 pl-lg-2 p-0">
<h6 class="mb-0">
<span class="text-uppercase" style="color: #bbb">PASSION</span>
<span class="pull-right" style="color: #">
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fas fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
<i class="fal fa-circle" style="color: #"></i>
</span>
</h6>
</div>
</div>
<!-- ICON STATS END -->
<hr class="my-2" style="background-color: #777"/>
<!-- PROGRESS BAR STATS -->
<div class="text-muted">
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">RECLUSIVE</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color:transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">SOCIAL</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">SARCASTIC</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">GENUINE</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">EASYGOING</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">TOUCHY</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">SENSITIVE</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">TOUGH</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">LAZY</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">DILIGENT</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">MODEST</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">ARROGANT</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">TRUSTING</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">CYNICAL</div>
</div>
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate" style="color: #bbb">POLITE</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">DIRECT</div>
</div>
<div class="row no-gutters align-items-center mb-0">
<div class="col text-truncate" style="color: #bbb">INSECURE</div>
<div class="col-6 col-lg-8 mx-2">
<div class="progress card flex-row" style="height: 2px; overflow: visible; border-color: #777; background-color: transparent">
<div class="progress-bar" style="width: 50%; height: 0px; background-color: transparent;"></div>
<i class="fas fa-circle" style="margin-top: -8px; font-size: 16px; color: #bbb"></i>
</div>
</div>
<div class="col text-right text-truncate" style="color: #bbb">CONFIDENT</div>
</div>
</div>
<!-- PROGRESS BAR STATS END-->
<hr class="mb-0 mt-2" style="background-color: #777"/>
</div>
</div>
<!-- STATS TAB END -->
<!-- HISTORY TAB -->
<div data-toggle="tab" class="tab-pane fade pb-0" id="HISTORY">
<h1 style="color: #">HISTORY <i class="fas fa-books pull-right fa-fw"></i></h1>
<hr class="my-2" style="background-color: #777">
<div class="p-0" style="height: 399px; overflow: auto;">
<h6 class="mb-1 p-2" style="border-radius: 5px; background-color: #000000; color: #"><i class="fas fa-chevron-right fa-fw"></i> SUBHEADER</h6>
<p class="mb-1" style="color: #bbb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p class="mb-1" style="color: #bbb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h6 class="mt-2 mb-1 p-2" style="border-radius: 5px; background-color: #000000; color: #"><i class="fas fa-chevron-right fa-fw"></i> SUBHEADER</h6>
<p class="mb-1" style="color: #bbb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<ul class="pl-4 mb-0" style="color: #bbb">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
</ul>
</div>
</div>
<!-- HISTORY TAB END-->
<!-- RELATED TAB -->
<div data-toggle="tab" class="tab-pane fade pb-0" id="RELATED">
<h1 style="color: #">RELATED <i class="fas fa-users pull-right fa-fw"></i></h1>
<hr class="my-2" style="background-color: #777">
<div class="p-0" style="height: 399px; overflow: auto;">
<!-- CHARACTER RELATIONSHIP BOX -->
<div class="row mx-auto">
<div class="col-lg-3 px-lg-0 py-lg-0 py-2">
<div style="background-image: url(URL);background-size: cover; background-position: center; border-radius: 5px; min-height: 143px; max-width: 143px; background-color: #000000;" class="d-block mx-auto"></div>
</div>
<div class="col-lg-9 p-lg-2 p-0">
<hr class="mb-2 mt-0" style="background-color:#777"/>
<h4>
<a href="url" style="color: #cecece">Character Name</a>
<span class="pull-right" style="color: #bbb"><i>Relationship</i></span>
</h4>
<hr class="my-1" style="background-color:#777"/>
<div class="table-responsive mb-0" style="overflow: auto; max-height: 86px;">
<p style="color: #">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. </p>
</div>
</div>
</div>
<hr class="my-2" style="background-color: #777"/>
<!-- CHARACTER RELATIONSHIP BOX END -->
<!-- CHARACTER RELATIONSHIP BOX -->
<div class="row mx-auto">
<div class="col-lg-3 px-lg-0 py-lg-0 py-2">
<div style="background-image: url(URL);background-size: cover; background-position: center; border-radius: 5px; min-height: 143px; max-width: 143px; background-color: #000000;" class="d-block mx-auto"></div>
</div>
<div class="col-lg-9 p-lg-2 p-0">
<hr class="mb-2 mt-0" style="background-color:#777"/>
<h4>
<a href="url" style="color: #cecece">Character Name</a>
<span class="pull-right" style="color: #bbb"><i>Relationship</i></span>
</h4>
<hr class="my-1" style="background-color:#777"/>
<div class="table-responsive mb-0" style="overflow: auto; max-height: 86px;">
<p style="color: #">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. </p>
</div>
</div>
</div>
<hr class="my-2" style="background-color: #777"/>
<!-- CHARACTER RELATIONSHIP BOX END -->
<!-- CHARACTER RELATIONSHIP BOX -->
<div class="row mx-auto">
<div class="col-lg-3 px-lg-0 py-lg-0 py-2">
<div style="background-image: url(URL);background-size: cover; background-position: center; border-radius: 5px; min-height: 143px; max-width: 143px;background-color: #000000;" class="d-block mx-auto"></div>
</div>
<div class="col-lg-9 p-lg-2 p-0">
<hr class="mb-2 mt-0" style="background-color:#777"/>
<h4>
<a href="url" style="color: #cecece">Character Name</a>
<span class="pull-right" style="color: #bbb"><i>Relationship</i></span>
</h4>
<hr class="my-1" style="background-color:#777"/>
<div class="table-responsive mb-0" style="overflow: auto; max-height: 86px;">
<p style="color: #">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.</p>
</div>
</div>
</div>
<hr class="my-2" style="background-color: #777"/>
<!-- CHARACTER RELATIONSHIP BOX END -->
<!-- CHARACTER RELATIONSHIP BOX -->
<div class="row mx-auto">
<div class="col-lg-3 px-lg-0 py-lg-0 py-2">
<div style="background-image: url(url);background-size: cover; background-position: center; border-radius: 5px; min-height: 143px; max-width: 143px; background-color: #000000;" class="d-block mx-auto"></div>
</div>
<div class="col-lg-9 p-lg-2 p-0">
<hr class="mb-2 mt-0" style="background-color:#777"/>
<h4>
<a href="url" style="color: #cecece">Character Name</a>
<span class="pull-right" style="color: #bbb"><i>Relationship</i></span>
</h4>
<hr class="my-1" style="background-color:#777"/>
<div class="table-responsive mb-0" style="overflow: auto; max-height: 86px;">
<p style="color: #">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. </p>
</div>
</div>
</div>
<hr class="my-2" style="background-color: #777"/>
<!-- CHARACTER RELATIONSHIP BOX END -->
</div>
</div>
<!-- RELATED TAB END-->
</div>
</div>
<!-- RIGHT COLUMN END -->
</div>
</div>
<div style="max-width: 1000px;" class="mx-auto mt-1 bg-dark">
<p class="pull-right text-muted mt-0" style="border-radius: 10px; font-size: 9px;"><a href="https://toyhou.se/somnibear" style="color: #"><i class="fad fa-code text-primary" style="color: #"></i><span class="text-muted"> somnibear</span></a></p>
</div>
</div>