[F2U] Pills Profile
created by:BigGayFish
HTMLCustom ColorsBootstrapCharacter
Copy
<!--PILLS - COLORS VER
YEAHHHH I WANTED TO MAKE ANOTHER MICRO CODE!!! This one's based on a pill aesthetic because I previously had a layout concept sketch for this but I didn't like the idea of it until I realized it'd be cute as a micro code! Obviously this is short and simple like the last one but I did squeeze in some other stuff into it, so uuuuuh have fun :^)
COLOR KEY: #d01515 MAIN ACCENT COLOR/LINKS
#ffffff SECOND BACKGROUND
#262626 TEXT COLOR
INDEX:
CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like
QUICK INFO - All the quick info you want to put for your character. Since it's all in one "row" due to the bootstraps flexgrid, if you find any sizing issues, just change the column size to be bigger until it fits. Remember 12 is the max total you can go.
LIKES/DISLIKES - The usual! It's really easy to delete the whole thing really if you don't want to have it
PERSONALITY DESCRIPTORS - Just quick three words to describe your character, you can delete if you want but I find them fun to sorta jot down
CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!
RELATIONSHIPS - I managed to squeeze this in somehow. It's really small and truly, you can delete the whole thing. But if you wanna add more, just remember to paste them above the last one so that the little divider doesn't show up
-->
<div class="container-fluid" style="max-width: 500px; color:#262626;">
<div class="row no-gutters align-items-center">
<div class="col-4 mr-n1 p-2 rounded-left" style="height:150px; border-radius: 40px 0px 0px 40px; background-color:#d01515;">
<!--CHARACTER IMG / QUOTE-->
<div class="card h-100 border-0" style="border-radius: 35px 0px 0px 35px;
background: url(https://file.toyhou.se/characters/3577827?1550631996) center no-repeat;
background-size:cover;"
title="Character Quote. Make it as long or as short. You can put anything here. In fact, you could probably put the bee movie script here." data-toggle="tooltip"></div>
<!--END OF CHARACTER IMG / QUOTE-->
</div>
<div class="col-8 card p-2 overflow-auto " style="height:150px; border-radius: 0px 40px 40px 0px; border: #d01515 3px solid; background-color:#ffffff;">
<!--QUICK INFO-->
<div class="row no-gutters">
<div class="col-4 text-uppercase align-items-center" style="font-weight: bold; font-size:15pt;">
Name
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
pro/nouns
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
gender
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-3 align-items-center">
age
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-5 align-items-center">
orientation
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
occupation
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
species
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
height
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4">
<a href="#" style="font-weight: bold; color:#d01515;">theme</a>
</div>
</div>
<!--END OF QUICK INFO-->
<div style="border:0; border-bottom: #d01515 2px dotted"></div>
<!--LIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; color: #d01515;">
<i class="fa-solid fa-plus"></i> likes
</div>
<div class="col- pt-2">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--DISLIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; color: #d01515;">
<i class="fa-solid fa-plus"></i> dislikes
</div>
<div class="col-">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text d-flex justify-content-center mt-n2 mb-1 align-items-center" style="color: #d01515;">
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
</div>
<!--END OF PERSONALITY DESCRIPTORS-->
<!--CHARACTER INFO-->
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--END OF CHARACTER INFO-->
<div class="my-1" style="border:0; border-bottom: #d01515 2px dotted"></div>
<!--RELATIONSHIP (REPEAT AS NEEDED)-->
<a href="#" style="font-weight: bold; letter-spacing:5px; color: #d01515;">NAME</a>
<div class="card-text">
<p class="text-lowercase">[relationship]</p>
<p>Relationship info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<div class="my-1" style="border:0; border-bottom: #d01515 2px dotted"></div>
<!--END OF RELATIONSHIP-->
<!--RELATIONSHIP-->
<a href="#" style="font-weight: bold; letter-spacing:5px; color: #d01515;">NAME</a>
<div class="card-text">
<p class="text-lowercase">[relationship]</p>
<p>Relationship info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<div class="my-1" style="border:0; border-bottom: 2px dotted"></div>
<!--END OF RELATIONSHIP-->
<!--PASTE MORE RELATIONSHIPS ABOVE HERE-->
<!--FINAL RELATIONSHIP-->
<a href="#" style="font-weight: bold; letter-spacing:5px; color: #d01515;">NAME</a>
<div class="card-text">
<p class="text-lowercase">[relationship]</p>
<p>Relationship info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF FINAL RELATIONSHIP-->
</div>
</div>
<a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright pull-right"></i></a>
</div>Copy
<!--PILLS - BOOTSTRAPS VER
YEAHHHH I WANTED TO MAKE ANOTHER MICRO CODE!!! This one's based on a pill aesthetic because I previously had a layout concept sketch for this but I didn't like the idea of it until I realized it'd be cute as a micro code! Obviously this is short and simple like the last one but I did squeeze in some other stuff into it, so uuuuuh have fun :^)
COLOR KEY: -danger - MAIN ACCENT COLOR/LINKS
(you can change the bootstrap colors to primary, secondary, info, etc etc as you see fit)
bg-white SECOND BACKGROUND
text-dark TEXT COLOR
INDEX:
CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like
QUICK INFO - All the quick info you want to put for your character. Since it's all in one "row" due to the bootstraps flexgrid, if you find any sizing issues, just change the column size to be bigger until it fits. Remember 12 is the max total you can go.
LIKES/DISLIKES - The usual! It's really easy to delete the whole thing really if you don't want to have it
PERSONALITY DESCRIPTORS - Just quick three words to describe your character, you can delete if you want but I find them fun to sorta jot down
CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!
RELATIONSHIPS - I managed to squeeze this in somehow. It's really small and truly, you can delete the whole thing. But if you wanna add more, just remember to paste them above the last one so that the little divider doesn't show up
-->
<div class="container-fluid" style="max-width: 500px;">
<div class="row no-gutters align-items-center">
<div class="col-4 mr-n1 bg-danger p-2 rounded-left" style="height:150px; border-radius: 40px 0px 0px 40px;">
<!--CHARACTER IMG / QUOTE-->
<div class="card h-100 border-0" style="border-radius: 35px 0px 0px 35px;
background: url(https://file.toyhou.se/characters/3577827?1550631996) center no-repeat;
background-size:cover;"
title="Character Quote. Make it as long or as short. You can put anything here. In fact, you could probably put the bee movie script here." data-toggle="tooltip"></div>
<!--END OF CHARACTER IMG / QUOTE-->
</div>
<div class="col-8 card card-outline-danger p-2 overflow-auto bg-white text-danger" style="height:150px; border-radius: 0px 40px 40px 0px; border: 3px solid;">
<!--QUICK INFO-->
<div class="row no-gutters text-dark">
<div class="col-4 text-uppercase align-items-center" style="font-weight: bold; font-size:15pt;">
Name
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
pro/nouns
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
gender
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-3 align-items-center">
age
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-5 align-items-center">
orientation
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
occupation
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
species
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
height
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4">
<a class="text-danger" href="#" style="font-weight: bold;">theme</a>
</div>
</div>
<!--END OF QUICK INFO-->
<div style="border:0; border-bottom: 2px dotted"></div>
<!--LIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold;">
<i class="fa-solid fa-plus"></i> likes
</div>
<div class="col- text-dark pt-2">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--DISLIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold;">
<i class="fa-solid fa-plus"></i> dislikes
</div>
<div class="col- text-dark">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text d-flex justify-content-center mt-n2 mb-1 align-items-center">
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
</div>
<!--END OF PERSONALITY DESCRIPTORS-->
<!--CHARACTER INFO-->
<div class="card-text text-dark">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--END OF CHARACTER INFO-->
<div class="my-1" style="border:0; border-bottom: 2px dotted"></div>
<!--RELATIONSHIP (REPEAT AS NEEDED)-->
<a href="#" class="text-danger" style="font-weight: bold; letter-spacing:5px;">NAME</a>
<div class="card-text text-dark">
<p class="text-lowercase">[relationship]</p>
<p>Relationship info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<div class="my-1" style="border:0; border-bottom: 2px dotted"></div>
<!--END OF RELATIONSHIP-->
<!--RELATIONSHIP-->
<a href="#" class="text-danger" style="font-weight: bold; letter-spacing:5px;">NAME</a>
<div class="card-text text-dark">
<p class="text-lowercase">[relationship]</p>
<p>Relationship info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<div class="my-1" style="border:0; border-bottom: 2px dotted"></div>
<!--END OF RELATIONSHIP-->
<!--PASTE MORE RELATIONSHIPS ABOVE HERE-->
<!--FINAL RELATIONSHIP-->
<a href="#" class="text-danger" style="font-weight: bold; letter-spacing:5px;">NAME</a>
<div class="card-text text-dark">
<p class="text-lowercase">[relationship]</p>
<p>Relationship info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF FINAL RELATIONSHIP-->
</div>
</div>
<a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright pull-right"></i></a>
</div>Copy
<!--PILLS - COLORS VER
YEAHHHH I WANTED TO MAKE ANOTHER MICRO CODE!!! This one's based on a pill aesthetic because I previously had a layout concept sketch for this but I didn't like the idea of it until I realized it'd be cute as a micro code! Obviously this is short and simple like the last one but I did squeeze in some other stuff into it, so uuuuuh have fun :^)
COLOR KEY: {{c!Main Accent/Links!}} MAIN ACCENT COLOR/LINKS
{{c!Second Background!}} SECOND BACKGROUND
{{c!Text Color!}} TEXT COLOR
INDEX:
CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like
QUICK INFO - All the quick info you want to put for your character. Since it's all in one "row" due to the bootstraps flexgrid, if you find any sizing issues, just change the column size to be bigger until it fits. Remember 12 is the max total you can go.
LIKES/DISLIKES - The usual! It's really easy to delete the whole thing really if you don't want to have it
PERSONALITY DESCRIPTORS - Just quick three words to describe your character, you can delete if you want but I find them fun to sorta jot down
CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!
RELATIONSHIPS - I managed to squeeze this in somehow. It's really small and truly, you can delete the whole thing. But if you wanna add more, just remember to paste them above the last one so that the little divider doesn't show up
-->
<div class="container-fluid" style="max-width: 500px; color:{{c!Text Color!}};">
<div class="row no-gutters align-items-center">
<div class="col-4 mr-n1 p-2 rounded-left" style="height:150px; border-radius: 40px 0px 0px 40px; background-color:{{c!Main Accent/Links!}};">
<!--CHARACTER IMG / QUOTE-->
<div class="card h-100 border-0" style="border-radius: 35px 0px 0px 35px;
background: url({{u!Character IMG URL!}}) center no-repeat;
background-size:cover;"
title="{{!Character Quote!}}" data-toggle="tooltip"></div>
<!--END OF CHARACTER IMG / QUOTE-->
</div>
<div class="col-8 card p-2 overflow-auto " style="height:150px; border-radius: 0px 40px 40px 0px; border: {{c!Main Accent/Links!}} 3px solid; background-color:{{c!Second Background!}};">
<!--QUICK INFO-->
<div class="row no-gutters">
<div class="col-4 text-uppercase align-items-center" style="font-weight: bold; font-size:15pt;">
{{!Character Name!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Pronouns!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Gender!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-3 align-items-center">
{{!Character Age!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-5 align-items-center">
{{!Character Orientation!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Occupation!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Species!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Height!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4">
<a href="{{u!Character Theme URL!}}" style="font-weight: bold; color:{{c!Main Accent/Links!}};">{{!Character Theme!}}</a>
</div>
</div>
<!--END OF QUICK INFO-->
<div style="border:0; border-bottom: {{c!Main Accent/Links!}} 2px dotted"></div>
<!--LIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; color: {{c!Main Accent/Links!}};">
<i class="fa-solid fa-plus"></i> likes
</div>
<div class="col- pt-2">
<ul>
{{%Likes%
<li>{{%Likes Content%}}</li>
%end%}}
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--DISLIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold; color: {{c!Main Accent/Links!}};">
<i class="fa-solid fa-plus"></i> dislikes
</div>
<div class="col-">
<ul>
{{%Dislikes%
<li>{{%Dislikes Content%}}</li>
%end%}}
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text d-flex justify-content-center mt-n2 mb-1 align-items-center" style="color: {{c!Main Accent/Links!}};">
{{!Personality Trait 1!}}
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
{{!Personality Trait 2!}}
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
{{!Personality Trait 3!}}
</div>
<!--END OF PERSONALITY DESCRIPTORS-->
<!--CHARACTER INFO-->
<div class="card-text">
{{%Character Info%
<p>{{l%Paragraph Content%}}</p>
%end%}}
</div>
<!--END OF CHARACTER INFO-->
<div class="my-1" style="border:0; border-bottom: {{c!Main Accent/Links!}} 2px dotted"></div>
{{%Character Block%
<!--RELATIONSHIP (REPEAT AS NEEDED)-->
<a href="{{u%Character Link%}}" style="font-weight: bold; letter-spacing:5px; color: {{c!Main Accent/Links!}};">{{%Character Name%}}</a>
<div class="card-text">
<p class="text-lowercase">[{{%Relationship%}}]</p>
{{%Relationship Description%
<p>{{l%Relationship Paragraph%}}</p>
%end%}}
</div>
<div class="my-1" style="border:0; border-bottom: {{c!Main Accent/Links!}} 2px dotted"></div>
<!--END OF RELATIONSHIP-->
%end%}}
{{%%Last Character Block%
<!--FINAL RELATIONSHIP-->
<a href="{{u%Character Link%}}" style="font-weight: bold; letter-spacing:5px; color: {{c!Main Accent/Links!}};">{{%Character Name%}}</a>
<div class="card-text">
<p class="text-lowercase">[{{%Relationship%}}]</p>
{{%Relationship Description%
<p>{{l%Relationship Paragraph%}}</p>
%end%}}
</div>
<!--END OF FINAL RELATIONSHIP-->
%end%}}
</div>
</div>
<a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright pull-right"></i></a>
</div>Copy
<!--PILLS - BOOTSTRAPS VER
YEAHHHH I WANTED TO MAKE ANOTHER MICRO CODE!!! This one's based on a pill aesthetic because I previously had a layout concept sketch for this but I didn't like the idea of it until I realized it'd be cute as a micro code! Obviously this is short and simple like the last one but I did squeeze in some other stuff into it, so uuuuuh have fun :^)
COLOR KEY: -danger - MAIN ACCENT COLOR/LINKS
(you can change the bootstrap colors to primary, secondary, info, etc etc as you see fit)
bg-white SECOND BACKGROUND
text-dark TEXT COLOR
INDEX:
CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like
QUICK INFO - All the quick info you want to put for your character. Since it's all in one "row" due to the bootstraps flexgrid, if you find any sizing issues, just change the column size to be bigger until it fits. Remember 12 is the max total you can go.
LIKES/DISLIKES - The usual! It's really easy to delete the whole thing really if you don't want to have it
PERSONALITY DESCRIPTORS - Just quick three words to describe your character, you can delete if you want but I find them fun to sorta jot down
CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!
RELATIONSHIPS - I managed to squeeze this in somehow. It's really small and truly, you can delete the whole thing. But if you wanna add more, just remember to paste them above the last one so that the little divider doesn't show up
-->
<div class="container-fluid" style="max-width: 500px;">
<div class="row no-gutters align-items-center">
<div class="col-4 mr-n1 bg-danger p-2 rounded-left" style="height:150px; border-radius: 40px 0px 0px 40px;">
<!--CHARACTER IMG / QUOTE-->
<div class="card h-100 border-0" style="border-radius: 35px 0px 0px 35px;
background: url({{u!Character IMG URL!}}) center no-repeat;
background-size:cover;"
title="{{!Character Quote!}}" data-toggle="tooltip"></div>
<!--END OF CHARACTER IMG / QUOTE-->
</div>
<div class="col-8 card card-outline-danger p-2 overflow-auto bg-white text-danger" style="height:150px; border-radius: 0px 40px 40px 0px; border: 3px solid;">
<!--QUICK INFO-->
<div class="row no-gutters text-dark">
<div class="col-4 text-uppercase align-items-center" style="font-weight: bold; font-size:15pt;">
{{!Character Name!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Pronouns!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Gender!}}!
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-3 align-items-center">
{{!Character Age!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-5 align-items-center">
{{!Character Orientation!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Occupation!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Species!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4 align-items-center">
{{!Character Height!}}
<i style="font-size:5px;" class="fa-solid fa-circle ml-1"></i>
</div>
<div class="col-4">
<a class="text-danger" href="{{u!Character Theme URL!}}" style="font-weight: bold;">{{!Character Theme!}}!}}</a>
</div>
</div>
<!--END OF QUICK INFO-->
<div style="border:0; border-bottom: 2px dotted"></div>
<!--LIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold;">
<i class="fa-solid fa-plus"></i> likes
</div>
<div class="col- text-dark pt-2">
<ul>
{{%Likes%
<li>{{%Likes Content%}}</li>
%end%}}
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--DISLIKES-->
<div class="row no-gutters">
<div class="col-auto align-items-center" style="font-weight: bold;">
<i class="fa-solid fa-plus"></i> dislikes
</div>
<div class="col- text-dark">
<ul>
{{%Dislikes%
<li>{{%Dislikes Content%}}</li>
%end%}}
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text d-flex justify-content-center mt-n2 mb-1 align-items-center">
{{!Personality Trait 1!}}
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
{{!Personality Trait 2!}}
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
{{!Personality Trait 3!}}
</div>
<!--END OF PERSONALITY DESCRIPTORS-->
<!--CHARACTER INFO-->
<div class="card-text text-dark">
{{%Character Info%
<p>{{l%Paragraph Content%}}</p>
%end%}}
</div>
<!--END OF CHARACTER INFO-->
<div class="my-1" style="border:0; border-bottom: 2px dotted"></div>
{{%Character Block%
<!--RELATIONSHIP (REPEAT AS NEEDED)-->
<a href="{{u%Character Link%}}" class="text-danger" style="font-weight: bold; letter-spacing:5px;">{{%Character Name%}}</a>
<div class="card-text text-dark">
<p class="text-lowercase">[{{%Relationship%}}]</p>
{{%Relationship Description%
<p>{{l%Relationship Paragraph%}}</p>
%end%}}
</div>
<div class="my-1" style="border:0; border-bottom: 2px dotted"></div>
<!--END OF RELATIONSHIP-->
%end%}}
{{%%Last Character Block%
<!--RELATIONSHIP (REPEAT AS NEEDED)-->
<a href="{{u%Character Link%}}" class="text-danger" style="font-weight: bold; letter-spacing:5px;">{{%Character Name%}}</a>
<div class="card-text text-dark">
<p class="text-lowercase">[{{%Relationship%}}]</p>
{{%Relationship Description%
<p>{{l%Relationship Paragraph%}}</p>
%end%}}
</div>
<!--END OF RELATIONSHIP-->
%end%}}
</div>
</div>
<a href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright pull-right"></i></a>
</div>