Rounded Overlay Profile
created by:BigGayFish
Custom ColorsMixed ColorsBootstrapHTMLCharacter
Copy
<!--ROUNDED OVERLAY - BOOTSTRAPS LONG VERSION
Just a lil something I whipped up for myself that once again I'm releasing to the masses in case anyone else likes it.
COLOR KEY: -primary - For all the main accents/links
-secondary - This is just for the dividers
-->
<div class="container-fluid" style="font-size: 14pt;">
<div class="row no-gutters">
<div class="col-md-3 mb-3 mr-n5" style="z-index:10;">
<div class="sticky-top">
<!--ICON/PAGEDOLL-->
<div class="card rounded-0 border-0 mb-3" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: cover; background-repeat: no-repeat; height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF ICON/PAGEDOLL-->
<div class="card bg-primary border-0" style="border-radius: 3px 3px 0px 0px;">
<a data-toggle="collapse" style="color: #fff;" href="#quickinfo">
<h1 class="font-weight-bold text-center text-uppercase display-4"><i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<!--QUICK INFO-->
<div class="collapse mb-3" id="quickinfo">
<div class="card card-outline-primary bg-faded rounded-0 p-2" style="border-radius: 0px 0px 10px 10px; border-width: 3px;">
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
<p class="text-center" style="opacity: .2;"> code by @BigGayFish</p>
</div>
</div>
<div class="col-lg-9 card bg-faded card-outline-primary p-4" style="border-radius: 10px; border-width: 3px;">
<!--ACCENT ICON-->
<div class="card bg-transparent border-0 fa-beat" style="z-index:100; position:absolute; top: -1%; left:90%; right:0; bottom:0; height: 100px; animation-duration:5s;">
<p ><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i><i class="fa-duotone fa-solid fa-4x fa-snake fa-flip-horizontal"></i></p>
<p class="pl-5"><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i></p>
</div>
<!--END OF ACCENT IMAGE-->
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-11">
<h1 class="text-primary display-1 font-weight-bold" style="font-family: MS Gothic;">Character Name</h1>
<!--ABOUT-->
<p>Character summary here! Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<!--END OF ABOUT-->
<!--DESIGN-->
<div id="DESIGN" class="carousel slide " data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF DESIGN-->
<!--BUMPER BUTTONS-->
<div class="row no-gutters my-3 w-100">
<!--LB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0 bg-primary" style="font-family:MS Gothic; font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#DESIGN"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6">
</div>
<!--RB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0 bg-primary" style="font-family:Impact, fantasy; font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#DESIGN"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--COLOR PALLETTE-->
<div class="row">
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Design Notes</h1>
<!--DESIGN NOTES-->
<p>Design Notes summary. 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>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--DESIGN NOTES-->
<!--MOODBOARD-->
<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF MOODBOARD-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">History</h1>
<!--BIO-->
<p>Character bio summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div class="card bg-primary border-0 mb-3 mt-3">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<div class="card bg-primary border-0 mb-3">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname2">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname2">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<!--END OF BIO-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Relationships</h1>
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border-width: 3px;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG RIGHT-->
<div class="row p-2 align-items-center">
<div class="col-lg-8 mb-2 order-md-1 order-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
<!--ICON-->
<div class="col-md-4 mb-2 order-sm-1">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border-width: 3px;">
</div>
</div>
<!--END OF ICON-->
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border-width: 3px;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Trivia</h1>
<!--TRIVIA-->
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--END OF TRIVIA-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Ribbons</h1>
<div class="row no-gutters justify-content-center" style="max-height: 200px; overflow-y: auto;">
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--ADD MORE RIBBONS ABOVE THIS LINE-->
</div>
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-0">
<a class="btn btn-outline-primary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Ribbons Source" href="https://toyhou.se/20187371.ribbon-masterlist"><i class="fas fa-ribbon"></i></a>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>Copy
<!--ROUNDED OVERLAY - ACCENT LONG VERSION
Just a lil something I whipped up for myself that once again I'm releasing to the masses in case anyone else likes it.
COLOR KEY: #A73E2B - Accent Color
-primary - Links
-secondary - Dividers
-->
<div class="container-fluid" style="font-size: 14pt;">
<div class="row no-gutters">
<div class="col-md-3 mb-3 mr-n5" style="z-index:10;">
<div class="sticky-top">
<div class="card rounded-0 border-0 mb-3" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: cover; background-repeat: no-repeat; height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card border-0" style="border-radius: 3px 3px 0px 0px; background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#quickinfo">
<h1 class="font-weight-bold text-center text-uppercase display-4"><i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="quickinfo">
<div class="card bg-faded rounded-0 p-2" style="border-radius: 0px 0px 10px 10px; border: #A73E2B 3px solid;">
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
</div>
</div>
<p class="text-center" style="opacity: .2;"> code by @BigGayFish</p>
</div>
</div>
<div class="col-lg-9 card bg-faded p-4" style="border-radius: 10px; border: #A73E2B 3px solid;">
<!--ACCENT ICON-->
<div class="card bg-transparent border-0 fa-beat" style="z-index:100; position:absolute; top: -1%; left:90%; right:0; bottom:0; height: 100px; animation-duration:5s;">
<p ><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i><i class="fa-duotone fa-solid fa-4x fa-snake fa-flip-horizontal"></i></p>
<p class="pl-5"><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i></p>
</div>
<!--END OF ACCENT ICON-->
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-11">
<h1 class="display-1 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Character Name</h1>
<p>Character summary here! Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div id="DESIGN2" class="carousel slide " data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters my-3 w-100">
<!--LB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:MS Gothic; font-size:30px; background-color: #A73E2B;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#DESIGN2"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6">
</div>
<!--RB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:Impact, fantasy; font-size:30px; background-color: #A73E2B;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#DESIGN2"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--COLOR PALLETTE-->
<div class="row">
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Design Notes</h1>
<p>Design Notes summary. 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>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">History</h1>
<p>Character bio summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div class="card border-0 my-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname3">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname3">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<div class="card border-0 mb-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname4">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname4">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Relationships</h1>
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG RIGHT-->
<div class="row p-2 align-items-center">
<div class="col-lg-8 mb-2 order-md-1 order-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
<!--ICON-->
<div class="col-md-4 mb-2 order-sm-1">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Trivia</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Ribbons</h1>
<div class="row no-gutters justify-content-center" style="max-height: 200px; overflow-y: auto;">
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--ADD MORE RIBBONS ABOVE THIS LINE-->
</div>
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-0">
<a class="btn btn-outline-primary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Ribbons Source" href="https://toyhou.se/20187371.ribbon-masterlist"><i class="fas fa-ribbon"></i></a>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>Copy
<!--ROUNDED OVERLAY - CUSTOM COLORS LONG VERSION
Just a lil something I whipped up for myself that once again I'm releasing to the masses in case anyone else likes it.
COLOR KEY: #A73E2B - Main Accent / Links
#fff - Text
#181110 - Main BG
#FCE4F4 - Side Bar BG
#F7D4F2 - Minor Accent / Icon + Name
#E0EAF3 - Minor Accent / IMG Borders
#CEAAB6 - Minor Accent / Dividers
#D2CEE9 - Minor Accent / Headers
-->
<div class="container-fluid" style="font-size: 14pt; color: #fff;">
<div class="row no-gutters">
<div class="col-md-3 mb-3 mr-n5" style="z-index:10;">
<div class="sticky-top">
<div class="card rounded-0 border-0 mb-3" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: cover; background-repeat: no-repeat; height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card border-0" style="background-color: #A73E2B; border-radius: 3px 3px 0px 0px;">
<a data-toggle="collapse" style="color: #fff;" href="#quickinfo">
<h1 class="font-weight-bold text-center text-uppercase display-4"><i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="quickinfo">
<div class="card rounded-0 p-2" style="background-color: #FCE4F4; border-radius: 0px 0px 10px 10px; border: #A73E2B 3px solid;">
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold; color: #A73E2B;">content</a></div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold; color: #A73E2B;">content</a></div>
</div>
</div>
</div>
</div>
<p class="text-center" style="opacity: .2;"> code by @BigGayFish</p>
</div>
</div>
<div class="col-lg-9 card p-4" style="background-color: #181110; border-radius: 10px; border: #A73E2B 3px solid;">
<!--ACCENT ICON-->
<div class="card bg-transparent border-0 fa-beat" style="z-index:100; position:absolute; top: -1%; left:90%; right:0; bottom:0; height: 100px; animation-duration:5s; color: #F7D4F2;">
<p ><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i><i class="fa-duotone fa-solid fa-4x fa-snake fa-flip-horizontal"></i></p>
<p class="pl-5"><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i></p>
</div>
<!--END OF ACCENT ICON-->
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-11">
<h1 class="display-1 font-weight-bold" style="font-family: MS Gothic; color: #F7D4F2;">Character Name</h1>
<p>Character summary here! Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div id="DESIGN3" class="carousel slide" data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters my-3 w-100">
<!--LB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:MS Gothic; font-size:30px; background-color: #E0EAF3; color: #A73E2B;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#DESIGN3"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6">
</div>
<!--RB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:MS Gothic; font-size:30px; background-color: #E0EAF3; color: #A73E2B;"><i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#DESIGN3"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--COLOR PALLETTE-->
<div class="row">
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Design Notes</h1>
<p>Design Notes summary. 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>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--MOODBOARD-->
<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF MOODBOARD-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">History</h1>
<p>Character bio summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div class="card border-0 my-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname5">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname5">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<div class="card border-0 mb-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname6">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname6">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Relationships</h1>
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic; color: #A73E2B;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG RIGHT-->
<div class="row p-2 align-items-center">
<div class="col-lg-8 mb-2 order-md-1 order-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic; color: #A73E2B;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
<!--ICON-->
<div class="col-md-4 mb-2 order-sm-1">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic; color: #A73E2B;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Trivia</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Ribbons</h1>
<div class="row no-gutters justify-content-center" style="max-height: 200px; overflow-y: auto;">
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--ADD MORE RIBBONS ABOVE THIS LINE-->
</div>
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-0">
<a class="btn btn-outline-secondary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Ribbons Source" style="color: #CEAAB6;" href="https://toyhou.se/20187371.ribbon-masterlist"><i class="fas fa-ribbon"></i></a>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>Copy
<!--ROUNDED OVERLAY - BOOTSTRAPS SCROLLABLE VERSION
Just a lil something I whipped up for myself that once again I'm releasing to the masses in case anyone else likes it.
COLOR KEY: -primary - For all the main accents/links
-secondary - This is just for the dividers
-->
<div class="container-fluid" style="font-size: 14pt;">
<div class="row no-gutters">
<div class="col-md-3 mb-3 mr-n5" style="z-index:10;">
<div class="card rounded-0 border-0 mb-3" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: cover; background-repeat: no-repeat; height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card bg-primary border-0" style="border-radius: 3px 3px 0px 0px;">
<a data-toggle="collapse" style="color: #fff;" href="#quickinfo">
<h1 class="font-weight-bold text-center text-uppercase display-4"><i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="quickinfo">
<div class="card card-outline-primary bg-faded rounded-0 p-2" style="border-radius: 0px 0px 10px 10px; border-width: 3px;">
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
</div>
</div>
<p class="text-center" style="opacity: .2;"> code by @BigGayFish</p>
</div>
<!--ACCENT ICON-->
<div class="card bg-transparent border-0 fa-beat" style="z-index:100; position:absolute; top: -1%; left:90%; right:0; bottom:0; height: 100px; animation-duration:5s;">
<p ><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i><i class="fa-duotone fa-solid fa-4x fa-snake fa-flip-horizontal"></i></p>
<p class="pl-5"><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i></p>
</div>
<!--END OF ACCENT IMAGE-->
<div class="col-lg-9 card bg-faded card-outline-primary p-4" style="border-radius: 10px; border-width: 3px; height: 600px; overflow-y:auto;">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-11">
<h1 class="text-primary display-1 font-weight-bold" style="font-family: MS Gothic;">Character Name</h1>
<p>Character summary here! Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div id="DESIGN" class="carousel slide " data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters my-3 w-100">
<!--LB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0 bg-primary" style="font-family:MS Gothic; font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#DESIGN"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6">
</div>
<!--RB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0 bg-primary" style="font-family:Impact, fantasy; font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#DESIGN"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--COLOR PALLETTE-->
<div class="row">
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Design Notes</h1>
<p>Design Notes summary. 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>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border-width: 2px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">History</h1>
<p>Character bio summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div class="card bg-primary border-0 mb-3 mt-3">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<div class="card bg-primary border-0 mb-3">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname2">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname2">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Relationships</h1>
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border-width: 3px;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG RIGHT-->
<div class="row p-2 align-items-center">
<div class="col-lg-8 mb-2 order-md-1 order-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
<!--ICON-->
<div class="col-md-4 mb-2 order-sm-1">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border-width: 3px;">
</div>
</div>
<!--END OF ICON-->
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border-width: 3px;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Trivia</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="text-primary display-3 font-weight-bold" style="font-family: MS Gothic;">Ribbons</h1>
<div class="row no-gutters justify-content-center" style="max-height: 200px; overflow-y: auto;">
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END RIBBON-->
<!-- //////////////////// ADD MORE RIBBONS ABOVE THIS LINE //////////////////// -->
</div>
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-0">
<a class="btn btn-outline-primary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Ribbons Source" href="https://toyhou.se/20187371.ribbon-masterlist"><i class="fas fa-ribbon"></i></a>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>Copy
<!--ROUNDED OVERLAY - ACCENT SCROLLABLE VERSION
Just a lil something I whipped up for myself that once again I'm releasing to the masses in case anyone else likes it.
COLOR KEY: #A73E2B - Accent Color
-primary - Links
-secondary - Dividers
-->
<div class="container-fluid" style="font-size: 14pt;">
<div class="row no-gutters">
<div class="col-md-3 mb-3 mr-n5" style="z-index:10;">
<div class="card rounded-0 border-0 mb-3" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: cover; background-repeat: no-repeat; height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card border-0" style="border-radius: 3px 3px 0px 0px; background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#quickinfo">
<h1 class="font-weight-bold text-center text-uppercase display-4"><i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="quickinfo">
<div class="card bg-faded rounded-0 p-2" style="border-radius: 0px 0px 10px 10px; border: #A73E2B 3px solid;">
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-faded mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic; background-color: #A73E2B;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
</div>
</div>
<p class="text-center" style="opacity: .2;"> code by @BigGayFish</p>
</div>
<!--ACCENT ICON-->
<div class="card bg-transparent border-0 fa-beat" style="z-index:100; position:absolute; top: -1%; left:90%; right:0; bottom:0; height: 100px; animation-duration:5s;">
<p ><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i><i class="fa-duotone fa-solid fa-4x fa-snake fa-flip-horizontal"></i></p>
<p class="pl-5"><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i></p>
</div>
<!--END OF ACCENT ICON-->
<div class="col-lg-9 card bg-faded p-4" style="border-radius: 10px; border: #A73E2B 3px solid; height: 600px; overflow-y:auto;">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-11">
<h1 class="display-1 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Character Name</h1>
<p>Character summary here! Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div id="DESIGN2" class="carousel slide " data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters my-3 w-100">
<!--LB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:MS Gothic; font-size:30px; background-color: #A73E2B;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#DESIGN2"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6">
</div>
<!--RB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:Impact, fantasy; font-size:30px; background-color: #A73E2B;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#DESIGN2"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--COLOR PALLETTE-->
<div class="row">
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Design Notes</h1>
<p>Design Notes summary. 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>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #A73E2B 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">History</h1>
<p>Character bio summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div class="card border-0 my-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname3">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname3">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<div class="card border-0 mb-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname4">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname4">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Relationships</h1>
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG RIGHT-->
<div class="row p-2 align-items-center">
<div class="col-lg-8 mb-2 order-md-1 order-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
<!--ICON-->
<div class="col-md-4 mb-2 order-sm-1">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Trivia</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x text-secondary"></i>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #A73E2B;">Ribbons</h1>
<div class="row no-gutters justify-content-center" style="max-height: 200px; overflow-y: auto;">
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!-- //////////////////// ADD MORE RIBBONS ABOVE THIS LINE //////////////////// -->
</div>
<div class="row no-gutters align-items-center">
<div class="col"><div class="card bg-secondary"></div></div>
<div class="col-auto p-0">
<a class="btn btn-outline-primary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Ribbons Source" href="https://toyhou.se/20187371.ribbon-masterlist"><i class="fas fa-ribbon"></i></a>
</div>
<div class="col"><div class="card bg-secondary"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>Copy
<!--ROUNDED OVERLAY - CUSTOM COLORS SCROLLABLE VERSION
Just a lil something I whipped up for myself that once again I'm releasing to the masses in case anyone else likes it.
COLOR KEY: #A73E2B - Main Accent / Links
#fff - Text
#181110 - Main BG
#FCE4F4 - Side Bar BG
#F7D4F2 - Minor Accent / Icon + Name
#E0EAF3 - Minor Accent / IMG Borders
#CEAAB6 - Minor Accent / Dividers
#D2CEE9 - Minor Accent / Headers
-->
<div class="container-fluid" style="font-size: 14pt; color: #fff;">
<div class="row no-gutters">
<div class="col-md-3 mb-3 mr-n5" style="z-index:10;">
<div class="card rounded-0 border-0 mb-3" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: cover; background-repeat: no-repeat; height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6; color: #F7D4F2;"><i class="fas fa-image"></i></a>
</div>
<div class="card border-0" style="background-color: #A73E2B; border-radius: 3px 3px 0px 0px;">
<a data-toggle="collapse" style="color: #fff;" href="#quickinfo">
<h1 class="font-weight-bold text-center text-uppercase display-4"><i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="quickinfo">
<div class="card rounded-0 p-2" style="background-color: #FCE4F4; border-radius: 0px 0px 10px 10px; border: #A73E2B 3px solid;">
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card border-0 justify-content-center pr-2" style="background-color: #FCE4F4; text-align: right; border-radius: 0px; color: #181110;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold; color: #A73E2B;">content</a></div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A73E2B 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A73E2B; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px; font-family: MS Gothic;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold; color: #A73E2B;">content</a></div>
</div>
</div>
</div>
</div>
<p class="text-center" style="opacity: .2;"> code by @BigGayFish</p>
</div>
<!--ACCENT ICON-->
<div class="card bg-transparent border-0 fa-beat" style="z-index:100; position:absolute; top: -1%; left:90%; right:0; bottom:0; height: 100px; animation-duration:5s; color: #F7D4F2;">
<p ><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i><i class="fa-duotone fa-solid fa-4x fa-snake fa-flip-horizontal"></i></p>
<p class="pl-5"><i class="fa-duotone fa-solid fa-2x fa-sparkles"></i></p>
</div>
<!--END OF ACCENT ICON-->
<div class="col-lg-9 card p-4" style="background-color: #181110; border-radius: 10px; border: #A73E2B 3px solid; height: 600px; overflow-y:auto;">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-11">
<h1 class="display-1 font-weight-bold" style="font-family: MS Gothic; color: #F7D4F2;">Character Name</h1>
<p>Character summary here! Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div id="DESIGN3" class="carousel slide" data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="card w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 450px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters my-3 w-100">
<!--LB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:MS Gothic; font-size:30px; background-color: #E0EAF3; color: #A73E2B;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#DESIGN3"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6">
</div>
<!--RB BUTTON-->
<div class="col-sm-3">
<div class="card m-1 text-center font-weight-bold p-1 border-0" style="font-family:MS Gothic; font-size:30px; background-color: #E0EAF3; color: #A73E2B;"><i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#DESIGN3"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--COLOR PALLETTE-->
<div class="row">
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<div class="col-md-4 border-0 mb-3">
<div class="card pt-2 border-0" style="background-color: #A73E2B; color: #fff; font-family: MS Gothic;">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Design Notes</h1>
<p>Design Notes summary. 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>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--MOODBOARD-->
<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card card-outline-primary w-100" style="background: url(https://dummyimage.com/350/ffffff/000000) top; background-size: cover; background-repeat: no-repeat; height: 250px; border: #E0EAF3 2px solid;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF MOODBOARD-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">History</h1>
<p>Character bio summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<div class="card border-0 my-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname5">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname5">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<div class="card border-0 mb-3" style="background-color: #A73E2B;">
<a data-toggle="collapse" style="color: #fff;" href="#sectionname6">
<h1 class="font-weight-bold text-center pt-2" style="font-family: MS Gothic;">Chapter/Section Name <i class="fa-solid fa-caret-down"></i>
</h1>
</a>
</div>
<div class="collapse mb-3" id="sectionname6">
<p>Chapter info. You can make this as long and short as need be. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
</div>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Relationships</h1>
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic; color: #A73E2B;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG RIGHT-->
<div class="row p-2 align-items-center">
<div class="col-lg-8 mb-2 order-md-1 order-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic; color: #A73E2B;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
<!--ICON-->
<div class="col-md-4 mb-2 order-sm-1">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK - IMG LEFT-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-4 mb-2">
<div class="card card-outline-primary rounded-0" style="min-height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center; border: #A73E2B 3px solid;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-2">
<a href="#" class="font-weight-bold display-4" style="font-family: MS Gothic; color: #A73E2B;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background-color: #A73E2B;"></div>
<h5 style="font-family: MS Gothic;">Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="max-height: 300px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Trivia</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--DIVIDER-->
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-2">
<i class="fa-duotone fa-solid fa-staff-snake fa-2x" style="color: #CEAAB6;"></i>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
<!--END OF DIVIDER-->
<h1 class="display-3 font-weight-bold" style="font-family: MS Gothic; color: #D2CEE9;">Ribbons</h1>
<div class="row no-gutters justify-content-center" style="max-height: 200px; overflow-y: auto;">
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!--RIBBON-->
<div class="col-lg-2 col-3 text-center py-2" data-toggle="tooltip" title="Description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535787_bCQ.png">
</div>
<!--END OF RIBBON-->
<!-- //////////////////// ADD MORE RIBBONS ABOVE THIS LINE //////////////////// -->
</div>
<div class="row no-gutters align-items-center">
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
<div class="col-auto p-0">
<a class="btn btn-outline-secondary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Ribbons Source" style="color: #CEAAB6;" href="https://toyhou.se/20187371.ribbon-masterlist"><i class="fas fa-ribbon"></i></a>
</div>
<div class="col"><div class="card" style="background-color: #CEAAB6;"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>