035 | ciikorii
created by:SparklyCodes
Custom ColorsHTMLCharacter
Copy
<!--
▶ SPARKLYCODES
▶ CUSTOM 035 | ciikorii
▶ RESOURCES: use ctrl + H to replace
https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png >> PLACEHOLDER IMAGE
▶ COLORS ARE IN THE FIRST DIV AS VARIABLES!
-->
<div class="mx-auto p-1 p-md-3 row no-gutters rounded" style="
/* VARIABLES */
--shadow: 5px 5px 3px rgba(28, 20, 29, .2);
--saturation: saturate(100%); /* 100% is original saturation on images, 0% is grayscale */
--text: #412a15;
--faded-text: rgba(65,42,21,.5); /* SAME AS TEXT BUT RGBA */
--white-behind: #f2f2f2;
--white-pure: #ffffff;
--warning-bg: #e2c78f;
--warning-text: #70523a;
--relationship-button: #d2ab71;
--tape: #eaeaea;
--folder: #a38e64;
--yellowed_paper: #faf6df;
--pink: #ed9fc0;
--yellow: #F4F174;
--green: #93e4a1;
--blue: #a2dee5;
max-width: 900px; color: var(--text); font-size: .9em;">
<!-- ............................. LEFT - SIDEBAR -->
<div class="mr-lg-n4 p-1 col-lg-3 flex-column flex-sm-row flex-lg-column justify-content-center align-items-center order-1" style="z-index: 1;">
<div>
<!-- paper clip -->
<img src="//file.garden/aEjD46n85guLcmTI/layouts_p/paperclip.png" class="mt-3 mb-n5 ml-lg-n4"
style="width: 90px; filter: drop-shadow( var(--shadow)); z-index: 1; transform: rotate(-80deg);">
<!-- IMAGE -->
<div class="mt-2 mb-2 mx-auto p-2" style="background: var(--white-behind); transform: rotate(-2deg); box-shadow: var(--shadow);">
<div class="mx-auto p-2 pb-4" style="background: var(--white-pure); transform: rotate(3deg); box-shadow: var(--shadow);">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 250px; width: 100%; min-width: 200px; filter: var(--saturation);" class="mb-2"></div>
</div>
</div>
</div>
<div>
<!-- PINK NOTE -->
<div class="mx-auto ml-lg-n2 mt-n3 p-2 w-100" style="background: var(--pink); transform: rotate(-2deg); max-width: 250px; box-shadow: var(--shadow);">
<h1 class="text-center text-monospace font-weight-bold">Status</h1>
<div class="p-1 w-100 overflow-auto" style="max-height: 149px; scrollbar-width: thin;">
<div class="py-1 justify-content-between" style="border-bottom: 1px dashed">
<b>ROLEPLAY</b>
<span>Information</span>
</div>
<div class="py-1 justify-content-between" style="border-bottom: 1px dashed">
<b>SHIPPING</b>
<span>Information</span>
</div>
<div class="py-1 justify-content-between" style="border-bottom: 1px dashed">
<b>BOUNDARIES</b>
<a style="color: inherit;" href="LINK"><i class="fa-sm fa-whiteboard fa-link"></i> Link</a>
</div>
<div class="py-1 justify-content-between" style="border-bottom: 1px dashed">
<b>SALE</b>
<span>Not For Sale</span>
</div>
<div class="py-1 justify-content-between">
<b>WORTH</b>
<a style="color: inherit;" href="LINK"><i class="fa-sm fa-whiteboard fa-link"></i> Tracker</a>
</div>
</div>
</div>
<!-- paper clip -->
<img src="//file.garden/aEjD46n85guLcmTI/layouts_p/paperclip.png" class="my-n2 ml-lg-n3"
style="width: 90px; filter: drop-shadow( var(--shadow)); z-index: 1; transform: rotate(-20deg);">
<!-- YELLOW NOTE -->
<div class="mx-auto p-2" style="background: var(--yellow); transform: rotate(2deg); max-width: 250px; max-height: 170px; box-shadow: var(--shadow);">
<h1 class="text-center text-monospace font-weight-bold">Note</h1>
<div class="overflow-auto" style="text-indent: 2em; height: 120px; scrollbar-width: thin;">
<p>OOC note or a bit of trivia. This box will scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
</div>
</div>
</div>
</div>
<!-- ............................. CENTER - CONTENT -->
<div class="p-1 pl-md-4 col-md order-3 order-md-2">
<!-- folder -->
<div class="py-2 pr-2 rounded row no-gutters" style="background: var(--folder);">
<!-- spine -->
<div class="mr-n1 ml-n3 col-auto">
<img src="//file.garden/aEjD46n85guLcmTI/layouts_p/spine.png" style="height: 650px; filter: drop-shadow( var(--shadow));" class="hidden-md-down">
<div style="background: url('//file.garden/aEjD46n85guLcmTI/layouts_p/spine.png'); background-size: 50px; height: 100%; width: 45px;" class="hidden-lg-up"></div>
</div>
<!-- CONTENT -->
<div class="p-0 col">
<div class="card border-0 w-100 d-block d-lg-flex" style="min-height: 100%;"> <div class="rounded tab-content overflow-auto" style="background: url('//file.garden/aEjD46n85guLcmTI/layouts_p/lined-paper.png') #fefefe; background-size: 360px; border: 10px solid #F8F7F3; filter: drop-shadow( var(--shadow)); flex: 1 1 0;">
<!-- ............................. ONE PROFILE -->
<div class="tab-pane fade show active" id="A">
<h1 class="mt-2 text-monospace font-weight-bold" style="border-bottom: 3px solid;">Profile</h1>
<!-- basics -->
<div class="row no-gutters text-monospace">
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">NAME</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">ALIAS(ES)</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">GENDER</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">SPECIES</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">AGE</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">D.O.B.</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">ORIENTATION</b>
<span>Information</span>
</div>
<div class="p-1 px-2 col-sm-6 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">OCCUPATION</b>
<span>Information</span>
</div>
</div>
<!-- intro -->
<div class="m-3 d-flex" style="border-image: url('//file.garden/aEjD46n85guLcmTI/layouts_p/ripped_paper.png') 10% fill; border-image-width: 10px; border-image-outset: 10px;">
<div class="my-4 mx-2 text-justify card border-0 w-100 d-block d-lg-flex" style="background: none; min-height: 100px; max-height: 300px; scrollbar-width: thin; text-indent: 2em;"> <div class="p-1 overflow-auto" style="flex:1 1 0; scrollbar-width: thin;">
<p>Introduction. This box will scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit.</p>
</div> </div>
</div>
<!-- design -->
<div class="row no-gutters text-monospace">
<!-- design fields -->
<div class="pr-2 col-lg-5">
<h1 class="mt-2 p-0 col-12 text-monospace font-weight-bold" style="border-bottom: 3px solid;">Appearance</h1>
<div class="p-1 px-2 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">HEIGHT</b>
<span>Information</span>
</div>
<div class="p-1 px-2 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">WEIGHT</b>
<span>Information</span>
</div>
<div class="p-1 px-2 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">ETHNICITY</b>
<span>Information</span>
</div>
<div class="p-1 px-2 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">HAIR</b>
<span>Information</span>
</div>
<div class="p-1 px-2 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">EYES</b>
<span>Information</span>
</div>
<div class="p-1 px-2 justify-content-between" style="border-bottom: 2px dotted;">
<b style="font-size: 1.1em;">BUILD</b>
<span>Information</span>
</div>
</div>
<!-- design notes -->
<div class="ml-lg-n3 p-1 px-4 px-lg-1 col-lg-6 flex-column">
<!-- image -->
<div class="p-2 pb-4" style="background: var(--white-pure); transform: rotate(3deg); box-shadow: var(--shadow); max-width: 150px;">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 150px; filter: var(--saturation);" class="mb-2 w-100"></div>
</div>
<!-- NOTE -->
<div class="mr-lg-n5 flex-column align-items-center" style="margin-top: -150px; margin-left: 110px; transform: rotate(-3deg);">
<div class="mb-n2 pt-4 px-5" style="background: var(--tape); z-index: 1; opacity: .75;"></div>
<div class="p-2 overflow-auto" style="background: url('//f2.toyhou.se/file/f2-toyhou-se/images/102813050_w2Zo3BBlGb7VhkI.png') var(--yellowed_paper); background-size: 200px; box-shadow: var(--shadow); height: 200px; scrollbar-width: thin; border: 6px solid var(--yellowed_paper);">
<ul class="m-0 pl-3" style="list-style-type: square; font-size: .9em;">
<li>Appearance Notes. This box scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Praesent et euismod enim, vel lobortis sapien.</li>
<li>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ............................. TWO - BACKSTORY-->
<div class="tab-pane fade" id="B">
<h1 class="mt-2 text-monospace font-weight-bold" style="border-bottom: 3px solid;">Library</h1>
<!-- records -->
<div class="mb-n3 p-2">
<div class="py-1 px-2 d-inline-block" style="background: var(--yellow); box-shadow: var(--shadow); z-index: 99;">
<h3 class="m-0 text-monospace" style="letter-spacing: 2px;">Records</h3>
</div>
<div class="mt-n3 pt-3" style="background: url('//f2.toyhou.se/file/f2-toyhou-se/images/102813050_w2Zo3BBlGb7VhkI.png') var(--yellowed_paper); background-size: 200px; box-shadow: var(--shadow); border: 6px solid var(--yellowed_paper); z-index: 9;"> <div class="overflow-auto" style="height: 200px; scrollbar-width: thin;">
<!-- event -->
<div class="p-2 row no-gutters" style=" z-index: 9;">
<b class="px-2 col-md-3 col-lg-2">00/00/00 <br> Event</b>
<div class="col">
<p>Use these to summarize events. It can be a medical history or a criminal record as well if you'd like! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</p>
</div>
</div>
<!-- event -->
<div class="p-2 row no-gutters">
<b class="px-2 col-md-3 col-lg-2">00/00/00 <br> Event</b>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien.</p>
</div>
</div>
<!-- event -->
<div class="p-2 row no-gutters">
<b class="px-2 col-md-3 col-lg-2">00/00/00 <br> Event</b>
<div class="col">
<p>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</p>
</div>
</div>
<!-- add more events above here -->
</div> </div>
<div class="ml-auto mr-n1 mt-n1 pt-4 px-5" style="background: var(--tape); z-index: 1; opacity: .75; width: 50px; transform: rotate(-10deg);"></div>
</div>
<!-- backstory -->
<h3 class="mx-2 pb-1 text-monospace text-center" style="border-bottom: 2px solid;">Backstory</h3>
<div class="p-2 text-justify overflow-auto" style="height: 280px; scrollbar-width: thin; text-indent: 2em;">
<!-- warnings -->
<div class="mb-3 mb-md-0 pr-md-2 float-md-left justify-content-center"> <div class="p-2 overflow-auto text-left" style="background: var(--warning-bg); color: var(--warning-text); box-shadow: var(--shadow); width: 150px; max-height: 200px; scrollbar-width: thin; font-size: .9em; text-indent: 0;">
<h3 class="text-center font-weight-bold" style="font-family: times;">Warning!</h3>
<p>Insert warnings here. This box will eventually scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien.</p>
</div> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra.</p>
<p>Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
<p>Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
</div>
</div>
<!-- ............................. THREE - TRIVIA -->
<div class="tab-pane fade" id="C">
<h1 class="mt-2 text-monospace font-weight-bold" style="border-bottom: 3px solid;">Trivia</h1>
<!-- traits -->
<h3 class="mx-2 pb-1 text-monospace text-center" style="border-bottom: 2px solid;">Traits</h3>
<div class="text-justify overflow-auto" style="height: 200px; scrollbar-width: thin;">
<!-- positive -->
<div class="m-1 p-1 row no-gutters" style="border-bottom: 2px dotted;">
<b class="px-2 col-md-3 text-monospace text-center" style="font-size: 1.2em;">POS.</b>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien.</p>
</div>
</div>
<!-- negative -->
<div class="m-1 p-1 row no-gutters" style="border-bottom: 2px dotted;">
<b class="px-2 col-md-3 text-monospace text-center" style="font-size: 1.2em;">NEG.</b>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien.</p>
</div>
</div>
<!-- likes -->
<div class="m-1 p-1 row no-gutters" style="border-bottom: 2px dotted;">
<b class="px-2 col-md-3 text-monospace text-center" style="font-size: 1.2em;">LIKES</b>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien.</p>
</div>
</div>
<!-- dislikes -->
<div class="m-1 p-1 row no-gutters" style="border-bottom: 2px dotted;">
<b class="px-2 col-md-3 text-monospace text-center" style="font-size: 1.2em;">DISLIKES</b>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien.</p>
</div>
</div>
</div>
<!-- TRIVIA NOTES -->
<div class="p-2 row no-gutters">
<!-- image -->
<div class="col-lg-auto flex-column justify-content-center align-items-center">
<div class="p-2 pb-4" style="background: var(--white-pure); transform: rotate(3deg); box-shadow: var(--shadow); width: 200px;">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 200px; filter: var(--saturation);" class="mb-2 w-100"></div>
</div>
<!-- icon -->
<i class="mt-n5 fa-4x fa-solid fa-star align-self-start" style="color: var(--green); z-index: 1; transform: rotate(-10deg); text-shadow: var(--shadow);"></i>
</div>
<!-- notes -->
<div class="col flex-column align-items-center">
<div class="mb-n3 pt-4 px-5" style="background: var(--tape); z-index: 1; opacity: .75;"></div>
<div class="p-2 overflow-auto" style="background: url('//f2.toyhou.se/file/f2-toyhou-se/images/102813050_w2Zo3BBlGb7VhkI.png') var(--yellowed_paper); background-size: 200px; box-shadow: var(--shadow); height: 230px; scrollbar-width: thin; border: 6px solid var(--yellowed_paper);">
<ul class="m-0 pl-3" style="list-style-type: square; font-size: .9em;">
<li>Notes. This box scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Praesent et euismod enim, vel lobortis sapien.</li>
<li>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
<li>Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</li>
<li>Praesent et euismod enim, vel lobortis sapien.</li>
<li>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
<li>Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</li>
</ul>
</div>
</div>
</div>
<!-- quote -->
<div class="mt-2 mx-3" style="filter: drop-shadow(var(--shadow));">
<div style="border-image: url('//file.garden/aEjD46n85guLcmTI/layouts_p/ripped_paper.png') 10% fill; border-image-width: 15px; border-image-outset: 10px;">
<h3 class="m-2 py-3 px-2 text-center" style="font-family: times;">“ Quote. Two lines maximum. ”</h3>
</div>
</div>
</div>
<!-- ............................. FOUR -->
<div class="tab-pane fade" id="D">
<h1 class="mt-2 text-monospace font-weight-bold" style="border-bottom: 3px solid;">Relationships</h1>
<div id="carousel" data-ride="carousel" class="mx-2 carousel slide" style="background: url('//f2.toyhou.se/file/f2-toyhou-se/images/102813050_w2Zo3BBlGb7VhkI.png') var(--yellowed_paper); background-size: 200px; box-shadow: var(--shadow); border: 6px solid var(--yellowed_paper); position: relative; overflow: hidden;">
<!-- FLIP - controls -->
<a class="d-flex" href="#carousel" data-slide="next" style="position: absolute; top: 0; right: 0;color: inherit; z-index: 9;">
<b class="mr-n3 my-auto text-monospace" style="color: inherit;">Click me!</b>
<span class="d-block fa-fade" style="height: 35px; width: 35px; clip-path: polygon(0 0, 100% 100%, 100% 0); background: var(--relationship-button);"></span>
</a>
<!-- ................................... RELATIONSHIPS BELOW -->
<!--
You can add more pages to separate things like friend groups, family, etc
-->
<!-- ONE CHARACTER PAGE -->
<div data-interval="99999999" class="pt-5 pt-md-3 carousel-item active">
<div class="card border-0 d-block d-lg-flex" style="min-height: 550px; scrollbar-width: thin; background: none;"> <div class="p-2 overflow-auto" style="flex:1 1 0;">
<!-- image -->
<div class="mr-md-3 p-2 pb-4 float-md-left mx-auto" style="background: var(--white-pure); transform: rotate(-3deg); box-shadow: var(--shadow); width: 180px;">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 180px; filter: var(--saturation);" class="mb-2 w-100"></div>
</div>
<h1 class="mt-4 text-monospace text-center text-md-left" style="letter-spacing: 2px;">
<a style="color: inherit;" href="LINK"> Firstname Lastname </a>
</h1>
<h5 class="font-italic text-monospace text-center text-md-left" style="letter-spacing: 1px; color: var(--faded-text);">Relationship</h5>
<h5 class="text-center text-md-left" style="color: var(--faded-text);">
<!-- add -slash to the end of the heart to cross it out -->
<i class="fa-whiteboard fa-heart"></i>
<i class="fa-whiteboard fa-heart"></i>
<i class="fa-whiteboard fa-heart"></i>
<i class="fa-whiteboard fa-heart-slash"></i>
<i class="fa-whiteboard fa-heart-slash"></i>
</h5>
<p style="text-indent: 2em;">This is for important relationships. This box will eventually scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit.</p>
<p style="text-indent: 2em;">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
<h6 class="my-3 pl-3 text-monospace font-italic" style="border-left: 3px solid var(--faded-text);">
“A quote. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget.”
</h6>
</div></div>
</div>
<!-- MULTI-CHARACTER PAGE -->
<div data-interval="99999999" class="pt-5 pt-md-3 carousel-item">
<div class="card border-0 d-block d-lg-flex" style="min-height: 550px; scrollbar-width: thin; background: none;"> <div class="p-1 overflow-auto" style="flex:1 1 0;">
<!-- PERSON -->
<div class="mt-3 row no-gutters w-100">
<!-- image -->
<div class="pb-3 col-lg-auto mx-auto" style="background: var(--white-pure); transform: rotate(-3deg); box-shadow: var(--shadow); width: 100px; padding: .4em;">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 100px; filter: var(--saturation);" class="mb-2 w-100"></div>
</div>
<!-- bio -->
<div class="ml-md-3 p-1 col-lg"> <div class="pl-2 overflow-auto" style="border-left: 3px solid var(--faded-text); height: 121px; scrollbar-width: thin;">
<h5 class="mb-1 text-monospace" style="letter-spacing: 2px;">
<a style="color: inherit;" href="LINK"> Firstname Lastname </a>
</h5>
<p class="mb-1 text-monospace" style="color: var(--faded-text);">Relationship</p>
This box will eventually scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit.
</div> </div>
</div>
<!-- PERSON -->
<div class="mt-3 row no-gutters w-100">
<!-- image -->
<div class="pb-3 col-lg-auto mx-auto" style="background: var(--white-pure); transform: rotate(3deg); box-shadow: var(--shadow); width: 100px; padding: .4em;">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 100px; filter: var(--saturation);" class="mb-2 w-100"></div>
</div>
<!-- bio -->
<div class="ml-md-3 p-1 col-lg"> <div class="pl-2 overflow-auto" style="border-left: 3px solid var(--faded-text); height: 121px; scrollbar-width: thin;">
<h5 class="mb-1 text-monospace" style="letter-spacing: 2px;">
<a style="color: inherit;" href="LINK"> Firstname Lastname </a>
</h5>
<p class="mb-1 text-monospace" style="color: var(--faded-text);">Relationship</p>
This box will eventually scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit.
</div> </div>
</div>
<!-- PERSON -->
<div class="mt-3 row no-gutters w-100">
<!-- image -->
<div class="pb-3 col-lg-auto mx-auto" style="background: var(--white-pure); transform: rotate(-3deg); box-shadow: var(--shadow); width: 100px; padding: .4em;">
<div style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/106747553_vGEo5lNmdw9oMbW.png') center; background-size: cover; height: 100px; filter: var(--saturation);" class="mb-2 w-100"></div>
</div>
<!-- bio -->
<div class="ml-md-3 p-1 col-lg"> <div class="pl-2 overflow-auto" style="border-left: 3px solid var(--faded-text); height: 121px; scrollbar-width: thin;">
<h5 class="mb-1 text-monospace" style="letter-spacing: 2px;">
<a style="color: inherit;" href="LINK"> Firstname Lastname </a>
</h5>
<p class="mb-1 text-monospace" style="color: var(--faded-text);">Relationship</p>
This box will eventually scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit.
</div> </div>
</div>
<!-- add more above here - copy last two for best effect -->
</div></div>
</div>
<!-- ................................... RELATIONSHIPS ABOVE -->
</div>
</div>
</div> </div>
</div>
</div>
<!-- ........ CREDITS ........ -->
<a class="ml-4 mt-n2 p-2 d-block text-center" style="background: var(--pink); color: inherit; width: 60px; border-radius: 0 0 10px 10px;"
href="/SparklyCodes" data-toggle="tooltip" title="Code by SparklyCodes">
<i class="fa-lg fa-whiteboard fa-code"></i>
</a>
<!-- end credit -->
</div>
<!-- ............................. RIGHT - TAB BUTTONS -->
<div class="ml-md-n1 col-md-1 order-2 order-md-3" style="z-index: 9;">
<!-- DESKTOP TAB BUTTONS -->
<ul class="mt-2 mx-3 nav nav-pills row no-gutters w-100 hidden-md-up" style="margin-bottom: -.9em;">
<li class="col-auto nav-item"> <a style="background: var(--pink); color: inherit; font-size: 1.7em; border-radius: 5px 5px 0 0;" data-toggle="tab"
class="p-1 px-4 nav-link active tooltipster" title="Profile" href="#A"> <i class="fa-whiteboard fa-user"></i> </a> </li>
<li class="ml-1 col-auto nav-item"> <a style="background: var(--yellow); color: inherit; font-size: 1.7em; border-radius: 5px 5px 0 0;" data-toggle="tab"
class="p-1 px-4 nav-link tooltipster" title="Library" href="#B"> <i class="fa-whiteboard fa-envelope"></i> </a> </li>
<li class="ml-1 col-auto nav-item"> <a style="background: var(--green); color: inherit; font-size: 1.7em; border-radius: 5px 5px 0 0;" data-toggle="tab"
class="p-1 px-4 nav-link tooltipster" title="Trivia" href="#C"> <i class="fa-whiteboard fa-key"></i> </a> </li>
<li class="ml-1 col-auto nav-item"> <a style="background: var(--blue); color: inherit; 0; font-size: 1.7em; border-radius: 5px 5px 0 0;" data-toggle="tab"
class="p-1 px-4 nav-link tooltipster" title="Relationships" href="#D"> <i class="fa-whiteboard fa-share-nodes"></i> </a> </li>
</ul>
<!-- DESKTOP TAB BUTTONS -->
<ul class="mt-5 ml-n2 nav nav-pills flex-column hidden-sm-down">
<li class="nav-item"> <a style="background: var(--pink); color: inherit; font-size: 1.7em; border-radius: 0; clip-path: url(#paper_tab); height: 80px;" data-toggle="tab"
class="p-0 d-flex nav-link active tooltipster" title="Profile" href="#A"> <i class="ml-2 mt-4 fa-whiteboard fa-user"></i> </a> </li>
<li class="nav-item"> <a style="background: var(--yellow); color: inherit; border-radius: 0; font-size: 1.7em; clip-path: url(#paper_tab); height: 80px;" data-toggle="tab"
class="p-0 d-flex nav-link tooltipster" title="Library" href="#B"> <i class="ml-2 mt-4 fa-whiteboard fa-envelope"></i> </a> </li>
<li class="nav-item"> <a style="background: var(--green); color: inherit; border-radius: 0; font-size: 1.7em; clip-path: url(#paper_tab); height: 80px;" data-toggle="tab"
class="p-0 d-flex nav-link tooltipster" title="Trivia" href="#C"> <i class="ml-2 mt-4 fa-whiteboard fa-key"></i> </a> </li>
<li class="nav-item"> <a style="background: var(--blue); color: inherit; border-radius: 0; font-size: 1.7em; clip-path: url(#paper_tab); height: 80px;" data-toggle="tab"
class="p-0 d-flex nav-link tooltipster" title="Relationships" href="#D"> <i class="ml-2 mt-4 fa-whiteboard fa-share-nodes"></i> </a> </li>
</ul>
</div>
<!-- ............................. BOTTOM -->
<div class="p-1 col-lg-12 ml-auto align-items-center align-items-lg-start justify-content-between flex-column flex-lg-row order-4">
<div class="mt-3 mt-lg-0">
<!-- pen -->
<img src="//file.garden/aEjD46n85guLcmTI/layouts_p/pen_horizontal.png"
style="height: 40px; filter: drop-shadow( var(--shadow)); z-index: 1; transform: rotate(10deg); margin-top: -10px; margin-left: 30px;">
<!-- QUOTE -->
<div class="mt-2 ml-lg-5" style="filter: drop-shadow(var(--shadow)); max-width: 400px;">
<div style="transform: rotate(2deg); border-image: url('//file.garden/aEjD46n85guLcmTI/layouts_p/ripped_paper.png') 10% fill; border-image-width: 15px; border-image-outset: 10px;">
<h3 class="m-2 py-3 px-2 text-center" style="font-family: times;">“ Quote. Don't make it too long! Lorem ipsum dolor sit amet, consectetur adipiscing elit. ”</h3>
</div>
</div>
</div>
<!-- coffee -->
<img src="//file.garden/aEjD46n85guLcmTI/layouts_p/coffee.png"
style="width: 300px; filter: drop-shadow( var(--shadow)); z-index: 1; transform: rotate(180deg); margin-top: -60px;" class="hidden-md-down">
</div>
</div>
<!-- ============== VECTORS - DON'T TOUCH ============== -->
<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" viewBox="0 0 100 100">
<clipPath id="paper_tab">
<path d="M33.7,64.7L0,71.81V0l33.7,7.11c3.67.77,6.3,4.01,6.3,7.77v42.05c0,3.75-2.63,6.99-6.3,7.77Z"/>
</clipPath>
</svg>
<!-- ============== VECTORS END ============== -->