<!--Rules:
 
Light Vers.
 
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, links: #cc5776
-Card background: rgba(255,255,255,0.90)
-Footer/credit-section background: #fcf4f6
-Text: text-dark
-Header text: text-white
 
Change the colors: Ctrl+f and search for the color you want to change. 
 
-->
 
 
<!--background
 
you can delete the bg if you don't need it-->
 
<div style="
    background-image:url(https://images.unsplash.com/photo-1606219411833-8abd2f112b50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    z-index:-20;
    height:100%;
    width:100%;
    position:absolute;
    left:0px;
    right:0px;
    top:0;
    bottom:0;
    margin-top:-15px;
    min-height:695px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);background-color:rgba(255,255,255,0.9)">
</div>
 
<!--end background-->
 
 
<div class="container" style="max-width:900px">
    
    
    <!--Main info & socials-->
    
    <div class="card border-0 rounded-0 my-3 text-dark" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(255,255,255,0.9)">
        
        <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
            <i class="fa-solid fa-heart"></i> Name - Pro/Noun - misc.
        </h2>
        
        <div class="row">
            
            <!--Profile blurb-->
            <div class="col-12 col-sm-7 col-lg-8 order-2 order-md-1">
                <div class="card-body table-responsive p-3" style="max-height:250px">
                    <p>Have a lot of info? This section will scroll</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt elit non velit bibendum, egestas ullamcorper mauris efficitur. Integer viverra mauris a nunc vestibulum vestibulum. Aliquam cursus, tortor vitae tincidunt convallis, purus risus imperdiet leo, nec eleifend lectus nibh vitae lacus.</p>
                    
                    <p>Phasellus euismod venenatis ante, a rhoncus urna luctus quis. Nullam vehicula euismod nunc sed malesuada.</p>
                    
                    
                    
                </div>
            </div>
            
            <!--Image-->
            <div class="col-12 col-sm-5 col-lg-4 order-1 order-md-2">
                <div class="card border-0 bg-transparent rounded-0" style="height:250px;
                    background-image:url(https://via.placeholder.com/250px);
                    background-size:cover;
                    background-position:top;
                    background-repeat:none;
                    ">
                    
                    <!--image credit(s)-->
                    
                    <p style="position:absolute;top:3px;right:4px;letter-spacing:3px">
                        <a href="#" class="text-white" data-toggle="tooltip" title="Character - " style="font-size:16px;text-shadow: 0px 1px 3px #000000">
                        <i class="fas fa-user"></i>
                        </a>
                        
                        <a href="#" class="text-white" data-toggle="tooltip" title="img - credit"  style="font-size:16px;text-shadow: 0px 1px 3px #000000">
                        <i class="fas fa-image"></i>
                        </a>
                    </p>
                    
                </div>
            </div>
            
        </div>
        
        
        <!--Socials-->
        
        <div class="card border-0 p-2" style="border-radius:0px;text-align:center;font-size:20px;letter-spacing:15px;background-color:#fcf4f6">
            <p>
                
                
                <a href="#" style="color:#cc5776" data-toggle="tooltip" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
                
                <a href="#" style="color:#cc5776" data-toggle="tooltip" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
                
                <a href="#" style="color:#cc5776" data-toggle="tooltip" title="DeviantArt"><i class="fa-brands fa-deviantart"></i></a>
                
                <a href="#" style="color:#cc5776" data-toggle="tooltip" title="Tumblr"><i class="fa-brands fa-tumblr"></i></a>
                
                <a href="#" data-toggle="tooltip" style="color:#cc5776" title="Artfight"><i class="fa-solid fa-paintbrush-pencil"></i></a>
                
                <a href="#" data-toggle="tooltip" style="color:#cc5776" title="Carrd"><i class='fa-solid fa-address-card'></i></a>
                
            </p>
            
        </div>
    </div>
    
    <!--end Main info & socials-->
    
    
    <!--Stats & Misc Notes-->
    
    <div class="row">
        
        <div class="col-12 col-md-6 mb-3">
            <div class="card border-0 rounded-0 mb-3 h-100 text-dark" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(255,255,255,0.9)">
                <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
                    <i class="fa-duotone fa-chart-pie"></i> Status
                </h2>
                <div class="card-body p-3">
                    
                    <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>
                    
                    A tl:dr of what you're working on, or if you're taking a break, busy with life stuff, etc. Both these sections will expand btw
                    
                </div>
            </div>
        </div>
        
        <div class="col-12 col-md-6 mb-3">
            <div class="card border-0 rounded-0 mb-3 h-100 text-dark" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(255,255,255,0.9)">
                <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
                    <i class="fa-duotone fa-sparkles"></i> Misc notes
                </h2>
                <div class="card-body p-3">
                    <p><i class="fa fa-dot-circle"></i> Extra info a la profile CWs, fun facts about yourself, what is and isn't for offers, and so on
                    </p>
                    
                    <p><i class="fa fa-dot-circle"></i> I would recommend not putting revealing info here though. Safety first yunno
                    
                    <p><i class="fa fa-dot-circle"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    </p>
                    
                </div>
            </div>
        </div>
    </div>
    
    <!--end Stats & Misc Notes-->
    
    
    <!--Featured Characters-->
    
    <div class="card border-0 rounded-0 my-3 text-dark" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(255,255,255,0.9)">
        <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
            <i class="fa-duotone fa-user-group"></i> Featured Characters
        </h2>
        
        <div class="card-body p-3">
            
            <!--Optional CW:
            Copy-paste this on the featured character card in the image section:
            
            <span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="Content Warning"><i class="fas fa-exclamation-triangle"></i> </span>
 
            -->
            
            <div class="row">
                
                <!--Character 1-->
                <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
                    <div class="card border-0 rounded-0" style="
                        background-color:#cc5776;
                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
                        
                        <div class="card bg-transparent border-0 rounded-0" style="
                        height:200px;
                        background-image:url(https://via.placeholder.com/250);
                        background-size:cover;
                        background-position:center">
                            
                            <!--content warning goes here-->
                            <span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="CW - (warnings)"><i class="fas fa-exclamation-triangle"></i> </span>
                            
                        </div>
                        
                        <div class="card-body p-1" style="font-size:1.4em;text-align:center">
                            <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
                            
                        </div>
                    </div>
                </div>
                
                
                <!--Character 2-->
                <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
                    <div class="card border-0 rounded-0" style="
                        background-color:#cc5776;
                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
                        
                        <div class="card bg-transparent border-0 rounded-0" style="
                        height:200px;
                        background-image:url(https://via.placeholder.com/250);
                        background-size:cover;
                        background-position:center">
                            
                            <!--content warning goes here-->
                            
                        </div>
                        
                        <div class="card-body p-1" style="font-size:1.4em;text-align:center">
                            <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
                            
                        </div>
                    </div>
                </div>
                
                
                <!--Character 3-->
                <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
                    <div class="card border-0 rounded-0" style="
                        background-color:#cc5776;
                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
                        
                        <div class="card bg-transparent border-0 rounded-0" style="
                        height:200px;
                        background-image:url(https://via.placeholder.com/250);
                        background-size:cover;
                        background-position:center">
                            
                            <!--content warning goes here-->
                            
                        </div>
                        
                        <div class="card-body p-1" style="font-size:1.4em;text-align:center">
                            <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
                            
                        </div>
                    </div>
                </div>
                
                
                <!--Character 4-->
                <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
                    <div class="card border-0 rounded-0" style="
                        background-color:#cc5776;
                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
                        
                        <div class="card bg-transparent border-0 rounded-0" style="
                        height:200px;
                        background-image:url(https://via.placeholder.com/250);
                        background-size:cover;
                        background-position:center">
                            
                            <!--content warning goes here-->
                            
                        </div>
                        
                        <div class="card-body p-1" style="font-size:1.4em;text-align:center">
                            <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
                            
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
        
    </div>
    
    <!--end Featured Characters-->
    
    
    <!--Credit. You may move, but please don't remove-->
    
    <p class="p-1 text-dark" style="text-align:right;box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:#fcf4f6;margin:auto">HTML by <a href="https://toyhou.se/15783806" style="color:#cc5776"><i class='fa fa-heart'></i> Jade-Everstone</a> // bg - <a href="https://unsplash.com/photos/H4ui9lt7GRE" style="color:#cc5776">Unsplash</a></p>
    
    <hr style="visibility:hidden">
    
</div>