DISSECTION [F2U] (CODE (V1))

<!------------------------------------------

    DISSECTION [F2U]
    
    BOOTSTRAP / ORIGINAL VERSION

------------------------------------------>

<div class="container p-0" style="max-width:500px; font-size:13px;">
<div class="card p-0 rounded-0 bg-dark">
        
    <!-- HEADER -->
    <div class="col-12 p-0">
        <div class="card rounded-0 border-0 p-1 bg-dark text-white">
            <span>
                <i class="fal fa-apple-whole fa-lg ml-1"></i>
                <span class="pull-right font-weight-bold mr-1" style="letter-spacing:1px; font-size:15px;"><em>
                    USERNAME / TITLE
                    </em>
                </span>
            </span>
        </div>
    </div>
    
    <!-- CONTENT BOX -->
    <div class="col-12 p-0">
        <div class="card rounded-0 border-0 bg-white p-1">
            <div class="row no-gutters">
                
                <div class="col-md-9 p-1">
                    
                    <!-- TOP HALF -->
                    <div class="row no-gutters">
                        
                        <!-- ICON -->
                        <div class="col-4">
                            <div class="card rounded-0 bg-dark" style="border-width:0px 1px 1px 0px;">
                                <div class="card p-1 bg-white rounded-0 border-0">
                                    <div class="card p-0 mx-auto mb-1 bg-dark" style="border-radius:100px;">
                                        <div class="card p-1 bg-white border-0" style="border-radius:100px;">
                                            <div class="card p-0 bg-dark" style="border-radius:100px;">
                                                <img class="rounded-circle" style="max-width:90px;"
                                                    src="https://64.media.tumblr.com/078740f73013b0f970f55131538c1562/cbcc0723212baebb-b1/s400x600/a8a30956a9015375f3e147d34209f487d0d3ea85.png">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- QUOTE -->
                        <div class="col-8 pl-2">
                            <div class="card rounded-0 border-0 h-100 justify-content-center text-center p-2 bg-dark text-white">
                                <b>LET'S PLAY MAIDEN DISSECTION!</b>
                                <i>Don't we all want some excitement to get our hearts pumping?</i>
                            </div>
                        </div>
                        
                    </div>
                    
                    <!-- BOTTOM HALF -->
                    <div class="col-12 p-0 pt-2">
                        <div class="card rounded-0 bg-dark">
                            <div class="card rounded-0 p-2 border-0 bg-white text-dark" style="height:200px; overflow:auto;">
                                <p>I wanna feel shame, just like I did on that night when I realized it's good as long as it hurts.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id suscipit lectus. Donec luctus elementum nisi sed egestas. Praesent in ante sed elit condimentum gravida. Maecenas sit amet ipsum tincidunt arcu efficitur tincidunt vel id magna. Duis tincidunt eros et dapibus laoreet. Aliquam erat volutpat. Proin et ex arcu. Morbi maximus non elit vitae cursus. Maecenas in dui in lectus pharetra pellentesque. Cras ultrices mauris ac ante pharetra consequat. Sed quis pulvinar purus. Ut et ullamcorper magna. Phasellus a augue non lorem commodo consectetur id eget ex. Nulla facilisi. Proin volutpat diam at urna rhoncus sollicitudin. Praesent eu nisi ut elit ullamcorper vulputate.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SOCIALS -->
                    <div class="col-12 p-0">
                        <div class="row no-gutters pt-2">
                            
                            <!-- BUTTON -->
                            <div class="col mr-1 bg-secondary">
                                <a href="#" class="btn btn-outline-primary rounded-0 border-0 w-100" style="color:#fff; font-size:13px;">
                                    <i class="fa-brands fa-deviantart"></i>
                                </a>
                            </div>
                            
                            <!-- BUTTON -->
                            <div class="col mr-1 bg-secondary">
                                <a href="#" class="btn btn-outline-primary rounded-0 border-0 w-100" style="color:#fff; font-size:13px;">
                                    <i class="fa-brands fa-twitter"></i>
                                </a>
                            </div>
                            
                            <!-- BUTTON -->
                            <div class="col mr-1 bg-secondary">
                                <a href="#" class="btn btn-outline-primary rounded-0 border-0 w-100" style="color:#fff; font-size:13px;">
                                    <i class="fa-brands fa-tumblr"></i>
                                </a>
                            </div>
                            
                            <!-- BUTTON; TOOLTIPSTER. -->
                            <div class="col mr-1 bg-secondary">
                                <div class="btn btn-outline-primary rounded-0 border-0 w-100 tooltipster" title="name#000" data-placement="top" style="color:#fff; font-size:13px;">
                                    <i class="fa-brands fa-discord"></i>
                                </div>
                            </div>
                            
                            <!-- YOU CAN ADD MORE ABOVE HERE. MAXIMUM OF 7. -->
                            
                            <!-- LAST BUTTON; please note the removal of "mr-1" in its class. -->
                            <div class="col bg-secondary">
                                <a href="#" class="btn btn-outline-primary rounded-0 border-0 w-100" style="color:#fff; font-size:13px;">
                                    <i class="fas fa-id-card"></i>
                                </a>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
                
                <!-- RIGHT COLUMN -->
                <div class="col-md-3 col-12 p-1">
                    
                    <!-- IMAGE -->
                    <div class="card h-100 rounded-0 bg-dark" style="min-height:150px;
                        background-image:url(https://64.media.tumblr.com/d553d964288509817d3deade1b279008/070087842cb99f42-6a/s540x810/541abb06bfd77c29e0326912c8c63e6e727b7b89.gifv);
                        background-size:cover;
                        background-position:center;"></div>
                    
                </div>
                
            </div>
        </div>
    </div>
    
    <!-- FOOTER -->
    <div class="col-12 p-0">
        <div class="card rounded-0 border-0 p-1 bg-dark text-white">
            <span class="text-right">
                <a href="/itemlabel" class="text-light"><i class="fa-regular fa-code fa-sm mr-1"></i></a>
                <span class="pull-left ml-1" style="font-size:14px;"><em>
                    age / prns / etc.
                    </em>
                </span>
            </span>
        </div>
    </div>
        
</div>
</div>