F2U - Ribbon Box

ribbons by MisterMuse / GRAVEWALKER

Code by PURPURC4T

Box of Ribbons!

<!-- RIBBON BOX START -->
<!--
    You can change the position of the entire box by modifying:
        bottom: 0px
        right: 0px
    Changing right to left, bottom to top, and the amount of pixels, will change the position.
    Any position you choose should still work!
    I recommend changing "right" to "left" if you are using this on a user profile.
    
    Colors:
        background: bg-faded
        text: text-secondary
        links: text-primary
    
    Here is a list of usable colors, their equivalent in each theme, as well as how they look put together: 
        https://toyhou.se/7850218.bootstrap-color-combos
        
    Icons usable in codes:
        https://fontawesome.com/search
        
    More rows can be added through simple copy-pasting.
    Code will disappear on mobile.
    Feel free to remove all/some of this blabber if you don't need it!
-->
<div class="hidden-xs-down d-flex" 
style="flex-direction:column; margin:32px 20px; position:fixed; bottom:0px; right:0px;">
    <div class="text-secondary bg-faded collapse" id="ribboncollapsible"
    style="width:300px; border: thin solid; border-radius:5px; position:relative; top:4px; z-index:2">
        <div class="d-flex" style="padding:10px 18px 10px 18px; justify-content:center; flex-wrap: wrap">
        <!-- ROW 1 -->
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
        <!-- ROW 2 -->
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
            <img class="tooltipster" title="Placeholder"
            style="margin:2px 3px"
            src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"
            >
        <!-- END -->
        </div>
        <div class="d-flex" style="padding:0px 10px 10px 10px; font-size:75%; justify-content:center; align-items: center; flex-direction: column;">
            <div>
                <i>
                    ribbons by 
                    <!-- Copy paste this to add additional credits -->
                    <a class="text-primary" href="https://toyhou.se/4739396.ribbons/18416441.muses-character-ribbons">
                        MisterMuse
                    </a>
                    <!-- Copy paste end -->
                    /
                    <a class="text-primary" href="https://toyhou.se/14924009.ribbons-i-ve-made">
                        GRAVEWALKER
                    </a>
                </i>
            </div>
            <!-- CREDIT -->
            <!-- You can move/modify this but please don't remove it! -->
            <div style="font-size: 75%; font-style: italic">
                <a class="text-primary" href="https://toyhou.se/PURPURC4T/characters/folder:5324801">
                    Code by PURPURC4T
                </a>
            </div>
            <!-- CREDIT END -->
        </div>
    </div>
    <a 
    style="width:300px; padding:10px 20px; justify-content: center; border: thin solid; z-index:4"
    class="bg-faded text-secondary d-flex btn rounded-0" href="#ribboncollapsible" data-toggle="collapse" aria-expanded="false" aria-controls="ribboncollapsible">
        <i class="fa-duotone fa-award" style="margin-right:5px; position:relative; top:4px;"></i>
        
        Box of Ribbons!
        
        <i class="fa-duotone fa-award" style="margin-left:5px; position:relative; top:4px;"></i>
    </a>
</div>
<!-- RIBBON BOX END -->