Stor8

<!--
    
    tiny card
    by sunxrice
    
    accent colors: #2b1e70, #f4f2ff
    use find and replace!
    
-->

<!-- pagedoll -->
<a style="height:200px; width:150px; position:fixed; bottom:0; z-index:1;
background:url(pagedolllink)
center no-repeat; background-size:contain"
class="tooltipster" title="pagedoll by" href="artistlink"></a>

<div class="container p-0 text-center" style="max-width:500px; font-size:0.9em">
    <div class="row no-gutters">
        
        <!-- side -->
        <div class="col-4 my-auto">
            
            <div class="mx-auto" style="height:90px; width:90px; 
            background:url(imglink) 
            center no-repeat; background-size:contain; border:3px solid #2b1e70; border-radius:50%"></div>
            
            <p class="mt-2 mb-0 text-uppercase" style="font-size:1.5em; font-weight:500">
                name
            </p>
            
            <p class="text-muted font-italic">short info</p>
            
        </div>
        <!-- /side -->
        
        <div class="col my-auto">
            
            <!-- main content -->
            <div class="bg-faded p-4" style="border-radius:2em">
                
                <p>short description, does not scroll.</p>
                
                <ul class="m-0 mt-3 ml-n3 text-left">
                    <li>list. use this for design notes or whatever idrc.</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
                
            </div>
            <!-- /main -->
            
            <!-- music player - by rctface
            replace the URL after embed/ with the letters and numbers string of your youtube video after "watch?v="
            -->
            <div class="p-1 mt-3">
                <p class="text-center m-0">
                    
                    <iframe frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;"
                    src="https://www.youtube.com/embed/URL"></iframe>
                    
                    <i class="fas fa-play-circle fa-lg mr-1" style="color:#2b1e70"></i>
                    
                    <span class="text-uppercase" style="font-weight:500">
                        title
                    </span>
                    -
                    <i class="text-lowercase">
                        artist
                    </i>
                    
                </p>
            </div>
            <!-- /music -->
            
        </div>
        
        <!-- palette - removable -->
        <div class="col-1 ml-3 flex-column" style="border-radius:2em; overflow:hidden">
            
            <div class="h-100" style="background-color:#222222"></div>
            <div class="h-100" style="background-color:#777777"></div>
            <div class="h-100" style="background-color:#aaaaaa"></div>
            <div class="h-100" style="background-color:#dddddd"></div>
            
            <!-- add more colors above this line-->
        </div>
        <!-- /palette -->
        
    </div>
    
    <!-- links -->
    <div class="p-3 px-5 my-4 justify-content-around" style="background-color:#2b1e70; border-radius:2em">
        
        <!-- link -->
        <a class="fas fa-palette tooltipster" style="color:#f4f2ff; text-decoration:none"
        title="reference sheet" href="reflink"></a>
        
        <!-- link -->
        <a class="fas fa-paintbrush-pencil tooltipster" style="color:#f4f2ff; text-decoration:none"
        title="artfight page" href="aflink"></a>
        
        <!-- link -->
        <a class="fas fa-hashtag tooltipster" style="color:#f4f2ff; text-decoration:none"
        title="tumblr tag" href="taglink"></a>
        
        <!-- link -->
        <a class="fas fa-list-music tooltipster" style="color:#f4f2ff; text-decoration:none"
        title="music player" href="https://toyhou.se/23601441.music-player-snippets-f2u"></a>
        
        <!-- credit -->
        <a class="fas fa-sun-haze tooltipster" style="color:#f4f2ff; text-decoration:none"
        title="code by sunxrice" href="https://toyhou.se/29236140.tiny-card"></a>
        
    </div>
    <!-- /links -->
    
</div>
<!-- end -->