[F2U] Stelciar / Phosray Code (Code)

spiritinthesnow

Info


Created
4 months, 18 days ago
Creator
spiritinthesnow
Favorites
0

Profile


<!-- THIS CODE USES CUSTOM COLOURS ; FIND & REPLACE THE HEX CODE: #c8c8c8 WITH ONE OF YOUR CHOOSING! -->

<div class="container col-lg-8" style="max-width:1100x;">
    <div class="card border-0 bg-transparent p-3 m-3">

        <div class="card border-0 p-3 m-3 mx-auto" style="background-repeat:no-repeat; background-position:center; background-size:cover;
        
        background-image:url('https://i.pinimg.com/736x/41/4c/2b/414c2ba63cff256be85a72870a556ea1.jpg');">
            <!-- ^^BACKGROUND IMAGE ; REPLACE URL WITH YOUR CHOSEN IMAGE^^ -->
            
            <div class="row no-gutters justify-content-center">
                <div class="card-flex border-0 bg-transparent mx-auto p-2 m-2 my-auto col-lg-4">
                <div class="card border-0 bg-transparent p-2 mx-auto" style="background-repeat:no-repeat; background-position:center; background-size:cover; height:280px;
                
                background-image:url('https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg');">
                    <!-- ^^ICON IMAGE ; REPLACE URL WITH YOUR CHOSEN IMAGE^^ -->
                </div>
                </div>
                
                <div class="card border-0 p-2 m-2 col-md">
                    
                    <div class="card border-0 p-2 m-2 mx-auto col-md" style="background:#c8c8c8">
                        <div class="row no-gutters justify-content-center">
                            <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                ABOUT
                            </p>
                            <div class="col"><hr></div>
                            <i class="text-center my-auto fas fa-id-card fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                        </div>
                    </div>
                    
                    <div class="card border-0 m-2 col-md">
                        <div class="row no-gutters justify-content-center">
                            
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-left">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-id-card fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Name:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            NAME HERE
                                        </p>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-right">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-comment fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Nickname:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            NICKNAME HERE
                                        </p>
                                    </div>
                                    
                                </div>
                            </div>
                            
                        </div>
                        
                        <hr class="m-0" style="#000000">
                        
                        <div class="card border-0">
                            <div class="row no-gutters">
                                
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-left">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-venus-mars fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Gender:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            GENDER HERE
                                        </p>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-right">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-comments-question fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Pronouns:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            PRONOUNS HERE
                                        </p>
                                    </div>
            
                                </div>
                            </div>
                        
                        </div>
                        
                        <hr class="m-0" style="#000000">
                        
                        <div class="card border-0">
                            <div class="row no-gutters">
                                
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-left">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-heart fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Sexuality:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            SEXUALITY HERE
                                        </p>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-right">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-cake fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Birthday:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            BIRTHDAY HERE
                                        </p>
                                    </div>
            
                                </div>
                            </div>
                                
                        </div>
                        
                        <hr class="m-0" style="#000000">
                        
                        <div class="card border-0">
                            <div class="row no-gutters">
                                
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-left">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-paw fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Species:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 m-1 p-1 bg-transparent">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            SPECIES HERE
                                        </p>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="card border-0 bg-transparent col-md">
                                <div class="row no-gutters justify-content-right">
                                    <div class="card border-0 m-1 p-1 bg-transparent col-md">
                                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                                            <i class="fas fa-music fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                            <b>Music:</b>
                                        </p>
                                    </div>
                                    
                                    <div class="card border-0 p-1 m-1 bg-transparent justify-content-center align-items-center" style="overflow:hidden;">
                                        <i class="fad fa-music fa-fw fa-md"></i>
                                        <iframe style="opacity:0.001; height:500%; width:650%; position:absolute; bottom:-4px; left-2px;"
                                        
                                        src="https://www.youtube.com/embed/EMBED ID HERE"></iframe>
                                        <!-- ^YOUTUBE EMBED ; INSERT VIDEO ID HERE^ (EXAMPLE: e_mnek0CxzU?si=5Uh73zxuneBEp1Cg) -->
                                    </div>
                                </div>
                            </div>
                                
                        </div>
                        
                    </div>
                        
                </div>
                            
                            
            </div>
                        
        </div>
        
    </div>
                
 </div>
            
        <div class="card border-0 p-2 m-2">
            
            <div class="card border-0 p-2 m-2 mx-auto col-lg" style="background:#c8c8c8">
                <div class="row no-gutters justify-content-center">
                    <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                        PERSONALITY
                    </p>
                    <div class="col"><hr></div>
                    <i class="text-center my-auto fad fa-feather fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
            <div class="card border-0 bg-transparent m-2 p-2 col-md">
                <div class="row no-gutters justify-content-center">
                    
            <div class="card border-0 col-md">
                <div class="row no-gutters justify-content-center">
                    <i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1"></i>
                    <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                        TRAIT #1
                    </p>
                    <i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
            <div class="card border-0 col-md">
                <div class="row no-gutters justify-content-center">
                    <i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1"></i>
                    <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                        TRAIT #2
                    </p>
                    <i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
            <div class="card border-0 col-md">
                <div class="row no-gutters justify-content-center">
                    <i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1"></i>
                    <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                        TRAIT #3
                    </p>
                    <i class="fas fa-sparkle fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
        </div>
    </div>
    
    <hr class="m-0" style="#000000">
    
    <div class="row no-gutters justify-content-center">
        <div class="card border-0 m-2 col-lg-5">
            <div class="row no-gutters justify-content-center">
                
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-left">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Charisma:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
                
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-right">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Kindness:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
            </div>
            
            <hr class="m-0" style="#000000">
            
            <div class="card border-0">
                <div class="row no-gutters">
                    
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-left">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Patience:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
                
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-right">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Integrity:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <hr class="m-0" style="#000000">
        
            <div class="card border-0">
                <div class="row no-gutters">
                    
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-left">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Intellect:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
                
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-right">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Loyalty:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <hr class="m-0" style="#000000">
        
            <div class="card border-0">
                <div class="row no-gutters">
                    
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-left">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Courage:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
                
                <div class="card border-0 bg-transparent col-md">
                    <div class="row no-gutters justify-content-right">
                        <div class="card border-0 m-1 p-1 bg-transparent col-md">
                            <p class="text-uppercase text-muted" style="font-size:12px; font-weight:350;">
                                <b>Maturity:</b>
                            </p>
                        </div>
                        <div class="card border-0 m-1 p-1 my-auto bg-transparent">
                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            <i class="fas fa-diamond fa-2xs fa-fw"></i>
                            </p>
                            <!-- ^ADD OR REMOVE LINES AS NECESSARY; DO NOT EXCEED MORE THAN FIVE^ -->
                        </div>
                    </div>
                </div>
            </div>
            
            <hr class="m-0" style="#000000">
            
            <div class="card-flex border-0 m-2 p-2 col-lg mx-auto">
                
                <div class="col-lg mb-2">
                    <div class="row no-gutters justify-content-between mb-1">
                        <span>Introverted</span>
                        <span>Extroverted</span>
                    </div>
                    
                    <div class="progress" style="height:3px; overflow:visible;">
                        <div class="progress-bar" style="Background:none; margin-top:-3px; 
                        
                        width:50%;">
                            <!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
                            
                            <i class="fas fa-diamond pull-right" style="color:#000000"></i>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg mb-2">
                    <div class="row no-gutters justify-content-between mb-1">
                        <span>Instinctive</span>
                        <span>Calculated</span>
                    </div>
                    
                    <div class="progress" style="height:3px; overflow:visible;">
                        <div class="progress-bar" style="Background:none; margin-top:-3px; 
                        
                        width:50%;">
                            <!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
                            
                            <i class="fas fa-diamond pull-right" style="color:#000000"></i>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg mb-2">
                    <div class="row no-gutters justify-content-between mb-1">
                        <span>Deceptive</span>
                        <span>Sincere</span>
                    </div>
                    
                    <div class="progress" style="height:3px; overflow:visible;">
                        <div class="progress-bar" style="Background:none; margin-top:-3px; 
                        
                        width:50%;">
                            <!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
                            
                            <i class="fas fa-diamond pull-right" style="color:#000000"></i>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg mb-2">
                    <div class="row no-gutters justify-content-between mb-1">
                        <span>Indifferent</span>
                        <span>Emotional</span>
                    </div>
                    
                    <div class="progress" style="height:3px; overflow:visible;">
                        <div class="progress-bar" style="Background:none; margin-top:-3px; 
                        
                        width:50%;">
                            <!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
                            
                            <i class="fas fa-diamond pull-right" style="color:#000000"></i>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg mb-2">
                    <div class="row no-gutters justify-content-between mb-1">
                        <span>Reserved</span>
                        <span>Affectionate</span>
                    </div>
                    
                    <div class="progress" style="height:3px; overflow:visible;">
                        <div class="progress-bar" style="Background:none; margin-top:-3px; 
                        
                        width:50%;">
                            <!-- ^INCREASE OR DECREASE % AS NECESSARY^ -->
                            
                            <i class="fas fa-diamond pull-right" style="color:#000000"></i>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
            
    </div>
    
        <div class="card border-0 m-2 col-md">
            
            <div class="card border-0 m-2">
                <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                    Demeanor
                </p>
            </div>
            
            <div class="card border-0 m-2 overflow-auto" style="max-height:135px;">
                <p style="font-size:15px; font-weight:350;">
                    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 class="card border-0 m-2">
                <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                    Identity & Aspirations
                </p>
            </div>
            
            <div class="card border-0 m-2 overflow-auto" style="max-height:135px;">
                <p style="font-size:15px; font-weight:350;">
                    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>
    
    <div class="row no-gutters">
        <div class="card border-0 bg-transparent col-lg">
            
            <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                <div class="row no-gutters justify-content-center">
                    <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                        LIKES & DISLIKES
                    </p>
                    <div class="col"><hr></div>
                    <i class="text-center my-auto fad fa-heart-half fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
            <div class="row no-gutters">
                <div class="card border-0 bg-transparent text-left my-auto p-2 col-lg">
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i>
                           LIKE #1
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            LIKE #2
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-heart fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            LIKE #3
                    </p>
                    
                </div>
                
                <div class="card border-0 bg-transparent text-left my-auto p-2 col-lg">
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            DISLIKE #1
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            DISLIKE #2
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-heart-crack fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            DISLIKE #3
                    </p>
                    
                </div>
                
            </div>
            
            
            <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                <div class="row no-gutters justify-content-center">
                    <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                        HOBBIES & INTERESTS
                    </p>
                    <div class="col"><hr></div>
                    <i class="text-center my-auto fad fa-heart-pulse fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
            <div class="row no-gutters">
                <div class="card border-0 bg-transparent text-left my-auto p-3 col-md">
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i>
                        HOBBY #1
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i>
                        HOBBY #2
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i>
                        HOBBY #3
                    </p>
                    
                </div>
                
                <div class="border-0 bg-transparent text-left my-auto p-3 col-md">
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i>
                        HOBBY #4
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i>
                        HOBBY #5
                    </p>
                    
                    <p class="text-muted" style="font-size:15px; font-weight:350;">
                        <i class="fas fa-dice fa-md fa-fw ml-1 mr-1 mt-1"></i>
                        HOBBY #6
                    </p>
                    
                </div>
            </div>
            
        </div>
        
        
        <div class="card border-0 bg-transparent col-md">
            
            <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                <div class="row no-gutters justify-content-center">
                    <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                        FAVOURITES
                    </p>
                    <div class="col"><hr></div>
                    <i class="text-center my-auto fad fa-stars fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                </div>
            </div>
            
            <div class="card border-0 bg-transparent p-3">
                
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Food:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                FOOD HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Drink:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                DRINK HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Colour:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                COLOUR HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Flower:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                FLOWER HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Scent:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                SCENT HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Season:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                SEASON HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Weather:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                WEATHER HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Environment:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                ENVIRONMENT HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Activity:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                ACTIVITY HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            <hr class="m-0" style="#000000">
            
                <div class="card border-0 bg-transparent p-1">
                    <div class="row no-gutters">
                        
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:350;">
                            <i class="fas fa-star fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            <b>Item:</b>
                        </p>
                        <div class="card border-0 bg-transparent text-right my-auto col-md">
                            <p class="text-muted px-3" style="font-size:15px; font-weight:350;">
                                ITEM HERE
                            </p>
                        </div>
                    </div>
                </div>
                
            </div>
            
            
            
        </div>
        
        
    </div>
