[F2U] Palia Character Code
created by:BigGayFish
Custom ColorsHTMLCharacter
Copy
<!--Welcome to the Palia Code! After spending so long on trying to figure this out, it's been completed! This is a custom color but I wouldn't suggest editing these colors unless you know what you're doing. As is, it's meant to mimic the UI of the game to a certain extent.
INDEX:
BUTTONS - These are the tab buttons, I sincerely suggest not messing with them unless you know what you're doing.
MUSIC PLAYLIST - You can link a full playlist here for people to go through; it's not a music player it'll just open a new tab of music.
MAIN TAB - It's pretty much a mimic default of the main inventory page in the game's UI. Contains the following sections:
TOOLS - You can put your current tool set up here; there's instructions to change the images to what you need.
CHARACTER IMAGE - Your main focal img of your character. Also includes the PERSONALITY TYPE, NAME, and FOCUS BAR.
QUICK INFO - All the important information you wanna jot down about your character.
CHARACTER ABT - The quick about for your character; write as much or as little as you want, it's got a scroll on it.
ACCESSORIES - For your quick items that you have in game; you can treat this like a mini inventory if you want.
ABOUT TAB - A tab to go more in depth about your character. It has TRIVIA, LIKES, DISLIKES, and a PERSONALITY section as well as STATS to go with it.
DESIGN TAB - Has two sections for your character's outfits/forms:
OUTFITS - The carasoul that has all the imgs you can cycle through for your character. Comes with 3 images by default but instructions to add more.
DESIGN NOTES - Contains the COLOR PALETTE, two sections for different forms/outfits descriptions, and of course the actual DESIGN NOTES
STORY TAB - Your character bio goes here. There's subheaders if you need to copy and paste them, otherwise use it as you see fit.
LINKS TAB - Contains all the relationship sections for your character. It mimics the in-game relationship section to a degree. First CHARACTER LINK is the ROMANTIC LINK aka anyone your character is in a romance with. The others are for friendships/other relationship types, as denoted by the speech bubble and handshake icons. You can add or delete as many links as you want.
-->
<div class="container-fluid" style="font-size:13pt; color:#FFFBE2;">
<div class="card border-0 p-1" style="background-color: #202B3D;">
<div class="row d-flex justify-content-center">
<div class="col-lg-9">
<!--BUTTONS-->
<div class="card bg-transparent" style="padding: 5px; border: transparent;">
<ul class="nav nav-tabs row no-gutters text-center text-uppercase m-3" id="myTab" role="tablist" style="border-bottom: #83A1F0 1px solid;">
<li class="nav-item col-sm mb-2 mx-2">
<a class="nav-link active text-uppercase" style="border: #83A1F0 1px solid; background-color: #2B405A; color:#FFFBE2; text-shadow: 0 0 5px #657cba;" id="pills-about1-tab" data-toggle="tab" href="#about1" role="tab"> <i class="fas fa-backpack fa-2x"></i></a>
</li>
<li class="nav-item col-sm mb-2 mx-2">
<a class="nav-link" style="border: #83A1F0 1px solid; background-color: #2B405A; color:#FFFBE2; text-shadow: 0 0 5px #657cba;" id="pills-about2-tab" data-toggle="tab" href="#about2" role="tab"> <i class="fas fa-exclamation fa-2x"></i></a>
</li>
<li class="nav-item col-sm mb-2 mx-2">
<a class="nav-link" style="border: #83A1F0 1px solid; background-color: #2B405A; color:#FFFBE2; text-shadow: 0 0 5px #657cba;" id="pills-design-tab" data-toggle="tab" href="#design" role="tab"> <i class="fas fa-clothes-hanger fa-2x"></i></a>
</li>
<li class="nav-item col-sm mb-2 mx-2">
<a class="nav-link" style="border: #83A1F0 1px solid; background-color: #2B405A; color:#FFFBE2; text-shadow: 0 0 5px #657cba;" id="pills-story-tab" data-toggle="tab" href="#story" role="tab"> <i class="fas fa-book-open-cover fa-2x"></i></a>
</li>
<li class="nav-item col-sm mb-2 mx-2">
<a class="nav-link" style="border: #83A1F0 1px solid; background-color: #2B405A; color:#FFFBE2; text-shadow: 0 0 5px #657cba;" id="pills-links-tab" data-toggle="tab" href="#links" role="tab"> <i class="fas fa-heart fa-2x"></i></a>
</li>
</ul>
</div>
<!--END OF BUTTONS-->
</div>
<div class="col-sm-3">
<div class="row m-4">
<!--MUSIC PLAYLIST-->
<a class="card bg-transparent text-center mr-4 tooltipster"
href="#"
title="Playlist" style="width:75px; font-size: 25px; font-weight: bold; color:#FFFBE2; box-shadow: 1px 1px 5px #FFFBE2; border-radius:1rem;"><i class="fas fa-folder-music"></i></a>
<!--END OF MUSIC PLAYLIST-->
<!--CREDIT DO NOT TOUCH-->
<a class="card bg-transparent text-center rounded-circle tooltipster" href="https://toyhou.se/BigGayFish" title="Code by BigGayFish" style="width:25px; font-size: 25px; font-weight: bold; color:#FFFBE2; box-shadow: 1px 1px 5px #FFFBE2;"><i class="far fa-circle-xmark"></i></a>
</div>
</div>
</div>
<div class="card tab-content border-0 rounded-0 p-3 overflow-auto" style="background-image:linear-gradient(to bottom,
#3a4c69,
#374764,
#457589
);
color:#FFFBE2; height: 888px;">
<!--MAIN TAB-->
<div class="tab-pane fade active show m-3" id="about1" role="tabpanel">
<div class="row d-flex align-items-center">
<div class="col-md-3 mb-3">
<h1 class="text-center" style="color:#FFFBE2;">Tools</h1>
<!--TOOLS
To change the picture of the tool you have to match your current setup, go here: https://palia.wiki.gg/wiki/Tools and just click on the tool that you have to grab it's image. Don't forget to change the tooltop under "title" so it matches the text to what item you have.-->
<div class="row justify-content-center mb-3">
<!--FISHING POLE-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Rod" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/d/d5/Exquisite_Rod.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--AXE-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Axe" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/f/fd/Exquisite_Axe.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--PICK-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Pick" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/b/bc/Exquisite_Pick.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--BOW-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Bow" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/1/1f/Exquisite_Bow.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--WATERING CAN-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Watering Can" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/1/13/Exquisite_Watering_Can.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--HOE-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Hoe" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/a/a1/Exquisite_Hoe.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--BELT-->
<div class="col- mb-2">
<div class="card rounded-circle p-5 tooltipster" title="Exquisite Belt" style="border: 5px solid #B3C000; background-color:#9BB6DF; background-image: url(https://palia.wiki.gg/images/4/4e/Exquisite_Belt.png); background-size: contain; background-repeat:no-repeat; background-position: center; max-height:150px; max-width:150px;">
</div>
</div>
<!--END OF TOOLS-->
</div>
<h1 class="text-center" style="color:#FFFBE2;">Skill Levels</h1>
<!--SKILLS-->
<div class="row justify-content-center mb-3">
<!--FISHING-->
<div class="col-md-4 mb-3">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Fishing" style="border: 5px solid #5AD3FF;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fas fa-fishing-rod fa-3x my-1"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #5AD3FF;">LVL#</div>
</div>
</div>
<!--COOKING-->
<div class="col-md-4 mb-3">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Cooking" style="border: 5px solid #F1768A;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="far fa-pan-frying fa-3x mb-1 mt-2"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #F1768A;">LVL#</div>
</div>
</div>
<!--GARDENING-->
<div class="col-md-4 mb-3">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Gardening" style="border: 5px solid #9EF782;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fa-solid fa-seedling fa-3x mb-1 mt-2"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #9EF782;">LVL#</div>
</div>
</div>
<!--MINING-->
<div class="col-md-4 mb-3">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Mining" style="border: 5px solid #CD92EE;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fas fa-hill-rockslide fa-3x my-1"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #CD92EE;">LVL#</div>
</div>
</div>
<!--HUNTING-->
<div class="col-md-4 mb-3">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Hunting" style="border: 5px solid #F8A05B;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fa-solid fa-bow-arrow fa-3x mb-1 mt-2"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #F8A05B;">LVL#</div>
</div>
</div>
<!--BUG CATCHING-->
<div class="col-md-4 mb-2">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Bug Catching" style="border: 5px solid #FFD153;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fa-solid fa-bug fa-3x my-1"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #FFD153;">LVL#</div>
</div>
</div>
<!--FORAGING-->
<div class="col-md-4 mb-2">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Foraging" style="border: 5px solid #67F6CB;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fa-solid fa-trees fa-3x my-1"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #67F6CB;">LVL#</div>
</div>
</div>
<!--CRAFTING-->
<div class="col-md-4 mb-2">
<div class="card bg-transparent rounded-circle align-items-center p-1 tooltipster" title="Furniture Making" style="border: 5px solid #89A8FF;background-size: contain; background-repeat:no-repeat; background-position: center; max-height:100px; max-width:100px;">
<i class="fa-solid fa-chair fa-3x my-1"></i>
<div class="card p-1" style="background-color:#594E40; border: 1px solid #89A8FF;">LVL#</div>
</div>
</div>
<!--END OF SKILLS-->
</div>
</div>
<div class="col-md-3 mb-3">
<!--CHARACTER IMAGE-->
<div class="card bg-transparent border-0" style="background-image: url(
https://dummyimage.com/600/ffffff/000000
); background-size: cover; background-position: top; min-height: 550px;">
<!--IMG CREDIT-->
<a class="p-3 tooltipster" title="IMG_CREDIT/FULL_REF" href="#" style="opacity:.6; color: #E1D3BE;"><i class="fas fa-image"></i></a>
</div>
<!--CHARACTER IMAGE-->
<div class="row d-flex justify-content-center align-items-center">
<div class="col- m-2">
<div class="card" style="border: 5px solid #594F42; background-color:#36302A; border-radius: 10px 50px 50px 50px; padding: 10px 5px; font-weight:bold; font-size:20px;">
LVL#
</div>
</div>
<div class="col- m-2">
<!--PERSONALITY TYPE
To choose your element personality type, change fa-fire-flame to either fa-wind for air, fa-droplet for water, and fa-mountains for earth. It may look a lil cut off, but you can increase the padding from p-2 to p-3 if you want.
-->
<div class="row d-flex no-gutters">
<div class="col- mr-2">
<div class="card p-2" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color:#36302A; font-size: 25px;">
<i class="fas fa-fire-flame"></i>
<!--END OF PERSONALITY TYPE-->
</div>
</div>
<!--CHARACTER NAME-->
<div class="col-"><p>Character Name</p></div>
<!--END OF CHARACTER NAME-->
</div>
<!--FOCUS PROGRESS BAR
Change width:50% to whatever percentile you need-->
<div class="row d-flex align-items-center">
<div class="col- ml-2">
<i class="fas fa-eye" style="font-size:20px;"></i>
</div>
<div class="col">
<div class="progress mt-1" style="background-image:linear-gradient(to bottom,
rgba(34,24,44,1),
rgba(43,43,62,.75),
rgba(55,64,80,1)); border: 5px solid #594F42; border-radius: 10px 50px 50px 50px;">
<div class="progress-bar" role="progressbar"
style="width: 50%;
background-color: #E161F2;"></div>
</div></div>
<!--FOCUS PROGRESS BAR-->
</div>
<p><b>Focus:</b> <span class="pull-right">0/780</span></p>
</div>
</div>
</div>
<div class="col-lg-6 mb-3">
<h1 style="color:#FFFBE2;">About</h1>
<!--QUICK INFO-->
<div class="row mt-3">
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; 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-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px; color: #232F42; font-weight: bold;"> content</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color: #232F42; font-weight: bold;">content</a></div>
</div>
</div>
<div class="col-lg-12">
<div class="row no-gutters mb-2" style="border: #232F42 2px solid;">
<div class="col-auto align-items-center" style="background: #232F42; font-weight: bold; padding: 5px; min-width:140px;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background-color: #FFF8EF; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color: #232F42; font-weight: bold;">content</a></div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
<!--CHARACTER ABT-->
<div class="card-text overflow-auto my-3" style="max-height: 300px;">
<p>Quick about your character here. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--CHARACTER ABT-->
<h1 style="color:#FFFBE2;">Accessories</h1>
<div class="row no-gutters">
<div class="col- m-2">
<div class="card rounded-circle tooltipster" title="Item_Name" style="border: 5px solid #E2D0B7; background-color:#C1AB89; background-image: url(https://palia.wiki.gg/images/9/9e/Fishing_Attachment.png); background-size: contain; background-repeat:no-repeat; background-position: center; height:70px; width:70px;">
</div>
</div>
<div class="col- m-2">
<div class="card rounded-circle tooltipster" title="Item_Name" style="border: 5px solid #E2D0B7; background-color:#C1AB89; background-image: url(https://palia.wiki.gg/images/9/9e/Fishing_Attachment.png); background-size: contain; background-repeat:no-repeat; background-position: center; height:70px; width:70px;">
</div>
</div>
<div class="col- m-2">
<div class="card rounded-circle tooltipster" title="Item_Name" style="border: 5px solid #E2D0B7; background-color:#C1AB89; background-image: url(https://palia.wiki.gg/images/9/9e/Fishing_Attachment.png); background-size: contain; background-repeat:no-repeat; background-position: center; height:70px; width:70px;">
</div>
</div>
<div class="col- m-2">
<div class="card rounded-circle tooltipster" title="Item_Name" style="border: 5px solid #E2D0B7; background-color:#C1AB89; background-image: url(https://palia.wiki.gg/images/9/9e/Fishing_Attachment.png); background-size: contain; background-repeat:no-repeat; baackground-position: center; height:70px; width:70px;">
</div>
</div>
<div class="col- m-2">
<div class="card rounded-circle tooltipster" title="Item_Name" style="border: 5px solid #E2D0B7; background-color:#C1AB89; background-image: url(https://palia.wiki.gg/images/4/44/Default_Fullbody_Color_1.png); background-size: contain; background-repeat:no-repeat; background-position: center; height:70px; width:70px;">
</div>
</div>
<div class="col- m-2">
<div class="card rounded-circle tooltipster" title="Item_Name" style="border: 5px solid #E2D0B7; background-color:#C1AB89; background-image: url(https://palia.wiki.gg/images/4/40/Sandy_Palcat.png); background-size: contain; background-repeat:no-repeat; background-position: center; height:70px; width:70px;">
</div>
</div>
</div>
<!--CONTENT-->
</div>
</div>
</div>
<!--END OF MAIN TAB-->
<!--ABOUT TAB-->
<div class="tab-pane fade show m-3" id="about2" role="tabpanel">
<h1 style="color:#FFFBE2;">Trivia</h1>
<ul>
<li>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.</li>
<li>Content</li>
<li>Content</li>
</ul>
<div class="row d-flex no-gutters">
<div class="col-md-6">
<h1 style="color:#FFFBE2;">Likes</h1>
<ul>
<li>Content</li>
<li>Content</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
<div class="col-md-6">
<h1 style="color:#FFFBE2;">Dislikes</h1>
<ul>
<li>Content</li>
<li>Content</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<h1 style="color:#FFFBE2;">Personality</h1>
<div class="card-text">
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text d-flex justify-content-center mt-n2 mb-1 align-items-center" style="opacity:0.5;">
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-->
<p>Your character's personality here. This box will expand. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="row mt-3">
<div class="col-md-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Charisma</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Courage</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Intelligence</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
</div>
<div class="col-md-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Empathy</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Humor</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Integrity</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
</div>
</div>
</div>
<h1 class="my-2" style="color:#FFFBE2;">Stats</h1>
<div class="row my-3">
<div class="col-md-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Health</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Strength</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Agility</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Stamina</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Dexterity</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
</div>
<div class="col-md-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Defense</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Attack</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Luck</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Magic</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Speed</h6>
<div class="progress my-1" style="border: #232F42 1px solid; background-color: #FFFBE2;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #232F42; color: #FFFBE2;">25%</div>
</div>
</div>
</div>
</div>
<!--END OF ABOUT TAB-->
<!--DESIGN TAB-->
<div class="tab-pane fade show m-3" id="design" role="tabpanel">
<h1 class="text-center display-4" style="font-weight: bold; color:#FFFBE2;">Design</h1>
<div class="row">
<div class="col-md-5">
<!--OUTFITS
To add another slide, copy either IMG TWO or THREE and paste above the paste line-->
<div id="FORMS" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--IMG ONE-->
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; color: #232F42;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--END OF IMG ONE-->
<!--IMG TWO-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; color: #232F42;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--END OF IMG TWO-->
<!--IMG THREE-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; color: #232F42;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--END OF IMG THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF OUTFITS-->
<!--BUMPER BUTTONS-->
<div class="row no-gutters w-100">
<!--LB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0" style="font-size:30px; background-color: #232F42; color: #FFFBE2; border: #83A1F0 1px solid;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6 p-2">
</div>
<!--RB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0" style="font-size:30px; background-color: #232F42; color: #FFFBE2; border: #83A1F0 1px solid;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--END OF CHARACTER IMG-->
</div>
<!--DESIGN NOTES-->
<div class="col-md-7">
<!--COLOR PALETTE
INSTRUCTIONS: You want to change the hex code #A1A1A1 to whatever color you have for the palette. If it ends up that the text is too light, add "color: #000;" after "letter-spacing: 3px;" in the full style tag. Don't forget to actually write the hex code in the text portion as well, so that people know what the actual color is.-->
<div class="row">
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 1: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 2: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 1: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 2: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-head-side"></i> skintone: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye-dropper-half"></i> details: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-clothes-hanger"></i> outfit 1: #hex_code</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-shirt"></i> outfit 2: #hex_code</div>
</div>
</div>
</div>
<!--END OF COLOR PALETTE-->
<div class="row mb-3 p-2">
<div class="col-md-6">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Form One</h1>
<p>Give a description of your character's default form/outfit 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.</p>
</div>
<div class="col-md-6">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Form Two</h1>
<p>Give a description of your character's default form/outfit 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.</p>
</div>
</div>
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Design Notes</h1>
<ul class="pl-4 list-unstyled">
<li><i class="fas fa-greater-than"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-greater-than"></i> Information</li>
<li><i class="fas fa-greater-than"></i> Information</li>
<li><i class="fas fa-greater-than"></i> Information</li>
</ul>
</div>
<!--DESIGN NOTES-->
</div>
</div>
<!--END OF DESIGN TAB-->
<!--STORY TAB-->
<div class="tab-pane fade show m-3" id="story" role="tabpanel">
<!--BIO-->
<h1 class="text-center display-4" style="font-weight: bold; color:#FFFBE2;">Story</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit sed ullamcorper morbi tincidunt ornare massa. Tortor condimentum lacinia quis vel eros. Non nisi est sit amet facilisis magna etiam tempor orci. Massa massa ultricies mi quis hendrerit dolor magna eget. Sociis natoque penatibus et magnis dis parturient montes. Pretium vulputate sapien nec sagittis aliquam. Ante metus dictum at tempor commodo ullamcorper a lacus. Rutrum tellus pellentesque eu tincidunt. Eros donec ac odio tempor orci dapibus ultrices.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>
<h3 class="my-3"><i class="fas fa-books"></i> Subheader <div class="card mb-1" style="background-color: #FFFBE2;"></div></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit sed ullamcorper morbi tincidunt ornare massa. Tortor condimentum lacinia quis vel eros. Non nisi est sit amet facilisis magna etiam tempor orci. Massa massa ultricies mi quis hendrerit dolor magna eget. Sociis natoque penatibus et magnis dis parturient montes. Pretium vulputate sapien nec sagittis aliquam. Ante metus dictum at tempor commodo ullamcorper a lacus. Rutrum tellus pellentesque eu tincidunt. Eros donec ac odio tempor orci dapibus ultrices.</p>
<p>Enim ut sem viverra aliquet. Id aliquet risus feugiat in. Ut diam quam nulla porttitor massa. Sed tempus urna et pharetra. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Aenean pharetra magna ac placerat vestibulum lectus mauris. Elementum curabitur vitae nunc sed velit dignissim. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Lectus arcu bibendum at varius vel. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Est ante in nibh mauris cursus mattis molestie a iaculis. Auctor neque vitae tempus quam pellentesque. Est velit egestas dui id. Mauris ultrices eros in cursus turpis massa tincidunt dui ut.</p>
<p>Auctor eu augue ut lectus arcu bibendum at. Vulputate mi sit amet mauris. Duis at consectetur lorem donec massa sapien faucibus. Aliquam ut porttitor leo a. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Dolor purus non enim praesent elementum. Sit amet venenatis urna cursus eget nunc scelerisque. Nec feugiat in fermentum posuere urna. Pulvinar mattis nunc sed blandit libero volutpat. Malesuada proin libero nunc consequat interdum. Sit amet purus gravida quis. Pulvinar etiam non quam lacus.</p>
<h3 class="my-3"><i class="fas fa-books"></i> Subheader <div class="card mb-1" style="background-color: #FFFBE2;"></div></h3>
<p>Non tellus orci ac auctor. Augue mauris augue neque gravida. Urna condimentum mattis pellentesque id. Sed sed risus pretium quam vulputate. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Iaculis eu non diam phasellus vestibulum lorem. Risus at ultrices mi tempus imperdiet nulla malesuada. Eget dolor morbi non arcu risus. Ac tortor vitae purus faucibus ornare. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Id neque aliquam vestibulum morbi. Lectus arcu bibendum at varius vel pharetra vel turpis. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Maecenas accumsan lacus vel facilisis volutpat est velit. Nulla aliquet porttitor lacus luctus accumsan.</p>
<p>In vitae turpis massa sed elementum. Orci dapibus ultrices in iaculis nunc. Diam quam nulla porttitor massa id neque. Cras semper auctor neque vitae. Dictum varius duis at consectetur lorem donec massa sapien faucibus. Est ullamcorper eget nulla facilisi etiam. Ultrices in iaculis nunc sed augue lacus viverra. Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Non consectetur a erat nam at lectus urna duis convallis. Lacus sed viverra tellus in hac habitasse platea. Velit egestas dui id ornare arcu odio. Vitae nunc sed velit dignissim. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Mattis molestie a iaculis at erat pellentesque adipiscing commodo elit. Quisque non tellus orci ac auctor augue. Libero nunc consequat interdum varius sit amet.</p>
</div>
<!--END OF STORY TAB-->
<!--LINKS TAB-->
<div class="tab-pane fade show m-3" id="links" role="tabpanel">
<!--ROMANTIC LINK-->
<div class="container border-0 p-2 overflow-auto mb-3" style="height: 315px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/77096282_xDI3G0tNxjfKIQ1.png) center; background-repeat: no-repeat; background-size:cover; color: #594F42;">
<div class="row m-3 align-items-center">
<div class="col-lg-12">
<div class="card p-2 mb-3" style="background-color:#796E5F; color: #FFFCF7;">
<h1>Character Name - Relationship
<!--RELATIONSHIP VALUE
Change fas to fad or fal if you wanna denote not a full relationship-->
<span class="pull-right"><i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i></span></h1>
</div>
</div>
<div class="col-sm-3">
<!--LINK CHARACTER HERE-->
<a href="#">
<!--LINK ICON HERE-->
<img src="https://palia.wiki.gg/images/4/48/Hodari_Profile.png"
class="rounded-circle d-block" style="max-width: 200px; border: #FF91C4 8px solid; z-index:1;"></a>
<i style="position: absolute; top:70%; left: 60%; color: #9A4E87; z-index:100;" class="far fa-heart fa-3x fa-beat"></i>
<i style="position: absolute; top:70%; left: 60%; color: #FF91C4; z-index:2; text-shadow: 0 0 5px #0A1A37;" class="fas fa-heart fa-3x fa-beat"></i>
</div>
<div class="col-lg-9">
<p>Write your character stuff here. If you write too much this box scrolls. 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--END OF ROMANTIC LINK-->
<!--CHARACTER LINK-->
<div class="container border-0 p-2 overflow-auto mb-3" style="height: 315px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/77096282_xDI3G0tNxjfKIQ1.png) center; background-repeat: no-repeat; background-size:cover; color: #594F42;">
<div class="row m-3 align-items-center">
<div class="col-lg-12">
<div class="card p-2 mb-3" style="background-color:#796E5F; color: #FFFCF7;">
<h1>Character Name - Relationship
<!--RELATIONSHIP VALUE
Change fas to fal if you wanna denote not a full relationship-->
<span class="pull-right"><i class="fas fa-handshake"></i>
<i class="fas fa-handshake"></i>
<i class="fas fa-handshake"></i>
<i class="fal fa-handshake"></i></span></h1>
</div>
</div>
<div class="col-sm-3">
<!--LINK CHARACTER HERE-->
<a href="#">
<!--LINK ICON HERE-->
<img src="https://palia.wiki.gg/images/a/a3/Ashura_Profile.png"
class="rounded-circle d-block" style="max-width: 200px; border: #849CFF 8px solid; z-index:1;"></a>
<i style="position: absolute; top:0%; left: 60%; color: #0A1A37; z-index:100;" class="far fa-comment-dots fa-3x"></i>
<i style="position: absolute; top:0%; left: 60%; color: #53CCFF; z-index:2; text-shadow: 0 0 5px #0A1A37;" class="fas fa-comment-dots fa-3x"></i>
</div>
<div class="col-lg-9">
<p>Write your character stuff here. If you write too much this box scrolls. 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="container border-0 p-2 overflow-auto mb-3" style="height: 315px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/77096282_xDI3G0tNxjfKIQ1.png) center; background-repeat: no-repeat; background-size:cover; color: #594F42;">
<div class="row m-3 align-items-center">
<div class="col-lg-12">
<div class="card p-2 mb-3" style="background-color:#796E5F; color: #FFFCF7;">
<h1>Character Name - Relationship
<!--RELATIONSHIP VALUE
Change fas to fal if you wanna denote not a full relationship-->
<span class="pull-right"><i class="fas fa-handshake"></i>
<i class="fas fa-handshake"></i>
<i class="fas fa-handshake"></i>
<i class="fal fa-handshake"></i></span></h1>
</div>
</div>
<div class="col-sm-3">
<!--LINK CHARACTER HERE-->
<a href="#">
<!--LINK ICON HERE-->
<img src="https://palia.wiki.gg/images/a/a3/Ashura_Profile.png"
class="rounded-circle d-block" style="max-width: 200px; border: #849CFF 8px solid; z-index:1;"></a>
<i style="position: absolute; top:0%; left: 60%; color: #0A1A37; z-index:100;" class="far fa-comment-dots fa-3x"></i>
<i style="position: absolute; top:0%; left: 60%; color: #53CCFF; z-index:2; text-shadow: 0 0 5px #0A1A37;" class="fas fa-comment-dots fa-3x"></i>
</div>
<div class="col-lg-9">
<p>Write your character stuff here. If you write too much this box scrolls. 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE LINKS ABOVE HERE-->
</div>
<!--END OF LINKS TAB-->
</div>
</div>
</div>