<!-- ------------------------------
TACIT - STACKED VER.
(code by jiko, layout by straypunk)
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE or in quotation marks!!
→ visit [ fontawesome.com ] for more icons!
ACCENT COLOUR: #777777
→ use control + f in the code editor to change the colours all at once!
------------------------------- -->
<div class="mx-auto mt-4" style="font-size:85%; line-height:16px; letter-spacing:0.3px; max-width:900px;">
<div class="row no-gutters">
<!-- ------------------------------
TABS
→ if your character doesn't NEED a section, you can delete the <li></li> below.
no need to delete the actual section down there unless it helps to keep it tidy! just be careful!
------------------------------- -->
<div class="col-lg-1 order-1 order-lg-0 p-1">
<div class="h-100">
<ul class="nav row no-gutters h-100">
<!-- ------ FRONT PAGE ------------------------------ -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default rounded-0 active d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
data-toggle="tab" href="#tacitone">
<i class="fas fa-ankh fa-sm fa-fw m-auto"></i></span>
</a>
</li>
<!-- ------ PERSONALITY ------------------------------ -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
data-toggle="tab" href="#tacittwo">
<i class="fas fa-chart-bar fa-sm fa-fw m-auto"></i></span>
</a>
</li>
<!-- ------ BACKGROUND ------------------------------ -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
data-toggle="tab" href="#tacitfive">
<i class="fas fa-books fa-sm fa-fw m-auto"></i></span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-1 order-4 order-lg-6 p-1">
<div class="h-100">
<ul class="nav row no-gutters h-100">
<!-- ------ INVENTORY ------------------------------ -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default rounded-0 active d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
data-toggle="tab" href="#tacitthree">
<i class="fas fa-treasure-chest fa-sm fa-fw m-auto"></i></span>
</a>
</li>
<!-- ------ SPELLBOOKS ------------------------------ -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
data-toggle="tab" href="#tacitfour">
<i class="fas fa-book-spells fa-sm fa-fw m-auto"></i></span>
</a>
</li>
<!-- ------ RELATIONSHIPS ------------------------------ -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
data-toggle="tab" href="#tacitsix">
<i class="fas fa-heart fa-sm fa-fw m-auto"></i></span>
</a>
</li>
</ul>
</div>
</div>
<!-- ------------------------------
CHARACTER IMAGE
→ if the image IS a pagedoll,
feel free to change [cover] to [contain] or [#px]!
→ # being a number between 100px ~ 900px
→ minimum image height is recommanded to be 480px (and above)
------------------------------- -->
<!-- ------ TOP IMAGE ------------------------------ -->
<div class="col-lg-4 order-0 order-lg-2 p-2">
<div class="card-transparent border-0 h-100">
<div class="w-100 h-100" style="min-height:400px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;"></div>
</div>
</div>
<!-- ------ BOTTOM IMAGE ------------------------------ -->
<div class="col-lg-4 p-1 order-3 order-lg-4 p-2">
<div class="card-transparent border-0 h-100">
<div class="w-100 h-100" style="min-height:400px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;"></div>
</div>
</div>
<!-- ------------------------------
TAB CONTENT
------------------------------- -->
<div class="col-lg-7 order-2 order-lg-1 p-2">
<div class="tab-content table-responsive card rounded-0 bg-faded h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------------------------------
MAIN PROFILE
------------------------------- -->
<div class="tab-pane active show" id="tacitone">
<div class="pt-4 px-4" style="height:380px; overflow:auto;">
<!-- ------ HEADER ------------------------------ -->
<div class="header">
<!-- ICON -->
<i class="fal fa-ankh fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
<!-- TITLE -->
<div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
<div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
<span style="color:#777777">N</span>ame
<span style="color:#777777">S</span>urname
</div>
<!-- SUBTITLE (DELETABLE)-->
<div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
Short subtitle.
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ BASIC INFO ------------------------------ -->
<div class="basic row no-gutters">
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Alias</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span><br>
<span>content (prn/prn)</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Age</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Alignment</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Occupation</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Class</span><br>
<span>content</span>
</div>
<!-- add more/delete above THIS line! -->
<!-- for a nicer look, make sure it's even amounts of info! -->
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ SUMMARY ------------------------------ -->
<div class="text-muted">
<p>A brief summary of your character! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Rutrum tellus pellentesque eu tincidunt tortor aliquam. consequat semper viverra nam libero justo laoreet.</p>
</div>
</div></div>
<!-- ------------------------------
PERSONALITY
------------------------------- -->
<div class="tab-pane" id="tacittwo">
<div class="pt-4 px-4" style="height:380px; overflow:auto;">
<!-- ------ HEADER ------------------------------ -->
<div class="header">
<!-- ICON -->
<i class="fal fa-chart-bar fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
<!-- TITLE -->
<div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
<div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
<span style="color:#777777">P</span>ersonality
</div>
<!-- SUBTITLE (DELETABLE)-->
<div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
Short subtitle.
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ PERSONALITY ------------------------------ -->
<div class="personality">
<div class="text-muted">
<p>Sed vehicdiva id risus at accumsan. Vivamus hendrerit lorem sollicitudin nunc vestibdivum, et dignissim neque malesuada. Phasellus at lacinia purus, quis molestie ante. Vestibdivum in ex vitae ndivla interdum dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi ante, condimentum facilisis tristique eget, bibendum quis sapien. Maecenas et est blandit, finibus eros non, molestie mi. Quisque ac risus id velit pdivvinar pellentesque sed non turpis.</p>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ STATS ------------------------------ -->
<!--
could be repurposed for battle stats instead!
change the [50%] to any number between 0% ~ 100%
-->
<div class="stats">
<div class="row no-gutters">
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Intelligence</span>
<div class="progress mt-1">
<div class="progress-bar" style="background:#777777; width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Charisma</span>
<div class="progress mt-1">
<div class="progress-bar" style="background:#777777; width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Confidence</span>
<div class="progress mt-1">
<div class="progress-bar" style="background:#777777; width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Humour</span>
<div class="progress mt-1">
<div class="progress-bar" style="background:#777777; width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Empathy</span>
<div class="progress mt-1">
<div class="progress-bar" style="background:#777777; width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Patience</span>
<div class="progress mt-1">
<div class="progress-bar" style="background:#777777; width:50%; height:5px;"></div>
</div>
</div>
<!-- add more/delete above THIS line! -->
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ TRIVIA ------------------------------ -->
<div class="trivia">
<ul class="text-muted">
<li class="p-1">Lorem ipsum dolor sit amet.</li>
<li class="p-1">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li class="p-1">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li class="p-1">Donec laoreet at elit nec hendrerit</li>
<!-- add more/delete above THIS line! -->
</ul>
</div>
</div>
</div>
<!-- ------------------------------
BACKGROUND
------------------------------- -->
<div class="tab-pane" id="tacitfive">
<div class="pt-4 px-4" style="height:380px; overflow:auto;">
<!-- ------ HEADER ------------------------------ -->
<div class="header">
<!-- ICON -->
<i class="fal fa-books fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
<!-- TITLE -->
<div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
<div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
<span style="color:#777777">B</span>ackground
</div>
<!-- SUBTITLE (DELETABLE)-->
<div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
Short subtitle.
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ BACKGROUND ------------------------------ -->
<div class="background">
<div class="text-uppercase py-1" style="font-size:110%; letter-spacing:1px">
<i class="fas fa-bookmark fa-sm"></i> Header</div>
<div class="text-muted pb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem erat, iaculis vel velit at, mattis euismod lacus. Morbi suscipit ipsum accumsan leo dapibus, eu mattis neque facilisis. Etiam consequat eget eros a mollis. Donec bibendum nibh id augue pharetra consequat. Donec lobortis risus nunc.</p>
</div>
<div class="text-uppercase py-1" style="font-size:110%; letter-spacing:1px">
<i class="fas fa-bookmark fa-sm"></i> Header</div>
<div class="text-muted pb-3">
<p>Donec porttitor, nulla eget gravida consequat, ligula tellus condimentum augue, eu auctor odio lorem eu risus. Morbi eu turpis ac orci commodo cursus cursus sit amet velit. Aenean in nunc at nunc malesuada laoreet. Aliquam mattis ornare felis, a mollis neque gravida eget. Maecenas sagittis non ante ut placerat.</p>
<p>Aenean eget nisi finibus sapien iaculis maximus. Curabitur sit amet porta quam. Integer orci nibh, eleifend et tellus ullamcorper, consectetur tempus ex. Vestibulum porttitor, ex in semper condimentum, neque lectus accumsan velit, sed feugiat eros enim eu leo. Duis finibus pellentesque orci, vitae vehicula lacus aliquet in.</p>
</div>
<div class="text-uppercase py-1" style="font-size:110%; letter-spacing:1px">
<i class="fas fa-bookmark fa-sm"></i> Header</div>
<div class="text-muted pb-3">
<p>Vulputate elit sit amet dui bibendum scelerisque. Mauris lacinia erat imperdiet eros gravida varius. Curabitur efficitur dignissim eros id ullamcorper. Curabitur placerat maximus dui vitae cursus. Pellentesque molestie leo sit amet risus luctus, vel sagittis arcu tincidunt. Cras aliquet condimentum elit in iaculis. Phasellus et felis sit amet eros luctus euismod eu non lacus.</p>
</div>
<!-- add more/delete above THIS line! -->
</div>
</div>
</div>
<!-- TOP SET DONE -->
<!-- KEEP THE BELOW -->
</div></div>
<!-- ------------------------------
TAB CONTENT
------------------------------- -->
<div class="col-lg-7 order-5 order-lg-5 p-2">
<div class="tab-content table-responsive card rounded-0 bg-faded h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------------------------------
INVENTORY + BACKPACK
------------------------------- -->
<div class="tab-pane active show" id="tacitthree">
<div class="pt-4 px-4" style="height:380px; overflow:auto;">
<!-- ------ HEADER ------------------------------ -->
<div class="header">
<!-- ICON -->
<div class="text-right">
<i class="fal fa-treasure-chest fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(10deg); margin-top:-10px"></i>
</div>
<!-- TITLE -->
<div class="text-md-left text-center" style="z-index:1; margin-top:-70px">
<div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
<span style="color:#777777">I</span>nventory
</div>
<!-- SUBTITLE (DELETABLE)-->
<div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
Short subtitle.
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ WEAPONRY ------------------------------ -->
<!--
visit [ fontawesome.com ] for more icons of weapons!
-->
<div class="weapons">
<!-- ITEM ONE -->
<div class="py-3">
<div class="text-uppercase justify-content-between" style="font-size:110%; letter-spacing:1px">
<span>Weapon</span>
<span><i class="fas fa-sword fa-fw"></i></span>
</div><hr class="my-2">
<div class="card text-muted p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- ITEM TWO -->
<div class="py-3">
<div class="text-uppercase justify-content-between" style="font-size:110%; letter-spacing:1px">
<span>Weapon</span>
<span><i class="fas fa-sword fa-fw"></i></span>
</div><hr class="my-2">
<div class="card text-muted p-3">
<p>Donec massa sapien faucibus et molestie ac feugiat sed.</p>
</div>
</div>
<!-- add more/delete above THIS line! -->
</div>
<!-- ------ BACKPACK ------------------------------ -->
<div class="backpack pt-3">
<div class="header">
<!-- ICON -->
<div class="text-left">
<i class="fal fa-backpack fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
</div>
<!-- TITLE -->
<div class="text-md-right text-center" style="z-index:1; margin-top:-60px">
<div class="lead display-4 text-uppercase"style="letter-spacing:6px">
<span style="color:#777777">B</span>ackpack
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<ul class="row no-gutters text-muted">
<li class="col-md-4 col-6 p-1">content</li>
<li class="col-md-4 col-6 p-1">content</li>
<li class="col-md-4 col-6 p-1">content</li>
<li class="col-md-4 col-6 p-1">content</li>
<li class="col-md-4 col-6 p-1">content</li>
<li class="col-md-4 col-6 p-1">content</li>
<!-- add more/delete above THIS line! -->
<!-- for a nicer look, make sure it's even amounts of info! -->
</ul>
</div>
</div>
</div>
<!-- ------------------------------
SPELLS
------------------------------- -->
<div class="tab-pane" id="tacitfour">
<div class="pt-4 px-4" style="height:380px; overflow:auto;">
<!-- ------ HEADER ------------------------------ -->
<div class="header">
<!-- ICON -->
<div class="text-right">
<i class="fal fa-book-spells fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(10deg); margin-top:-10px"></i>
</div>
<!-- TITLE -->
<div class="text-md-left text-center" style="z-index:1; margin-top:-70px">
<div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
<span style="color:#777777">S</span>pells
</div>
<!-- SUBTITLE (DELETABLE)-->
<div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
Short subtitle.
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ SPELLS ------------------------------ -->
<div class="spells">
<!-- SPELL ONE -->
<div class="my-3 mb-5">
<!-- SPELL NAME -->
<div class="justify-content-between" style="font-size:110%; letter-spacing:1px">
<span class="text-uppercase">Spell Name</span>
<span class="font-italic">nth Level (Spell Tag • Component(s))</span>
</div><hr class="my-2">
<!-- INFO -->
<div class="row no-gutters pb-3">
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Casting Time</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Range</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Duration</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Damage/Effect</span><br>
<span>content</span>
</div>
</div>
<!-- SPELL SUMMARY -->
<div class="card p-3 text-muted">
<p>Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Nunc sed id semper risus in hendrerit.</p>
</div>
</div>
<!-- SPELL TWO -->
<div class="my-3 mb-5">
<!-- SPELL NAME -->
<div class="justify-content-between" style="font-size:110%; letter-spacing:1px">
<span class="text-uppercase">Spell Name</span>
<span class="font-italic">nth Level (Spell Tag • Component(s))</span>
</div><hr class="my-2">
<!-- INFO -->
<div class="row no-gutters pb-3">
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Casting Time</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Range</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Duration</span><br>
<span>content</span>
</div>
<div class="col-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Damage/Effect</span><br>
<span>content</span>
</div>
</div>
<!-- SPELL SUMMARY -->
<div class="card p-3 text-muted">
<p>Maecenas pharetra convallis posuere morbi leo urna molestie at elementum. Porttitor rhoncus dolor purus non. In vitae turpis massa sed. Faucibus a pellentesque sit amet porttitor.</p>
</div>
</div>
<!-- add more/delete above THIS line! -->
</div>
</div>
</div>
<!-- ------------------------------
RELATIONSHIPS
------------------------------- -->
<div class="tab-pane" id="tacitsix">
<div class="pt-4 px-4" style="height:380px; overflow:auto;">
<!-- ------ HEADER ------------------------------ -->
<div class="header">
<!-- ICON -->
<div class="text-right">
<i class="fal fa-heart fa-6x mb-2" style="z-index:0;
color:#777777; opacity:0.2; transform:rotate(10deg); margin-top:-10px"></i>
</div>
<!-- TITLE -->
<div class="text-md-left text-center" style="z-index:1; margin-top:-70px">
<div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
<span style="color:#777777">R</span>elationships
</div>
<!-- SUBTITLE (DELETABLE)-->
<div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
Short subtitle.
</div>
</div>
</div>
<hr class="w-100 my-1 mt-3">
<hr class="w-100 my-1 mb-3">
<!-- ------ RELATIONSHIPS ------------------------------ -->
<!-- ---
when adding more, be aware of the [order-#] for the IMAGE and INFO!
it's the reason why CHARACTER TWO's image is to the right!
--- -->
<div class="relationships">
<!-- CHARCTER ONE -->
<div class="row no-gutters my-3">
<!-- IMAGE -->
<div class="col-lg-4 p-1 order-1 text-center my-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="p-2 fr-rounded img-thumbnail bg-faded" style="border-color:#777777; max-width:120px">
</div>
<!-- INFO -->
<div class="col-lg-8 p-1 order-2">
<div class="row no-gutters">
<div class="col-auto my-auto">
<a href="CHARACTER LINK" class="text-uppercase" style="color:#777777; letter-spacing:1px">Name</a>
</div>
<div class="col px-3"><hr></div>
<div class="col-auto my-auto">relationship</div>
</div>
<div class="p-3 card text-muted" style="height:150px; overflow:auto">
<p>Your character's thoughts here!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium tempor lectus, sed vestibulum felis finibus non. Quisque maximus tristique lectus nec venenatis</p>
<p>Duis sollicitudin vestibulum risus. Nunc semper purus orci, id facilisis libero semper et. Nunc commodo risus odio, ac porta ante tincidunt at. Morbi volutpat id metus a consectetur.</p>
</div>
</div>
</div>
<!-- CHARCTER TWO -->
<div class="row no-gutters my-3">
<!-- IMAGE -->
<div class="col-lg-4 order-lg-2 order-1 p-1 text-center my-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="p-2 fr-rounded img-thumbnail bg-faded" style="border-color:#777777; max-width:120px">
</div>
<!-- INFO -->
<div class="col-lg-8 p-1 order-1">
<div class="row no-gutters">
<div class="col-auto my-auto">
<a href="CHARACTER LINK" class="text-uppercase" style="color:#777777; letter-spacing:1px">Name</a>
</div>
<div class="col px-3"><hr></div>
<div class="col-auto my-auto">relationship</div>
</div>
<div class="p-3 card text-muted" style="height:150px; overflow:auto">
<p>There's automated height so it can be as short as you want!</p>
<p>Since the boxes are small though, I recommanded abount three paragraphs max? For easy reading!</p>
</div>
</div>
</div>
<!-- CHARCTER THREE -->
<div class="row no-gutters my-3">
<!-- IMAGE -->
<div class="col-lg-4 order-1 p-1 text-center my-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="p-2 fr-rounded img-thumbnail bg-faded" style="border-color:#777777; max-width:120px">
</div>
<!-- INFO -->
<div class="col-lg-8 p1 order-2">
<div class="row no-gutters">
<div class="col-auto my-auto">
<a href="CHARACTER LINK" class="text-uppercase" style="color:#777777; letter-spacing:1px">Name</a>
</div>
<div class="col px-3"><hr></div>
<div class="col-auto my-auto">relationship</div>
</div>
<div class="p-3 card text-muted" style="height:150px; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium tempor lectus, sed vestibulum felis finibus non.</p>
<p>Duis sollicitudin vestibulum risus. Nunc semper purus orci, id facilisis libero semper et.</p>
</div>
</div>
</div>
<!-- add more/delete above THIS line! -->
</div>
</div>
</div>
<!-- TABS END -->
<!-- KEEP THE BELOW -->
</div>
</div>
</div>
<!-- ------------------------------
CREDITS
→ please keep credits on the profile
if you decide to move it!
------------------------------- -->
<div class="small col-lg-12">
<div class="text-right" style="letter-spacing:0.3em;">
<a href="https://toyhou.se/10141309.-f2u-tacit" class="text-muted tooltipster"
title="code by jiko" style="text-decoration: none">
<i class="far fa-code"></i>
</a> .
<a href="LINK TO ARTIST" class="text-muted tooltipster"
title="focal image by ARTIST" style="text-decoration: none;">
<i class="far fa-image"></i>
</a> .
<a href="https://toyhou.se/straypunk" class="text-muted tooltipster"
title="layout by straypunk" style="text-decoration: none;">
<i class="far fa-lightbulb"></i>
</a>
</div>
</div>
</div>
