Stor8

<!--BASICS PROFILE 2.0 - Full Color

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

COLOR KEY:  #EFEFE3 - Background
            #5D4B41 - Text
            #067bb7  - Borders
            #C1A37D - Accent (some borders and info boxes)
            #699389 - Links and Link Borders

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER QUOTE - What it says on the tin; you can delete this section if you don't want it.

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

LIKES / DISLIKES - Some things your OC may like or dislike

TRIVIA - This section is deletable if you don't want it, it's a section to jot some notes or trivia about your OC

ACCENT IMAGE - A small image to pad out the left section; it can be deleted if you don't want it

PERSONALITY STATS - This section can be deleted if you don't want it, but they're some basic stats. Obv the stat types themselves can be changed but just to note, there's instructions on the first stat block only.

PERSONALITY TEXT - This section can be deleted if you don't want it, but it's just a text box so if you also wanna write a bit about your OC, go for it

HEADER IMAGE TWO - Second image, goes between your other info and your OC's bio; deletable if you want.

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

RELATIONSHIP - Your OC's relationships; each block is copyable and seperated from each other, so you can paste as much as you need. Comes with default of three with 3 different relationship type icons.

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card" style="background: #EFEFE3; color:#5D4B41; border: #067bb7  2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url(https://www.ghibli.jp/gallery/howl050.jpg); background-size: cover; background-position: center; min-height: 400px; border-bottom: #067bb7  2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2" title="IMG CREDIT" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6; color: #699389;"><i class="fas fa-image"></i></a>
    <!--CHARACTER QUOTE
    It looks better when you keep it to one to two sentences, but if the quote gets too long, the box will scroll. Delete from here to end if you don't want it btw-->
    <div class="card-text text-center mt-5" style="position:absolute; opacity: .9;">
        <h1 class="display-4 m-5 p-2 overflow-auto" style="background: #C1A37D; border: #067bb7  2px solid; max-height: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  -Character quote</h1>
    </div>
    <!--END OF CHARACTER QUOTE-->
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url(https://www.ghibli.jp/gallery/howl005.jpg); background-size: cover; background-position: center; min-height: 400px; border: #067bb7  2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3" title="IMG CREDIT / FULL REF" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6; color: #699389;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color:#699389; font-weight: bold;">content</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color:#699389; font-weight: bold;">content</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="row no-gutters d-flex justify-content-between">
        <div class="col-md-5 p-3">
            <div class="card-header sticky-top mb-3" style="background: #C1A37D; border: #067bb7  2px solid; opacity:.9;">
                <h1 class="display-3">Trivia</h1>
            </div>
            
            <!--LIKES-->
            <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
            <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                <i class="fa-solid fa-plus"></i> likes
            </div>
            <div class="col bg-transparent pt-2 pr-2">
                <ul>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                </ul>
            </div>
            </div>
            <!--END OF LIKES-->
            
            <!--DISLIKES-->
            <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
            <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                <i class="fa-solid fa-minus"></i> dislikes
            </div>
            <div class="col bg-transparent pt-2 pr-2">
                <ul>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                </ul>
            </div>
            </div>
            <!--END OF DISLIKES-->
            
            <!--TRIVIA-->
            <div class="card-text border-0 pr-2">
                <ul>
                <li>You can put trivia here. Lorem ipsum dolor sit amet.</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                </ul>
            </div>
            <!--END OF TRIVIA-->
            
            <!--ACCENT IMAGE-->
            <div class="card m-3" style="background-image: url(https://media1.tenor.com/images/ed5c5401d817e673bceac576f0ccb4e9/tenor.gif?itemid=12917580); background-size: cover; background-position: center; min-height: 250px; border: #067bb7  2px solid;">
                <!--IMG CREDIT-->
                <a class="p-3" title="IMG CREDIT" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6; color: #699389;"><i class="fas fa-image"></i></a>
            </div>
            <!--END OF ACCENT IMAGE-->
        </div>
        
        <div class="col-lg-7 p-3">
            <div class="card-header sticky-top mb-3" style="background: #C1A37D; border: #067bb7  2px solid; opacity:.9;">
                <h1 class="display-3">Personality</h1>
            </div>
            
            <!--PERSONALITY STATS-->
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> charisma
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> dexterity
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> strength
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> constitution
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> intelligence
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> wisdom
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> perception
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: #C1A37D  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: #C1A37D; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> luck
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="fas fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                    <i class="far fa-square"></i>
                </div>
            </div>
            <!--END OF PERSONALITY STATS-->
            
            <!--PERSONALITY TEXT-->
            <div class="card-text overflow-auto" style="max-height: 250px;">
            <p>You can put your character's personality here. 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. 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>
             <!--END OF PERSONALITY TEXT-->
        </div>
    </div>
    
    <!--HEADER IMAGE TWO-->
    <div class="card m-3" style="background-image: url(https://www.ghibli.jp/gallery/howl035.jpg); background-size: cover; background-position: center; min-height: 400px; border: #067bb7  2px solid;">
        <!--IMG CREDIT-->
        <a class="p-3" title="IMG CREDIT" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6; color: #699389;"><i class="fas fa-image"></i></a>
    </div>
    <!--END OF HEADER IMAGE TWO-->
    
    <div class="card-header m-3 text-center" style="background: #C1A37D; border: #067bb7  2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>Character bio here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at massa sit amet leo ultricies congue. Nunc rhoncus suscipit turpis, iaculis consectetur felis iaculis vehicula. Vivamus maximus tempus odio id convallis. Praesent dictum enim quis lorem rhoncus, in vestibulum libero varius. Etiam mi sapien, placerat in commodo malesuada, varius vel nisi. Phasellus malesuada ante et rhoncus semper. Aliquam nulla diam, fermentum id dictum in, pretium eu turpis. Morbi sit amet ligula luctus, ullamcorper mauris at, ultricies orci.</p>
        
        <!--SUBHEADER-->
        <div class="card p-2 my-2 border-0" style="background: #C1A37D; opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> Subheader</h3>
        </div>
        <!--END OF SUBHEADER-->
        
        <p>Donec non mattis ipsum. Maecenas efficitur at lorem et vulputate. Ut augue erat, efficitur quis velit ac, convallis eleifend orci. Nunc malesuada, mauris eu hendrerit semper, velit nulla euismod libero, quis pulvinar arcu mi eget lectus. Aenean feugiat purus nec aliquet ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In dictum feugiat quam, in fermentum erat pellentesque sit amet. Fusce lacinia euismod justo vel pharetra. Donec feugiat sapien eu libero pretium congue. Cras at feugiat risus. In facilisis nunc non ullamcorper luctus. Maecenas blandit libero eget leo luctus consequat. In hac habitasse platea dictumst.</p>
            
        <p>Donec convallis non metus vitae accumsan. In molestie urna et ante tempus interdum. Mauris ligula turpis, pharetra in commodo ut, elementum non eros. Duis lobortis eleifend malesuada. Donec bibendum tincidunt iaculis. Praesent et fermentum mauris. Aliquam aliquet tempus luctus. Morbi a fermentum metus.</p>
        
        <!--SUBHEADER-->
        <div class="card p-2 my-2 border-0" style="background: #C1A37D; opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> Subheader</h3>
        </div>
        <!--END OF SUBHEADER-->
        
        <p>Etiam ut imperdiet elit. Nulla molestie dui eu nisi ultrices, quis tempor augue sollicitudin. Duis eu elit aliquet leo tempor consequat. Etiam porta sed libero sit amet sodales. Maecenas consectetur justo lorem, ut faucibus lectus facilisis viverra. Pellentesque posuere ligula at enim viverra, ut consectetur massa tincidunt. Duis eleifend libero blandit finibus lacinia. Vivamus feugiat efficitur sollicitudin. Duis elementum ligula vel faucibus consequat. Duis ac purus sodales, egestas ipsum nec, rutrum arcu.</p>
            
        <p>Nulla facilisi. Fusce dictum lacus et sagittis interdum. Aenean volutpat orci dignissim leo tempor, id iaculis eros euismod. Praesent faucibus feugiat sem, vel tincidunt risus viverra at. Etiam ligula purus, iaculis id neque quis, blandit laoreet est. Sed non enim eget mi gravida tincidunt vitae eget nisi. Donec ut nunc metus. Quisque mauris lectus, aliquet ut lorem in, consectetur vestibulum metus. Proin tincidunt lacus enim, quis feugiat odio mollis sit amet. Donec fermentum elit at enim molestie sagittis. Maecenas et elit lectus. Vestibulum elementum tristique tristique. Donec at velit semper odio dapibus scelerisque. Curabitur elementum est dolor, ac pharetra nunc mattis vitae. Praesent in ante quis ligula facilisis fringilla eget sed felis. Proin vehicula felis ante, non viverra arcu hendrerit ut.</p>
    </div>
    <!--END OF HISTORY-->
    
    <div class="card-header m-3 text-center" style="background: #C1A37D; border: #067bb7  2px solid;">
        <h1 class="display-3">Relationships</h1>
    </div>
    
    <!--RELATIONSHIP-->
    <div class="row no-gutters p-3">
    <div class="col-md mr-1 mt-4 order-md-1 order-2">
    <div class="card-body overflow-auto" style="max-height: 300px;">
        <h5>Name</h5>
        <div class="card mb-1" style="background: #067bb7;"></div>
        <h5>Relationship
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="far fa-heart"></i>
        <i class="far fa-heart"></i>
        <i class="far fa-heart"></i></h5>
        <!--heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
        <p>Talk about the relationship here. This box scrolls if it gets too long. 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="col- order-sm-1">
    <a href="#"><img src="https://media1.tenor.com/images/ed5c5401d817e673bceac576f0ccb4e9/tenor.gif?itemid=12917580" class="mx-auto d-block" style="max-width: 250px; border: #699389  2px solid;"></a>
    </div>
    </div>
    <!--END OF RELATIONSHIP-->
    
    <!--RELATIONSHIP-->
    <div class="row no-gutters p-3">
    <div class="col-md mr-1 mt-4 order-md-1 order-2">
    <div class="card-body overflow-auto" style="max-height: 300px;">
        <h5>Name</h5>
        <div class="card mb-1" style="background: #067bb7;"></div>
        <h5>Relationship
        <i class="fas fa-skull"></i>
        <i class="fas fa-skull"></i>
        <i class="far fa-skull"></i>
        <i class="far fa-skull"></i>
        <i class="far fa-skull"></i></h5>
        <!--heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
        <p>Talk about the relationship here. This box scrolls if it gets too long. 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="col- order-sm-1">
    <a href="#"><img src="https://media1.tenor.com/images/ed5c5401d817e673bceac576f0ccb4e9/tenor.gif?itemid=12917580" class="mx-auto d-block" style="max-width: 250px; border: #699389  2px solid;"></a>
    </div>
    </div>
    <!--END OF RELATIONSHIP-->
    
    <!--RELATIONSHIP-->
    <div class="row no-gutters p-3">
    <div class="col-md mr-1 mt-4 order-md-1 order-2">
    <div class="card-body overflow-auto" style="max-height: 300px;">
        <h5>Name</h5>
        <div class="card mb-1" style="background: #067bb7;"></div>
        <h5>Relationship
        <i class="fas fa-user"></i>
        <i class="fas fa-user"></i>
        <i class="far fa-user"></i>
        <i class="far fa-user"></i>
        <i class="far fa-user"></i></h5>
        <!--heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
        <p>Talk about the relationship here. This box scrolls if it gets too long. 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="col- order-sm-1">
    <a href="#"><img src="https://media1.tenor.com/images/ed5c5401d817e673bceac576f0ccb4e9/tenor.gif?itemid=12917580" class="mx-auto d-block" style="max-width: 250px; border: #699389  2px solid;"></a>
    </div>
    </div>
    <!--END OF RELATIONSHIP-->
    </div>
    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - MINI

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card bg-faded" style="border: 2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url(https://www.ghibli.jp/gallery/howl050.jpg); background-size: cover; background-position: center; min-height: 400px; border-bottom: 2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2 text-secondary" title="IMG CREDIT" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6;"><i class="fas fa-image"></i></a>
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url(https://www.ghibli.jp/gallery/howl005.jpg); background-size: cover; background-position: center; min-height: 400px; border: 2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-2 text-secondary" title="IMG CREDIT / FULL REF" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="card-header m-3 bg-secondary text-center" style="border: 2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>Character bio here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at massa sit amet leo ultricies congue. Nunc rhoncus suscipit turpis, iaculis consectetur felis iaculis vehicula. Vivamus maximus tempus odio id convallis. Praesent dictum enim quis lorem rhoncus, in vestibulum libero varius. Etiam mi sapien, placerat in commodo malesuada, varius vel nisi. Phasellus malesuada ante et rhoncus semper. Aliquam nulla diam, fermentum id dictum in, pretium eu turpis. Morbi sit amet ligula luctus, ullamcorper mauris at, ultricies orci.</p>
        
        <!--SUBHEADER-->
        <div class="card bg-secondary p-2 my-2 border-0" style="opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> Subheader</h3>
        </div>
        <!--END OF SUBHEADER-->
        
        <p>Donec non mattis ipsum. Maecenas efficitur at lorem et vulputate. Ut augue erat, efficitur quis velit ac, convallis eleifend orci. Nunc malesuada, mauris eu hendrerit semper, velit nulla euismod libero, quis pulvinar arcu mi eget lectus. Aenean feugiat purus nec aliquet ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In dictum feugiat quam, in fermentum erat pellentesque sit amet. Fusce lacinia euismod justo vel pharetra. Donec feugiat sapien eu libero pretium congue. Cras at feugiat risus. In facilisis nunc non ullamcorper luctus. Maecenas blandit libero eget leo luctus consequat. In hac habitasse platea dictumst.</p>
            
        <p>Donec convallis non metus vitae accumsan. In molestie urna et ante tempus interdum. Mauris ligula turpis, pharetra in commodo ut, elementum non eros. Duis lobortis eleifend malesuada. Donec bibendum tincidunt iaculis. Praesent et fermentum mauris. Aliquam aliquet tempus luctus. Morbi a fermentum metus.</p>
        
    </div>
    <!--END OF HISTORY-->
    
    </div>
    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - Mini Color

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

COLOR KEY:  #EFEFE3 - Background
            #5D4B41 - Text
            #067bb7  - Borders
            #C1A37D - Accent (some borders and info boxes)
            #699389 - Links and Link Borders

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).
-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card" style="background: #EFEFE3; color:#5D4B41; border: #067bb7  2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url(https://www.ghibli.jp/gallery/howl050.jpg); background-size: cover; background-position: center; min-height: 400px; border-bottom: #067bb7  2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2" title="IMG CREDIT" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6; color: #699389;"><i class="fas fa-image"></i></a>
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url(https://www.ghibli.jp/gallery/howl005.jpg); background-size: cover; background-position: center; min-height: 400px; border: #067bb7  2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3" title="IMG CREDIT / FULL REF" href="https://www.ghibli.jp/works/howl/#frame" style="opacity:.6; color: #699389;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color:#699389; font-weight: bold;">content</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: #C1A37D 2px solid;">
                    <div class="col-auto align-items-center" style="background: #C1A37D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color:#699389; font-weight: bold;">content</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="card-header m-3 text-center" style="background: #C1A37D; border: #067bb7  2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>Character bio here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at massa sit amet leo ultricies congue. Nunc rhoncus suscipit turpis, iaculis consectetur felis iaculis vehicula. Vivamus maximus tempus odio id convallis. Praesent dictum enim quis lorem rhoncus, in vestibulum libero varius. Etiam mi sapien, placerat in commodo malesuada, varius vel nisi. Phasellus malesuada ante et rhoncus semper. Aliquam nulla diam, fermentum id dictum in, pretium eu turpis. Morbi sit amet ligula luctus, ullamcorper mauris at, ultricies orci.</p>
        
        <!--SUBHEADER-->
        <div class="card p-2 my-2 border-0" style="background: #C1A37D; opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> Subheader</h3>
        </div>
        <!--END OF SUBHEADER-->
        
        <p>Donec non mattis ipsum. Maecenas efficitur at lorem et vulputate. Ut augue erat, efficitur quis velit ac, convallis eleifend orci. Nunc malesuada, mauris eu hendrerit semper, velit nulla euismod libero, quis pulvinar arcu mi eget lectus. Aenean feugiat purus nec aliquet ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In dictum feugiat quam, in fermentum erat pellentesque sit amet. Fusce lacinia euismod justo vel pharetra. Donec feugiat sapien eu libero pretium congue. Cras at feugiat risus. In facilisis nunc non ullamcorper luctus. Maecenas blandit libero eget leo luctus consequat. In hac habitasse platea dictumst.</p>
            
        <p>Donec convallis non metus vitae accumsan. In molestie urna et ante tempus interdum. Mauris ligula turpis, pharetra in commodo ut, elementum non eros. Duis lobortis eleifend malesuada. Donec bibendum tincidunt iaculis. Praesent et fermentum mauris. Aliquam aliquet tempus luctus. Morbi a fermentum metus.</p>
    </div>
    <!--END OF HISTORY-->
    </div>
    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - Full

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER QUOTE - What it says on the tin; you can delete this section if you don't want it.

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

LIKES / DISLIKES - Some things your OC may like or dislike

TRIVIA - This section is deletable if you don't want it, it's a section to jot some notes or trivia about your OC

ACCENT IMAGE - A small image to pad out the left section; it can be deleted if you don't want it

PERSONALITY STATS - This section can be deleted if you don't want it, but they're some basic stats. Obv the stat types themselves can be changed but just to note, there's instructions on the first stat block only.

PERSONALITY TEXT - This section can be deleted if you don't want it, but it's just a text box so if you also wanna write a bit about your OC, go for it

HEADER IMAGE TWO - Second image, goes between your other info and your OC's bio; deletable if you want.

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

RELATIONSHIP - Your OC's relationships; each block is copyable and seperated from each other, so you can paste as much as you need. Comes with default of three with 3 different relationship type icons.

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card bg-faded" style="border: 2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url({{u!Header 1 IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border-bottom:2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2 text-secondary" title="{{!Header 1 IMG Credit!}}" href="{{u!Header 1 IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
    <!--CHARACTER QUOTE
    It looks better when you keep it to one to two sentences, but if the quote gets too long, the box will scroll. Delete from here to end if you don't want it btw-->
    <div class="card-text text-center mt-5" style="position:absolute; opacity: .9;">
        <h1 class="display-4 bg-secondary m-5 p-2 overflow-auto" style="border: 2px solid; max-height: 250px;">{{!Character Quote!}}</h1>
    </div>
    <!--END OF CHARACTER QUOTE-->
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url({{u!Character IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: 2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3 text-secondary" title="{{!Character IMG Credit!}}" href="{{u!Character IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Name!}}</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Age!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Gender!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Pronouns!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Orientation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Height!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Occupation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Voice Claim URL!}}" style="font-weight: bold;">{{!Voice Claim!}}</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Theme Song URL!}}" style="font-weight: bold;">{{!Theme Song Name!}}</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="row no-gutters d-flex justify-content-between">
        <div class="col-md-5 p-3">
            <div class="card-header sticky-top mb-3 bg-secondary" style="border: 2px solid; opacity:.9;">
                <h1 class="display-3">Trivia</h1>
            </div>
            
            <!--LIKES-->
            <div class="row no-gutters mb-2" style="border: 2px solid;">
            <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                <i class="fa-solid fa-plus"></i> likes
            </div>
            <div class="col bg-transparent pt-2 pr-2">
                <ul>
            {{%Likes%
                <li>{{%Likes Content%}}</li>
            %end%}}
                </ul>
            </div>
            </div>
            <!--END OF LIKES-->
            
            <!--DISLIKES-->
            <div class="row no-gutters mb-2" style="border: 2px solid;">
            <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                <i class="fa-solid fa-minus"></i> dislikes
            </div>
            <div class="col bg-transparent pt-2 pr-2">
                <ul>
            {{%Dislikes%
                <li>{{%Dislikes Content%}}</li>
            %end%}}
                </ul>
            </div>
            </div>
            <!--END OF DISLIKES-->
            
            <!--TRIVIA-->
            <div class="card-text border-0 pr-2">
                <ul>
            {{%Trivia%
                <li>{{%Trivia Content%}}</li>
            %end%}}
                </ul>
            </div>
            <!--END OF TRIVIA-->
            
            <!--ACCENT IMAGE-->
            <div class="card m-3" style="background-image: url({{u!Accent IMG URL!}}); background-size: cover; background-position: center; min-height: 250px; border: 2px solid;">
                <!--IMG CREDIT-->
                <a class="p-3 text-secondary" title="{{!Header 2 IMG Credit!}}" href="{{u!Accent IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
            </div>
            <!--END OF ACCENT IMAGE-->
        </div>
        
        <div class="col-lg-7 p-3">
            <div class="card-header sticky-top mb-3 bg-secondary" style="border: 2px solid; opacity:.9;">
                <h1 class="display-3">Personality</h1>
            </div>
            
            <!--PERSONALITY STATS-->
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> charisma
                </div>
                <div class="col-md-6 justify-content-around p-2">
                    <i class="{{!Charisma Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> dexterity
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Dexterity Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> strength
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Strength Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> constitution
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Constitution Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> intelligence
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Intelligence Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> wisdom
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Wisdom Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> perception
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Perception Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: 2px solid;">
                <div class="col-md-6 justify-content-center bg-secondary p-2 text-uppercase" style="font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> luck
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Luck Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            <!--END OF PERSONALITY STATS-->
            
            <!--PERSONALITY TEXT-->
            <div class="card-text overflow-auto" style="max-height: 250px;">
            {{%Personality%
                <p>{{l%Personality Content%}}</p>
            %end%}}
             </div>
             <!--END OF PERSONALITY TEXT-->
        </div>
    </div>
    
    <!--HEADER IMAGE TWO-->
    <div class="card m-3" style="background-image: url({{u!Header 2 IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: 2px solid;">
        <!--IMG CREDIT-->
        <a class="p-3 text-secondary" title="{{!Header 2 IMG Credit!}}" href="{{u!Header 2 IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
    </div>
    <!--END OF HEADER IMAGE TWO-->
    
    <div class="card-header m-3 bg-secondary text-center" style="border: 2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>{{l!Hsitory Overview!}}</p>
        
        {{%Story Arc% 
        <div class="card bg-secondary p-2 my-2 border-0" style="opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> {{%Subheader%}}</h3>
        </div>
 
        {{%Paragraphs%
            <p>{{l%Paragraph Content%}}</p>
        %end%}}
 
        %end%}}
            
    </div>
    <!--END OF HISTORY-->
    
    <div class="card-header m-3 bg-secondary text-center" style="border: 2px solid;">
        <h1 class="display-3">Relationships</h1>
    </div>
    
    <!--RELATIONSHIP-->
{{%Character Block%
    <div class="row no-gutters p-3">
    <div class="col-md mr-1 mt-4 order-md-1 order-2">
    <div class="card-body overflow-auto" style="max-height: 300px;">
        <h5>{{%Character Name%}}</h5>
        <div class="card bg-secondary mb-1"></div>
        <h5>{{%Relationship%}}
        <i class="{{%Feeling Stat 1 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 2 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 3 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 4 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 5 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i></h5>
        <!--heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
        {{%Relationship Description%
            <p>{{%Relationship Paragraph%}}</p>
        %end%}}
    </div>
    </div>
    
    <div class="col- order-sm-1">
    <a href="{{u%Character Link%}}"><img src="{{u%Character IMG%}}" class="mx-auto d-block" style="max-width: 250px; border: 2px solid;"></a>
    </div>
    </div>
%end%}}
    <!--END OF RELATIONSHIP-->
    
    </div>
    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - Full Color

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

COLOR KEY:  {{c!Background!}} - Background
            {{c!Text Color!}} - Text
            {{c!Border Color!}}  - Borders
            {{c!Accent!}} - Accent (some borders and info boxes)
            {{c!Links!}} - Links and Link Borders

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER QUOTE - What it says on the tin; you can delete this section if you don't want it.

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

LIKES / DISLIKES - Some things your OC may like or dislike

TRIVIA - This section is deletable if you don't want it, it's a section to jot some notes or trivia about your OC

ACCENT IMAGE - A small image to pad out the left section; it can be deleted if you don't want it

PERSONALITY STATS - This section can be deleted if you don't want it, but they're some basic stats. Obv the stat types themselves can be changed but just to note, there's instructions on the first stat block only.

PERSONALITY TEXT - This section can be deleted if you don't want it, but it's just a text box so if you also wanna write a bit about your OC, go for it

HEADER IMAGE TWO - Second image, goes between your other info and your OC's bio; deletable if you want.

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

RELATIONSHIP - Your OC's relationships; each block is copyable and seperated from each other, so you can paste as much as you need. Comes with default of three with 3 different relationship type icons.

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card" style="background: {{c!Background!}}; color:{{c!Text Color!}}; border: {{c!Border Color!}}  2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url({{u!Header 1 IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border-bottom: {{c!Border Color!}}  2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2" title="{{!Header 1 IMG Credit!}}" href="{{u!Header 1 IMG Credit URL!}}" style="opacity:.6; color: {{c!Links!}};"><i class="fas fa-image"></i></a>
    <!--CHARACTER QUOTE
    It looks better when you keep it to one to two sentences, but if the quote gets too long, the box will scroll. Delete from here to end if you don't want it btw-->
    <div class="card-text text-center mt-5" style="position:absolute; opacity: .9;">
        <h1 class="display-4 m-5 p-2 overflow-auto" style="background: {{c!Accent!}}; border: {{c!Border Color!}}  2px solid; max-height: 250px;">{{!Character Quote!}}</h1>
    </div>
    <!--END OF CHARACTER QUOTE-->
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url({{u!Character IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: {{c!Border Color!}}  2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3" title="{{!Character IMG Credit!}}" href="{{u!Character IMG Credit URL!}}" style="opacity:.6; color: {{c!Links!}};"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Name!}}</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Age!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Gender!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Pronouns!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Orientation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Height!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Occupation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Voice Claim URL!}}" style="color:{{c!Links!}}; font-weight: bold;">{{!Voice Claim!}}</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Theme Song URL!}}" style="color:{{c!Links!}}; font-weight: bold;">{{!Theme Song Name!}}</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="row no-gutters d-flex justify-content-between">
        <div class="col-md-5 p-3">
            <div class="card-header sticky-top mb-3" style="background: {{c!Accent!}}; border: {{c!Border Color!}}  2px solid; opacity:.9;">
                <h1 class="display-3">Trivia</h1>
            </div>
            
            <!--LIKES-->
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
            <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                <i class="fa-solid fa-plus"></i> likes
            </div>
            <div class="col bg-transparent pt-2 pr-2">
                <ul>
            {{%Likes%
                <li>{{%Likes Content%}}</li>
            %end%}}
                </ul>
            </div>
            </div>
            <!--END OF LIKES-->
            
            <!--DISLIKES-->
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
            <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                <i class="fa-solid fa-minus"></i> dislikes
            </div>
            <div class="col bg-transparent pt-2 pr-2">
                <ul>
            {{%Dislikes%
                <li>{{%Dislikes Content%}}</li>
            %end%}}
                </ul>
            </div>
            </div>
            <!--END OF DISLIKES-->
            
            <!--TRIVIA-->
            <div class="card-text border-0 pr-2">
                <ul>
            {{%Trivia%
                <li>{{%Trivia Content%}}</li>
            %end%}}
                </ul>
            </div>
            <!--END OF TRIVIA-->
            
            <!--ACCENT IMAGE-->
            <div class="card m-3" style="background-image: url({{u!Accent IMG URL!}}); background-size: cover; background-position: center; min-height: 250px; border: {{c!Border Color!}}  2px solid;">
                <!--IMG CREDIT-->
                <a class="p-3" title="{{!Header 2 IMG Credit!}}" href="{{u!Accent IMG Credit URL!}}" style="opacity:.6; color: {{c!Links!}};"><i class="fas fa-image"></i></a>
            </div>
            <!--END OF ACCENT IMAGE-->
        </div>
        
        <div class="col-lg-7 p-3">
            <div class="card-header sticky-top mb-3" style="background: {{c!Accent!}}; border: {{c!Border Color!}}  2px solid; opacity:.9;">
                <h1 class="display-3">Personality</h1>
            </div>
            
            <!--PERSONALITY STATS-->
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> charisma
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Charisma Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Charisma Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> dexterity
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Dexterity Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Dexterity Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> strength
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Strength Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Strength Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> constitution
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Constitution Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Constitution Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> intelligence
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Intelligence Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Intelligence Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> wisdom
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Wisdom Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Wisdom Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> perception
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Perception Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Perception Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            
            <div class="row no-gutters mb-2" style="border: {{c!Accent!}}  2px solid;">
                <div class="col-md-6 justify-content-center p-2 text-uppercase" style="background: {{c!Accent!}}; font-weight: bold;min-width:100px;">
                    <i class="fa-solid fa-star pt-1"></i> luck
                </div>
                <div class="col-md-6 justify-content-around p-2"> 
                    <i class="{{!Luck Stat 1 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 2 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 3 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 4 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 5 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 6 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 7 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 8 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 9 (fas or far)!}} fa-square"></i>
                    <i class="{{!Luck Stat 10 (fas or far)!}} fa-square"></i>
                </div>
            </div>
            <!--END OF PERSONALITY STATS-->
            
            <!--PERSONALITY TEXT-->
            <div class="card-text overflow-auto" style="max-height: 250px;">
            {{%Personality%
                <p>{{l%Personality Content%}}</p>
            %end%}}
             </div>
             <!--END OF PERSONALITY TEXT-->
        </div>
    </div>
    
    <!--HEADER IMAGE TWO-->
    <div class="card m-3" style="background-image: url({{u!Header 2 IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: {{c!Border Color!}}  2px solid;">
        <!--IMG CREDIT-->
        <a class="p-3" title="{{!Header 2 IMG Credit!}}" href="{{u!Header 2 IMG Credit URL!}}" style="opacity:.6; color: {{c!Links!}};"><i class="fas fa-image"></i></a>
    </div>
    <!--END OF HEADER IMAGE TWO-->
    
    <div class="card-header m-3 text-center" style="background: {{c!Accent!}}; border: {{c!Border Color!}}  2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>{{l!Hsitory Overview!}}</p>
        
        {{%Story Arc% 
        <div class="card p-2 my-2 border-0" style="background: {{c!Accent!}}; opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> {{%Subheader%}}</h3>
        </div>
 
        {{%Paragraphs%
            <p>{{l%Paragraph Content%}}</p>
        %end%}}
 
        %end%}}
        
        
    </div>
    <!--END OF HISTORY-->
    
    <div class="card-header m-3 text-center" style="background: {{c!Accent!}}; border: {{c!Border Color!}}  2px solid;">
        <h1 class="display-3">Relationships</h1>
    </div>
    
    <!--RELATIONSHIP-->
{{%Character Block%
    <div class="row no-gutters p-3">
    <div class="col-md mr-1 mt-4 order-md-1 order-2">
    <div class="card-body overflow-auto" style="max-height: 300px;">
        <h5>{{%Character Name%}}</h5>
        <div class="card mb-1" style="background: {{c!Border Color!}};"></div>
        <h5>{{%Relationship%}}
        <i class="{{%Feeling Stat 1 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 2 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 3 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 4 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 5 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i></h5>
        <!--heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
        {{%Relationship Description%
            <p>{{%Relationship Paragraph%}}</p>
        %end%}}
    </div>
    </div>
    
    <div class="col- order-sm-1">
    <a href="{{u%Character Link%}}"><img src="{{u%Character IMG%}}" class="mx-auto d-block" style="max-width: 250px; border: {{c!Links!}}  2px solid;"></a>
    </div>
    </div>
%end%}}
    <!--END OF RELATIONSHIP-->
    </div>

    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - Mini

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER QUOTE - What it says on the tin; you can delete this section if you don't want it.

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

LIKES / DISLIKES - Some things your OC may like or dislike

TRIVIA - This section is deletable if you don't want it, it's a section to jot some notes or trivia about your OC

ACCENT IMAGE - A small image to pad out the left section; it can be deleted if you don't want it

PERSONALITY STATS - This section can be deleted if you don't want it, but they're some basic stats. Obv the stat types themselves can be changed but just to note, there's instructions on the first stat block only.

PERSONALITY TEXT - This section can be deleted if you don't want it, but it's just a text box so if you also wanna write a bit about your OC, go for it

HEADER IMAGE TWO - Second image, goes between your other info and your OC's bio; deletable if you want.

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

RELATIONSHIP - Your OC's relationships; each block is copyable and seperated from each other, so you can paste as much as you need. Comes with default of three with 3 different relationship type icons.

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card bg-faded" style="border: 2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url({{u!Header 1 IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border-bottom:2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2 text-secondary" title="{{!Header 1 IMG Credit!}}" href="{{u!Header 1 IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
    <!--CHARACTER QUOTE
    It looks better when you keep it to one to two sentences, but if the quote gets too long, the box will scroll. Delete from here to end if you don't want it btw-->
    <div class="card-text text-center mt-5" style="position:absolute; opacity: .9;">
        <h1 class="display-4 bg-secondary m-5 p-2 overflow-auto" style="border: 2px solid; max-height: 250px;">{{!Character Quote!}}</h1>
    </div>
    <!--END OF CHARACTER QUOTE-->
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url({{u!Character IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: 2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3 text-secondary" title="{{!Character IMG Credit!}}" href="{{u!Character IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Name!}}</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Age!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Gender!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Pronouns!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Orientation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Height!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Occupation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Voice Claim URL!}}" style="font-weight: bold;">{{!Voice Claim!}}</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Theme Song URL!}}" style="font-weight: bold;">{{!Theme Song Name!}}</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="card-header m-3 bg-secondary text-center" style="border: 2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>{{l!Hsitory Overview!}}</p>
        
        {{%Story Arc% 
        <div class="card bg-secondary p-2 my-2 border-0" style="opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> {{%Subheader%}}</h3>
        </div>
 
        {{%Paragraphs%
            <p>{{l%Paragraph Content%}}</p>
        %end%}}
 
        %end%}}
            
    </div>
    <!--END OF HISTORY-->
    
    </div>
    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - Mini Color

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:

COLOR KEY:  {{c!Background!}} - Background
            {{c!Text Color!}} - Text
            {{c!Border Color!}}  - Borders
            {{c!Accent!}} - Accent (some borders and info boxes)
            {{c!Links!}} - Links and Link Borders

HEADER IMAGE ONE - First image, goes at the top

IMG CREDIT - Add in the credit to your image. You can only delete this section if the image you're using is one that can go uncredited (as in free of copyright license etc). Alternatively, you can link back to your gallery so that people can see the image in its full glory. This works well as well for the CHARACTER PORTRAIT section, if you wanna link back a full ref piece/

CHARACTER QUOTE - What it says on the tin; you can delete this section if you don't want it.

CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

LIKES / DISLIKES - Some things your OC may like or dislike

TRIVIA - This section is deletable if you don't want it, it's a section to jot some notes or trivia about your OC

ACCENT IMAGE - A small image to pad out the left section; it can be deleted if you don't want it

PERSONALITY STATS - This section can be deleted if you don't want it, but they're some basic stats. Obv the stat types themselves can be changed but just to note, there's instructions on the first stat block only.

PERSONALITY TEXT - This section can be deleted if you don't want it, but it's just a text box so if you also wanna write a bit about your OC, go for it

HEADER IMAGE TWO - Second image, goes between your other info and your OC's bio; deletable if you want.

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

RELATIONSHIP - Your OC's relationships; each block is copyable and seperated from each other, so you can paste as much as you need. Comes with default of three with 3 different relationship type icons.

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card" style="background: {{c!Background!}}; color:{{c!Text Color!}}; border: {{c!Border Color!}}  2px solid;">
    <!--HEADER IMAGE ONE-->
    <div style="background-image: url({{u!Header 1 IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border-bottom: {{c!Border Color!}}  2px solid;">
    <!--IMG CREDIT-->
    <a class="p-2" title="{{!Header 1 IMG Credit!}}" href="{{u!Header 1 IMG Credit URL!}}" style="opacity:.6; color: {{c!Links!}};"><i class="fas fa-image"></i></a>
    </div>
        
        <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url({{u!Character IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: {{c!Border Color!}}  2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3" title="{{!Character IMG Credit!}}" href="{{u!Character IMG Credit URL!}}" style="opacity:.6; color: {{c!Links!}};"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Name!}}</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Age!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Gender!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Pronouns!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Orientation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Height!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Occupation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Voice Claim URL!}}" style="color:{{c!Links!}}; font-weight: bold;">{{!Voice Claim!}}</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: {{c!Accent!}} 2px solid;">
                    <div class="col-auto align-items-center" style="background: {{c!Accent!}}; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Theme Song URL!}}" style="color:{{c!Links!}}; font-weight: bold;">{{!Theme Song Name!}}</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
        </div>
    
    <div class="card-header m-3 text-center" style="background: {{c!Accent!}}; border: {{c!Border Color!}}  2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>{{l!Hsitory Overview!}}</p>
        
        {{%Story Arc% 
        <div class="card p-2 my-2 border-0" style="background: {{c!Accent!}}; opacity:.8;">
        <h3><i class="fas fa-bookmark"></i> {{%Subheader%}}</h3>
        </div>
 
        {{%Paragraphs%
            <p>{{l%Paragraph Content%}}</p>
        %end%}}
 
        %end%}}
        
        
    </div>
    <!--END OF HISTORY-->
    </div>

    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>

<!--BASICS PROFILE 2.0 - Mini - Iliad's Version

Hello everyone welcome to the redux of my Basics Profile! This one has a little bit more information, and has a different layout, but it's a basics theme for a reason. There's two versions: full and mini, with the mini one just the most basics information (quick info and bio), while the full one obv has a lot more information. You really shouldn't need the index other than image editing, but just in case, as per usual, here it is.

INDEX:


CHARACTER PORTRAIT - Your OC's main image!

QUICK INFO - All the main info you may need for a character

HISTORY - The main block to write about your OC's bio. Contains the SUBHEADER section, so you can write about different arcs if you need it (or not).

-->


<div class="container-fluid" style="font-size: 13pt; max-width: 900px;">
    <div class="card bg-faded" style="border: 2px solid;">
    
    <div class="row no-gutters d-flex justify-content-between">
            
            <div class="col-lg-8">
                <!--CHARACTER PORTRAIT-->
                <div class="card m-3" style="background-image: url({{u!Character IMG URL!}}); background-size: cover; background-position: center; min-height: 400px; border: 2px solid;">
                    <!--IMG CREDIT-->
                    <a class="p-3 text-secondary" title="{{!Character IMG Credit!}}" href="{{u!Character IMG Credit URL!}}" style="opacity:.6;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF CHARACTER PORTRAIT-->
            </div>
            
            <!--QUICK INFO-->
            <div class="col-md-4 p-3">
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-id-card"></i> name
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Name!}}</div>
                </div>
                
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-calendar-days"></i> age
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Age!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-venus-mars"></i> gender
                        </div>
                <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Gender!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                        <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-pen-to-square"></i> pronouns
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Pronouns!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-heartbeat"></i> orientation
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Orientation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                        <i class="fa-solid fa-ruler"></i> height
                    </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Height!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-user-tie"></i> occupation
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> {{!Occupation!}}</div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-microphone"></i> voice claim
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Voice Claim URL!}}" style="font-weight: bold;">{{!Voice Claim!}}</a></div>
                </div>
                    
                <div class="row no-gutters mb-2" style="border: 2px solid;">
                    <div class="col-auto align-items-center bg-secondary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
                            <i class="fa-solid fa-play"></i> theme
                        </div>
                    <div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="{{u!Theme Song URL!}}" style="font-weight: bold;">{{!Theme Song Name!}}</a></div>
                </div>
            </div>
            <!--END OF QUICK INFO-->
    </div>
    
    <div class="card-header m-3 bg-secondary text-center" style="border: 2px solid;">
        <h1 class="display-3">History</h1>
    </div>
    
    <!--HISTORY-->
    <div class="card-text px-3 mb-3">
        <p>{{l!History Overview!}}</p>
        
    </div>
    <!--END OF HISTORY-->
    
    <div class="card bg-secondary p-2 m-3 border-0" style="opacity:.8;">
        <h3><i class="fas fa-pencil"></i> Design Notes</h3>
    </div>
    
    <div class="card-text px-3 mb-3">
        {{%Design Notes%
            <p>{{l%Paragraph Content%}}</p>
        %end%}}
    </div>
    
    <!--RELATIONSHIP-->

    <div class="row no-gutters">
    
    {{%Character Block%    
    <div class="col-md-3 p-2">
        <a href="{{u%Character Link%}}"><img src="{{u%Character IMG%}}" class="mx-auto d-block mb-2" style="max-width: 150px; border: 2px solid;"></a>
        
        <h5>{{%Character Name%}}</h5>
        <div class="card bg-secondary mb-1"></div>
        <h5>{{%Relationship%}}
        <i class="{{%Feeling Stat 1 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 2 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 3 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 4 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i>
        <i class="{{%Feeling Stat 5 (fas or far)%}} fa-{{%heart (for love/family), skull (for hatred/enemy), or user (for neutrility/friend/ally)%}}"></i></h5>
        <!--heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
    </div>
    %end%}}
    
    </div>

    <!--END OF RELATIONSHIP-->
    
    </div>
    <a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>