DISSECTION [F2U] (CODE (V2))

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

    DISSECTION [F2U]
    
    BOOTSTRAP / VERTICAL VERSION

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

<div class="container p-0" style="max-width:400px; 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-light">
            <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 p-1 bg-white">
            <div class="row no-gutters">
                
                <!-- TOP PIECE -->
                <div class="col-12 p-1">
                    
                    <!-- TOP HALF -->
                    <div class="row no-gutters">
                        
                        <!-- ICON -->
                        <div class="col-3">
                            <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:65px;"
                                                    src="https://i1.sndcdn.com/artworks-0YaZ31ZXq80W9AFt-PYvEow-t500x500.jpg">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- QUOTE -->
                        <div class="col-9 pl-2">
                            <div class="card rounded-0 border-0 h-100 justify-content-center text-center p-2 bg-dark text-light">
                                <b>Sorry for calling you so early;</b>
                                <i>I must've woken you up, huh?</i>
                                <i> Are you up to chat right now?</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 border-0 bg-white text-dark p-2" style="height:200px; overflow:auto;">
                                <p>I had a dream where you fell in love with somebody else; please tell me it's not true. C'mon, love me please?</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 text-white" style="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 text-white" style="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 text-white" style="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 text-white" title="name#000" data-placement="top" style="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 text-white" style="font-size:13px;">
                                    <i class="fas fa-id-card"></i>
                                </a>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
                
                <!-- BOTTOM PIECE -->
                <div class="col-12 p-1">
                    
                    <div class="card rounded-0 bg-dark">
                        <!-- IMAGE -->
                        <div class="card rounded-0 border-0 w-100" style="height:150px; 
                            background-image:url(https://64.media.tumblr.com/d02fef17b0e6a3653b4ff775924c6f74/tumblr_plnw6fSMKy1wxe23ho4_500.gifv);
                            background-size:cover;
                            background-position:center;"></div>
                        </div>
                    
                </div>
                
            </div>
        </div>
    </div>
    
    <!-- FOOTER -->
    <div class="col-12 p-0">
        <div class="card rounded-0 border-0 bg-dark p-1 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>