Stor8

<!-----------------------------------------------------------------------------------------
F U N   F A C T !
> default version / custom accent
                                                                        f2u code by skysong

c o l o r   p a l e t t e
main bg         bg-faded
main text       default, unspecified
main accent     #848bb2 (borders, icon bg, linked text)
aes color 1     #b0b7da
aes color 2     #d6dbf4
aes color 3     #ecefff (icon color)

(ctrl + f to change)

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/33690294.12-fun-fact

things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
 
------------------------------------------------------------------------------------------->

<div class="mx-auto" style="max-width:450px;">

<!-------------------------------------------------------------------------- [ TOP ROW ] -->
<div class="d-flex">

<!--BLURB-->
    <div class="bg-faded mr-3 px-2 py-1" style="max-height:180px; overflow:scroll; flex:1; z-index:2; margin-bottom:-40px; border-radius:5px; border:1px solid #848bb2; border-top:30px solid #848bb2">
    A short blurb, quote, or something else(?) This box will scroll, but looks best if it doesn't.
    </div>

<!--ICON BOX-->
    <div class="align-items-center justify-content-center" style="width:150px; height:150px; border-radius:5px; background:#848bb2; color:#ecefff">
    <!--ICON-->
        <i class="fa fa-sparkle fa-6x"></i>
        <!--[ fa-___ | replace with the icon of your choice ]-->
    </div>

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

<!----------------------------------------------------------------------- [ BOTTOM ROW ] -->
<div class="d-flex mt-3">
    
<!--AES COLORS-->
    <div class="mr-3 flex-column" style="flex:1; margin-top:30px; border-radius:5px; overflow:hidden;">
    <!--[ background:#___ | replace with your colors ]-->
    <!--COLOR 1-->
        <div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#ecefff"></div>
    <!--COLOR 2-->
        <div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#d6dbf4"></div>
    <!--COLOR 3-->
        <div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#b0b7da"></div>
    <!--MAIN COLOR-->
        <div style="flex:1; background:#848bb2"></div>
    </div>


<!--CONTENT-->
    <div class="bg-faded p-2" style="flex:6; min-height:400px; border-radius:5px; border:1px solid #848bb2; border-top:50px solid #848bb2">
    <ul class="pl-4">
        <li>List your trivia! Or headcanons! Or whatever!</li>
        <li>Really, they can take any form you like, it's just bullet points by default.</li>
        <li>This box will expand to fit your content</li>
        <li>You can also have subitems! (the bullet styling is automatic)</li>
            <ul class="pl-4">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
            </ul>
        <li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
        <li>Donec accumsan tempor lacus</li>
        <li>You can also change the style of the bullet! More info <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" style="color:#848bb2">here</a>.</li>
        <li>Remember to close all the tags</li>
        <li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
    </ul>
    </div>

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

<!--------------------------------------------------------------------- [ CODE CREDITS ] -->
<div class="mt-2 text-center">

<!--[ do not edit!! ]-->
<a class="text-muted" href="https://toyhou.se">
<i class="text-muted fa fa-clouds-sun tooltipster" data-placement="right" title="code by sky"></i>

</a></div>

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