Stor8

<!--
    
    world works
    by sunxrice
    
-->

<div class="container">
    
    <!-- title -->
    <h1 style="font-family:courier new; font-size:3em; font-weight:600">
        <a class="text-muted" style="font-size:0.8em; font-weight:300; text-decoration:none" href="mainworldpage">worldname /</a> WORKS
        <i class="fal fa-pencil fa-xs"></i>
    </h1>
    <!-- /title -->
    
    <!-- quote / tagline -->
    <blockquote class="my-3 text-muted" style="font-family:courier new; font-size:1.2em; font-style:italic">
        All works relating to the story of worldname, in whatever order.
    </blockquote>
    <!-- /quote -->
    
    <!-- badge key - these are just the colors and keywords i've defined for myself, feel free to make your own
        
        -primary    - type (art, writing, ...)
        -success    - what site it's on
        -danger     - content information / warnings
    
    -->
    <div class="card p-2 text-center">
        <p class="justify-content-around">
            
            <span class="badge badge-primary">art</span>
            <span class="badge badge-primary">writing</span>
            <span class="badge badge-primary">post</span>
            
            <span class="badge badge-success">site</span>
            
            <span class="badge badge-danger">non-canon</span>
            
        </p>
    </div>
    <!-- /badge -->
    
    <hr>
    
    <!-- list -
        when adding more headings, make sure all ids in any given section match!
            in <a>  : href="#id" aria-controls="id"
            in <div>: id="id"
        
        for more info:
        https://getbootstrap.com/docs/4.0/components/collapse/
    -->
    
    <!-- section -->
    
    <!-- heading -->
    <h1 class="mt-3 mb-0" style="font-family:courier new; font-size:2em; font-weight:600">
        <a data-toggle="collapse" role="button" href="#section-1" aria-expanded="true" aria-controls="section-1">
            section 1
            <i class="fal fa-star fa-xs"></i>
        </a>
    </h1>
    <!-- /heading -->
    
    <p class="text-justify mb-0">explain this section or whatever. this description is not part of the collapsible. 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.</p>
    
    <!-- works -->
    <div class="collapse show" id="section-1"><ul class="mt-2 mb-0">
        
        <!-- work -->
        <li>
            <!-- name -->
            <a class="mr-2" href="worklink">
                title
            </a>
            <!-- /name -->
            
            <!-- badges -->
            <span class="badge badge-primary">type</span>
            <span class="badge badge-success">site</span>
            <span class="badge badge-danger">content</span>
            <!-- /badges -->
        </li>
        <!-- /work -->
        
        <!-- work -->
        <li>
            <!-- name -->
            <a class="mr-2" href="worklink">
                title
            </a>
            <!-- /name -->
            
            <!-- badges -->
            <span class="badge badge-primary">type</span>
            <span class="badge badge-success">site</span>
            <span class="badge badge-danger">content</span>
            <!-- /badges -->
        </li>
        <!-- /work -->
        
        <!-- add more works above this line -->
    </ul></div>
    <!-- /works -->
    
    <!-- /section -->
    
    <!-- section -->
    
    <!-- heading -->
    <h1 class="mt-3 mb-0" style="font-family:courier new; font-size:2em; font-weight:600">
        <a data-toggle="collapse" role="button" href="#section-2" aria-expanded="true" aria-controls="section-2">
            section 2
            <i class="fal fa-star fa-xs"></i>
        </a>
    </h1>
    <!-- /heading -->
    
    <!-- works -->
    <div class="collapse show" id="section-2"><ul class="mt-2 mb-0">
        
        <!-- work -->
        <li>
            <!-- name -->
            <a class="mr-2" href="worklink">
                title
            </a>
            <!-- /name -->
            
            <!-- badges -->
            <span class="badge badge-primary">type</span>
            <span class="badge badge-success">site</span>
            <span class="badge badge-danger">content</span>
            <!-- /badges -->
        </li>
        <!-- /work -->
        
        <!-- work -->
        <li>
            <!-- name -->
            <a class="mr-2" href="worklink">
                title
            </a>
            <!-- /name -->
            
            <!-- badges -->
            <span class="badge badge-primary">type</span>
            <span class="badge badge-success">site</span>
            <span class="badge badge-danger">content</span>
            <!-- /badges -->
        </li>
        <!-- /work -->
        
        <!-- add more works above this line -->
    </ul></div>
    <!-- /works -->
    
    <!-- /section -->
    
    <!-- section -->
    
    <!-- heading -->
    <h1 class="mt-3 mb-0" style="font-family:courier new; font-size:2em; font-weight:600">
        <a data-toggle="collapse" role="button" href="#section-3" aria-expanded="true" aria-controls="section-3">
            section 3
            <i class="fal fa-star fa-xs"></i>
        </a>
    </h1>
    <!-- /heading -->
    
    <!-- works -->
    <div class="collapse show" id="section-3"><ul class="mt-2 mb-0">
        
        <!-- work -->
        <li>
            <!-- name -->
            <a class="mr-2" href="worklink">
                title
            </a>
            <!-- /name -->
            
            <!-- badges -->
            <span class="badge badge-primary">type</span>
            <span class="badge badge-success">site</span>
            <span class="badge badge-danger">content</span>
            <!-- /badges -->
        </li>
        <!-- /work -->
        
        <!-- work -->
        <li>
            <!-- name -->
            <a class="mr-2" href="worklink">
                title
            </a>
            <!-- /name -->
            
            <!-- badges -->
            <span class="badge badge-primary">type</span>
            <span class="badge badge-success">site</span>
            <span class="badge badge-danger">content</span>
            <!-- /badges -->
        </li>
        <!-- /work -->
        
        <!-- add more works above this line -->
    </ul></div>
    <!-- /works -->
    
    <!-- /section -->
    
    <!-- add more sections above this line -->
    
    <p class="text-center mt-2"><a class="fal fa-sun-haze fa-width-auto btn btn-outline-secondary text-primary border-0 p-2 tooltipster" title="code by sunxrice" href="https://toyhou.se/34473552.world-works"></a></p>
</div>
<!-- end -->