<!--Rules:
 
For the Coders Quarters September challenge: https://toyhou.se/~world/82691.coders-quarters/page/38775.september-challenge
 
You may 
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
 
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
 
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
 
Default colors:
-Headers, panel-headers: primary & bg-primary
-panel-header text, img. credits: text-white
 
-->
 
 
<div class="container" style="max-width:1000px">
    
    <div class="card mt-3 mb-1 p-3 bg-faded border-0 rounded-0" style="box-shadow: 0px 3px 4px rgba(0,0,0,0.5)">
        
        
        <!--header-->
        
        <div class="card bg-primary text-white border-0 rounded-0" style="box-shadow: 0px 3px 4px rgba(0,0,0,0.25)">
            <span class="mx-3 my-1" style="font-size:2em">
                <i class="fad fa-heart"></i> Name - age - pro/noun
            </span>
        </div>
        
        <!--end header-->
        
        
        <!--body-->
        
        <div class="row">
            
            
            <!--image(s)-->
            
            <div class="col-lg-4 mt-3">
                <div class="card border-0 rounded-0" style="
                    box-shadow: 0px 3px 4px rgba(0,0,0,0.25);
                    max-height:450px;
                    max-width:300px;
                    margin-left:auto;
                    margin-right:auto;
                    background-image:url(https://images.unsplash.com/photo-1523947204020-b03d6498b702?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1074&q=80);
                    background-position:center;
                    background-size:cover">
                    
                    <img src="https://via.placeholder.com/300px" style="
                        width:300px;
                        display:block;
                        margin-left:auto;
                        margin-right:auto;">
                        
                    
                    <!--BG credit-->
 
                    <a href="https://unsplash.com/photos/luanaxyvbpQ" data-toggle="tooltip" title="BG - unsplash" style="color:#ffffff;position:absolute;top:2px;left:10px;font-size:18px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
                    
                    <!--Image credit-->
 
                    <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:2px;left:40px;font-size:18px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-user"></i> </a>
                    
                </div>
            </div>
            
            <!--end image(s)-->
            
            
            <!--main info-->
            
            <div class="col-lg-8 mt-3">
                
                
                <!--navs-->
                
                <ul class="nav nav-tabs card-header-tabs row mb-3">
                    
                    <li class="col-12 col-sm-4 mt-2">
                        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#abt" role="button" style="box-shadow: 0px 3px 4px rgba(0,0,0,0.25)">
                            <i class="fas fa-user"></i> About
                        </a>
                    </li>
                    
                    <li class="col-12 col-sm-4 mt-2">
                        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#status" role="button" style="box-shadow: 0px 3px 4px rgba(0,0,0,0.25)">
                            <i class="fas fa-user"></i> Art Status
                        </a>
                    </li>
                    
                    <li class="col-12 col-sm-4 mt-2">
                        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#misc" role="button" style="box-shadow: 0px 3px 4px rgba(0,0,0,0.25)">
                            <i class="fas fa-user"></i> Misc.
                        </a>
                    </li>
                    
                </ul>
                
                <!--end navs-->
                
                
                <div class="tab-content">
                    
                
                <!--about-->
                    
                <div class="tab-pane active" id="abt">
                    
                    <div class="card-body p-2 border-0 rounded-0">
                        <p>This section will expand, but I suggest keeping it breif for the best look</p>
                    
                        <p>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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    </div>
                
                    <hr>
                
                    <!--socials!
                        if you want to change the icons to something else/a different site, go to fontawesome to see what else is there: https://fontawesome.com/-->
                    
                    <div style="text-align:center;letter-spacing:4px">
                        
                        <a href="#" data-toggle="tooltip" title="(empty link)" style="font-size:2em">
                            <i class="fab fa-tumblr"></i>
                        </a>
                        
                        <a href="#" data-toggle="tooltip" title="(empty link)" style="font-size:2em">
                            <i class="fab fa-twitter"></i>
                        </a>
                        
                        <a href="#" data-toggle="tooltip" title="(empty link)" style="font-size:2em">
                            <i class="fab fa-deviantart"></i>
                        </a>
                        
                        <a href="#" data-toggle="tooltip" title="(empty link)" style="font-size:2em">
                            <i class="fab fa-instagram"></i>
                        </a>
                        
                        <a href="#" data-toggle="tooltip" title="(empty link)" style="font-size:2em">
                            <i class="fas fa-address-card"></i>
                        </a>
                        
                    </div>
                    
                </div>
                
                <!--end about-->
                
                
                <!--status-->
                
                <div class="tab-pane fade" id="status">
                    
                    <div class="card-body p-2 border-0 rounded-0">
                            
                        <div class="row">
                            
                            <div class="col-6 mb-3">
                                <b>Requests</b>
                            </div>
                            <div class="col-6 mb-3">
                                (status)
                            </div>
                            
                            
                            <div class="col-6 mb-3">
                                <b>Trades</b>
                            </div>
                            <div class="col-6 mb-3">
                                (status)
                            </div>
                            
                            
                            <div class="col-6 mb-3">
                                <b>Commissions</b>
                            </div>
                            <div class="col-6 mb-3">
                                (status)
                            </div>
                        
                        </div>
                        
                        <hr class="my-2">
                        
                        <p>This section will expand, but I suggest keeping it breif for the best look</p>
                    
                        <p>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. Duis porta eros et velit blandit dapibus.</p>
                    </div>
                    
                </div>
                
                <!--end status-->
                
                
                <!--misc-->
                
                <div class="tab-pane fade" id="misc">
                    <div class="card-body p-2 border-0 rounded-0">
                        
                        <p class="my-2"> <i class='fad fa-circle'></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        
                        <p class="my-2"> <i class='fad fa-circle'></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        
                        <p class="my-2"> <i class='fad fa-circle'></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                        
                        <p class="my-2"> <i class='fad fa-circle'></i> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        
                    </div>
                </div>
                
                <!--end misc-->
                    
                </div>
                
                
            </div>
            
            <!--endmain info-->
            
            
        </div>
        
        <!--end body-->
        
        
    </div>
    
<!--Credit. You may move it, but please do not delete/remove-->
 
<p style="text-align:right">HTML by <a href="https://toyhou.se/12883060.-f2u-you-know" style="color:#"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
    
</div>