<!-- CUSTOM COLORS KEY
MAIN BACKGROUND - #000
SECONDARY BACKGROUND - #222
TEXT COLOR - #fff
LINK COLOR - #9200f4
TEXT COLOR [faded] - #888
DIVIDER (HR) COLOR - #666
-->
<div class="card border-0 container bg-faded p-md-3 p-2" style="box-shadow: 10px 10px rgba(0,0,0,.4); max-width: 1000px; background-color: #000">
<div class="row p-2">
<!-- CHARACTER NAME -->
<div class="col-lg-7 pr-lg-2 mb-3"><div class="card border-0 p-3" style="background-color: #222; color: #fff">
<h1 class="mb-0 display-4">CHARACTER NAME
<i class="fad fa-sparkles pull-right"></i>
</h1>
</div>
</div>
<!-- CHARACTER NAME END -->
<!-- TOP IMAGE DECOR -->
<div class="col-lg-5 pl-lg-2 mb-3">
<div class="card border-0 p-3 h-100" style="background-image: url(https://img.freepik.com/free-photo/monstera-nature-leaves-background-wallpaper_53876-103972.jpg); background-size: cover; background-position: center; min-height: 67px;"></div>
</div>
<!-- TOP IMAGE DECOR END -->
<!-- CHARACTER IMAGE AND DETAILS SECTION-->
<div class="col-lg-4 pr-lg-2 mb-3">
<div class="card border-0 p-3" style="background-color: #222; color: #fff">
<!-- CHARACTER IMAGE -->
<div class="card border-0 bg-faded mb-3" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png); background-size: cover; background-position: center; min-height: 250px; background-color: #222;"></div>
<!-- CHARACTER IMAGE END -->
<!-- CHARACTER DETAILS -->
<div class="row">
<div class="col-12">
<span class="text-uppercase" style="color: #888">Aliases</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888">Species</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888">Age</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888">Gender</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888">Height</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888">ORIENTATION</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888">ALIGNMENT</span>
<span class="pull-right">Content</span>
<hr style="border-color: #666" class="my-2 mx-0">
</div>
<div class="col-12">
<span class="text-uppercase" style="color: #888"><i class="far fa-heart"></i> S.O.</span>
<span class="pull-right">Content</span>
</div>
</div>
<!-- CHARACTER DETAILS END -->
</div>
</div>
<!-- CHARACTER IMAGE AND DETAILS SECTION END -->
<!-- QUOTE AND MAIN INFO SECTION -->
<div class="col-lg-8 pl-lg-2 mb-3">
<div class="row">
<!-- QUOTE -->
<div class="col-12 mb-3">
<div class="card border-0 p-3" style="background-color: #222; color: #fff">
<div class="row">
<div class="col-auto">
<i class="fad fa-quote-left fa-fw"></i>
</div>
<div class="col">
<h3 class="mb-0 text-center" style="font-weight: 300">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</i>
</h3>
</div>
<div class="col-auto">
<i class="fad fa-quote-right fa-fw"></i>
</div>
</div>
</div>
</div>
<!-- QUOTE END -->
<!-- MAIN INFO -->
<div class="col-12">
<div class="card border-0 p-3" style="height: 498px; overflow: auto; background-color: #222; color: #fff">
<!-- ABOUT SECTION -->
<div>
<h1 class="mb-0" style="font-weight: 400; letter-spacing: 1px">ABOUT <i class="fad fa-user pull-right"></i></h1>
<hr style="border-color: #666" class="my-2 mx-0">
<p><b><i class="fal fa-sparkles fa-fw"></i> Character name</b> is a character on Toyhouse. Dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- CHARACTER SECTION - Use "fas" for solid circles and "fal" for unfilled circles. -->
<div>
<hr style="border-color: #666" class="mt-2 mb-0 mx-0">
<h1 class="mb-0" style="font-weight: 400; letter-spacing: 1px; margin-top: 11px;">CHARACTER <i class="fad fa-theater-masks pull-right"></i></h1>
<hr style="border-color: #666" class="my-2 mx-0">
<div class="row">
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Intelligence</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Empathy</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Charisma</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Humor</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Sanity</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Courage</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Integrity</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Passion</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Strength</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="col-lg-6">
<span class="text-uppercase" style="color: #888">Endurance</span>
<span class="pull-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
</div>
<hr style="border-color: #666" class="my-2 mx-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- TRIVIA SECTION -->
<div>
<hr style="border-color: #666" class="mt-2 mb-0 mx-0">
<h1 style="font-weight: 400; letter-spacing: 1px; margin-top: 11px;">TRIVIA <i class="fad fa-question-circle pull-right"></i></h1>
<hr style="border-color: #666" class="mb-2 mt-0 mx-0">
<ul class="list-unstyled mb-0">
<li><i class="fal fa-chevron-right fa-fw fa-sm" style="color:#888"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. </li>
<li><i class="fal fa-chevron-right fa-fw fa-sm" style="color:#888"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><i class="fal fa-chevron-right fa-fw fa-sm" style="color:#888"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
</ul>
</div>
<!-- RELATIONSHIP SECTION -->
<div>
<hr style="border-color: #666" class="mt-2 mb-0 mx-0">
<h1 class="mb-0" style="font-weight: 400; letter-spacing: 1px; margin-top: 11px;">RELATIONSHIPS <i class="fad fa-users pull-right"></i></h1>
<hr style="border-color: #666" class="mt-2 mb-3 mx-0">
<div class="row">
<!-- LEFT CHARACTER BLOCK -->
<div class="col-12 row mx-auto">
<div class="col-md-2 col-3 mb-2 p-0">
<div class="mx-auto card border-0" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png); background-size: cover; background-position: center; height: 100%; width: 100%"></div>
</div>
<div class="col-md-10 col-9 mb-2 pr-0 pl-3">
<p class="mb-0"><a href="CHARACTER_URL" style="color: #9200f4">Firstname Lastname </a>| <span style="color: #888"> relationship • <i class="fal fa-user"></i> </span></p>
<p class="table-responsive" style="max-height:68px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- LEFT CHARACTER BLOCK END -->
<!-- divider -->
<div class="col-12">
<hr style="border-color: #666" class="mt-2">
</div>
<!-- RIGHT CHARACTER BLOCK -->
<div class="col-12 row mx-auto">
<div class="col-md-10 col-9 mb-2 pl-0">
<p class="mb-0"><a href="CHARACTER_URL" style="color: #9200f4">Firstname Lastname </a>| <span style="color: #888"> relationship • <i class="fal fa-user"></i> </span></p>
<p class="table-responsive" style="max-height:68px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-2 col-3 mb-2 p-0">
<div class="mx-auto card border-0" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png); background-size: cover; background-position: center; height: 100%; width: 100%"></div>
</div>
</div>
<!-- RIGHT CHARACTER BLOCK END -->
<!-- divider -->
<div class="col-12">
<hr style="border-color: #666" class="mt-2">
</div>
<!-- LEFT CHARACTER BLOCK -->
<div class="col-12 row mx-auto">
<div class="col-md-2 col-3 mb-2 p-0">
<div class="mx-auto card border-0" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png); background-size: cover; background-position: center; height: 100%; width: 100%"></div>
</div>
<div class="col-md-10 col-9 mb-2 pr-0 pl-3">
<p class="mb-0"><a href="CHARACTER_URL" style="color: #9200f4">Firstname Lastname </a>| <span style="color: #888"> relationship • <i class="fal fa-user"></i> </span></p>
<p class="table-responsive" style="max-height:68px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- LEFT CHARACTER BLOCK END -->
<!-- divider -->
<div class="col-12">
<hr style="border-color: #666" class="mt-2">
</div>
<!-- RIGHT CHARACTER BLOCK -->
<div class="col-12 row mx-auto">
<div class="col-md-10 col-9 pl-0">
<p class="mb-0"><a href="CHARACTER_URL" style="color: #9200f4">Firstname Lastname </a>| <span style="color: #888"> relationship • <i class="fal fa-user"></i> </span></p>
<p class="table-responsive" style="max-height:68px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-2 col-3 p-0">
<div class="mx-auto card border-0" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png); background-size: cover; background-position: center; height: 100%; width: 100%"></div>
</div>
</div>
<!-- RIGHT CHARACTER BLOCK END -->
</div>
</div>
</div>
</div>
<!-- MAIN INFO END-->
</div>
</div>
<!-- QUOTE AND MAIN INFO SECTION END-->
<!-- BOTTOM IMAGE DECOR -->
<div class="col-lg-5 pr-lg-2 mb-lg-0 mb-3">
<div class="card border-0 p-3 h-100" style="background-image: url(https://img.freepik.com/free-photo/monstera-nature-leaves-background-wallpaper_53876-103972.jpg); background-size: cover; background-position: center; min-height: 67px;"></div>
</div>
<!-- BOTTOM IMAGE DECOR END -->
<!-- FOLDER NAME -->
<div class="col-lg-7 pl-lg-2">
<div class="card border-0 p-3" style="background-color: #222; color: #fff">
<h1 class="mb-0 display-4 text-right">FOLDER NAME
<i class="fad fa-folder pull-left"></i>
</h1>
</div>
</div>
<!-- FOLDER NAME END -->
</div>
</div>
<div class="text-right mx-auto mb-5" style="max-width: 1000px">
<p class="pull-right" style="border-radius: 10px; font-size: 10px; margin-top: 11px"><a href="https://toyhou.se/somnibear"><i class="fad fa-code text-primary"></i><span class="text-muted"> somnibear</span></a></p>
</div>
