- Created
- 4 months, 3 days ago
- Creator
- spiritinthesnow
- Favorites
- 2
Profile
<!-- THIS CODE USES CUSTOM COLOURS! FIND & REPLACE THE BELOW HEX CODES WITH COLOURS OF YOUR CHOICE!
Titles/Primary: #c8c8c8
Text: #000000
Background: #ffffff
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container" style="max-width: 1000px;">
<div class="card border-0 p-2 m-1 mx-auto" style="background-repeat:no-repeat; background-position:center; background-size:cover;
background-image:url('https://img.freepik.com/free-vector/vector-black-minimal-aesthetic-grid-pattern-background_53876-117155.jpg');">
<!-- ^BACKGROUND IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<div class="card-flex border-0 bg-transparent mx-auto p-2 m-2 my-auto col-lg-4">
<div class="card border-0 bg-transparent p-2 mx-auto" style="background-repeat:no-repeat; background-position:center; background-size:cover; height:250px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^ICON IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
<!-- ABOUT SECTION START (ANTHRO/FERAL) -->
<div class="card border-0 p-2 m-2 col-lg" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> ABOUT </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-hand-wave fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<div class="card border-0 p-1" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-id-card fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Name:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350; color:#000000">
<a title="Pronounced: TBD" class="tooltipster">Name Here</a>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-right">
<div class="card border-0 p-1 m-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-comment fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Nickname:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;">
<a title="Pronounced: TBD" class="tooltipster">Name Here</a>
</p>
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 p-1" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-venus-mars fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Gender:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;"> Gender Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-right">
<div class="card border-0 p-1 m-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-comments-question fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Pronouns:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;"> Pronouns Here </p>
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 p-1" style="background:#ffffff">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-heart fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Romantic Orient:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;"> Romant. Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-right">
<div class="card border-0 p-1 m-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-fire fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Sexual Orient:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;"> Sexuality Here </p>
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 p-1" style="background:#ffffff">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-paw-claws fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Species:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;"> Species Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-right">
<div class="card border-0 p-1 m-1 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000">
<i class="fas fa-cake fa-sm fa-fw ml-1 mr-1 mt-1"></i>
<b>Birthday:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 bg-transparent">
<p class="text-muted my-auto" style="font-size:14px; font-weight:350;"> Birthday Here </p>
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
</div>
<!-- ABOUT SECTION END (ANTHRO/FERAL) -->
</div>
<!-- NAV SECTION START -->
<div class="my-auto p-1 row no-gutters">
<div class="card border-0 bg-transparent mr-2 my-auto align-items-center col-lg-4">
<ul class="nav mr-1">
<!-- ANTHRO BUTTON START - REMOVE IF YOUR CHARACTER ONLY HAS AN FERAL FORM!! -->
<li class="nav-item my-auto m-1 p-1">
<a class="nav-link active btn btn-secondary border-0" style="background:#c8c8c8; font-size:14px; font-weight:500;" data-toggle="tab" href="#anthro">
<i class="fad fa-hand fa-xl p-1"></i> Anthro <i class="fad fa-hand fa-xl p-1"></i>
</a>
</li>
<!-- ANTHRO BUTTON END -->
<!-- FERAL BUTTON START - REMOVE IF YOUR CHARACTER ONLY HAS AN ANTHRO FORM!! -->
<li class="nav-item my-auto m-1 p-1">
<a class="nav-link btn btn-secondary border-0" style="background:#c8c8c8; font-size:14px; font-weight:500;" data-toggle="tab" href="#feral">
<i class="fad fa-paw fa-xl p-1"></i> Feral <i class="fad fa-paw fa-xl p-1"></i>
</a>
</li>
<!-- FERAL BUTTON END -->
</ul>
</div>
</div>
<!-- NAV SECTION END -->
</div>
<div class="tab-content">
<!-- ANTHRO SECTION START -->
<div class="tab-pane fade in active show" id="anthro">
<!-- VIEWING BAR SECTION START (ANTHRO) - REMOVE IF ONLY USING ANTHRO TAB!! -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase my-auto" style="font-size:18px; font-weight:500; color:#000000"> Currently viewing: Anthro Version</p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-hand fa-bounce fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000; --fa-animation-duration:3s;"></i>
</div>
</div>
</div>
<!-- VIEWING BAR SECTION END (ANTHRO) - REMOVE IF ONLY USING ANTHRO TAB!! -->
<!-- PERSONALITY SECTION START (ANTHRO) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000"> Personality </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-feather fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<!-- TRAIT SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent p-2 m-2 col-lg">
<div class="row no-gutters justify-content-center">
<!-- TRAIT #1 (ANTHRO) -->
<div class="card border-0 col-lg" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;"> TRAIT #1 </p>
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<!-- TRAIT #2 (ANTHRO) -->
<div class="card border-0 col-lg" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;"> TRAIT #2 </p>
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<!-- TRAIT #3 (ANTHRO) -->
<div class="card border-0 col-lg" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;"> TRAIT #3 </p>
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
</div>
</div>
<!-- TRAIT SECTION END (ANTHRO) -->
<hr class="m-0" style="#000000">
<div class="row no-gutters justify-content-center">
<!-- STATS SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent m-2 col-lg-5">
<div class="row no-gutters justify-content-center">
<!-- CHARISMA START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Charisma:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- KINDNESS START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Kindness:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card bg-transparent border-0">
<div class="row no-gutters">
<!-- PATIENCE START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Patience:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- INTEGRITY START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Integrity:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card bg-transparent border-0">
<div class="row no-gutters">
<!-- INTELLECT START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Intellect:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- LOYALTY START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Loyalty:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card bg-transparent border-0">
<div class="row no-gutters">
<!-- COURAGE START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Courage:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- MATURITY START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Maturity:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card-flex border-0 m-2 p-2 col-lg mx-auto">
<!-- INTROVERTED-EXTROVERTED START (ANTHRO) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Introverted</span>
<span>Extroverted</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- INSTINCTIVE-CALCULATED START (ANTHRO) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Instinctive</span>
<span>Calculated</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- DECEPTIVE-SINCERE START (ANTHRO) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Deceptive</span>
<span>Sincere</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- INDIFFERENT-EMOTIONAL START (ANTHRO) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Indifferent</span>
<span>Emotional</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- RESERVED-AFFECTIONATE START (ANTHRO) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Reserved</span>
<span>Affectionate</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- STATS SECTION END (ANTHRO) -->
<div class="card bg-transparent border-0 col-lg">
<div class="row no-gutters">
<!-- PLAYLIST SECTION START (ANTHRO) -->
<div class="card bg-transparent border-0 p-2 col-lg">
<div class="card bg-transparent border-0 m-2">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;"> PLAYLIST </p>
</div>
<div class="card border-0 bg-transparent m-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;">
<i class="fas fa-music fa-xs fa-fw ml-1 mr-1 mt-1"></i> ARTIST - SONG TITLE
</p>
</div>
<div class="card border-0 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
<i class="fad fa-play fa-fw fa-md"></i>
<iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
<!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
</div>
</div>
</div>
<div class="card border-0 bg-transparent m-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;">
<i class="fas fa-music fa-xs fa-fw ml-1 mr-1 mt-1"></i> ARTIST - SONG TITLE
</p>
</div>
<div class="card border-0 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
<i class="fad fa-play fa-fw fa-md"></i>
<iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
<!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
</div>
</div>
</div>
<div class="card border-0 bg-transparent m-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;">
<i class="fas fa-music fa-xs fa-fw ml-1 mr-1 mt-1"></i> ARTIST - SONG TITLE
</p>
</div>
<div class="card border-0 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
<i class="fad fa-play fa-fw fa-md"></i>
<iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
<!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
</div>
</div>
</div>
</div>
<!-- PLAYLIST SECTION END (ANTHRO) -->
</div>
<!-- DEMEANOR SECTION START (ANTHRO) -->
<div class="card bg-transparent border-0 m-2">
<div class="card bg-transparent border-0 m-2">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;"> Demeanor </p>
</div>
<div class="card border-0 bg-transparent m-2 overflow-auto" style="max-height:120px;">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
</div>
<!-- DEMEANOR SECTION END (ANTHRO) -->
</div>
</div>
<div class="row no-gutters">
<!-- LIKES & DISLIKES - HOBBIES SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 p-2 m-2" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> LIKES & DISLIKES </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fad fa-heart-half fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<div class="row no-gutters">
<div class="card border-0 bg-transparent text-left my-auto p-2 col-lg">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i> LIKE #1
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i> LIKE #2
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i> LIKE #3
</p>
</div>
<div class="card border-0 bg-transparent text-left my-auto p-2 col-lg">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i> DISLIKE #1
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i> DISLIKE #2
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i> DISLIKE #3
</p>
</div>
</div>
<div class="card border-0 p-2 m-2" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> HOBBIES & INTERESTS </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fad fa-heart-pulse fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000"></i>
</div>
</div>
<div class="row no-gutters">
<div class="card border-0 bg-transparent text-left my-auto p-3 col-md">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #1
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #2
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #3
</p>
</div>
<div class="border-0 bg-transparent text-left my-auto p-3 col-md">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #4
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #5
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #6
</p>
</div>
</div>
</div>
<!-- LIKES & DISLIKES - HOBBIES SECTION END (ANTHRO) -->
<!-- FAVOURITES SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent col-md">
<div class="card border-0 p-2 m-2" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> FAVOURITES </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fad fa-stars fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<div class="card border-0 bg-transparent p-3">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Food:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> FOOD HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Drink:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> DRINK HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Colour:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> COLOUR HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Flower:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> FLOWER HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Scent:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> SCENT HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Season:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> SEASON HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Weather:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> WEATHER HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Environment:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> ENVIRONMENT HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Activity:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> ACTIVITY HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>MUSIC:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> MUSIC GENRE HERE </p>
</div>
</div>
</div>
</div>
</div>
<!-- FAVOURITES SECTION END (ANTHRO) -->
</div>
</div>
<!-- PERSONALITY SECTION END (ANTHRO) -->
<!-- MOODBOARD SECTION START (ANTHRO) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="row no-gutters">
<!-- MOODBOARD #1 START (ANTHRO) -->
<div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
<div class="card border-0 p-2 bg-transparent">
<div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MOODBOARD IMAGE #1 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- MOODBOARD #2 START (ANTHRO) -->
<div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
<div class="card border-0 p-2 bg-transparent">
<div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MOODBOARD IMAGE #2 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- MOODBOARD #3 START (ANTHRO) -->
<div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
<div class="card border-0 p-2 bg-transparent">
<div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MOODBOARD IMAGE #3 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
</div>
</div>
<!-- MOODBOARD SECTION END (ANTHRO) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="row no-gutters">
<!-- WORLD & BACKSTORY SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent col-lg-7">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> WORLD & BACKSTORY </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-books fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000"></i>
</div>
</div>
<div class="card border-0 bg-transparent p-2 m-2 overflow-auto" style="height:250px;">
<!-- FAMILY & ANCESTRY START (ANTHRO) -->
<div class="card border-0 bg-transparent p-1">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
<i class="fas fa-bookmark fa-fw fa-md mt-1 mr-1 ml-1"></i> FAMILY & ANCESTRY
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
<!-- CURRENT LIFE START (ANTHRO) -->
<div class="card border-0 p-1 bg-transparent">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
<i class="fas fa-bookmark fa-fw fa-md mt-1 mr-1 ml-1"></i> CURRENT LIFE
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
<!-- CAREER START (ANTHRO) -->
<div class="card border-0 p-1 bg-transparent">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
<i class="fas fa-bookmark fa-fw fa-md mt-1 mr-1 ml-1"></i> WORK & CAREER
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
</div>
<!-- WORLD & BACKSTORY SECTION END (ANTHRO) -->
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<!-- RELATIONSHIPS SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> RELATIONSHIPS </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-user-group fa-xl fa-fw ml-1 mr-1 mt-1"></i>
</div>
</div>
<!-- RELATIONSHIP #1 (ANTHRO) -->
<div class="card border-0 bg-transparent overflow-auto" style="height:250px;">
<div class="card border-0 bg-transparent p-2 col-lg">
<div class="card border-0 bg-transparent p-2 text-left my-auto">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg-4 rounded-circle" style="background-position:center; background-repeat:no-repeat; background-size:cover;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^CHARACTER IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-center">
<p class="text-muted" style="font-size:20px; font-weight:450;">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^CHARACTER LINK - REPLACE 'LINKHERE' WITH A CHARACTER PAGE URL^ -->
</p>
<div class="col">
<hr>
</div>
<i class="text-center text-muted my-auto fas fa-smile fa-beat fa-xl fa-fw ml-1 mr-1 mt-1"></i>
</div>
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>RELATIONSHIP - PRONOUNS</b>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1 m-1 col-lg">
<p style="font-size:15px; font-weight:350; color:#000000; height:150px;"> 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>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIP #2 (ANTHRO) -->
<div class="card border-0 bg-transparent p-2 col-lg">
<div class="card border-0 bg-transparent p-2 text-left my-auto">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-center">
<i class="text-center text-muted my-auto fas fa-smile fa-beat fa-xl fa-fw ml-1 mr-1 mt-1"></i>
<div class="col">
<hr>
</div>
<p class="text-muted" style="font-size:20px; font-weight:450;">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^CHARACTER LINK - REPLACE 'LINKHERE' WITH A CHARACTER PAGE URL^ -->
</p>
</div>
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg text-right">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>RELATIONSHIP - PRONOUNS</b>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1 m-1 col-lg">
<p style="font-size:15px; font-weight:350; color:#000000; height:150px;"> 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>
</div>
<div class="card border-0 bg-transparent col-lg-4 rounded-circle" style="background-position:center; background-repeat:no-repeat; background-size:cover;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^CHARACTER IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- RELATIONSHIP #3 (ANTHRO) -->
<div class="card border-0 bg-transparent p-2 col-lg">
<div class="card border-0 bg-transparent p-2 text-left my-auto">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg-4 rounded-circle" style="background-position:center; background-repeat:no-repeat; background-size:cover;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^CHARACTER IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-center">
<p class="text-muted" style="font-size:20px; font-weight:450;">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^CHARACTER LINK - REPLACE 'LINKHERE' WITH A CHARACTER PAGE URL^ -->
</p>
<div class="col">
<hr>
</div>
<i class="text-center text-muted my-auto fas fa-smile fa-beat fa-xl fa-fw ml-1 mr-1 mt-1"></i>
</div>
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>RELATIONSHIP - PRONOUNS</b>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1 m-1 col-lg">
<p style="font-size:15px; font-weight:350; color:#000000; height:150px;"> 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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS SECTION END (ANTHRO) -->
</div>
</div>
</div>
<!-- ACCENT IMAGE SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent pl-2 p-1 col-lg my-auto mx-auto">
<div class="card border-0 bg-transparent" style="background-repeat:no-repeat; background-position:center; background-size:cover; height:600px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^ACCENT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<!-- ACCENT IMAGE SECTION END (ANTHRO) -->
</div>
</div>
<!-- DESIGN SECTION START (ANTHRO) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000"> Design </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-palette fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000"></i>
</div>
</div>
<!-- PALETTE SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent mx-auto col-lg p-2 m-2">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkles fa-xl fa-fw ml-1 mr-1 mt-1 my-auto" style="color:#000000"></i>
<div class="col my-auto">
<hr>
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<!-- ^ADD OR REMOVE AS NECESSARY^ -->
<div class="col my-auto">
<hr>
</div>
<i class="fas fa-sparkles fa-xl fa-fw ml-1 mr-1 mt-1 my-auto" style="color:#000000"></i>
</div>
</div>
<!-- PALETTE SECTION END (ANTHRO) -->
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<!-- MAIN DESIGN SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent col-lg">
<div class="card bg-transparent border-0 p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> MAIN DESIGN </p>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent p-2 mx-auto col-lg" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:350px;;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MAIN DESIGN IMAGE (ANTHRO) - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<!-- DESIGN NOTES SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 bg-transparent p-1 m-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> DESIGN NOTES </p>
</div>
<div class="card border-0 bg-transparent p-1 m-1 overflow-auto" style="height:310px;">
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 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. </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 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. </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 3: 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>
</div>
</div>
<!-- DESIGN NOTES SECTION END (ANTHRO) -->
</div>
</div>
<!-- DETAILS SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent">
<div class="card border-0 bg-transparent p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> DETAILS </p>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Height:</b>
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000;"> Height Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Weight:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000"> Weight Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Body Type:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000"> Body Type Here </p>
</div>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Designed By:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^DESIGNER LINK - REPLACE 'LINKHERE' WITH DESIGNER'S PAGE -->
</p>
</div>
</div>
</div>
</div>
<!-- DETAILS SECTION END (ANTHRO) -->
</div>
<!-- MAIN DESIGN SECTION END (ANTHRO) -->
<!-- WARDROBE SECTION START (ANTHRO) -->
<div class="card border-0 bg-transparent col-lg">
<div class="card bg-transparent border-0 p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> WARDROBE </p>
</div>
<div class="card border-0 bg-transparent p-1">
<div id="outfits" class="carousel slide" data-ride="true" data-pause="true" interval="false">
<div class="carousel-inner">
<div class="card-flex col-lg h-100 p-0 align-items-center" style="position:absolute;">
<div class="row no-gutters w-100 justify-content-between pl-1 pr-1 mt-4">
<a class="text-muted" href="#outfits" data-slide="prev" style="z-index:2;">
<i class="fad fa-arrow-circle-left fa-fw fa-lg"></i>
</a>
<a class="text-muted" href="#outfits" data-slide="next" style="z-index:2;">
<i class="fad fa-arrow-circle-right fa-fw fa-lg"></i>
</a>
</div>
</div>
<!-- OUTFIT #1 START (ANTHRO) -->
<div class="carousel-item active">
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent mx-auto p-2 col-lg" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:350px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"> </div>
<!-- ^OUTFIT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="card bg-transparent border-0 p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> OUTFIT #1 </p>
</div>
<div class="card border-0 bg-transparent p-1 m-1 overflow-auto" style="height:115px;">
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 1: NOTE HERE </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 2: NOTE HERE </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 3: NOTE HERE </p>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="card border-0 bg-transparent p-1" style="height:115px;">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Style / Type:</b>
</p>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Designed By:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^DESIGNER LINK - REPLACE 'LINKHERE' WITH DESIGNER'S PAGE -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OUTFIT #2 START (ANTHRO) -->
<div class="carousel-item">
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent mx-auto p-2 col-lg" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:350px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"> </div>
<!-- ^OUTFIT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="card bg-transparent border-0 p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> OUTFIT #2 </p>
</div>
<div class="card border-0 bg-transparent p-1 m-1 overflow-auto" style="height:115px;">
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 1: NOTE HERE </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 2: NOTE HERE </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 3: NOTE HERE </p>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="card border-0 bg-transparent p-1" style="height:115px;">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Style / Type:</b>
</p>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Designed By:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^DESIGNER LINK - REPLACE 'LINKHERE' WITH DESIGNER'S PAGE -->
</p>
</div>
</div>
</div>
</div>
<!-- OUTFIT #2 END (ANTHRO) -->
</div>
</div>
</div>
<!-- OUTFIT #3 START (ANTHRO) -->
<div class="carousel-item">
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent mx-auto p-2 col-lg" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:350px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"> </div>
<!-- ^OUTFIT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="card bg-transparent border-0 p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> OUTFIT #3 </p>
</div>
<div class="card border-0 bg-transparent p-1 m-1 overflow-auto" style="height:115px;">
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 1: NOTE HERE </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 2: NOTE HERE </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 3: NOTE HERE </p>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="card border-0 bg-transparent p-1" style="height:115px;">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Style / Type:</b>
</p>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
<div class="row no-gutters p-1">
<div class="card border-0 my-auto rounded" style="background:#c8c8c8">
<a class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button"> Style Here </a>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Designed By:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^DESIGNER LINK - REPLACE 'LINKHERE' WITH DESIGNER'S PAGE -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OUTFIT #3 END (ANTHRO) -->
<!-- ^ADD OR REMOVE OUTFITS AS NECESSARY^ -->
</div>
</div>
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 bg-transparent p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> INVENTORY </p>
</div>
</div>
<div class="card border-0 bg-transparent">
<div class="card border-0 bg-transparent" style="background-size:cover; background-position:center; background-repeat:no-repeat; height:150px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^INVENTORY IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- WARDROBE SECTION END (ANTHRO) -->
</div>
</div>
</div>
<!-- DESIGN SECTION END (ANTHRO) -->
</div>
<!-- ANTHRO SECTION END -->
<!-- FERAL SECTION START -->
<div class="tab-pane fade" id="feral">
<!-- VERSION BAR SECTION START (FERAL) - REMOVE IF ONLY USING FERAL TAB! -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase my-auto" style="font-size:18px; font-weight:500; color:#000000"> Currently viewing: Feral Version</p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-paw fa-bounce fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000; --fa-animation-duration:3s;"></i>
</div>
</div>
</div>
<!-- VERSION BAR SECTION END (FERAL) - REMOVE IF ONLY USING FERAL TAB! -->
<!-- PERSONALITY SECTION START (FERAL) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000"> Personality </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-feather fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<!-- TRAIT SECTION START (FERAL) -->
<div class="card border-0 bg-transparent p-2 m-2 col-lg">
<div class="row no-gutters justify-content-center">
<!-- TRAIT #1 (FERAL) -->
<div class="card border-0 col-lg" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;"> TRAIT #1 </p>
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<!-- TRAIT #2 (FERAL) -->
<div class="card border-0 col-lg" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;"> TRAIT #2 </p>
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<!-- TRAIT #3 (FERAL) -->
<div class="card border-0 col-lg" style="background:#ffffff">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;"> TRAIT #3 </p>
<i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
</div>
</div>
<!-- TRAIT SECTION END (FERAL) -->
<hr class="m-0" style="#000000">
<div class="row no-gutters justify-content-center">
<!-- STATS SECTION START (FERAL) -->
<div class="card border-0 bg-transparent m-2 col-lg-5">
<div class="row no-gutters justify-content-center">
<!-- CHARISMA START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Charisma:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- KINDNESS START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Kindness:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card bg-transparent border-0">
<div class="row no-gutters">
<!-- PATIENCE START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Patience:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- INTEGRITY START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Integrity:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card bg-transparent border-0">
<div class="row no-gutters">
<!-- INTELLECT START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Intellect:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- LOYALTY START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Loyalty:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card bg-transparent border-0">
<div class="row no-gutters">
<!-- COURAGE START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-left">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Courage:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
<!-- MATURITY START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="row no-gutters justify-content-right">
<div class="card border-0 m-1 p-1 bg-transparent col-md">
<p class="text-uppercase" style="font-size:12px; font-weight:350; color:#000000;">
<b>Maturity:</b>
</p>
</div>
<div class="card border-0 m-1 p-1 my-auto bg-transparent">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
<i class="fas fa-diamond fa-2xs fa-fw"></i>
</p>
<!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
</div>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card-flex border-0 m-2 p-2 col-lg mx-auto">
<!-- INTROVERTED-EXTROVERTED START (FERAL) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Introverted</span>
<span>Extroverted</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- INSTINCTIVE-CALCULATED START (FERAL) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Instinctive</span>
<span>Calculated</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- DECEPTIVE-SINCERE START (FERAL) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Deceptive</span>
<span>Sincere</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- INDIFFERENT-EMOTIONAL START (FERAL) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Indifferent</span>
<span>Emotional</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
<!-- RESERVED-AFFECTIONATE START (FERAL) -->
<div class="col-lg mb-2">
<div class="row no-gutters justify-content-between mb-1" style="color:#000000">
<span>Reserved</span>
<span>Affectionate</span>
</div>
<div class="progress" style="height:3px; overflow:visible;">
<div class="progress-bar" style="Background:none; margin-top:-3px;
width:50%;">
<!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
<i class="fas fa-diamond pull-right" style="color:#000000"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- STATS SECTION END (FERAL) -->
<div class="card bg-transparent border-0 col-lg">
<div class="row no-gutters">
<!-- PLAYLIST SECTION START (FERAL) -->
<div class="card bg-transparent border-0 p-2 col-lg">
<div class="card bg-transparent border-0 m-2">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;"> PLAYLIST </p>
</div>
<div class="card border-0 bg-transparent m-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;">
<i class="fas fa-music fa-xs fa-fw ml-1 mr-1 mt-1"></i> ARTIST - SONG TITLE
</p>
</div>
<div class="card border-0 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
<i class="fad fa-play fa-fw fa-md"></i>
<iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
<!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
</div>
</div>
</div>
<div class="card border-0 bg-transparent m-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;">
<i class="fas fa-music fa-xs fa-fw ml-1 mr-1 mt-1"></i> ARTIST - SONG TITLE
</p>
</div>
<div class="card border-0 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
<i class="fad fa-play fa-fw fa-md"></i>
<iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
<!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
</div>
</div>
</div>
<div class="card border-0 bg-transparent m-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase" style="font-size:15px; font-weight:350; color:#000000;">
<i class="fas fa-music fa-xs fa-fw ml-1 mr-1 mt-1"></i> ARTIST - SONG TITLE
</p>
</div>
<div class="card border-0 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
<i class="fad fa-play fa-fw fa-md"></i>
<iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
<!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
</div>
</div>
</div>
</div>
<!-- PLAYLIST SECTION END (FERAL) -->
</div>
<!-- DEMEANOR SECTION START (FERAL) -->
<div class="card bg-transparent border-0 m-2">
<div class="card bg-transparent border-0 m-2">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;"> Demeanor </p>
</div>
<div class="card border-0 bg-transparent m-2 overflow-auto" style="max-height:120px;">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
</div>
<!-- DEMEANOR SECTION END (FERAL) -->
</div>
</div>
<div class="row no-gutters">
<!-- LIKES & DISLIKES - HOBBIES SECTION START (FERAL) -->
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 p-2 m-2" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> LIKES & DISLIKES </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fad fa-heart-half fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<div class="row no-gutters">
<div class="card border-0 bg-transparent text-left my-auto p-2 col-lg">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i> LIKE #1
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i> LIKE #2
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i> LIKE #3
</p>
</div>
<div class="card border-0 bg-transparent text-left my-auto p-2 col-lg">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i> DISLIKE #1
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i> DISLIKE #2
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i> DISLIKE #3
</p>
</div>
</div>
<div class="card border-0 p-2 m-2" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> HOBBIES & INTERESTS </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fad fa-heart-pulse fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000"></i>
</div>
</div>
<div class="row no-gutters">
<div class="card border-0 bg-transparent text-left my-auto p-3 col-md">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #1
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #2
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #3
</p>
</div>
<div class="border-0 bg-transparent text-left my-auto p-3 col-md">
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #4
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #5
</p>
<p class="text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i> HOBBY #6
</p>
</div>
</div>
</div>
<!-- LIKES & DISLIKES - HOBBIES SECTION END (FERAL) -->
<!-- FAVOURITES SECTION START (FERAL) -->
<div class="card border-0 bg-transparent col-md">
<div class="card border-0 p-2 m-2" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> FAVOURITES </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fad fa-stars fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000;"></i>
</div>
</div>
<div class="card border-0 bg-transparent p-3">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Food:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> FOOD HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Drink:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> DRINK HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Colour:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> COLOUR HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Flower:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> FLOWER HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Scent:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> SCENT HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Season:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> SEASON HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Weather:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> WEATHER HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Environment:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> ENVIRONMENT HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>Activity:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> ACTIVITY HERE </p>
</div>
</div>
</div>
<hr class="m-0" style="#000000">
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
<i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
<b>MUSIC:</b>
</p>
<div class="card border-0 bg-transparent text-right my-auto col-md">
<p class="text-muted px-3" style="font-size:15px; font-weight:350;"> MUSIC GENRE HERE </p>
</div>
</div>
</div>
</div>
</div>
<!-- FAVOURITES SECTION END (FERAL) -->
</div>
</div>
<!-- PERSONALITY SECTION END (FERAL) -->
<!-- MOODBOARD SECTION START (FERAL) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="row no-gutters">
<!-- MOODBOARD #1 START (FERAL) -->
<div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
<div class="card border-0 p-2 bg-transparent">
<div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MOODBOARD IMAGE #1 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- MOODBOARD #2 START (FERAL) -->
<div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
<div class="card border-0 p-2 bg-transparent">
<div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MOODBOARD IMAGE #2 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- MOODBOARD #3 START (FERAL) -->
<div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
<div class="card border-0 p-2 bg-transparent">
<div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MOODBOARD IMAGE #3 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
</div>
</div>
<!-- MOODBOARD SECTION END (FERAL) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="row no-gutters">
<!-- WORLD & BACKSTORY SECTION START (FERAL) -->
<div class="card border-0 bg-transparent col-lg-7">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> WORLD & BACKSTORY </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-books fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000"></i>
</div>
</div>
<div class="card border-0 bg-transparent p-2 m-2 overflow-auto" style="height:250px;">
<!-- FAMILY & ANCESTRY START (FERAL) -->
<div class="card border-0 bg-transparent p-1">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
<i class="fas fa-bookmark fa-fw fa-md mt-1 mr-1 ml-1"></i> World & Environment
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
<!-- GENERAL LIFE START (FERAL) -->
<div class="card border-0 p-1 bg-transparent">
<p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
<i class="fas fa-bookmark fa-fw fa-md mt-1 mr-1 ml-1"></i> GENERAL LIFE
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000"> 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>
</div>
<!-- WORLD & BACKSTORY SECTION END (FERAL) -->
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<!-- RELATIONSHIPS SECTION START (FERAL) -->
<div class="card border-0 bg-transparent">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000;"> RELATIONSHIPS </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-user-group fa-xl fa-fw ml-1 mr-1 mt-1"></i>
</div>
</div>
<!-- RELATIONSHIP #1 (FERAL) -->
<div class="card border-0 bg-transparent overflow-auto" style="height:250px;">
<div class="card border-0 bg-transparent p-2 col-lg rounded-circle">
<div class="card border-0 bg-transparent p-2 text-left my-auto">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg-4 rounded-circle" style="background-position:center; background-repeat:no-repeat; background-size:cover;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^CHARACTER IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-center">
<p class="text-muted" style="font-size:20px; font-weight:450;">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^CHARACTER LINK - REPLACE 'LINKHERE' WITH A CHARACTER PAGE URL^ -->
</p>
<div class="col">
<hr>
</div>
<i class="text-center text-muted my-auto fas fa-smile fa-beat fa-xl fa-fw ml-1 mr-1 mt-1"></i>
</div>
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>RELATIONSHIP - PRONOUNS</b>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1 m-1 col-lg">
<p style="font-size:15px; font-weight:350; color:#000000; height:150px;"> 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>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIP #2 (FERAL) -->
<div class="card border-0 bg-transparent p-2 col-lg">
<div class="card border-0 bg-transparent p-2 text-left my-auto">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-center">
<i class="text-center text-muted my-auto fas fa-smile fa-beat fa-xl fa-fw ml-1 mr-1 mt-1"></i>
<div class="col">
<hr>
</div>
<p class="text-muted" style="font-size:20px; font-weight:450;">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^CHARACTER LINK - REPLACE 'LINKHERE' WITH A CHARACTER PAGE URL^ -->
</p>
</div>
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg text-right">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>RELATIONSHIP - PRONOUNS</b>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1 m-1 col-lg">
<p style="font-size:15px; font-weight:350; color:#000000; height:150px;"> 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>
</div>
<div class="card border-0 bg-transparent col-lg-4 rounded-circle" style="background-position:center; background-repeat:no-repeat; background-size:cover;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^CHARACTER IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
</div>
</div>
<!-- RELATIONSHIP #3 (FERAL) -->
<div class="card border-0 bg-transparent p-2 col-lg">
<div class="card border-0 bg-transparent p-2 text-left my-auto">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg-4 rounded-circle" style="background-position:center; background-repeat:no-repeat; background-size:cover;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^CHARACTER IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters justify-content-center">
<p class="text-muted" style="font-size:20px; font-weight:450;">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^CHARACTER LINK - REPLACE 'LINKHERE' WITH A CHARACTER PAGE URL^ -->
</p>
<div class="col">
<hr>
</div>
<i class="text-center text-muted my-auto fas fa-smile fa-beat fa-xl fa-fw ml-1 mr-1 mt-1"></i>
</div>
<div class="card border-0 bg-transparent">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>RELATIONSHIP - PRONOUNS</b>
</p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1 m-1 col-lg">
<p style="font-size:15px; font-weight:350; color:#000000; height:150px;"> 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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS SECTION END (FERAL) -->
</div>
</div>
</div>
<!-- ACCENT IMAGE SECTION START (FERAL) -->
<div class="card border-0 bg-transparent pl-2 p-1 col-lg my-auto mx-auto">
<div class="card border-0 bg-transparent" style="background-repeat:no-repeat; background-position:center; background-size:cover; height:600px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"></div>
<!-- ^ACCENT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<!-- ACCENT IMAGE SECTION END (FERAL) -->
</div>
</div>
<!-- DESIGN SECTION START (FERAL) -->
<div class="card border-0 p-2 m-2" style="background:#ffffff">
<div class="card border-0 p-1" style="background:#c8c8c8">
<div class="row no-gutters justify-content-center">
<p class="text-uppercase" style="font-size:25px; font-weight:500; color:#000000"> Design </p>
<div class="col my-auto">
<hr>
</div>
<i class="text-center my-auto fas fa-palette fa-xl fa-fw ml-1 mr-1 mt-1" style="color:#000000"></i>
</div>
</div>
<!-- PALETTE SECTION START (FERAL) -->
<div class="card border-0 bg-transparent mx-auto col-lg p-2 m-2">
<div class="row no-gutters justify-content-center">
<i class="fas fa-sparkles fa-xl fa-fw ml-1 mr-1 mt-1 my-auto" style="color:#000000"></i>
<div class="col my-auto">
<hr>
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<div class="card border-0 my-auto align-items-center justify-content-center m-1" style="height:45px; width:45px; background:#c8c8c8">
<!-- ^HEX CODE - REPLACE ABOVE HEX CODE WITH ONE OF YOUR CHOICE^ -->
<a title="HEX Code Here" class="tooltipster"><i class="fas fa-star fa-xl faded"></i></a>
<!-- ^TOOLTIP TEXT - REPLACE 'HEX CODE HERE' WITH ABOVE HEX CODE OF YOUR CHOICE^ -->
</div>
<!-- ^ADD OR REMOVE AS NECESSARY^ -->
<div class="col my-auto">
<hr>
</div>
<i class="fas fa-sparkles fa-xl fa-fw ml-1 mr-1 mt-1 my-auto" style="color:#000000"></i>
</div>
</div>
<!-- PALETTE SECTION END (FERAL) -->
<div class="card border-0 bg-transparent mx-auto col-lg">
<div class="row no-gutters">
<!-- MAIN DESIGN START (FERAL) -->
<div class="card border-0 bg-transparent col-lg">
<div class="card bg-transparent border-0 p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> MAIN DESIGN </p>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent p-2 mx-auto col-lg" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:350px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');">
<!-- ^MAIN DESIGN IMAGE (FERAL) - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<!-- DESIGN NOTES SECTION START (FERAL) -->
<div class="card border-0 bg-transparent col-lg-4">
<div class="card border-0 bg-transparent p-1 m-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> DESIGN NOTES </p>
</div>
<div class="card border-0 bg-transparent overflow-auto col-lg" style="height:350px;">
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 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. </p>
</div>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 2: 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>
<div class="card border-0 bg-transparent p-2">
<p style="font-size:15px; font-weight:350; color:#000000"> 3: 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>
</div>
</div>
<!-- DESIGN NOTES SECTION END (FERAL) -->
</div>
<!-- DETAILS SECTION START (FERAL) -->
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters justify-content-center">
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 bg-transparent p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> DETAILS </p>
</div>
<div class="card border-0 bg-transparent my-auto">
<div class="card border-0 bg-transparent p-1 col-lg">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Height:</b>
</p>
</div>
<div class="card border-0 bg-transparent">
<p style="font-size:15px; font-weight:350; color:#000000;"> Height Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Weight:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000"> Weight Here </p>
</div>
</div>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Body Type:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000"> Body Type Here </p>
</div>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="card border-0 bg-transparent p-1">
<div class="row no-gutters">
<div class="card bg-transparent border-0 col-lg">
<p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
<b>Designed By:</b>
</p>
</div>
<div class="card bg-transparent border-0">
<p style="font-size:15px; font-weight:350; color:#000000">
<a href="LINKHERE" style="color:#000000">NAME HERE</a>
<!-- ^DESIGNER LINK - REPLACE 'LINKHERE' WITH DESIGNER'S PAGE -->
</p>
</div>
</div>
</div>
</div>
</div>
<!-- DETAILS SECTION END (FERAL) -->
<!-- CLOSEUPS SECTION START (FERAL) -->
<div class="card border-0 bg-transparent col-lg-4 ml-3">
<div class="card border-0 bg-transparent p-1">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> CLOSE-UPS </p>
</div>
<div class="card border-0 bg-transparent p-1">
<div id="closeups" class="carousel slide" data-ride="true" data-pause="true" interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card border-0 bg-transparent p-1">
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 bg-transparent mx-auto p-2" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:150px; width:150px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"> </div>
<!-- ^CLOSEUP IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<div class="card bg-transparent border-0 mx-auto my-auto">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> EYES </p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card border-0 bg-transparent p-1">
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 bg-transparent mx-auto p-2" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:150px; width:150px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"> </div>
<!-- ^CLOSEUP IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<div class="card bg-transparent border-0 mx-auto my-auto">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> MOUTH </p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card border-0 bg-transparent p-1">
<div class="card border-0 bg-transparent col-lg">
<div class="card border-0 bg-transparent mx-auto p-2" style="background-size:cover; background-repeat:no-repeat; background-position:center; height:150px; width:150px;
background-image:url('https://www.shutterstock.com/shutterstock/photos/2311681453/display_1500/stock-vector-tbd-to-be-defined-acronym-text-stamp-business-concept-background-2311681453.jpg');"> </div>
<!-- ^CLOSEUP IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
</div>
<div class="card bg-transparent border-0 mx-auto my-auto">
<p class="text-uppercase text-muted" style="font-size:20px; font-weight:450;"> CLAWS </p>
</div>
</div>
</div>
<!-- CLOSEUP SECTION END (FERAL) -->
</div>
</div>
<a class="carousel-control-prev" href="#closeups" role="button" data-slide="prev">
<i class="fad fa-circle-arrow-left fa-fw fa-lg" style="color:#000000"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#closeups" role="button" data-slide="next">
<i class="fad fa-circle-arrow-right fa-fw fa-lg" style="color:#000000"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- MAIN DESIGN SECTION END (FERAL) -->
</div>
</div>
<!-- DESIGN SECTION END (FERAL) -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS SECTION START - DO NOT REMOVE -->
<div class="card border-0 bg-transparent col-lg">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col-lg-12 text-right">
<div style="border-0 background:#c8c8c8 col-lg-12">
<a class="btn btn-primary btn-xs border-0" href="https://toyhou.se/spiritinthesnow" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button">
<i class="fas fa-sparkle fa-xs ml-1 mr-1 mt-1"></i> Code By: spiritinthesnow </a>
</div>
</div>
</div>
</div>
<!-- CREDITS SECTION END - DO NOT REMOVE -->
</div>
</div>
Recent Images
No images.