Profile
<!-- THIS CODE USES CUSTOM COLORS
3. || Interact || F2U
This code is meant to have direct interaction
between character and the watcher. That's kinda
the main theme of this code but you can, of course,
change everything to your liking!
PRIMARY COLOR == #721410;
BACKGROUND (BODY) COLOR == #F5EBDD;
BASE TEXT COLOR == #3A3A3A;
LIGHT TEXT/BG COLOR == #FCF9F9;
ACCENT COLOR == #A8500D;
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container card border-0 col" style="max-width: 1100px; color: #3A3A3A;">
<!-- TOP CONTAINER -->
<div class="card border-0" style="overflow: hidden; border-radius: 1em;">
<div class="row no-gutters">
<!--
===================================================
Insert your character's image instead of "URLHERE"
You can change it's position by writing either
"center" or "bottom" instead of "top" if you think
it'll look better that way!
===================================================
-->
<div class="col-lg-4 col-sm-12" style="background: #F5EBDD; min-height: 300px; position: relative;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<i class="fas fa-triangle" style="color: #FCF9F9; position: absolute; bottom: 60px; right: 40px;"></i>
<div class="card border-0 col-8 p-2 pl-2" style="background: #FCF9F9; height: 60px; position: absolute; bottom: 5px; right: 8px; border-radius: 1em;">
<!-- CHARACTER'S PHRASE -- try not to write much! -->
<p class="text-center" style="color: #9A958D;">Hello! I am [Character Name], nice to meet you!</p>
<!-- FA ICON -- you can change the symbol by writing other icon's name instead "star" -->
<i class="fas fa-star fa-2x" style="color: #A8500D; position: absolute; bottom: 2px; left: -18px; transform: rotate(-20deg);"></i>
</div>
</div>
<div class="container col-lg-8 col-sm-12" style="color: #FCF9F9; background: #721410; position: relative;">
<!-- Those are heart icons in the likes/dislikes section which you can see in the left-down/top-right corners. They change their positions on small screens. -->
<i class="fal fa-heart-crack fa-4x hidden-md-up" style="color: #A8500D; position: absolute; bottom: 10px; left: 20px; transform: rotate(-20deg);"></i>
<i class="fal fa-heart fa-4x hidden-md-up" style="color: #A8500D; position: absolute; top: 20px; right: 20px; transform: rotate(20deg);"></i>
<i class="fal fa-heart fa-4x hidden-sm-down" style="color: #A8500D; position: absolute; bottom: 10px; left: 20px; transform: rotate(-20deg);"></i>
<i class="fal fa-heart-crack fa-4x hidden-sm-down" style="color: #A8500D; position: absolute; top: 20px; right: 20px; transform: rotate(20deg);"></i>
<!-------------------------------------------------->
<div class="row no-gutters h-100 align-items-center justify-content-center" style="font-size: 20px;">
<div class="card-flex col-9 col-lg-5 m-0 m-lg-2 justify-content-center">
<div class="pt-4 pt-lg-0">
<div class="col pt-4 pt-lg-0">
<!-- LIKES -- DO NOT ADD MORE! -->
<p style="font-size: 24px;">
Things I like...</p>
<ul class="list-group pl-4 pl-lg-5">
<li class="pt-3">
content
</li>
<li class="ml-lg-2 ml-sm-0">
content
</li>
<li class="ml-lg-3 ml-sm-0">
content
</li>
<li class="ml-lg-4 ml-sm-0">
content
</li>
</ul>
</div>
</div>
</div>
<div class="card-flex col-9 col-lg-5 m-0 m-lg-2 justify-content-center">
<div class="pb-5 pb-lg-0">
<div class="col pt-4 pt-lg-0">
<!-- DISLIKES -- DO NOT ADD MORE! -->
<p style="font-size: 24px;">
Things I dislike...
</p>
<ul class="list-group pl-5 pl-lg-5">
<li class="pt-3">
content
</li>
<li class="ml-lg-2 ml-sm-0">
content
</li>
<li class="ml-lg-3 ml-sm-0">
content
</li>
<li class="ml-lg-4 ml-sm-0">
content
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters p-0 pt-4">
<div class="col-lg-1">
<ul class="nav row no-gutters justify-content-center m-4 m-lg-0">
<!-- NAV BUTTON -- INTRODUCTION -->
<li class="nav-item card-flex mb-4 mr-4 mr-lg-0 border-0 justify-content-center align-items-center" style="background: #A8500D; border-radius: 1em; height: 90px; width: 90px;">
<a class="nav-link active" style="color: #FCF9F9;" data-toggle="tab" href="#INTRO"><i class="fas fa-star fa-3x"></i></a>
</li>
<!-- NAV BUTTON -- TRAITS & FACTS -->
<li class="nav-item card-flex mb-4 border-0 justify-content-center align-items-center" style="background: #A8500D; border-radius: 1em; height: 90px; width: 90px;">
<a class="nav-link" style="color: #FCF9F9;" data-toggle="tab" href="#CHAR"><i class="fas fa-crab fa-3x"></i></a>
</li>
<!-- NAV BUTTON -- HISTORY -->
<li class="nav-item card-flex ml-4 ml-lg-0 mb-4 mr-4 mr-lg-0 border-0 justify-content-center align-items-center" style="background: #A8500D; border-radius: 1em; height: 90px; width: 90px;">
<a class="nav-link" style="color: #FCF9F9;" data-toggle="tab" href="#HIST"><i class="fas fa-books fa-3x"></i></a>
</li>
<!-- NAV BUTTON -- RELATIONSHIPS -->
<li class="nav-item card-flex mb-4 mr-sm-0 mr-4 mr-lg-0 border-0 justify-content-center align-items-center" style="background: #A8500D; border-radius: 1em; height: 90px; width: 90px;">
<a class="nav-link" style="color: #FCF9F9;" data-toggle="tab" href="#LINKS"><i class="fas fa-users fa-3x"></i></a>
</li>
</ul>
<!-- The long one -- it's just here for aesthetical reasons and is hidden on mobile-->
<div class="row no-gutters justify-content-center">
<div class="card col-lg-12 col-sm-3 border-0 hidden-md-down" style="background: #721410; border-radius: 1em; height: 576px;"></div>
</div>
</div>
<div class="col-lg-11 col-sm-12">
<div class="col p-0 pl-lg-4 pl-sm-0">
<div class="row no-gutters">
<div class="col-lg-8 col-sm-12">
<div class="tab-content">
<!--
=========================================
FIRST SECTION – CHARACTER INTRODUCTION
=========================================
-->
<div class="tab-pane fade in active show" id="INTRO">
<div class="card mb-sm-0 mr-lg-4 border-0" style="border-radius: 1em; position: relative;">
<div class="card border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 390px; overflow: hidden;">
<div class="col p-0">
<div class="card-flex" style="height: 90px;"></div>
<div class="card-flex border-0 p-2" style="height: 300px; overflow: auto;">
<div class="row no-gutters p-1">
<!-- NAME -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Name
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- ALIAS -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Alias
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- GENDER -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Gender
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
S.O.
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Age
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- BDAY -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
DoB
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- SIGN -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Sign
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- RACE -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Race
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- ROLE -->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>
Role
</p>
</div>
<div class="col-auto">
<p>
content
</p>
</div>
</div>
</div>
<!-- THEME -- insert your link instead of "MUSLINK"-->
<div class="col-sm-12 col-lg-6 pl-2 pr-2 mb-1" style="font-size: 20px; font-weight: 300;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Theme</p>
</div>
<div class="col-auto">
<a href="MUSLINK" style="color: #A8500D;"><p>content</p></a>
</div>
</div>
</div>
<!-- CHARACTER'S QUOTE -- Write it here! -->
<div class="container border-0 col-lg-10 bg- mt-3 mt-lg-4" style="color: #A8500D;">
<div class="row no-gutters justify-content-center pt-2 pb-2" style="font-size: 20px; font-style: italic;">
<i class="fal fa-quote-left fa-fw pr-2"></i>
<p>
Insert your quote here.
</p>
<i class="fal fa-quote-right fa-fw pl-2"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BOOKMARK -- You can change it's phrase but try to keep it short! -->
<div class="card-flex col-10 col-lg-7 align-items-center" style="background: #721410; min-height: 54px; position: absolute; top: 20px; left: -10px;">
<i class="fas fa-bookmark fa-rotate-270 fa-5x hidden-sm-down" style="color: #721410; position: absolute; top: -9px; right: -20px;"></i>
<p class="text-center" style="color: #FCF9F9; font-size: 24px; font-weight: 350; z-index: 100;">
Let us introduce ourselves!
</p>
</div>
</div>
</div>
<!--
==========================================
SECOND SECTION – CHARACTER TRAITS & FACTS
FAS are SOLID, FAL are EMPTY
TOP icon is LEFT, BOTTOM icon is RIGHT
==========================================
-->
<div class="tab-pane fade" id="CHAR">
<div class="card mb-sm-0 mr-lg-4 border-0" style="border-radius: 1em; position: relative;">
<div class="card border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 390px; overflow: hidden;">
<div class="col p-0">
<div class="card-flex" style="height: 90px;"></div>
<div class="card-flex border-0 p-2" style="height: 300px; overflow: auto;">
<div class="row no-gutters p-1">
<div class="col-sm-12 col-lg-6">
<div class="col pl-0" style="font-size: 20px; font-weight: 300;">
<!-- PATIENCE TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Patience</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- TEMPER TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Temper</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- COURAGE TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Courage</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- INTELLECT TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Intellect</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- HUMOUR TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Humour</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- CHARISMA TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Charisma</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- MATURITY TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Maturity</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
<!-- KINDNESS TRAIT-->
<div class="row no-gutters mb-1 justify-content-between">
<div class="col-auto" style="color: #9A958D; font-weight: 400;">
<p>Kindness</p>
</div>
<div class="col-auto">
<div class="row no-gutters" style="color: #A8500D;">
<i class="fas fa-star m-1"></i>
<i class="fas fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
<i class="fal fa-star m-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- TRIVIA SECTION -- You can add as much as you want, this box will scroll!-->
<div class="card border-0 col-sm-12 col-lg-6 p-2" style="background: #FCF9F9; height: 270px; overflow: auto;">
<p class="text-center" style="font-size: 24px; font-weight: 300;">Trivia</p>
<ul class="list-group pl-4 pr-2 pt-2 text-justify">
<li class="mb-1">Write some facts about your character here. This box will scroll, so don't be afraid to add more!</li>
<li class="mb-1">Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li class="mb-1">Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- BOOKMARK -- You can change it's phrase but try to keep it short! -->
<div class="card-flex col-10 col-lg-7 align-items-center" style="background: #721410; min-height: 54px; position: absolute; top: 20px; left: -10px;">
<i class="fas fa-bookmark fa-rotate-270 fa-5x hidden-sm-down" style="color: #721410; position: absolute; top: -9px; right: -20px;"></i>
<p class="text-center" style="color: #FCF9F9; font-size: 24px; font-weight: 350; z-index: 100;">
How do I appear to others?
</p>
</div>
</div>
</div>
<!--
=========================================
THIRD SECTION – CHARACTER HISTORY
You can add more subheaders and paragraphs,
it'll all scroll!
=========================================
-->
<div class="tab-pane fade" id="HIST">
<div class="card mb-sm-0 mr-lg-4 border-0" style="border-radius: 1em; position: relative;">
<div class="card border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 390px; overflow: hidden;">
<div class="col p-0">
<div class="card-flex" style="height: 90px;"></div>
<div class="card-flex border-0 p-3 text-justify" style="height: 300px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p style="font-size:24px; font-weight: 300; color: #9A958D;"><i class="fal fa-bookmark pr-2"></i>Subheader</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p style="font-size:24px; font-weight: 300; color: #9A958D;"><i class="fal fa-bookmark pr-2"></i>Subheader</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- BOOKMARK -- You can change it's phrase but try to keep it short! -->
<div class="card-flex col-10 col-lg-7 align-items-center" style="background: #721410; min-height: 54px; position: absolute; top: 20px; left: -10px;">
<i class="fas fa-bookmark fa-rotate-270 fa-5x hidden-sm-down" style="color: #721410; position: absolute; top: -9px; right: -20px;"></i>
<p class="text-center" style="color: #FCF9F9; font-size: 24px; font-weight: 350; z-index: 100;">
What about my past?
</p>
</div>
</div>
</div>
<!--
=========================================
FOURTH SECTION – CHARACTER RELATIONSHIPS
=========================================
-->
<div class="tab-pane fade" id="LINKS">
<div class="card mb-sm-0 mr-lg-4 border-0" style="border-radius: 1em; position: relative;">
<div class="card border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 390px; overflow: hidden;">
<div class="col p-0">
<div class="card-flex" style="height: 90px;"></div>
<div class="card-flex border-0 p-2" style="height: 300px; overflow: auto;">
<!-- RELATIONSHIP CARD START-->
<div class="col p-0 pt-3 pt-lg-0 pb-2">
<!-- Character image -- insert your image link instead of URLHERE-->
<img src="URLHERE" class="rounded float-left mr-3" style="height: 120px; width: 120px; border-radius: 1em;">
<div class="card border-0 p-1 pl-2 ml-3 mr-3" style="background: #FCF9F9; position: relative;">
<!-- SEMI-VISIBLE FA ICON -- You can change it! -->
<i class="fal fa-heartbeat fa-2x" style="color: #A8500D; position: absolute; top: 10px; right: 10px; transform: rotate(20deg); filter: opacity(30%);"></i>
<a href="CHARLINK" style="color: #721410;"><p style="font-size: 22px; font-weight: 300;">
Character name
</p></a>
<p style="color: #9A958D; font-size: 18px; font-weight: 300; margin-top: -15px;">
[relationship]
</p>
</div>
<div class="text-justify pt-2 p-3">
<!-- Relationship description -- you can add extra paragraph(s)!-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
</div>
</div>
<!-- RELATIONSHIP CARD END-->
<!-- RELATIONSHIP CARD START-->
<div class="col p-0 pt-3 pt-lg-0 pb-2">
<!-- Character image -- insert your image link instead of URLHERE-->
<img src="URLHERE" class="rounded float-left mr-3" style="height: 120px; width: 120px; border-radius: 1em;">
<div class="card border-0 p-1 pl-2 ml-3 mr-3" style="background: #FCF9F9; position: relative;">
<!-- SEMI-VISIBLE FA ICON -- You can change it! -->
<i class="fal fa-handshake fa-2x" style="color: #A8500D; position: absolute; top: 10px; right: 10px; transform: rotate(20deg); filter: opacity(30%);"></i>
<a href="CHARLINK" style="color: #721410;"><p style="font-size: 22px; font-weight: 300;">
Character name
</p></a>
<p style="color: #9A958D; font-size: 18px; font-weight: 300; margin-top: -15px;">
[relationship]
</p>
</div>
<div class="text-justify pt-2 p-3">
<!-- Relationship description -- you can add extra paragraph(s)!-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
</div>
</div>
<!-- RELATIONSHIP CARD END-->
<!-- RELATIONSHIP CARD START-->
<div class="col p-0 pt-3 pt-lg-0 pb-2">
<!-- Character image -- insert your image link instead of URLHERE-->
<img src="URLHERE" class="rounded float-left mr-3" style="height: 120px; width: 120px; border-radius: 1em;">
<div class="card border-0 p-1 pl-2 ml-3 mr-3" style="background: #FCF9F9; position: relative;">
<!-- SEMI-VISIBLE FA ICON -- You can change it! -->
<i class="fal fa-skull fa-2x" style="color: #A8500D; position: absolute; top: 10px; right: 10px; transform: rotate(20deg); filter: opacity(30%);"></i>
<a href="CHARLINK" style="color: #721410;"><p style="font-size: 22px; font-weight: 300;">
Character name
</p></a>
<p style="color: #9A958D; font-size: 18px; font-weight: 300; margin-top: -15px;">
[relationship]
</p>
</div>
<div class="text-justify pt-2 p-3">
<!-- Relationship description -- you can add extra paragraph(s)!-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
</div>
</div>
<!-- RELATIONSHIP CARD END-->
</div>
</div>
</div>
<!-- BOOKMARK -- You can change it's phrase but try to keep it short! -->
<div class="card-flex col-10 col-lg-7 align-items-center" style="background: #721410; min-height: 54px; position: absolute; top: 20px; left: -10px;">
<i class="fas fa-bookmark fa-rotate-270 fa-5x hidden-sm-down" style="color: #721410; position: absolute; top: -9px; right: -20px;"></i>
<p class="text-center" style="color: #FCF9F9; font-size: 24px; font-weight: 350; z-index: 100;">
These are people I know!
</p>
</div>
</div>
</div>
</div>
</div>
<!-- CHARACTER IMAGE ON THE RIGHT -- insert your link instead of "URLHERE"-->
<div class="card col-lg-4 col-sm-12 border-0 mt-4 mt-lg-0" style="
background-image: url(URLHERE); background-size: cover;
background-position: center;
border-radius: 1em; min-height: 390px;"></div>
</div>
<div class="card mt-4 border-0" style="background: #F5EBDD; min-height: 70px; border-radius: 1em;">
<div class="row justify-content-center" style="min-height: 70px;">
<!-- CAROUSEL SLIDE PREVIOUS-->
<div class="card-flex align-items-center pt-2 col-auto order-1 order-lg-0">
<a href="#beep" data-slide="prev" style="color: #721410;"><i class="fal fa-angles-left fa-2x"></i></a>
</div>
<!-- WARDROBE PHRASE -->
<div class="card-flex col-auto align-items-center">
<p class="text-center" style="font-size: 24px; font-weight: 300;">
Look what I have in my wardrobe!
</p>
</div>
<!-- CAROUSEL SLIDE NEXT-->
<div class="card-flex align-items-center col-auto pt-2 order-2 order-lg-0">
<a href="#beep" data-slide="next" style="color: #721410;"><i class="fal fa-angles-right fa-2x"></i></a>
</div>
</div>
</div>
<!--
========================================
WARDROBE CAROUSEL
It won't slide by itself, only when buttons
are pressed. There's two combined slides but
you can add more by simply copying the last one
as many times as you want!
========================================
-->
<div class="carousel slide carousel-fade" id="beep" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!-- FIRST CAROUSEL ITEM -- SET TO DEFAULT-->
<div class="carousel-item active">
<div class="row no-gutters mt-4">
<!--
=========================================
AESTHETIC PICTURES | insert direct link to
your image instead of "URLHERE"
You can also change bg-position by writing
"top", "center" or "bottom" to capture the
best frame of your image in the card!
=========================================
-->
<div class="col-lg-4 order-1 order-lg-0">
<!-- TOP CARD -->
<div class="card border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 250px;
background-image: url(URLHERE);
background-size: cover;
background-position: bottom;"></div>
<!-- BOTTOM CARD -->
<div class="card mt-4 border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 250px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;"></div>
</div>
<div class="flex col-lg-8">
<!--
=========================================
CHARACTER'S IMAGE| insert direct link to
your image instead of "URLHERE"
=========================================
-->
<div class="card ml-lg-4 ml-sm-0 mt-4 mt-lg-0 mb-4 border-0" style="
background: #F5EBDD;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
border-radius: 1em; min-height: 524px; position: relative;">
<!-- OPTIONAL CHIBI -- fixed height -- delete whole <img> to remove!-->
<img class="hidden-sm-down" src="https://via.placeholder.com/200x260" style="max-height: 260px; position: absolute; bottom: -20px; right: 40px;">
</div>
</div>
</div>
</div>
<!-- SECOND CAROUSEL ITEM -->
<div class="carousel-item">
<div class="row no-gutters mt-4">
<!--
=========================================
AESTHETIC PICTURES | insert direct link to
your image instead of "URLHERE"
You can also change bg-position by writing
"top", "center" or "bottom" to capture the
best frame of your image in the card!
=========================================
-->
<div class="col-lg-4 order-1 order-lg-0">
<!-- TOP CARD -->
<div class="card border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 250px;
background-image: url(URLHERE);
background-size: cover;
background-position: bottom;"></div>
<!-- BOTTOM CARD -->
<div class="card mt-4 border-0" style="background: #F5EBDD; border-radius: 1em; min-height: 250px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;"></div>
</div>
<div class="flex col-lg-8">
<!--
=========================================
CHARACTER'S IMAGE| insert direct link to
your image instead of "URLHERE"
=========================================
-->
<div class="card ml-lg-4 ml-sm-0 mt-4 mt-lg-0 mb-4 border-0" style="
background: #F5EBDD;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
border-radius: 1em; min-height: 524px; position: relative;">
<!-- OPTIONAL CHIBI -- fixed height -- delete whole <img> to remove!-->
<img class="hidden-sm-down" src="https://via.placeholder.com/200x260" style="max-height: 260px; position: absolute; bottom: -20px; right: 40px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- My credit -- DO NOT REMOVE! -->
<a class="hidden-sm-down" href="https://toyhou.se/ChiiAka"><i class="fal fa-code tooltipster" title="Code by ChiiAka" style="position: absolute; bottom:5px; right: 8px;"></i></a>
<a class="hidden-sm-up" href="https://toyhou.se/ChiiAka"><i class="fal fa-code tooltipster" title="Code by ChiiAka" style="position: absolute; bottom:-20px; right: 8px;"></i></a>
</div>
</div>