</div>
        
        
        <div class="card border-0 p-2 m-2">
            <div class="row no-gutters">
                
                <div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
                    <div class="card border-0 p-2 bg-transparent">
                        <div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center; 
                        
                        background-image:url('https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg');">
                            <!-- ^MOODBOARD IMAGE #1 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
            
                        </div>
                    </div>
                </div>
                
                
                <div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
                    <div class="card border-0 p-2 bg-transparent">
                        <div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center; 
                        
                        background-image:url('https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg');">
                            <!-- ^MOODBOARD IMAGE #2 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
            
                        </div>
                    </div>
                </div>
                
                
                <div class="card border-0 m-3 mx-auto col-lg-3" style="Background:#c8c8c8">
                    <div class="card border-0 p-2 bg-transparent">
                        <div class="card border-0" style="height:150px; background-size:cover; background-repeat:no-repeat; background-position:center; 
                        
                        background-image:url('https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg');">
                            <!-- ^MOODBOARD IMAGE #3 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
            
                        </div>
                    </div>
                </div>
                
                
            </div>
        </div>
        
        <div class="card border-0 p-2 m-2">
            
            <div class="row no-gutters">
                <div class="card-flex border-0 col-lg-8">
                    
                    <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                        <div class="row no-gutters justify-content-center">
                            <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                ABOUT THE SPECIES
                            </p>
                            <div class="col"><hr></div>
                            <i class="text-center my-auto fad fa-paw fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                        </div>
                    </div>
                    
                    <div class="card border-0 p-2">
                        
                        <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                            <i class="fas fa-bookmark fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            STELCIAR LORE
                        </p>
                    </div>
                    
                    <div class="card border-0 p-2">
                        <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                            <i class="fas fa-circle-bookmark fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                            <a style="color:#000000;" href="https://colsentia.com/info/StelciarsLore">Detailed Lore (Colsentia Website)</a>
                        </p>
                    </div>
                    
                    <div class="card border-0 bg-transparent m-2 overflow-auto" style="max-height:150px;">
                        <p style="font-size:15px; font-weight:350;">
                            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 style="font-size:15px; font-weight:350;">
                            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 class="card border-0 p-2">
                        
                        <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                            <i class="fas fa-bookmark fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            ABILITIES
                        </p>
                    </div>
                    
                    <div class="card border-0 bg-transparent m-2 overflow-auto" style="max-height:150px;">
                        <p style="font-size:15px; font-weight:350;">
                            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 class="card-flex border-0 bg-transparent mx-auto my-auto col-lg-4">
                <div class="card border-0 bg-transparent p-2 mx-auto" style="background-repeat:no-repeat; background-position:center; background-size:cover; height:450px;
                
                background-image:url('https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg');">
                    <!-- ^ACCENT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                </div>
                </div>
                
            </div>
            
            
            <div class="row no-gutters">
                <div class="card border-0 col-lg-7">
                    
                    <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                        <div class="row no-gutters justify-content-center">
                            <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                WORLD & BACKSTORY
                            </p>
                            <div class="col"><hr></div>
                            <i class="text-center my-auto fad fa-books fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                        </div>
                    </div>
                    
                    <div class="card border-0 bg-transparent m-2">
                        <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                            <i class="fas fa-bookmark fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            BACKSTORY
                        </p>
                    </div>
                    
                    <div class="card border-0 bg-transparent m-2 overflow-auto" style="max-height:150px;">
                        <p style="font-size:15px; font-weight:350;">
                            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 style="font-size:15px; font-weight:350;">
                            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 class="card border-0 bg-transparent m-2">
                        <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                            <i class="fas fa-bookmark fa-md fa-fw ml-1 mr-1 mt-1"></i>
                            CURRENT LIFE
                        </p>
                    </div>
                    
                    <div class="card border-0 bg-transparent m-2 overflow-auto" style="max-height:150px;">
                        <p style="font-size:15px; font-weight:350;">
                            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 class="card border-0 col-lg">
                    
                    <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                        <div class="row no-gutters">
                            <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                RELATIONSHIPS
                            </p>
                            <div class="col"><hr></div>
                            <i class="text-center my-auto fad fa-user-group fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                        </div>
                    </div>
                    
                    <div class="card border-0 p-2 col-md overflow-auto">
                        
                        <div class="card border-0 bg-transparent p-2 text-left my-auto">
                            
                            <div class="row no-gutters justify-content-center">
                                <div class="px-2 card border-0 bg-transparent text-left mx-auto col-md">
                                    
                                    <p class="text-muted" style="font-size:20px; font-weight:400;">
                                        <a href="LINKHERE" style="color:#000000">NAME HERE</a>
                                    </p>
                                    
                                    <div class="px-2 card border-0 bg-transparent text-left mx-auto">
                                        <p class="text-muted" style="font-size:12px; font-weight:450; font-weight:bold;">
                                            RELATIONSHIP - PRONOUNS
                                        </p>
                                    </div>
                                    
                                    <div class="px-2 card border-0 bg-transparent text-left col-md overflow-auto" style="max-height:150px;">
                                        <p class="text-muted" style="font-size:15px; font-weight:350;">
                                            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 class="card border-0 rounded-circle bg-transparent" style="height:100px; width:100px; background-position:center; background-size:cover; background-repeat:no-repeat;
                                
                                background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png');">
                                    <!-- ^RELATIONSHIP IMAGE #1 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                                </div>
                            </div>
                            
                            <hr class="m-0" style="#000000">
                            
                            <div class="card border-0 bg-transparent p-2">
                                
                                <div class="row no-gutters justify-content-center">
                                    
                                    <div class="card border-0 rounded-circle bg-transparent" style="height:100px; width:100px; background-position:center; background-size:cover; background-repeat:no-repeat;
                                    
                                    background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png');">
                                        <!-- ^RELATIONSHIP IMAGE #2 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                                    </div>
                                    
                                    <div class="card border-0 bg-transparent text-right mx-auto col">
                                        
                                        <p class="px-2 text-muted" style="font-size:20px; font-weight:400;">
                                            <a href="LINKHERE" style="color:#000000">NAME HERE</a>
                                        </p>
                                        
                                    <div class="px-2 card border-0 bg-transparent text-left mx-auto">
                                        <p class="text-muted" style="font-size:12px; font-weight:450; font-weight:bold;">
                                            RELATIONSHIP - PRONOUNS
                                        </p>
                                    </div>
                                        
                                        <div class="px-2 card border-0 bg-transparent text-left col-md overflow-auto" style="max-height:150px;">
                                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                                                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>
                            </div>
                            
                            <hr class="m-0" style="#000000">
                            
                            <div class="card border-0 bg-transparent p-2 text-left my-auto">
                                
                                <div class="row no-gutters justify-content-center">
                                    <div class="px-2 card border-0 bg-transparent text-left mx-auto col">
                                        
                                        <p class="text-muted" style="font-size:20px; font-weight:400;">
                                            <a href="LINKHERE" style="color:#000000">NAME HERE</a>
                                        </p>
                                        
                                    <div class="px-2 card border-0 bg-transparent text-left mx-auto">
                                        <p class="text-muted" style="font-size:12px; font-weight:450; font-weight:bold;">
                                            RELATIONSHIP - PRONOUNS
                                        </p>
                                    </div>
                                        
                                        <div class="px-2 card border-0 bg-transparent text-left col-md overflow-auto" style="max-height:150px;">
                                            <p class="text-muted" style="font-size:15px; font-weight: 350;">
                                                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 class="card border-0 rounded-circle bg-transparent" style="height:100px; width:100px; background-position:center; background-size:cover; background-repeat:no-repeat;
                                    
                                    background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png');">
                                        <!-- ^RELATIONSHIP IMAGE #3 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <hr class="m-0" style="#000000">
                            
                            <div class="card border-0 bg-transparent p-2">
                                
                                <div class="row no-gutters justify-content-center">
                                    
                                    <div class="card border-0 rounded-circle bg-transparent" style="height:100px; width:100px; background-position:center; background-size:cover; background-repeat:no-repeat;
                                    
                                    background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png');">
                                        <!-- ^RELATIONSHIP IMAGE #4 - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                                    </div>
                                    
                                    <div class="card border-0 bg-transparent text-right mx-auto col">
                                        
                                        <p class="px-2 text-muted" style="font-size:20px; font-weight:400;">
                                            <a href="LINKHERE" style="color:#000000">NAME HERE</a>
                                        </p>
                                        
                                    <div class="px-2 card border-0 bg-transparent text-left mx-auto">
                                        <p class="text-muted" style="font-size:12px; font-weight:450; font-weight:bold;">
                                            RELATIONSHIP - PRONOUNS
                                        </p>
                                    </div>
                                        
                                        <div class="px-2 card border-0 bg-transparent text-left col-md overflow-auto" style="max-height:150px;">
                                            <p class="text-muted" style="font-size:15px; font-weight:350;">
                                                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>
                            </div>
                            
                            <!-- ^RELATIONSHIP SECTION END ; FEEL FREE TO ADD FURTHER RELATIONSHIPS AS NECESSARY!^ -->
                            
                        </div>
                    </div>
            
                </div>
                
            </div>
            
        </div>
        
        
                    <div class="card border-0 p-2 m-2">
                        
                        <div class="card border-0 p-2 m-2" style="Background:#c8c8c8">
                            <div class="row no-gutters justify-content-center">
                                <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                    Design
                                </p>
                                <div class="col"><hr></div>
                                <i class="text-center my-auto fad fa-palette fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                            </div>
                        </div>
                
                        
                        <div class="card border-0">
                            <div class="row no-gutters">
                                
                                <div class="card-flex border-0 bg-transparent mx-auto p-2 m-2 my-auto col-lg-8">
                                    <div class="card border-0 mx-auto" style="background-position:center; background-size:contain; background-repeat:no-repeat; height:550px;
                                    
                                    background-image:url('https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg');">
                                        <!-- ^MAIN DESIGN/REF SHEET IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                                    </div>
                                </div>
                                
                                <div class="card border-0 bg-transparent align-items-center p-2 m-2 col-md overflow-auto" style="height:500px;">
                                    
                                    <img class="ml-3 mx-auto" style="max-height:100px; max-width:100px;"
                                    
                                    src="https://static.wixstatic.com/media/8012a2_33810f13979244498fa53e4011a32a1a~mv2.jpg/v1/fill/w_579,h_727,al_c,q_90/file.jpg">
                                    <!-- ^ACCENT IMAGE - REPLACE LINK WITH IMAGE OF YOUR CHOICE^ -->
                                    
                                    <div class="card border-0 rounded p-1 mt-2" style="background:#c8c8c8">
                                            <a href="https://colsentia.com/info/Stelciarsanatomy" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button">
                                                Stelciar Anatomy
                                            </a>
                                        </div>
                                    
                                    <div class="card p-1 mt-2 border-0">
                                        <p class="text-uppercase text-muted" style="font-size:18px; font-weight:450;">
                                            Character Notes
                                        </p>
                                        
                                    </div>
                                    
                                    <div class="card border-0 text-center p-2">
                                        
                                        <div class="card border-0 p-1 text-left">
                                            <p style="font-size:15px; font-weight:350;">
                                                <i class="fad fa-sparkles fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                                DESIGN NOTE #1
                                            </p>
                                        </div>
                                        
                                       <div class="card border-0 p-1 text-left">
                                            <p style="font-size:15px; font-weight:350;">
                                                <i class="fad fa-sparkles fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                                DESIGN NOTE #2
                                        </div>   
                                        
                                       <div class="card border-0 p-1 text-left">
                                            <p style="font-size:15px; font-weight:350;">
                                                <i class="fad fa-sparkles fa-sm fa-fw ml-1 mr-1 mt-1"></i>
                                                DESIGN NOTE #3
                                            </p>
                                        </div>
                                        
                                        
                                    </div>
                                        
                                        
                                    </div>
                        
                                    
                                </div>
                                
                            </div>
                            
                        <div class="card border-0 mx-auto my-auto p-2 m-2 col-md">
                            <div class="row no-gutters">
                                
                                <div class="card border-0 col-lg">
                                    <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                                        <div class="row no-gutters justify-content-center">
                                            <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                                RARITY & TRAITS
                                            </p>
                                            <div class="col"><hr></div>
                                            <i class="text-center my-auto fad fa-sparkles fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                                        </div>
                                    </div>
                                    
                                    <div class="card border-0 justify-content-center">
                                        
                                        <div class="row no-gutters p-2">
                                            <div class="card border-0 col-md">
                                                <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                    <b>Rarity:</b>
                                                </p>
                                            </div>
                                            
                                            <div class="card border-0 my-auto rounded p-1" style="background:#c8c8c8">
                                                <p style="font-size:12px; font-weight:450; font-weight:bold;">
                                                    Rarity Here
                                                </p>
                                            </div>
                                            
                                        </div>
                                        
                                        <div class="row no-gutters p-2">
                                            <div class="card border-0 col-md">
                                                <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                    <b>Wings:</b>
                                                </p>
                                            </div>
                                            
                                            <div class="card border-0 rounded p-1" style="background:#c8c8c8">
                                                <a href="LINKHERE" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button">
                                                    Trait Here - Rarity Here
                                                </a>
                                            </div>
                                        </div>
                                        
                                        <div class="row no-gutters p-2">
                                            <div class="card border-0 col-md">
                                                <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                    <b>Tail:</b>
                                                </p>
                                            </div>
                                            
                                            <div class="card border-0 rounded p-1" style="background:#c8c8c8">
                                                <a href="LINKHERE" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button">
                                                    Trait Here - Rarity Here
                                                </a>
                                            </div>
                                        </div>
                                        
                                        <hr class="m-0" style="#000000">
                                        
                                        <div class="row no-gutters p-2">
                                            <div class="card border-0 col-md">
                                                <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                    <b>Mutations:</b>
                                                </p>
                                            </div>
                                        </div>
                                        
                                        <div class="card border-0 bg-transparent overflow-auto" style="max-height:100px;">                                        
                                        <!-- MUTATION ENTRY START ; ADD OR REMOVE MUTATIONS AS NECESSARY -->
                                        
                                        <div class="row no-gutters p-2">
                                            <div class="card border-0 my-auto rounded p-1" style="background:#c8c8c8">
                                                <a href="LINKHERE" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button">
                                                    Mutation Here - Rarity Here
                                                </a>
                                            </div>
                                        </div>
                                        
                                        <!-- ^MUTATION ENTRY END ; ADD OR REMOVE MUTATIONS AS NECESSARY -->
                                        
                                     </div>
                                        
                                    </div>
                                    
                                </div>
                                
                                
                                <div class="card border-0 col-md">
                                    <div class="card border-0 p-2 m-2" style="background:#c8c8c8">
                                        <div class="row no-gutters justify-content-center">
                                            <p class="text-uppercase" style="font-size:25px; font-weight:500;">
                                                DETAILS
                                            </p>
                                            <div class="col"><hr></div>
                                            <i class="text-center my-auto fad fa-file-pen fa-xl fa-fw ml-1 mr-1 mt-1"></i>
                                        </div>
                                    </div>
                                    
                                    <div class="card border-0 justify-content-center">
                                        
                                        <div class="row no-gutters p-2">
                                            <div class="card border-0 col-md">
                                                <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                    <b>Masterlist ID:</b>
                                                </p>
                                            </div>
                                            
                                            <div class="card border-0 my-auto rounded p-1" style="background:#c8c8c8">
                                                <a href="LINKHERE" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8" role="button">
                                                    ID Here
                                                </a>
                                            </div>
                                            
                                        </div>
                                        
                                    </div>
                                    
                                    <div class="row no-gutters p-2">
                                        <div class="card border-0 col-md">
                                            <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                <b>Designed By:</b>
                                            </p>
                                        </div>
                                        
                                        <div class="card border-0 my-auto rounded p-1" style="background:#c8c8c8">
                                            <a href="LINKHERE" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; font-weight:bold; background:#c8c8c8;" role="button">
                                                Designer Here
                                            </a>
                                        </div>
                                        
                                    </div>
                                    
                                    <hr class="m-0" style="#000000">
                                    
                                    <div class="row no-gutters p-2">
                                        <div class="card border-0 col-md">
                                            <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                <b>Base Value:</b>
                                            </p>
                                        </div>
                                        
                                        <div class="card border-0 my-auto rounded p-1" style="background:#c8c8c8">
                                            <p style="font-size:12px; font-weight:450; font-weight:bold;">
                                                Value Here
                                            </p>
                                        </div>
                                        
                                    </div>
                                    
                                    <div class="row no-gutters p-2">
                                        <div class="card border-0 col-md">
                                            <p class="text-uppercase text-muted" style="font-size:15px; font-weight:450;">
                                                <b>Current Value:</b>
                                            </p>
                                        </div>
                                        
                                        <div class="card border-0 my-auto rounded p-1" style="background:#c8c8c8">
                                            <p style="font-size:12px; font-weight:450; font-weight:bold;">
                                                Value Here
                                            </p>
                                        </div>
                                        
                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>
                            
                     </div>
                        
                        
                </div>
            </div>
            
            
        <!-- CREDIT ; DO NOT REMOVE -->
            
            <div class="card border-0 bg-transparent">
                
                <div class="card border-0 rounded p-1 m-1 my-auto mx-auto" style="background:#c8c8c8">
                    <a href="https://toyhou.se/spiritinthesnow" class="btn btn-primary btn-xs border-0" style="font-size:12px; font-weight:450; background:#c8c8c8;" role="button">
                        <i class="fas fa-sparkle fa-md fa-fw mt-1 mr-1 ml-1"></i>
                    code by spiritinthesnow
                        <i class="fas fa-sparkle fa-md fa-fw mt-1 mr-1 ml-1"></i>
                    </a>
                </div>
                
            </div>
            
        
    </div>