Stor8

<!--
    
    thin line
    by sunxrice
    
    accents -
        color   : #6e7cef
        icon    : fa-star
    
    use find and replace!
    
-->

<div class="container p-0" style="max-width:700px">
    
    <div class="row no-gutters">
        
        <!-- profile content -->
        <div class="col-12 col-sm mr-0 mr-sm-3">
            
            <!-- separator -->
            <div class="align-items-center">
                <hr class="flex-fill" style="border-color:#6e7cef">
                <i class="fal fa-star mx-2" style="color:#6e7cef"></i>
                <hr class="flex-fill" style="border-color:#6e7cef">
            </div>
            <!-- /separator -->
            
            <!-- section 01 - basic info -->
            <div class="row my-2 text-center">
                
                <!-- image -->
                <div class="col-sm-6" style="
                background-image:url(imglink);
                background-size:contain; background-position:center; background-repeat:no-repeat"></div>
                <!-- /image -->
                
                <!-- text -->
                <div class="col-sm-6 px-5 py-3">
                    
                    <p class="my-0" style="color:#6e7cef; font-size:2em; font-weight:500">
                        NAME!!!
                    </p>
                    
                    <p class="mt-n1 text-muted" style="font-size:1.2em; letter-spacing:2px">
                        <span class="mx-2">info</span>
                        <span class="mx-2">info</span>
                        <span class="mx-2">info</span>
                    </p>
                    
                    <p>
                        profile text. keep it short. or don't, i don't care. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
                    </p>
                    
                </div>
                <!-- /text -->
                
            </div>
            <!-- /section 01 -->
            
            <!-- separator -->
            <div class="align-items-center">
                <hr class="flex-fill" style="border-color:#6e7cef">
                <i class="fal fa-star mx-2" style="color:#6e7cef"></i>
                <hr class="flex-fill" style="border-color:#6e7cef">
            </div>
            <!-- /separator -->
            
            <!-- section 02 - extra info -->
            <div class="row my-2 text-justify">
                
                <!-- readme -->
                <div class="col-sm">
                    
                    <p>explain things idk. 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>
                    
                    <ul class="pl-4 my-2">
                        <li>put info in this list or whatever.</li>
                        <li class="text-muted" style="font-size:0.8em; list-style-type:none">extra explanation.</li>
                        <li>content <b class="text-muted">with bold</b> for emphasis.</li>
                        <li>long content. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
                    </ul>
                    
                </div>
                <!-- /readme -->
                
                <!-- art etc -->
                <div class="col-sm-5 ml-sm-3 mt-3 mt-sm-0">
                    
                    <!-- info box -->
                    <div class="p-1 mb-3" style="border:1px #6e7cef solid">
                        
                        <!-- info -->
                        <p class="my-0 justify-content-between align-items-center">
                            commissions
                            <span class="badge badge-success px-1">open</span>
                        </p>
                        <!-- /info -->
                        
                        <!-- info -->
                        <p class="my-0 justify-content-between align-items-center">
                            trades
                            <span class="badge badge-warning px-1">ask</span>
                        </p>
                        <!-- /info -->
                        
                        <!-- info -->
                        <p class="my-0 justify-content-between align-items-center">
                            requests
                            <span class="badge badge-danger px-1">closed</span>
                        </p>
                        <!-- /info -->
                        
                    </div>
                    <!-- /info box -->
                    
                    <p>explain things idk. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                    <ul class="pl-4 my-2">
                        <li>put info in this list or whatever.</li>
                        <li class="text-muted" style="font-size:0.8em; list-style-type:none">extra explanation.</li>
                        <li>content <b class="text-muted">with bold</b> for emphasis.</li>
                        <li>content</li>
                    </ul>
                    
                </div>
                <!-- /art -->
                
            </div>
            <!-- /section 02 -->
            
            <!-- separator -->
            <div class="align-items-center">
                <hr class="flex-fill" style="border-color:#6e7cef">
                <i class="fal fa-star mx-2" style="color:#6e7cef"></i>
                <hr class="flex-fill" style="border-color:#6e7cef">
            </div>
            <!-- /separator -->
            
        </div>
        <!-- /profile -->
        
        <!-- links sidebar -->
        <div class="col-12 col-sm-1 p-2 mt-3 mt-sm-0 text-center flex-row flex-sm-column justify-content-around align-items-center" style="background-color:#6e7cef">
            
            <!-- onsite links -->
            
            <!-- link -->
            <a class="text-white p-2 fas fa-folder-open tooltipster" style="text-decoration:none"
            title="folder" href="folderlink"></a>
            
            <!-- link -->
            <a class="text-white p-2 fas fa-folder-open tooltipster" style="text-decoration:none"
            title="folder" href="folderlink"></a>
            
            <!-- offsite links -->
            
            <!-- link -->
            <a class="text-white p-2 fas fa-id-card tooltipster" style="text-decoration:none"
            title="site" href="sitelink"></a>
            
            <!-- link -->
            <a class="text-white p-2 fas fa-id-card tooltipster" style="text-decoration:none"
            title="site" href="sitelink"></a>
            
            <!-- link -->
            <a class="text-white p-2 fas fa-id-card tooltipster" style="text-decoration:none"
            title="site" href="sitelink"></a>
            
            <!-- credits -->
            
            <!-- code credit -->
            <a class="text-white p-2 fas fa-sun-haze tooltipster" style="text-decoration:none"
            title="code by sunxrice" href="https://toyhou.se/33518237.thin-line"></a>
            
        </div>
        <!-- /links -->
        
    </div>
    
</div>
<!-- end -->