Simple Storybook
created by:dragon-heist
BootstrapHTMLCharacter
Copy
<div class="col-12 m-0 p-0 d-flex flex-wrap justify-content-center">
<!-- NAVIGATION -->
<div class="col-xl-2 p-0 pr-xl-3 mb-3 mb-xl-0 d-none d-md-block">
<div class="sticky-top">
<div class="card bg-faded p-2">
<div class="card p-3">
<h4 class="display-5" style="letter-spacing:1px; font-weight:600; font-variant:small-caps;">Navigation</h4>
<a href="#basics" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Basics</a>
<a href="#traits" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Notable Traits</a>
<a href="#abilities" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Abilities</a>
<a href="#skills" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Skills</a>
<a href="#relations" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Relations</a>
<a href="#personality" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Personality</a>
<a href="#likes" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Likes & Dislikes</a>
<a href="#bio" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Biography</a>
<a href="#trivia" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Trivia</a>
</div>
</div>
<a href="#top" class="btn btn-primary align-items-center justify-content-center mt-2 font-weight-bold d-xl-block d-none" style="letter-spacing:0.5px;">
<i class="fa-solid fa-up fa-lg mr-2"></i> Back to Top
</a>
</div>
</div>
<div class="card bg-faded col-xl-10 p-4" id="basics">
<!-- CREDIT -->
<a href="https://toyhou.se/dragon-heist" data-toggle="tooltip" title="code by dragon-heist" data-placement="left" class="fa-solid fa-code" style="text-decoration:none; position:absolute; bottom:8px; right:8px;"></a>
<div class="d-flex flex-wrap">
<!-- NAME/TITLE -->
<div class="col-12 p-2">
<div class="card p-3 text-center">
<h1 class="display-4" style="letter-spacing:3px; font-weight:500; font-variant:small-caps;">Character Name</h1>
</div>
</div>
<!-- IMAGE -->
<div class="col-xl-6 p-2" style="min-height:480px;">
<div class="card p-3 h-100">
<div class="h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/87801097_XGN6VN07a7VAN2D.png'); background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
</div>
</div>
<!-- BASICS -->
<div class="col-xl-6 p-2" id="occupation">
<div class="card p-3">
<div class="d-flex flex-wrap">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-signature fa-lg text-secondary mr-1"></i> Full Name
</div>
<div class="col-6 px-1 text-right">
Character Name
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-venus-mars fa-lg text-secondary mr-1"></i> Gender
</div>
<div class="col-6 px-1 text-right">
Gender
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-comment fa-lg text-secondary mr-1"></i> Pronouns
</div>
<div class="col-6 px-1 text-right">
prn/prn
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-calendar-days fa-lg text-secondary mr-1"></i> Age
</div>
<div class="col-6 px-1 text-right">
Age
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-microphone fa-lg text-secondary mr-1"></i> Voice Claim
</div>
<div class="col-6 px-1 text-right">
Voice Claim
</div>
<div class="col-12 mt-4 mb-2 justify-content-center">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qBo8WyHHogM" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="card mt-3 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Occupation</h1>
<i class="fa-duotone fa-suitcase fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
<!-- TRAITS -->
<div class="col-xl-4 p-2 d-flex" id="traits">
<div class="card w-100 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Notable Traits</h1>
<i class="fa-duotone fa-list fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
<!-- ABILITIES -->
<div class="col-md-6 col-xl-4 p-2 d-flex" id="abilities">
<div class="card w-100 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Abilities</h1>
<i class="fa-duotone fa-explosion fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
<!-- SKILLS -->
<div class="col-md-6 col-xl-4 p-2 d-flex" id="skills">
<div class="card w-100 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Skills</h1>
<i class="fa-duotone fa-stars fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
<!-- RELATIONSHIPS -->
<div class="col-12 d-flex flex-wrap p-2 mt-3" id="relations">
<div class="col-lg-6 col-xl-3 px-3 mb-5 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/87801424_3h8.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2>Character</h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">Relation</div>
<div class="my-2 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a egestas nisl.</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 px-3 mb-5 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/87801491_Rgx.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2>Character</h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">Relation</div>
<div class="my-2 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a egestas nisl.</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 px-3 mb-4 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/87801505_qW1.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2>Character</h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">Relation</div>
<div class="my-2 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a egestas nisl.</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 px-3 mb-4 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/87801534_fis.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2>Character</h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">Relation</div>
<div class="my-2 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a egestas nisl.</div>
</div>
</div>
</div>
<div class="row col-12 m-0 p-0 justify-content-center">
<!-- LIKES -->
<div class="col-md-6 col-xl-2 order-xl-0 order-1 m-0 p-2 d-flex" id="likes">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Likes</h1>
<i class="fa-duotone fa-heart-pulse text-success fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
<!-- PERSONALTIY -->
<div class="col-xl-8 order-xl-1 order-0 m-0 p-2 d-flex" id="personality">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Personality</h1>
<i class="fa-solid fa-comment fa-xl"></i>
</div>
<div style="text-indent:30px;">
<p class="my-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a egestas nisl. Ut ut lacus ac leo pulvinar suscipit eget vitae mi. Cras ipsum nisi, luctus eu mattis quis, volutpat at est. Fusce interdum ac nulla vel aliquet. In vitae vehicula massa, nec blandit arcu. Duis imperdiet mollis diam id efficitur. Donec fermentum turpis id ipsum lacinia, eu laoreet mi vulputate. </p>
<p class="my-2">Ut interdum, sem sit amet placerat gravida, justo nunc mattis orci, vel auctor ex dolor id dui. Aliquam volutpat iaculis tortor nec posuere. Curabitur eget lorem suscipit, mollis est eu, gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sed dui sed urna pulvinar blandit eget eget lorem. Fusce dignissim malesuada ligula, a aliquet mauris. Phasellus in varius mi. Curabitur consectetur fringilla enim ac viverra. Integer sit amet iaculis lorem, nec placerat eros.</p>
</div>
</div>
</div>
<!-- DISLIKES -->
<div class="col-md-6 col-xl-2 order-2 m-0 p-2 d-flex" id="dislikes">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Dislikes</h1>
<i class="fa-duotone fa-heart-broken text-danger fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
</div>
<!-- BIOGRAPHY -->
<div class="col-12 m-0 p-2 d-flex" id="bio">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Biography</h1>
<i class="fa-duotone fa-books fa-xl"></i>
</div>
<div style="text-indent:30px;">
<p class="my-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a egestas nisl. Ut ut lacus ac leo pulvinar suscipit eget vitae mi. Cras ipsum nisi, luctus eu mattis quis, volutpat at est. Fusce interdum ac nulla vel aliquet. In vitae vehicula massa, nec blandit arcu. Duis imperdiet mollis diam id efficitur. Donec fermentum turpis id ipsum lacinia, eu laoreet mi vulputate. Ut interdum, sem sit amet placerat gravida, justo nunc mattis orci, vel auctor ex dolor id dui. Aliquam volutpat iaculis tortor nec posuere. Curabitur eget lorem suscipit, mollis est eu, gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sed dui sed urna pulvinar blandit eget eget lorem. Fusce dignissim malesuada ligula, a aliquet mauris. Phasellus in varius mi. Curabitur consectetur fringilla enim ac viverra. Integer sit amet iaculis lorem, nec placerat eros.</p>
<p class="my-2">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris rutrum sed eros lacinia gravida. Integer ac ipsum venenatis, dapibus dui eu, vehicula velit. Etiam ultrices, lacus ac imperdiet egestas, justo elit sagittis nulla, in finibus risus urna sed leo. Duis vel tortor eleifend, congue felis ac, consequat neque. Nullam laoreet eleifend elementum. Curabitur auctor vitae arcu et auctor.</p>
<p class="my-2">Mauris elementum massa ex, non scelerisque diam iaculis vitae. Nunc commodo egestas elit a elementum. Suspendisse interdum arcu quis diam iaculis malesuada. Donec volutpat elit augue, eu molestie mi viverra nec. Vestibulum sed felis rutrum, euismod lorem egestas, blandit lectus. Ut ex augue, laoreet ut nunc id, gravida luctus nunc. Sed fermentum lorem ut est varius imperdiet. Mauris sed ex eget ligula fermentum ultricies vitae sed arcu.</p>
<p class="my-2">Pellentesque ultrices venenatis tincidunt. Suspendisse vitae ligula ex. Proin placerat dolor sed egestas pulvinar. Donec egestas aliquet leo, id euismod magna accumsan et. Nullam a tellus ac magna euismod viverra. Pellentesque laoreet suscipit erat a congue. Aliquam suscipit laoreet elit sit amet varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam purus, eu pharetra nulla scelerisque vitae. In nisl tellus, suscipit quis vehicula quis, sollicitudin non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum orci vel lacinia interdum. Etiam posuere nisl ex, luctus mollis ex semper a.</p>
</div>
</div>
</div>
<!-- TRIVIA -->
<div class="col-12 m-0 p-2 d-flex" id="trivia">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Trivia</h1>
<i class="fa-duotone fa-info-circle fa-xl"></i>
</div>
<div>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SMALL SCREEN NAVIGATION -->
<div class="text-right d-block d-md-none" style="position:fixed; bottom:10px; right:15px;">
<a href="#" data-toggle="collapse" data-target="#mobile-nav" class="btn btn-primary p-0" style="width:35px; height:35px;">
<div class="align-items-center justify-content-center" style="width:32px; height:35px;"><i class="fa-solid fa-bars fa-lg"></i></div>
</a>
<div class="collapse text-left" id="mobile-nav">
<div class="card bg-faded p-2">
<div class="card p-3">
<h4 class="display-5" style="letter-spacing:1px; font-weight:600; font-variant:small-caps;">Navigation</h4>
<a href="#basics" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Basics</a>
<a href="#traits" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Notable Traits</a>
<a href="#abilities" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Abilities</a>
<a href="#skills" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Skills</a>
<a href="#relations" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Relations</a>
<a href="#personality" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Personality</a>
<a href="#likes" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Likes & Dislikes</a>
<a href="#bio" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Biography</a>
<a href="#trivia" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Trivia</a>
<a href="#top" class="my-1 text-secondary"><i class="fa-solid fa-up mr-2"></i> Back to Top</a>
</div>
</div>
</div>
</div>
<!-- SMALL SCREEN BACK TO TOP -->
<a href="#top" data-toggle="tooltip" title="Back to Top" class="btn btn-primary p-0 d-none d-md-block align-content-center" style="position:fixed; bottom:10px; right:10px; width:35px; height:35px;">
<i class="fa-solid fa-up fa-lg"></i>
</a>
Copy
<div class="col-12 m-0 p-0 d-flex flex-wrap justify-content-center">
<!-- NAVIGATION -->
<div class="col-xl-2 p-0 pr-xl-3 mb-3 mb-xl-0 d-none d-md-block">
<div class="sticky-top">
<div class="card bg-faded p-2">
<div class="card p-3">
<h4 class="display-5" style="letter-spacing:1px; font-weight:600; font-variant:small-caps;">Navigation</h4>
<a href="#basics" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Basics</a>
<a href="#traits" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Notable Traits</a>
<a href="#abilities" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Abilities</a>
<a href="#skills" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Skills</a>
<a href="#relations" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Relations</a>
<a href="#personality" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Personality</a>
<a href="#likes" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Likes & Dislikes</a>
<a href="#bio" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Biography</a>
<a href="#trivia" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Trivia</a>
</div>
</div>
<a href="#top" class="btn btn-primary align-items-center justify-content-center mt-2 font-weight-bold d-xl-block d-none" style="letter-spacing:0.5px;">
<i class="fa-solid fa-up fa-lg mr-2"></i> Back to Top
</a>
</div>
</div>
<div class="card bg-faded col-xl-10 p-4" id="basics">
<!-- CREDIT -->
<a href="https://toyhou.se/dragon-heist" data-toggle="tooltip" title="code by dragon-heist" data-placement="left" class="fa-solid fa-code" style="text-decoration:none; position:absolute; bottom:8px; right:8px;"></a>
<div class="d-flex flex-wrap">
<!-- NAME/TITLE -->
<div class="col-12 p-2">
<div class="card p-3 text-center">
<h1 class="display-4" style="letter-spacing:3px; font-weight:500; font-variant:small-caps;">{{!ALIAS!}}</h1>
</div>
</div>
<!-- IMAGE -->
<div class="col-xl-6 p-2" style="min-height:480px;">
<div class="card p-3 h-100">
<div class="h-100" style="background:url('{{u!REFERENCE IMAGE URL!}}'); background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
</div>
</div>
<!-- BASICS -->
<div class="col-xl-6 p-2" id="occupation">
<div class="card p-3">
<div class="d-flex flex-wrap">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-signature fa-lg text-secondary mr-1"></i> Full Name
</div>
<div class="col-6 px-1 text-right">
{{!FULL NAME!}}
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-venus-mars fa-lg text-secondary mr-1"></i> Gender
</div>
<div class="col-6 px-1 text-right">
{{!GENDER!}}
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-comment fa-lg text-secondary mr-1"></i> Pronouns
</div>
<div class="col-6 px-1 text-right">
{{!PRONOUNS!}}
</div>
<hr class="w-100 mt-2">
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-calendar-days fa-lg text-secondary mr-1"></i> Age
</div>
<div class="col-6 px-1 text-right">
{{!AGE!}}
</div>
<hr class="w-100 mt-2">
</div>
{{%%VOICE CLAIM%
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 px-1 text-left" style="font-weight:600; font-variant:small-caps;">
<i class="fa-duotone fa-microphone fa-lg text-secondary mr-1"></i> Voice Claim
</div>
<div class="col-6 px-1 text-right">
{{%Character%}}
</div>
<div class="col-12 mt-4 mb-2 justify-content-center">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{%YT Video Code%}}" allowfullscreen></iframe>
</div>
</div>
%end%}}
</div>
</div>
{{%%OCCUPATION%
<div class="card mt-3 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Occupation</h1>
<i class="fa-duotone fa-suitcase fa-xl"></i>
</div>
<div>
{{%Add points below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Occupation%}}</p>
%end%}}
</div>
</div>
%end%}}
</div>
<!-- TRAITS -->
{{%%NOTABLE TRAITS%
<div class="col-xl-4 p-2 d-flex" id="traits">
<div class="card w-100 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Notable Traits</h1>
<i class="fa-duotone fa-list fa-xl"></i>
</div>
<div>
{{%Add traits below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Trait%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
<!-- ABILITIES -->
{{%%ABILITIES%
<div class="col-md-6 col-xl-4 p-2 d-flex" id="abilities">
<div class="card w-100 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Abilities</h1>
<i class="fa-duotone fa-explosion fa-xl"></i>
</div>
<div>
{{%Add abilities below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Ability%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
<!-- SKILLS -->
{{%%SKILLS%
<div class="col-md-6 col-xl-4 p-2 d-flex" id="skills">
<div class="card w-100 p-3">
<div class="justify-content-between align-items-center mb-1">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Skills</h1>
<i class="fa-duotone fa-stars fa-xl"></i>
</div>
<div>
{{%Add skills below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Skill%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
<!-- RELATIONSHIPS -->
<div class="col-12 d-flex flex-wrap p-2 mt-3" id="relations">
{{%%RELATIONS 1%
<div class="col-lg-6 col-xl-3 px-3 mb-5 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('{{u%Image URL%}}'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2><a href="{{u%Link%}}">{{%Name%}}</a></h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">{{%One-Line Description%}}</a></div>
<div class="my-2 text-center">{{l%Blurb%}}</div>
</div>
</div>
%end%}}
{{%%RELATIONS 2%
<div class="col-lg-6 col-xl-3 px-3 mb-5 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('{{u%Image URL%}}'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2><a href="{{u%Link%}}">{{%Name%}}</a></h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">{{%One-Line Description%}}</div>
<div class="my-2 text-center">{{l%Blurb%}}</div>
</div>
</div>
%end%}}
{{%%RELATIONS 3%
<div class="col-lg-6 col-xl-3 px-3 mb-5 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('{{u%Image URL%}}'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2><a href="{{u%Link%}}">{{%Name%}}</a></h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">{{%One-Line Description%}}</div>
<div class="my-2 text-center">{{l%Blurb%}}</div>
</div>
</div>
%end%}}
{{%%RELATIONS 4%
<div class="col-lg-6 col-xl-3 px-3 mb-5 mb-xl-4">
<div class="card rounded-circle mb-3 mx-auto" style="width:125px; height:125px; background:url('{{u%Image URL%}}'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div>
<div class="col-12 card p-2 w-100">
<h2><a href="{{u%Link%}}">{{%Name%}}</a></h2>
<hr class="w-100 my-0">
<div class="text-secondary text-right" style="font-variant:small-caps;">{{%One-Line Description%}}</div>
<div class="my-2 text-center">{{l%Blurb%}}</div>
</div>
</div>
%end%}}
</div>
<div class="row col-12 m-0 p-0 justify-content-center">
<!-- PERSONALTIY -->
{{%%PERSONALTIY%
<div class="col-xl-8 order-xl-1 order-0 m-0 p-2 d-flex" id="personality">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Personality</h1>
<i class="fa-solid fa-comment fa-xl"></i>
</div>
<div style="text-indent:30px;">
{{%Add paragraphs below%
<p class="my-2">{{l%Paragraph%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
<!-- LIKES -->
{{%%LIKES%
<div class="col-md-6 col-xl-2 order-xl-0 order-1 m-0 p-2 d-flex" id="likes">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Likes</h1>
<i class="fa-duotone fa-heart-pulse text-success fa-xl"></i>
</div>
<div>
{{%Add likes below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Like%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
<!-- DISLIKES -->
{{%%DISLIKES%
<div class="col-md-6 col-xl-2 order-2 m-0 p-2 d-flex" id="dislikes">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Dislikes</h1>
<i class="fa-duotone fa-heart-broken text-danger fa-xl"></i>
</div>
<div>
{{%Add dislikes below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Dislike%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
</div>
<!-- BIOGRAPHY -->
{{%%BIOGRAPHY%
<div class="col-12 m-0 p-2 d-flex" id="bio">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Biography</h1>
<i class="fa-duotone fa-books fa-xl"></i>
</div>
<div style="text-indent:30px;">
{{%Add paragraphs below%
<p class="my-2">{{l%Paragraph%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
<!-- TRIVIA -->
{{%%TRIVIA%
<div class="col-12 m-0 p-2 d-flex" id="trivia">
<div class="card p-3 w-100">
<div class="justify-content-between align-items-center">
<h1 style="letter-spacing:1px; font-variant:small-caps;">Trivia</h1>
<i class="fa-duotone fa-info-circle fa-xl"></i>
</div>
<div>
{{%Add trivia below%
<p class="my-2"><i class="fa-regular fa-caret-right mr-2"></i> {{%Trivia%}}</p>
%end%}}
</div>
</div>
</div>
%end%}}
</div>
</div>
</div>
<!-- SMALL SCREEN NAVIGATION -->
<div class="text-right d-block d-md-none" style="position:fixed; bottom:10px; right:15px;">
<a href="#" data-toggle="collapse" data-target="#mobile-nav" class="btn btn-primary p-0" style="width:35px; height:35px;">
<div class="align-items-center justify-content-center" style="width:32px; height:35px;"><i class="fa-solid fa-bars fa-lg"></i></div>
</a>
<div class="collapse text-left" id="mobile-nav">
<div class="card bg-faded p-2">
<div class="card p-3">
<h4 class="display-5" style="letter-spacing:1px; font-weight:600; font-variant:small-caps;">Navigation</h4>
<a href="#basics" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Basics</a>
<a href="#traits" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Notable Traits</a>
<a href="#abilities" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Abilities</a>
<a href="#skills" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Skills</a>
<a href="#relations" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Relations</a>
<a href="#personality" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Personality</a>
<a href="#likes" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Likes & Dislikes</a>
<a href="#bio" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Biography</a>
<a href="#trivia" class="my-1"><i class="fa-regular fa-bookmark mr-2"></i> Trivia</a>
<a href="#top" class="my-1 text-secondary"><i class="fa-solid fa-up mr-2"></i> Back to Top</a>
</div>
</div>
</div>
</div>
<!-- SMALL SCREEN BACK TO TOP -->
<a href="#top" data-toggle="tooltip" title="Back to Top" class="btn btn-primary p-0 d-none d-md-block align-content-center" style="position:fixed; bottom:10px; right:10px; width:35px; height:35px;">
<i class="fa-solid fa-up fa-lg"></i>
</a>