Stor8

<!-----------------------------------------------------------------------------------------
P A L E T T E
                                                                        f2u code by skysong

c o l o r   p a l e t t e
#d4af83 #ecdfc5 #fef3e5 #75739f #463e63
    unlabeled because tbh they're all over the place

r e s o u r c e s
icons           https://fontawesome.com/
TH colors       https://toyhou.se/7850218.bootstrap-color-combos
TH fonts        https://toyhou.se/23372355.fonts
editing         https://th.circlejourney.net/#
img hosting     https://freeimage.host/
code link       https://toyhou.se/34704285.13-palette

things to edit (that aren't text/colors)- if you're not customizing more- should be marked in brackets with instructions on what to change
 
------------------------------------------------------------------------------------------>
<div class="container mx-auto pb-sm-3" style="max-width:900px; color:#463e63">
<div class="row">

<!--------------------------------------------------------------------------- [ ROW 1 ] -->
<div class="col-12 order-sm-1 m-sm-0 mb-2">
<div class="row ml-sm-2 mb-sm-2" style="height:80px;">

<!---------------------------------------------------------------------- [ MAIN IMAGE ] -->
<div class="col-sm-3 card rounded-0 border-0 mr-sm-4 mb-2 p-sm-2 p-0" style="height:200px; z-index:5">
<div class="h-100 w-100" style="position:relative;">

<!--IMAGE-->
    <div class="h-100 w-100" style="background:url(https://placehold.co/400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border:solid #d4af83; border-width:1px 1px 3px 3px"></div>
    <!--[ background:url(EDITHERE) | replace with image URL ]-->

<!--CREDITS-->
    <div class="align-items-center justify-content-center" style="width:35px; height:35px; position:absolute; bottom:0; left:0; border-radius: 0 20px 0 0; background:#75739f; ">
    <!--LINK-->
        <a href="https://toyhou.se/" class="tooltipster" style="color:#fef3e5" data-placement="right" title="artist">
        <!--[ href="EDITHERE" | replace with credit link ]-->
        <!--[ title="EDITHERE" | replace with artist name ]-->
    <!--ICON-->
        <i class="fal fa-paintbrush fa-flip-horizontal"></i>
    </a></div>


</div> <!--end image container-->
</div> <!--end main image-->

<!------------------------------------------------------------------- [ COLOR PALETTE ] -->
<div class="mt-sm-2 col-sm-7 card rounded-0 border-0 p-sm-2 p-0" style="height:80px; z-index:5; overflow-y:hidden;">
<div class="h-100 w-100 d-flex">

<!--COLOR-->
    <div class="align-items-end p-1" style="flex:1; background:#d4af83; color:#463e63">
    <span>#d4af83</span>
    </div>

<!--COLOR-->
    <div class="align-items-end p-1" style="flex:1; background:#ecdfc5; color:#463e63">
    <span>#ecdfc5</span>
    </div>

<!--COLOR-->
    <div class="align-items-end p-1" style="flex:1; background:#fef3e5; color:#463e63">
    <span>#fef3e5</span>
    </div>

<!--COLOR-->
    <div class="align-items-end p-1" style="flex:1; background:#75739f; color:#fef3e5">
    <span>#75739f</span>
    </div>

<!--COLOR-->
    <div class="align-items-end p-1" style="flex:1; background:#463e63; color:#fef3e5">
    <span>#463e63</span>
    </div>

</div> <!--end color palette container-->
</div> <!--end color palette-->

<!---------------------------------------------------------------------------------------->
</div></div> <!--end row 1-->

<!--MOBILE SPACER-->
    <div class="order-2 d-sm-block d-md-none w-100 mb-2" style="height:200px"></div>

<!--------------------------------------------------------------------------- [ ROW 2 ] -->
<div class=" order-sm-2 order-4 col-12">
<div class="row mt-sm-n3 mt-2" style="height:500px;">

<!------------------------------------------------------------------------- [ TAB NAV ] -->
<div class="order-sm-1 order-2 col-sm-3 col-4 card rounded-0 border-0 mt-sm-5 mb-sm-5 m-sm-0 mr-2 p-sm-2 p-0">
<div class="h-100 flex-column mb-sm-5">

<!--COLOR BLOCK-->
    <div class="mt-sm-5 mb-1" style="height:30px; background:#463e63"></div>

<div class="align-items-center justify-content-center" style="flex:1; font-size:16px; background:#75739f; color:#fef3e5">
<ul class="nav flex-column">

<!--DESIGN TAB LINK-->
    <li class="nav-item">
    <!--LINK-->
        <a data-target="#design" class="nav-link active p-0" style="cursor:pointer" data-toggle="tab">
    <!--COLOR-->
        <i class="fa fa-square mr-3" style="color:#d4af83"></i>
    <!--LABEL-->
        <span class="float-right">#<b>design</b></span>
    </a></li>

<!--DIVIDER-->
    <li class="my-2" style="height:1px; background:#463e63">
    
<!--DETAILS TAB LINK-->
    <li class="nav-item">
    <!--LINK-->
        <a data-target="#details" class="nav-link p-0" style="cursor:pointer" data-toggle="tab">
    <!--COLOR-->
        <i class="fa fa-square mr-3" style="color:#ecdfc5"></i>
    <!--LABEL-->
        <span class="float-right">#<b>details</b></span>
    </a></li>

<!--DIVIDER-->
    <li class="my-2" style="height:1px; background:#463e63">
    
<!--TRIVIA TAB LINK-->
    <li class="nav-item">
    <!--LINK-->
        <a data-target="#trivia" class="nav-link p-0" style="cursor:pointer" data-toggle="tab">
    <!--COLOR-->
        <i class="fa fa-square mr-3" style="color:#fef3e5"></i>
    <!--LABEL-->
        <span class="float-right">#<b>trivia</b>
    </a></li>

<!--DIVIDER-->
    <li class="my-2" style="height:1px; background:#463e63">
    
<!--CODE CREDITS-->
    <!--[ do not edit!! (color is fine as long as it's readable) ]-->
    <li class="nav-item">
    <!--LINK-->
        <a href="https://toyhou.se/34704285.13-palette" class="nav-link p-0" style="cursor:pointer; color:#fef3e5">
    <!--COLOR-->
        <i class="fa fa-square mr-3" style="color:#463e63"></i>
    <!--LABEL-->
        <span class="float-right">#<b>code</b>
    </a></li>
    
    
</ul> <!--end nav links-->
</div> <!--end tab nav container-->

<!--COLOR BLOCK-->
    <div class="align-items-center mt-1 mb-sm-5 mb-2" style="height:30px; background:#463e63;"></div>

</div></div> <!--end tab nav-->

<!-------------------------------------------------------------------- [ MAIN CONTENT ] -->
<div class="order-sm-2 order-3 col card p-0 rounded-0 border-0 mt-sm-3 mb-2" style="height:500px; background:#fef3e5;">
<div class="h-100" style="position:relative;">

<!--FAKE SCROLLBAR-->
    <div class="h-100 pr-2 pt-2" style="position:sticky; top:0; float:right;">
    <div style="height:40%; width:5px; border-radius:3px; background:#75739f"></div>
    </div>

<div class="h-100 tab-content pb-sm-3 pr-sm-0 pr-2">

<!-------------------------------------------------------------------- [ DESIGN TAB ] -->
<div id="design" class="tab-pane fade active show h-100 px-sm-5 py-sm-4 p-2" style="overflow:scroll; scrollbar-width:none;" role="tabpanel">

<!--REF-->
    <img src="https://placehold.co/400x200?text=placeholder">
    <!--[ src="EDITHERE" | replace with image URL ]-->
    <!--[ for vertical images, it might be better to extend the image until it's square or horizontal so that it isn't ridiculously huge ]-->
    <!--CREDITS-->
        <p class="text-right"><i>art by
        <!--LINK-->
            <a href="https://toyhou.se" style="color:#75739f">artist</a>
            <!--[ href="EDITHERE" | replace with credit link ]-->
        </i></p>

<!--HEADING-->
    <div class="mt-4 d-flex">
    <!--COLOR-->
        <div class="mr-2" style="width:5px; background:#75739f"></div>
    <!--TEXT-->
        <h2 class="m-0" style="font-weight:bold">DESIGN NOTES</h2>
    </div>

<!--COLOR GUIDE-->
    <div class="d-md-flex mt-1 ml-3 mb-3">
    <!--MANDATORY-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#463e63"></i>
        <!--LABEL-->
            mandatory
        </div>
    <!--OPTIONAL-->
        <div class="ml-md-3">
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#75739f"></i>
        <!--LABEL-->
            opt.
        </div>
    <!--EXTRA-->
        <div class="ml-md-3">
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#d4af83"></i>
        <!--LABEL-->
            extra
        </div>
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#d4af83"></i>
    <!--CONTENT-->
        Design notes!!
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#75739f"></i>
    <!--CONTENT-->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#463e63"></i>
    <!--CONTENT-->
        Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#75739f"></i>
    <!--CONTENT-->
        Donec accumsan tempor lacus, et venenatis elit feugiat non.
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#463e63"></i>
    <!--CONTENT-->
        Duis porta eros et velit blandit dapibus.
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#463e63"></i>
    <!--CONTENT-->
        Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#d4af83"></i>
    <!--CONTENT-->
        Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    </div>

<!--NOTE-->
    <div>
    <!--COLOR-->
        <i class="fa fa-square mr-1" style="color:#75739f"></i>
    <!--CONTENT-->
        Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    </div>

</div> <!--end design tab-->

<!-------------------------------------------------------------------- [ DETAILS TAB ] -->
<div id="details" class="tab-pane fade h-100 px-sm-5 py-sm-4 p-2" style="overflow:scroll; scrollbar-width:none;" role="tabpanel">

<!--SUMMARY-->
    <p>An optional summary of the character. This could also be a quote space or something like that. Lorem ipsum dolor sit amet.</p>

<!--HEADING-->
    <div class="d-flex mt-4 mb-2">
    <!--COLOR-->
        <div class="mr-2" style="width:5px; background:#75739f"></div>
    <!--TEXT-->
        <h2 class="m-0" style="font-weight:bold">HEADING</h2>
    </div>

<!--CONTENT-->
    <!--PARAGRAPH-->
        <p class="mt-1 mb-0">
        Text! This tab can be used for personality details, backstory, both, or something else.
        </p>
    <!--PARAGRAPH-->
        <p class="mt-1 mb-0">
        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.
        </p>

<!--SUBHEADING-->
    <div class="d-flex mt-4 mb-2">
    <!--COLOR-->
        <div class="mr-2" style="width:5px; background:#75739f"></div>
    <!--TEXT-->
        <h4 class="m-0">SUBHEADING</h4>
    </div>

<!--CONTENT-->
    <!--PARAGRAPH-->
        <p class="mt-1 mb-0">
        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>

<!--SUBHEADING-->
    <div class="d-flex mt-4 mb-2">
    <!--COLOR-->
        <div class="mr-2" style="width:5px; background:#75739f"></div>
    <!--TEXT-->
        <h4 class="m-0">SUBHEADING</h4>
    </div>

<!--CONTENT-->
    <!--PARAGRAPH-->
        <p class="mt-1 mb-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
        </p>

</div> <!--end details tab-->

<!-------------------------------------------------------------------- [ TRIVIA TAB ] -->
<div id="trivia" class="tab-pane fade h-100 px-sm-5 py-sm-4 p-2" style="overflow:scroll; scrollbar-width:none;" role="tabpanel">

<!--TRIVIA LIST-->
    <!--TRIVIA-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Trivia / fun facts!
        </div>
    <!--TRIVIA-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    <!--TRIVIA-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
        </div>
    <!--TRIVIA-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Donec accumsan tempor lacus, et venenatis elit feugiat non.
        </div>

<!--STATS-->
    <div class="mt-4">
    <!--CONFIDENCE-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            CONFIDENCE
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            <!--[ change between fa and fal for filled and empty squares ]-->
            </div>
        </div>
    <!--CREATIVITY-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            CREATIVITY
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            </div>
        </div>
    <!--HONESTY-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            HONESTY
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            </div>
        </div>
    <!--HUMOR-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            HUMOR
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            </div>
        </div>
    <!--INTELLIGENCE-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            INTELLIGENCE
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            </div>
        </div>
    <!--KINDNESS-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            KINDNESS
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            </div>
        </div>
    <!--PATIENCE-->
        <div class="d-flex align-items-center">
        <!--LABEL-->
            <div style="flex:1; overflow:hidden; text-overflow:ellipsis; color:#75739f">
            PATIENCE
            </div>
        <!--ICONS-->
            <div>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fal fa-square"></i>
            <i class="fal fa-square"></i>
            </div>
        </div>
    </div> <!--end stats-->

<!--HEADING-->
    <div class="d-flex mt-4 mb-2">
    <!--COLOR-->
        <div class="mr-2" style="width:5px; background:#75739f"></div>
    <!--TEXT-->
        <h2 class="m-0" style="font-weight:bold">LIKES</h2>
    </div>

<!--LIKES LIST-->
    <!--LIKE-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square-check mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    <!--LIKE-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square-check mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
        </div>
    <!--LIKE-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square-check mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Donec accumsan tempor lacus, et venenatis elit feugiat non.
        </div>

<!--HEADING-->
    <div class="d-flex mt-4 mb-2">
    <!--COLOR-->
        <div class="mr-2" style="width:5px; background:#75739f"></div>
    <!--TEXT-->
        <h2 class="m-0" style="font-weight:bold">DISLIKES</h2>
    </div>

<!--DISLIKES LIST-->
    <!--LIKE-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square-xmark mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    <!--LIKE-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square-xmark mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
        </div>
    <!--LIKE-->
        <div>
        <!--COLOR-->
            <i class="fa fa-square-xmark mr-1" style="color:#d4af83"></i>
        <!--CONTENT-->
            Donec accumsan tempor lacus, et venenatis elit feugiat non.
        </div>

</div> <!--end trivia tab-->

<!---------------------------------------------------------------------------------------->
</div> <!--end tab content-->
</div> <!--end main content container-->
</div> <!--end main content-->

<!----------------------------------------------------- [ SIDE IMG + BASICS CONTAINER ] -->
<div class="order-sm-3 order-1 col-sm-3 mt-sm-5 ml-sm-2 p-0">
<div class="row">

<!------------------------------------------------------------------------ [ SIDE IMG ] -->
<div class="order-sm-1 order-2 col-12">
<div class="d-flex flex-sm-column m-sm-0 mb-2" style="height:300px;">

<!--COLOR BLOCK-->
    <div class="d-none d-md-block mb-1" style="flex:1; background:#75739f"></div>

<!--SIDE IMG AREA-->
    <div style="flex:5; position:relative">
    <!--IMAGE-->
        <div class="h-100" style="background:url(https://placehold.co/400?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; border:solid #75739f; border-width:3px 3px 1px 1px"></div>
    <!--CREDITS-->
        <div class="align-items-center justify-content-center" style="position:absolute; top:0; right:0; width:35px; height:35px; border-radius: 0 0 0 20px; background:#d4af83;">
        <!--LINK-->
            <a href="https://toyhou.se/" class="tooltipster" style="color:#463e63" data-placement="left" title="artist">
            <!--[ href="EDITHERE" | replace with credit link ]-->
            <!--[ title="EDITHERE" | replace with artist name ]-->
        <!--ICON-->
            <i class="fal fa-paintbrush"></i>
        </a></div>
    </div>

<!--MOBILE COLOR BLOCK-->
    <div class="d-block d-md-none h-100 ml-2 " style="flex:1; background:#75739f"></div>
    
</div> <!--end side img-->
</div>

<!-------------------------------------------------------------------------- [ BASICS ] -->
<div class="order-sm-2 order-1 col-12 card rounded-0 border-0 mt-sm-n3 ml-sm-n4 mr-sm-3 mb-sm-0 mb-2 p-sm-2" style="height:270px;">
<div class="h-100 w-100 p-2" style="overflow:scroll; scrollbar-width:none; position:relative; background:#ecdfc5;">

<!--FAKE SCROLLBAR-->
    <div class="h-100" style="position:sticky; top:0; float:right">
    <div class="mb-1" style="height:40%; width:5px; border-radius:3px; background:#75739f"></div>
    </div>

<!--NAME-->
    <div class="d-flex align-items-stretch">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-id-card fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Something
        <!--LABEL-->
            <div style="color:#75739f">
            [ name ]</div>
        </div>
    </div>

<!--NICKNAME-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-signature fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Thing
        <!--LABEL-->
            <div style="color:#75739f">
            [ nickname ]</div>
        </div>
    </div>

<!--SPECIES-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-user fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Creature
        <!--LABEL-->
            <div style="color:#75739f">
            [ species ]</div>
        </div>
    </div>

<!--AGE-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-cake-candles fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>0 years
        <!--LABEL-->
            <div style="color:#75739f">
            [ age ]</div>
        </div>
    </div>

<!--BIRTHDAY-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-calendar fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>1 Jan
        <!--LABEL-->
            <div style="color:#75739f">
            [ birthday ]</div>
        </div>
    </div>

<!--PRONOUNS-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-comments fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Any/all
        <!--LABEL-->
            <div style="color:#75739f">
            [ pronouns ]</div>
        </div>
    </div>

<!--NICKNAME-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-venus-mars fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Yes
        <!--LABEL-->
            <div style="color:#75739f">
            [ gender ]</div>
        </div>
    </div>

<!--ORIENTATION-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-heart fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Ramen
        <!--LABEL-->
            <div style="color:#75739f">
            [ orientation ]</div>
        </div>
    </div>

<!--OCCUPATION-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-suitcase fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Unemployed
        <!--LABEL-->
            <div style="color:#75739f">
            [ occupation ]</div>
        </div>
    </div>

<!--STATUS-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-sparkle fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>Alive; dead inside
        <!--LABEL-->
            <div style="color:#75739f">
            [ status ]</div>
        </div>
    </div>

<!--THEME-->
    <div class="d-flex align-items-stretch mt-2">
    <!--ICON-->
        <div class="mr-2 px-2 align-items-center" style="border-radius:5px; background:#75739f; color:#fef3e5">
        <i class="fa fa-music fa-fw"></i>
        </div>
    <!--TEXT-->
        <div>The Logarithim Song
        <!--LABEL-->
            <div style="color:#75739f">
            [ theme ]</div>
        </div>
    </div>

</div> <!--end basics container-->
</div> <!--end basics-->

<!---------------------------------------------------------------------------------------->
</div></div> <!--end side img/basics container-->
</div></div> <!--end row 2-->

<!--MOBILE SPACER-->
    <div class="order-5 d-sm-block d-md-none w-100" style="height:590px"></div>

<!--------------------------------------------------------------------------- [ ROW 3 ] -->
<div class="col-12 order-sm-3 order-3"><div class="row">

<!--MOBILE SPACER-->
    <div class="col-sm"></div>

<!---------------------------------------------------------------------------- [ TAGS ] -->
<div class="col-sm-6 card rounded-0 border-0 mt-sm-n2 mr-sm-n4 p-0 p-sm-2">
<div class="h-100 w-100 d-flex flex-wrap p-1" style="font-weight:bold; background:#ecdfc5">

<!--TAG-->
    <div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; background:#d4af83">
    # tag !!</div>
<!--TAG-->
    <div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; background:#d4af83">
    # they resize themselves</div>
<!--TAG-->
    <div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; background:#d4af83">
    # 2 rows is best</div>
<!--TAG-->
    <div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; background:#d4af83">
    # but more works</div>

</div> <!--end tags container-->
</div> <!--end tags-->

<!---------------------------------------------------------------------------------------->
<!--MOBILE SPACER-->
    <div class="col-sm-4"></div>

</div></div> <!--end row 3-->

<!---------------------------------------------------------------------------------------->
</div></div> <!--end everything-->