Stor8

<!--
    
    crossroads
    by sunxrice
    
    accent colors: #8b9c7f (primary), #eeeeee (secondary)
    use find and replace!
    
-->

<!-- header -->
<div class="container" style="max-width:800px">
    <div class="row no-gutters">
        
        <!-- img -->
        <div class="col-sm-4 px-2 my-2">
            <img class="h-100" src="imglink">
        </div>
        <!-- /img -->
        
        <!-- info -->
        <div class="col-sm-8 px-2 my-auto">
            
            <h1 style="font:3em georgia">
                DIRECTORY<i style="color:#8b9c7f">!</i>
            </h1>
            
            <p>info about the directory or something</p>
            
            <ul class="mt-2 mb-0">
                <li>or put the info in a list if you want</li>
            </ul>
            
        </div>
        <!-- /info -->
        
        <!-- buttons -->
        
        <!-- button -->
        <div class="col-sm-3 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">all characters</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-3 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">sales folder</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-3 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">resources</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-3 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">codes</a>
        </div>
        <!-- /button -->
        
    </div>
</div>
<!-- /header -->

<hr class="my-4" style="border-width:2px 0 0 0; border-color:#8b9c7f; border-style:dashed">

<!-- folders -->
<div class="container" style="max-width:600px">
    
    <!-- folder -->
    <div class="row no-gutters my-5">
        
        <!-- img -->
        <div class="col-sm-4 p-5 my-2" style="
        background-image:url(imglink);
        background-position:center; background-size:cover"></div>
        <!-- /img -->
        
        <!-- info -->
        <div class="col-sm-8 pl-4 pr-2 my-3">
            
            <h1 class="m-0 justify-content-between" style="font:2em georgia">
                TITLE
                
                <span class="far fa-house-night fa-fw" style="color:#8b9c7f"></span>
                
            </h1>
            
            <p><i style="color:#8b9c7f">
                    main/wip status
                    <span class="far fa-pipe mx-1"></span>
                    genre
                    <span class="far fa-pipe mx-1"></span>
                    age rating
                </i>
                
                <br>
                
                <b class="text-muted">
                    <span class="far fa-warning"></span>
                    content warnings.
                </b>
            </p>
            
            <p>VERY short info.</p>
            
        </div>
        <!-- /info -->
        
        <!-- buttons -->
        
        <!-- button -->
        <div class="col-sm-4 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">characters</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-4 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">world page</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-4 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">tag</a>
        </div>
        <!-- /button -->
        
        <!-- /buttons -->
        
    </div>
    <!-- /folder -->
    
    <!-- folder -->
    <div class="row no-gutters my-5">
        
        <!-- img -->
        <div class="col-sm-4 p-5 my-2" style="
        background-image:url(imglink);
        background-position:center; background-size:cover"></div>
        <!-- /img -->
        
        <!-- info -->
        <div class="col-sm-8 pl-4 pr-2 my-3">
            
            <h1 class="m-0 justify-content-between" style="font:2em georgia">
                TITLE
                
                <span class="far fa-house-night fa-fw" style="color:#8b9c7f"></span>
                
            </h1>
            
            <p><i style="color:#8b9c7f">
                    main/wip status
                    <span class="far fa-pipe mx-1"></span>
                    genre
                    <span class="far fa-pipe mx-1"></span>
                    age rating
                </i>
                
                <br>
                
                <b class="text-muted">
                    <span class="far fa-warning"></span>
                    content warnings.
                </b>
            </p>
            
            <p>VERY short info.</p>
            
        </div>
        <!-- /info -->
        
        <!-- buttons -->
        
        <!-- button -->
        <div class="col-sm-4 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">characters</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-4 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">world page</a>
        </div>
        <!-- /button -->
        
        <!-- button -->
        <div class="col-sm-4 px-2 py-1">
            <a class="btn btn-block p-2 rounded-0" style="color:#eeeeee; background-color:#8b9c7f; font:1.2em georgia"
            href="btnlink">tag</a>
        </div>
        <!-- /button -->
        
        <!-- /buttons -->
        
    </div>
    <!-- /folder -->
    
    <!-- put more folders above this line -->
</div>

<p class="text-center mb-n2"><a class="far fa-sun-haze tooltipster" style="color:#8b9c7f; text-decoration:none" title="code by sunxrice" href="https://toyhou.se/30323204.crossroads"></a></p>

<hr class="my-4" style="border-width:2px 0 0 0; border-color:#8b9c7f; border-style:dashed">
<!-- end -->