<!--Rules:
 
For the Coders Quarters August challenge: https://toyhou.se/~world/82691.coders-quarters/page/36197.august-challenge
Moodboard & colors provided by Togo: https://toyhou.se/Togo
 
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:
-Text, borders, image bgs: #3c6598
-Header Gradient: #3c6598, #87dadb
-Box color: #e9decf
-Header text, Credit: text-white
 
-->
 
<div class="container py-3" style="max-width:800px">
    
    <!--basic info-->
    
    <!--header-->
    
    <div class="card text-white mb-2 p-2 rounded-0" style="
        border-color:#3c6598;
        border-width:2px;
        background-color:#3c6598;
        background-image: linear-gradient(to right, #3c6598, #87dadb);
        background-size:cover;
        background-position:center;
        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
        
        <p style="font-size:2em;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
            <i class="fas fa-water"></i> Character Name 
        </p>
        
    </div>
    
    
    <div class="row">
        
        <!--image-->
            
        <div class="col-12 col-lg-5 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:275px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1616359289401-a26aaf72490c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=502&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="https://unsplash.com/photos/kynvS_nv3Ww" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image-->
        
        
        <!--info-->
            
        <div class="col-12 col-lg-7 mb-2 h-100">
            <div class="card rounded-0" style="
                min-height:200px;
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="card-body p-3">
                    
                    <!--breif info-->
                    
                    <span style="font-weight:bold"> <i class="fas fa-tint"></i> Gender</span>
                    <span class="pull-right faded">Text</span>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <span style="font-weight:bold"> <i class="fas fa-tint"></i> Race/Species</span>
                    <span class="pull-right faded">Text</span>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <span style="font-weight:bold"> <i class="fas fa-tint"></i> Birthday</span>
                    <span class="pull-right faded">Text</span>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <span style="font-weight:bold"> <i class="fas fa-tint"></i> Title</span>
                    <span class="pull-right faded">Text</span>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <span style="font-weight:bold"> <i class="fas fa-tint"></i> Title</span>
                    <span class="pull-right faded">Text</span>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <hr style="visibility:hidden">
                    
                    <!--about-->
                    
                    <p>Have a lot of info? This section will expand!</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>
            </div>
        </div>
        
        <!--end info-->
        
    </div>
    
    <!--end basic info-->
    
    
    <!--backstory-->
    
    <!--header-->
    
    <div class="card text-white mb-2 p-2 rounded-0" style="
        border-color:#3c6598;
        border-width:2px;
        background-color:#3c6598;
        background-image: linear-gradient(to left, #3c6598, #87dadb);
        background-size:cover;
        background-position:center;
        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
        
        <p style="font-size:2em;text-align:right;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
            Backstory <i class="fas fa-water"></i>
        </p>
        
    </div>
    
    <div class="row">
        
        <!--text-->
        
        <div class="col-12 col-lg-8 mb-2">
            <div class="card rounded-0" style="
                min-height:200px;
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="card-body p-3">
                    
                    <p>Have a lot of info? This section will expand!</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>
                    
                    <span style="font-weight:bold"> <i class="fas fa-tint"></i> (sub-header)</span>
                    <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
                    
                    <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>
                    
                    <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>
            </div>
        </div>
        
        <!--end text-->
        
        
        <!--image-->
        
        <div class="col-12 col-lg-4 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:275px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1624813532831-74373324d26b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="https://unsplash.com/photos/vAwrYUEewok" data-toggle="tooltip" title="img - Unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image-->
        
    </div>
    
    <!--end story-->
    
    
    <!--Misc. info-->
    
    <!--header-->
    
    <div class="card text-white mb-2 p-2 rounded-0" style="
        border-color:#3c6598;
        border-width:2px;
        background-color:#3c6598;
        background-image: linear-gradient(to right, #3c6598, #87dadb);
        background-size:cover;
        background-position:center;
        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
        
        <p style="font-size:2em;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
            <i class="fas fa-water"></i> Misc. info
        </p>
        
    </div>
    
    <div class="row">
        
        <!--trivia-->
        
        <div class="col-12 col-lg-6 mb-2">
            <div class="card rounded-0 h-100" style="
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="card-body p-3">
                    
                    <p><i class="fas fa-tint"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    
                    <p><i class="fas fa-tint"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    
                    <p><i class="fas fa-tint"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    
                </div>
            </div>
        </div>
        
        <!--end trivia-->
        
        
        <!--playlist-->
        
        <div class="col-12 col-lg-6 mb-2">
            <div class="card rounded-0 h-100" style="
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="card-body p-3" style="font-size:1.25em">
                    
                    <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
                    <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
                    
                    <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
                    <br>
                    
                </div>
            </div>
        </div>
        
        <!--end playlist-->
        
    </div>
    
    <!--end Misc. info-->
    
    
    <!--Relationships-->
    
    <!--header-->
    
    <div class="card text-white mb-2 p-2 rounded-0" style="
        border-color:#3c6598;
        border-width:2px;
        background-color:#3c6598;
        background-image: linear-gradient(to left, #3c6598, #87dadb);
        background-size:cover;
        background-position:center;
        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
        
        <p style="font-size:2em;text-align:right;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
            Relationships <i class="fas fa-water"></i>
        </p>
        
    </div>
    
    <div class="row">
            
        <!--image-->
        
        <div class="col-12 col-lg-3 mb-2 order-2 order-lg-1">
            
            <div class="card rounded-0 h-100" style="
                min-height:250px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1516638489986-0c17c234db55?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="https://unsplash.com/photos/uk-no6Yv91g" data-toggle="tooltip" title="img - Unsplash" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image-->
        
        
        <div class="col-12 col-lg-9 mb-2 order-1 order-lg-2">
            
            
            <!--Relationship 1-->
            
            <div class="card rounded-0 mb-2" style="
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="row no-gutters">
                    
                    <!--charapic-->
                    
                    <div class="col-12 col-sm-2 col-md-3">
                        <div class="card border-0 rounded-0" style="max-width:150px;margin-left:auto;margin-right:auto;background-color:#3c6598">
                            
                            <img src="https://i.imgur.com/EMT3io6.png">
                            
                        </div>
                    </div>
                    
                    <!--notes-->
                    
                    <div class="col-12 col-sm-10 col-md-9">
                        <div class="card-body p-2">
                            <a href="#" style="color:#3c6598;font-weight:bold"> <i class="fas fa-tint"></i> Character Name</a>
                            <span class="pull-right faded">relationship</span>
                            <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
                            
                            <p>A few notes. This section will expand, but for the best look keep it I suggest keeping it breif</p>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!--end Relationship 1-->
            
            
            <!--Relationship 2-->
            
            <div class="card rounded-0 mb-2" style="
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="row no-gutters">
                    
                    <!--charapic-->
                    
                    <div class="col-12 col-sm-2 col-md-3">
                        <div class="card border-0 rounded-0" style="max-width:150px;margin-left:auto;margin-right:auto;background-color:#3c6598">
                            
                            <img src="https://i.imgur.com/EMT3io6.png">
                            
                        </div>
                    </div>
                    
                    <!--notes-->
                    
                    <div class="col-12 col-sm-10 col-md-9">
                        <div class="card-body p-2">
                            <a href="#" style="color:#3c6598;font-weight:bold"> <i class="fas fa-tint"></i> Character Name</a>
                            <span class="pull-right faded">relationship</span>
                            <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
                            
                            <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.</p>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!--end Relationship 2-->
            
            
            <!--Relationship 3-->
            
            <div class="card rounded-0" style="
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="row no-gutters">
                    
                    <!--charapic-->
                    
                    <div class="col-12 col-sm-2 col-md-3">
                        <div class="card border-0 rounded-0" style="max-width:150px;margin-left:auto;margin-right:auto;background-color:#3c6598">
                            
                            <img src="https://i.imgur.com/EMT3io6.png">
                            
                        </div>
                    </div>
                    
                    <!--notes-->
                    
                    <div class="col-12 col-sm-10 col-md-9">
                        <div class="card-body p-2">
                            <a href="#" style="color:#3c6598;font-weight:bold"> <i class="fas fa-tint"></i> Character Name</a>
                            <span class="pull-right faded">relationship</span>
                            <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
                            
                            <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.</p>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!--end Relationship 3-->
            
            
        </div>
            
    </div>
    
    <!--end Relationships-->
    
    
    <!--Design-->
    
    
    <!--Header-->
    
    <div class="card text-white mb-2 p-2 rounded-0" style="
        border-color:#3c6598;
        border-width:2px;
        background-color:#3c6598;
        background-image: linear-gradient(to right, #3c6598, #87dadb);
        background-size:cover;
        background-position:center;
        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
        
        <p style="font-size:2em;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
            <i class="fas fa-water"></i> Design 
        </p>
        
    </div>
    
    <div class="row">
        
        <!--design notes-->
        
        <div class="col-12 col-lg-4 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:100px;
                color:#3c6598;
                background-color:#e9decf;
                border-color:#3c6598;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <div class="card-body p-3">
                    
                    <p><i class="fas fa-tint"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    
                    <p><i class="fas fa-tint"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    
                    <p><i class="fas fa-tint"></i> It has survived not only five centuries</p>
                    
                    <p><i class="fas fa-tint"></i> but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    
                </div>
            </div>
            
        </div>
        
        <!--end design notes-->
        
        
        <!--Refrence image-->
        
        <div class="col-12 col-lg-8 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:350px;
                color:#3c6598;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1534940490337-8f9799735021?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--full size-->
 
                <a href="https://unsplash.com/photos/df-fICrHWPw" data-toggle="tooltip" title="(full size)" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-external-link"></i> </a>
                
            </div>
 
        </div>
        
        <!--end Refrence image-->
        
    </div>
    
    <!--end Design-->
    
    
    <!--Footer/Aesthetic-->
    
    <!--header-->
    
    <div class="card text-white mb-2 p-2 rounded-0" style="
        border-color:#3c6598;
        border-width:2px;
        background-color:#3c6598;
        background-image: linear-gradient(to left, #3c6598, #87dadb);
        background-size:cover;
        background-position:center;
        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
        
        <p style="font-size:2em;text-align:center;text-shadow: 2px 2px 4px rgba(0,0,0,0.8);letter-spacing:5px">
            <i class="fas fa-fish"></i> <i class="fas fa-water"></i> <i class="fas fa-tint"></i>
        </p>
        
    </div>
    
    <div class="row">
        
        <!--image 1-->
            
        <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:150px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1534940490337-8f9799735021?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image 1-->
        
        
        <!--image 2-->
        
        <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:150px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1624813532831-74373324d26b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image 2-->
        
        
        <!--image 3-->
        
        <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:150px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1616359289401-a26aaf72490c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=502&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image 3-->
        
        
        <!--image 4-->
        
        <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
            
            <div class="card rounded-0 h-100" style="
                min-height:150px;
                background-color:#3c6598;
                border-color:#3c6598;
                background-image:url(https://images.unsplash.com/photo-1516638489986-0c17c234db55?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
                background-size:cover;
                background-position:center;
                border-width:2px;
                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
                
                <!--Image credit-->
 
                <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
                
            </div>
 
        </div>
        
        <!--end image 4-->
        
            
    </div>
    
    <!--Footer/Aesthetic-->
    
    
    <!--Credit. You may move it, but please do not delete/remove-->
 
    <p style="text-align:right">HTML by <a href="https://toyhou.se/12259127" style="color:#3c6598"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
    
</div>