HTMLCustom ColorsMiscellaneous
Line Count: 102
Difficulty:
Copy


<!-- TITLE (start); delete if unwanted -->
<h1 class="display-4 text-center mb-3" style="font-weight:600;">
    Tier List Title
</h1>
<!-- TITLE (end) -->


<!-- TIERLIST CONTAINER (start) -->
<div class="mx-auto">

    <!-- TIERLIST (start) -->
    <div class="p-0 border-bottom-0" style="border:1px solid #000; background:#1A1A17;">
        
        <!-- TIER: S -->
        <div class="row no-gutters" style="border-bottom:1px solid #000;">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid #000; font-size:1.1em;
                color:#000;
                background:#FF7F7F;">
                S
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>
                    
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>
                
            </div>
            
        </div>
        
        
        <!-- TIER: A -->
        <div class="row no-gutters" style="border-bottom:1px solid #000;">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid #000; font-size:1.1em;
                color:#000;
                background:#FFBF7F;">
                A
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>

            </div>
            
        </div>
        
        
        <!-- TIER: B -->
        <div class="row no-gutters" style="border-bottom:1px solid #000;">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid #000; font-size:1.1em;
                color:#000;
                background:#FFDF7F;">
                B
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>

            </div>
            
        </div>
        
        
        <!-- TIER: C -->
        <div class="row no-gutters" style="border-bottom:1px solid #000;">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid #000; font-size:1.1em;
                color:#000;
                background:#FFFF7F;">
                C
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>

            </div>
            
        </div>
        
        
        <!-- TIER: D -->
        <div class="row no-gutters" style="border-bottom:1px solid #000;">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid #000; font-size:1.1em;
                color:#000;
                background:#bfff7f;">
                D
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>
                    
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>
                    
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>
                
            </div>
            
        </div>
        
        
        <!-- TIER: F -->
        <div class="row no-gutters" style="border-bottom:1px solid #000;">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid #000; font-size:1.1em;
                color:#000;
                background:#7FFF7F;">
                F
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">

                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    border:1px solid #fff;
                    background:url('https://blocks.astratic.com/img/general-img-portrait.png');
                    background-size:cover;
                    background-position:center;"></div>
                
            </div>
            
        </div>
    
    </div>
    <!-- TIERLIST (end) -->
    
    
    <!-- CREDITS (do not remove!) -->
    <div class="text-right">
        <span class="tooltipster" title="code by dragon-heist"><a href="toyhou.se/dragon-heist" style="text-decoration:none;"><i class="fa-solid fa-code"></i></a></span>
    </div>
    <!-- CREDITS (end) -->

</div>
<!-- TIERLIST CONTAINER (end) -->
Copy


<!-- TITLE (start); delete if unwanted -->
{{?Include Title?
<h1 class="display-4 text-center mb-3" style="font-weight:600;">
    {{!Title!}}
</h1>
?end?}}
<!-- TITLE (end) -->

<!-- TIERLIST CONTAINER (start) -->
<div class="mx-auto">

    <div class="p-0 border-bottom-0" style="border:1px solid {{c!Border Color!}}; background:{{c!Row Background Color!}};">
        
        <!-- TIER: S -->
        {{%Tier Row%
        <div class="row no-gutters" style="border-bottom:1px solid {{c!Border Color!}};">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid {{c!Border Color!}}; font-size:1.1em;
                color:{{c!Border Color!}};
                background:{{c%Tier Label Color%}};">
                {{%Label%}}
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                {{%Object%
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    {{?Image Border?border:1px solid {{c%Image Border Color%}};?end?}}
                    background:url('{{u%Image URL%}}');
                    background-size:cover;
                    background-position:center;"></div>
                %end%}}
            </div>
            
        </div>
        %end%}}
        
    </div>

    <!-- CREDITS (do not remove!) -->
    <div class="text-right">
        <span class="tooltipster" title="code by dragon-heist"><a href="toyhou.se/dragon-heist" style="text-decoration:none;"><i class="fa-solid fa-code"></i></a></span>
    </div>
    <!-- CREDITS (end) -->

</div>
<!-- TIERLIST CONTAINER (end) -->
Copy


<!-- TITLE (start); delete if unwanted -->
{{?Include Title?
<h1 class="display-4 text-center mb-3" style="font-weight:600;">
    {{!Title!}}
</h1>
?end?}}
<!-- TITLE (end) -->

<!-- TIERLIST CONTAINER (start) -->
<div class="mx-auto">

    <div class="p-0 border-bottom-0" style="border:1px solid {{!Border Color!}}; background:{{!Row Background Color!}};">
        
        <!-- TIER: S -->
        {{%Tier Row%
        <div class="row no-gutters" style="border-bottom:1px solid {{!Border Color!}};">
            
            <!-- TIER LABEL -->
            <div class="align-items-center justify-content-center" style="width:100px; min-height:80px; border-right:1px solid {{!Border Color!}}; font-size:1.1em;
                color:{{!Border Color!}};
                background:{{%Tier Label Color%}};">
                {{%Label%}}
            </div>
            
            <!-- TIER ITEMS -->
            <div class="col d-flex flex-wrap">
                
                {{%Object%
                <!-- IMAGE THUMBNAIL -->
                <div style="width:100px; height:80px;
                    {{?Image Border?border:1px solid {{%Image Border Color%}};?end?}}
                    background:url('{{u%Image URL%}}');
                    background-size:cover;
                    background-position:center;"></div>
                %end%}}
            </div>
            
        </div>
        %end%}}
        
    </div>

    <!-- CREDITS (do not remove!) -->
    <div class="text-right">
        <span class="tooltipster" title="code by dragon-heist"><a href="toyhou.se/dragon-heist" style="text-decoration:none;"><i class="fa-solid fa-code"></i></a></span>
    </div>
    <!-- CREDITS (end) -->

</div>
<!-- TIERLIST CONTAINER (end) -->

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.