Profile
<!-- THIS CODE USES SITE THEME COLORS
8. || Tapestry || F2U
This code was inspired by SpiritX mockup and (probably?)
is suited for medieval/noble characters but you know that
its usage is up to you and you can adjust it to fit any
character of any theme or kind!
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container" style="max-width: 950px;">
<div class="row">
<!--
=================================
MAIN INFO CONTENT
=================================
-->
<div class="border-0 col-lg-8 col-sm-12 order-1 order-lg-0 mt-2 mt-lg-0">
<div class="card row mr-0 mr-lg-3 border-0" style="background: none;">
<div class="row no-gutters p-0">
<!--
=========================================
CHARACTER NAME
=========================================
-->
<div class="card-flex align-items-center justify-content-center col-12">
<div class="row no-gutters justify-content-center text-primary">
<!-- FA ICON -- You can change it by changing it's name (crown) -->
<i class="fat fa-crown fa-3x p-2 text-center"></i>
<p style="font-size: 40px; font-weight: 300;">
Character Name
</p>
</div>
</div>
<!--
=========================================
INTRODUCTION SECTION
=========================================
-->
<div class="col-12 mt-4 mt-lg-3 order-1 order-lg-0 bg-faded" style="min-height:250px;">
<div class="row no-gutters pl-3 pr-3">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">Introduction</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<div class="p-3 mb-3 text-justify">
<p>Write an untroduction. This box will grow with content. 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>
<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. </p>
</div>
<!-- FA ICON -- You can change it by changing it's name (treasure-chest) -->
<i class="fas fa-treasure-chest fa-3x text-secondary" style="position: absolute; bottom: -15px; right: 30px;"></i>
</div>
<!--
=========================================
BASICS SECTION
=========================================
-->
<div class="col-12 col-lg-7 mt-4 order-0 pb-3 pb-lg-0" style="min-height:365px;">
<div class="mr-0 mr-lg-4 h-100 bg-faded">
<div class="row no-gutters pl-3 pr-3">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">Basics</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<div class="col p-0" style="height: 365px; overflow: auto;">
<!-- GENDER INFO BLOCK -->
<div class="col pl-4">
<p style="font-size: 20px;">
Gender
</p>
<p class="pl-4 text-primary" style="font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- AGE INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Age
</p>
<p class="pl-4 text-primary" style="font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- DOB INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
DoB
</p>
<p class="pl-4 text-primary" style="font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- SIGN INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Sign
</p>
<p class="pl-4 text-primary" style="font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- ROLE INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Role
</p>
<p class="pl-4 text-primary" style="font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- ALIGNMENT INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Alignment
</p>
<p class="pl-4 text-primary" style="font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
</div>
</div>
<!-- FA ICON -- You can change it by changing it's name (fort) -->
<i class="fas fa-fort fa-3x text-secondary" style="position: absolute; bottom: -15px; left: 30px;"></i>
</div>
<!--
=========================================
TRIVIA + NOTES
=========================================
-->
<div class="col-12 col-lg-5 mt-4 order-1 bg-faded" style="min-height:360px;">
<div class="accordion text-justify" style="font-size: 16px; font-weight: 300;" id="expand">
<!-- ======= TRIVIA WHOLE BLOCK ======= -->
<div>
<!-- TRIVIA HEADER-->
<div class="row no-gutters pl-3 pr-3">
<a data-toggle="collapse" data-target="#trivia" class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;" aria-expandanded="true">
Trivia
</a>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<!-- TRIVIA CONTENT-->
<div class="collapse show" id="trivia" data-parent="#expand">
<div class="container p-0" style="height: 340px;">
<!-- TRIVIA LIST GROUP -->
<ul class="list-group pl-5 pt-3 pr-3" style="font-style: italic; height: 330px; overflow: auto;">
<li class="pb-2">Add some facts here.</li>
<li class="pb-2">Another fact.</li>
<li class="pb-2">You can add as many as you want, this box will scroll. </li>
<li class="pb-2">Content</li>
<li class="pb-2">Content</li>
</ul>
</div>
</div>
</div>
<!--================================== -->
<!-- ======= NOTES WHOLE BLOCK ======= -->
<div>
<!-- NOTES HEADER-->
<div class="row no-gutters pl-3 pr-3">
<a data-toggle="collapse" data-target="#notes" class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;" aria-expandanded="true">
Notes
</a>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<!-- NOTES CONTENT-->
<div class="collapse" id="notes" data-parent="#expand">
<div class="container p-0" style="height: 340px;">
<!-- NOTES LIST GROUP -->
<ul class="list-group pl-5 pt-3 pr-3" style="font-style: italic; height: 330px; overflow: auto;">
<li class="pb-2">Write your notes here.</li>
<li class="pb-2">Another note.</li>
<li class="pb-2">You can add as many notes as you want, this box will scroll.</li>
<li class="pb-2">Content</li>
<li class="pb-2">Content</li>
</ul>
</div>
</div>
</div>
<!--================================== -->
</div>
</div>
<!--
=========================================
STORY SECTION
=========================================
-->
<div class="col-12 mt-4 order-3 bg-faded" style="min-height:400px;">
<div class="row no-gutters pl-3 pr-3">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">History</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<div class="p-3 text-justify" style="height: 400px; overflow: auto;">
<p class="pl-3">Write your story here. This box will scroll. 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>
<!-- SUBHEADER OF ACT 1 -->
<div class="row no-gutters pl-2">
<p class="mr-2 text-secondary" style="font-size: 27px; font-weight: 300;">
Act I
</p>
<hr class="col mt-auto text-secondary" style="border-top:1px dashed; opacity: .5;">
</div>
<!-- PARAGRAPHS CONTENT-->
<div class="pl-3">
<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>
<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>
<!-- SUBHEADER OF ACT 2 -->
<div class="row no-gutters pl-2">
<p class="mr-2 text-secondary" style="font-size: 27px; font-weight: 300;">
Act II
</p>
<hr class="col mt-auto text-secondary" style="border-top:1px dashed; opacity: .5;">
</div>
<!-- PARAGRAPHS CONTENT-->
<div class="pl-3">
<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>
<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>
<!-- SUBHEADER OF ACT 3 -->
<div class="row no-gutters pl-2">
<p class="mr-2 text-secondary" style="font-size: 27px; font-weight: 300;">
Act III
</p>
<hr class="col mt-auto text-secondary" style="border-top:1px dashed; opacity: .5;">
</div>
<!-- PARAGRAPHS CONTENT-->
<div class="pl-3">
<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>
<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>
<!-- SPACE SAVER
This one saves space so your text won't be overlaped by the book icon. Better not remove this one and don't fill it either! -->
<p class="pb-4"></p>
</div>
<i class="fas fa-book-open-cover fa-3x text-secondary" style="position: absolute; bottom: -15px; right: 25px; transform: rotate(15deg);"></i>
</div>
<!--
=========================================
RELATIONS SECTION
=========================================
-->
<div class="col-12 mt-4 order-3 bg-faded pb-3">
<div class="row no-gutters pl-3 pr-3" style="position: absolute; right: 0px; left: 0px;">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">Relations</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<!-- RELATIONSHIP PAGES
You can remove some but DO NOT ADD MORE!
Five is maximum for PC and mobile. Six is kinda ok on PC but mobile version breaks!!!
-->
<div class="card-flex col-12 justify-content-end mt-5 mt-lg-0">
<!-- RELATIONS NAVIGATION BUTTONS-->
<ul class="nav row no-gutters col-lg-10 nav-tabs mt-2 pl-3 pl-lg-5 text-center" style="letter-spacing:1px;">
<li class="nav-item col"><a class="nav-link active" data-toggle="tab" href="#LINK1">
I.
</a></li>
<li class="nav-item col"><a class="nav-link" data-toggle="tab" href="#LINK2">
II.
</a></li>
<li class="nav-item col"><a class="nav-link" data-toggle="tab" href="#LINK3">
III.
</a></li>
<li class="nav-item col"><a class="nav-link" data-toggle="tab" href="#LINK4">
IV.
</a></li>
<li class="nav-item col"><a class="nav-link" data-toggle="tab" href="#LINK5">
V.
</a></li>
</ul>
</div>
<div class="card-flex col-12 justify-content-end">
<div class="card col-12 col-lg-10 pl-0 pl-lg-2 pr-0 pr-lg-3" style="border-top: none; border-radius: 0px;">
<div class="tab-content">
<!-- FIRST RELATIONSHIP TAB -->
<div class="tab-pane in active show" id="LINK1">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. 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>
<!-- SECOND RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK2">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
</div>
<!-- THIRD RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK3">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. 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. 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>
<!-- FOURTH RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK4">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. 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.</p>
</div>
</div>
</div>
</div>
</div>
<!-- FIFTH RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK5">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT -- DO NOT REMOVE -->
<div class="row no-gutters" style="position: absolute; bottom: -25px; left: 5px;">
<a href="https://toyhou.se/SpiritX" title="Layout mockup by SpiritX" class="tooltipster mr-1"><i class="fal fa-image"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster"><i class="fal fa-code"></i></a>
</div>
</div>
<!--
=================================
BANNER CONTENT
=================================
-->
<div class="flex-column border-0 col-lg-4 col-sm-12 p-0" style="background: none;">
<!-- BANNER BASE -->
<i class="fas fa-circle text-dark" style="position: absolute; top: 8px; left: -10px;"></i>
<i class="fas fa-circle text-dark" style="position: absolute; top: 8px; right: -10px;"></i>
<div class="bg-dark w-100" style="height: 10px; position: absolute; top: 10px;"></div>
<!--=============-->
<!-- BANNER GRAPHIC -- YOU CAN INSERT URL OF AN IMAGE TO CHANGE SOLID BG TO GRAPHIC -->
<div class="card-flex bg-primary flex-grow-1 ml-3 mr-3 justify-content-center" style="z-index: 2; min-height: 400px; clip-path: polygon(0 0, 100% 0, 100% 100%, 49% 95%, 0 100%);
background-image: url();
background-size: cover;
background-position: center;">
<!-- CHARACTER IMAGE -- INSERT YOU LINK INSTEAD OF "URLHERE" -->
<div class="card-flex flex-grow-1 text-white w-100 ml-1 mr-1 justify-content-center" style="z-index: 2; border: dashed; margin-top: -3px;">
<div class="flex-column w-100 pb-0 mb-0 pb-lg-5 mb-lg-5" style="position: relative;">
<div class="mt-5 ml-4 ml-lg-2 mr-4 mr-lg-2 mb-5 mb-lg-4 bg-white" style="height: 350px; position: sticky; top: 30px; border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- THIS CODE USES SITE THEME COLORS
8. || Tapestry || F2U
This code was inspired by SpiritX mockup and (probably?)
is suited for medieval/noble characters but you know that
its usage is up to you and you can adjust it to fit any
character of any theme or kind!
THIS VERSION USES CUSTOM ACCENT:
#E82D34
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container" style="max-width: 950px;">
<div class="row">
<!--
=================================
MAIN INFO CONTENT
=================================
-->
<div class="border-0 col-lg-8 col-sm-12 order-1 order-lg-0 mt-2 mt-lg-0">
<div class="card row mr-0 mr-lg-3 border-0" style="background: none;">
<div class="row no-gutters p-0">
<!--
=========================================
CHARACTER NAME
=========================================
-->
<div class="card-flex align-items-center justify-content-center col-12">
<div class="row no-gutters justify-content-center" style="color: #E82D34;">
<!-- FA ICON -- You can change it by changing it's name (crown) -->
<i class="fat fa-crown fa-3x p-2 text-center"></i>
<p style="font-size: 40px; font-weight: 300;">
Character Name
</p>
</div>
</div>
<!--
=========================================
INTRODUCTION SECTION
=========================================
-->
<div class="col-12 mt-4 mt-lg-3 order-1 order-lg-0 bg-faded" style="min-height:250px;">
<div class="row no-gutters pl-3 pr-3">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">Introduction</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<div class="p-3 mb-3 text-justify">
<p>Write an untroduction. This box will grow with content. 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>
<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. </p>
</div>
<!-- FA ICON -- You can change it by changing it's name (treasure-chest) -->
<i class="fas fa-treasure-chest fa-3x text-secondary" style="position: absolute; bottom: -15px; right: 30px;"></i>
</div>
<!--
=========================================
BASICS SECTION
=========================================
-->
<div class="col-12 col-lg-7 mt-4 order-0 pb-3 pb-lg-0" style="min-height:365px;">
<div class="mr-0 mr-lg-4 h-100 bg-faded">
<div class="row no-gutters pl-3 pr-3">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">Basics</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<div class="col p-0" style="height: 365px; overflow: auto;">
<!-- GENDER INFO BLOCK -->
<div class="col pl-4">
<p style="font-size: 20px;">
Gender
</p>
<p class="pl-4" style="color: #E82D34; font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- AGE INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Age
</p>
<p class="pl-4" style="color: #E82D34; font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- DOB INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
DoB
</p>
<p class="pl-4" style="color: #E82D34; font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- SIGN INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Sign
</p>
<p class="pl-4" style="color: #E82D34; font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- ROLE INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Role
</p>
<p class="pl-4" style="color: #E82D34; font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
<!-- ALIGNMENT INFO BLOCK -->
<div class="col pl-4 mt-n2">
<p style="font-size: 20px;">
Alignment
</p>
<p class="pl-4" style="color: #E82D34; font-size: 16px; font-style: italic; margin-top: -20px;">
Content
</p>
<hr class="col text-secondary w-75" style="border-top:1px dashed; margin-top: 0px;">
</div>
</div>
</div>
<!-- FA ICON -- You can change it by changing it's name (fort) -->
<i class="fas fa-fort fa-3x text-secondary" style="position: absolute; bottom: -15px; left: 30px;"></i>
</div>
<!--
=========================================
TRIVIA + NOTES
=========================================
-->
<div class="col-12 col-lg-5 mt-4 order-1 bg-faded" style="min-height:360px;">
<div class="accordion text-justify" style="font-size: 16px; font-weight: 300;" id="expand">
<!-- ======= TRIVIA WHOLE BLOCK ======= -->
<div>
<!-- TRIVIA HEADER-->
<div class="row no-gutters pl-3 pr-3">
<a data-toggle="collapse" data-target="#trivia" class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;" aria-expandanded="true">
Trivia
</a>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<!-- TRIVIA CONTENT-->
<div class="collapse show" id="trivia" data-parent="#expand">
<div class="container p-0" style="height: 340px;">
<!-- TRIVIA LIST GROUP -->
<ul class="list-group pl-5 pt-3 pr-3" style="font-style: italic; height: 330px; overflow: auto;">
<li class="pb-2">Add some facts here.</li>
<li class="pb-2">Another fact.</li>
<li class="pb-2">You can add as many as you want, this box will scroll. </li>
<li class="pb-2">Content</li>
<li class="pb-2">Content</li>
</ul>
</div>
</div>
</div>
<!--================================== -->
<!-- ======= NOTES WHOLE BLOCK ======= -->
<div>
<!-- NOTES HEADER-->
<div class="row no-gutters pl-3 pr-3">
<a data-toggle="collapse" data-target="#notes" class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;" aria-expandanded="true">
Notes
</a>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<!-- NOTES CONTENT-->
<div class="collapse" id="notes" data-parent="#expand">
<div class="container p-0" style="height: 340px;">
<!-- NOTES LIST GROUP -->
<ul class="list-group pl-5 pt-3 pr-3" style="font-style: italic; height: 330px; overflow: auto;">
<li class="pb-2">Write your notes here.</li>
<li class="pb-2">Another note.</li>
<li class="pb-2">You can add as many notes as you want, this box will scroll.</li>
<li class="pb-2">Content</li>
<li class="pb-2">Content</li>
</ul>
</div>
</div>
</div>
<!--================================== -->
</div>
</div>
<!--
=========================================
STORY SECTION
=========================================
-->
<div class="col-12 mt-4 order-3 bg-faded" style="min-height:400px;">
<div class="row no-gutters pl-3 pr-3">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">History</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<div class="p-3 text-justify" style="height: 400px; overflow: auto;">
<p class="pl-3">Write your story here. This box will scroll. 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>
<!-- SUBHEADER OF ACT 1 -->
<div class="row no-gutters pl-2">
<p class="mr-2 text-secondary" style="font-size: 27px; font-weight: 300;">
Act I
</p>
<hr class="col mt-auto text-secondary" style="border-top:1px dashed; opacity: .5;">
</div>
<!-- PARAGRAPHS CONTENT-->
<div class="pl-3">
<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>
<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>
<!-- SUBHEADER OF ACT 2 -->
<div class="row no-gutters pl-2">
<p class="mr-2 text-secondary" style="font-size: 27px; font-weight: 300;">
Act II
</p>
<hr class="col mt-auto text-secondary" style="border-top:1px dashed; opacity: .5;">
</div>
<!-- PARAGRAPHS CONTENT-->
<div class="pl-3">
<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>
<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>
<!-- SUBHEADER OF ACT 3 -->
<div class="row no-gutters pl-2">
<p class="mr-2 text-secondary" style="font-size: 27px; font-weight: 300;">
Act III
</p>
<hr class="col mt-auto text-secondary" style="border-top:1px dashed; opacity: .5;">
</div>
<!-- PARAGRAPHS CONTENT-->
<div class="pl-3">
<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>
<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>
<!-- SPACE SAVER
This one saves space so your text won't be overlaped by the book icon. Better not remove this one and don't fill it either! -->
<p class="pb-4"></p>
</div>
<i class="fas fa-book-open-cover fa-3x text-secondary" style="position: absolute; bottom: -15px; right: 25px; transform: rotate(15deg);"></i>
</div>
<!--
=========================================
RELATIONS SECTION
=========================================
-->
<div class="col-12 mt-4 order-3 bg-faded pb-3">
<div class="row no-gutters pl-3 pr-3" style="position: absolute; right: 0px; left: 0px;">
<p class="mr-2 text-secondary" style="font-size: 30px; font-weight: 300;">Relations</p>
<hr class="col text-secondary" style="border-top:1px solid; opacity: .3; margin-top: 25px;">
</div>
<!-- RELATIONSHIP PAGES
You can remove some but DO NOT ADD MORE!
Five is maximum for PC and mobile. Six is kinda ok on PC but mobile version breaks!!!
-->
<div class="card-flex col-12 justify-content-end mt-5 mt-lg-0">
<!-- RELATIONS NAVIGATION BUTTONS-->
<ul class="nav row no-gutters col-lg-10 nav-tabs mt-2 pl-3 pl-lg-5 text-center" style="letter-spacing:1px;">
<li class="nav-item col"><a class="nav-link active" style="color: #E82D34;" data-toggle="tab" href="#LINK1">
I.
</a></li>
<li class="nav-item col"><a class="nav-link" style="color: #E82D34;" data-toggle="tab" href="#LINK2">
II.
</a></li>
<li class="nav-item col"><a class="nav-link" style="color: #E82D34;" data-toggle="tab" href="#LINK3">
III.
</a></li>
<li class="nav-item col"><a class="nav-link" style="color: #E82D34;" data-toggle="tab" href="#LINK4">
IV.
</a></li>
<li class="nav-item col"><a class="nav-link" style="color: #E82D34;" data-toggle="tab" href="#LINK5">
V.
</a></li>
</ul>
</div>
<div class="card-flex col-12 justify-content-end">
<div class="card col-12 col-lg-10 pl-0 pl-lg-2 pr-0 pr-lg-3" style="border-top: none; border-radius: 0px;">
<div class="tab-content">
<!-- FIRST RELATIONSHIP TAB -->
<div class="tab-pane in active show" id="LINK1">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK" style="color: #E82D34;">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. 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>
<!-- SECOND RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK2">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK" style="color: #E82D34;">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
</div>
<!-- THIRD RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK3">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK" style="color: #E82D34;">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. 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. 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>
<!-- FOURTH RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK4">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK" style="color: #E82D34;">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. 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.</p>
</div>
</div>
</div>
</div>
</div>
<!-- FIFTH RELATIONSHIP TAB -->
<div class="tab-pane" id="LINK5">
<div class="row no-gutters">
<div class="text-secondary col-12 col-lg-5 m-3 ml-0 ml-lg-n5" style="min-height: 300px;">
<!-- RELATIONSHIP IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "URLHERE" -->
<div class="h-100 ml-n1 ml-lg-n5 mr-4 bg-secondary" style=" border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<!-- FA ICON (PC VER) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-down" style="position: absolute; left: -55px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
<!-- FA ICON (MOBILE) -- You can change it by changing it's name (feather-alt) -->
<i class="fas fa-feather-alt
text-white fa-flip-horizontal fa-3x hidden-sm-up" style="position: absolute; left: -5px; bottom: -4px; text-shadow: 0px 0px 10px #704347;"></i>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="mr-0 mr-lg-n5 pl-2 pl-lg-0 pt-2 pb-2 pr-2" style="height: 342px; overflow: auto;">
<!-- ROLE INFO BLOCK -->
<div class="col p-0 pr-2 text-justify">
<p class="pl-2" style="font-size: 24px; font-weight: 300;"><a
href="LINK_HERE" target="_BLANK" style="color: #E82D34;">
Character name
</a></p>
<p class="pl-4 text-muted" style="font-size: 16px; font-style: italic; font-weight: 200; margin-top: -20px;">
Relationship with character
</p>
<hr class="text-secondary" style="border-top:1px dashed; margin-top: -16px;">
<p>Write about the relationship. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT -- DO NOT REMOVE -->
<div class="row no-gutters" style="position: absolute; bottom: -25px; left: 5px;">
<a href="https://toyhou.se/SpiritX" title="Layout mockup by SpiritX" class="tooltipster mr-1"><i class="fal fa-image"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster"><i class="fal fa-code"></i></a>
</div>
</div>
<!--
=================================
BANNER CONTENT
=================================
-->
<div class="flex-column border-0 col-lg-4 col-sm-12 p-0" style="background: none;">
<!-- BANNER BASE -->
<i class="fas fa-circle text-dark" style="position: absolute; top: 8px; left: -10px;"></i>
<i class="fas fa-circle text-dark" style="position: absolute; top: 8px; right: -10px;"></i>
<div class="bg-dark w-100" style="height: 10px; position: absolute; top: 10px;"></div>
<!--=============-->
<!-- BANNER GRAPHIC -- YOU CAN INSERT URL OF AN IMAGE TO CHANGE SOLID BG TO GRAPHIC -->
<div class="card-flex flex-grow-1 ml-3 mr-3 justify-content-center" style="background: #E82D34; z-index: 2; min-height: 400px; clip-path: polygon(0 0, 100% 0, 100% 100%, 49% 95%, 0 100%);
background-image: url();
background-size: cover;
background-position: center;">
<!-- CHARACTER IMAGE -- INSERT YOU LINK INSTEAD OF "URLHERE" -->
<div class="card-flex flex-grow-1 text-white w-100 ml-1 mr-1 justify-content-center" style="z-index: 2; border: dashed; margin-top: -3px;">
<div class="flex-column w-100 pb-0 mb-0 pb-lg-5 mb-lg-5" style="position: relative;">
<div class="mt-5 ml-4 ml-lg-2 mr-4 mr-lg-2 mb-5 mb-lg-4 bg-white" style="height: 350px; position: sticky; top: 30px; border-top: solid 10px; border-bottom: solid 10px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>