Profile
<!--==========================================
[06] PATH (CC ver.) by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - i've also
added comments for light code edits you
may want to do. feel free to change
any themed elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
this code has a custom accent colour;
the easiest way to change it is to
mark the colour code below, and
then use ctrl+f to find and replace
all instances of it in the code.
accent :
#eea355
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!
===========================================-->
<!-- MAIN CONTAINER =======================-->
<div class="mx-auto my-5 p-5" style="max-width: 1000px;
background-image: url(https://images.unsplash.com/photo-1575489272413-cb506258027e);
background-size: cover;
/* | background image - change background-size to a pixel value if you're using a seamless pattern */;
background-position: center; border-radius: 15px;">
<div class="row justify-content-center">
<div class="col-auto order-lg-1 d-block d-lg-flex flex-column">
<!-- ICON + NAME (MIDDLE) CARD ============-->
<div class="card mb-4 p-3 border-0" style="flex: 1 1 0; max-width: 232px; border-radius: 116px 116px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<img class="rounded-circle"
src="IMAGE URL" style="width: 200px; background-color: #eea355;">
<!-- icon - 200x200 looks best -->
<p class="mt-3 mb-0 text-center" style="font-size: 22px; letter-spacing: 1px; font-variant: small-caps; color: #eea355;">
name surname
</p>
<div class="row no-gutters align-items-center my-1">
<div class="col">
<hr class="m-0">
</div>
<div class="col-auto">
<i class="fad fa-seedling mx-3" style="color: #eea355;"></i>
</div>
<div class="col">
<hr class="m-0">
</div>
</div>
<p class="text-center text-muted">
adjective • adjective • adjective
</p>
<hr class="w-100 my-3">
<!-- MUSIC PLAYER =======================-->
<div style="position: relative; height: 100px; border-radius: 10px; overflow: hidden;">
<iframe width="200" height="300"
src="https://www.youtube.com/embed/ponjw2FgL_k?controls=0" frameborder="0" style="position: absolute; top: -100px;"></iframe>
<!-- replace with youtube embed, keep ?controls=0 at the end -->
</div>
</div>
</div>
<div class="col-lg d-block d-lg-flex flex-column mt-lg-5 pt-lg-5">
<!-- FIELDS (LEFT) CARD ====================
> you can edit the names and values of
fields, but keep the amount the same -
if they're not the cards will end up
with empty spaces at the bottom.
=========================================-->
<div class="card mt-lg-5 mb-4 p-3 text-monospace border-0" style="flex: 1 1 0; color: #eea355; border-radius: 60px 15px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<hr class="m-0" style="position: absolute; top: 32px; right: 64px; left: 40px;">
<p class="text-right mb-1">
<i class="fad fa-tree-alt" style="font-size: 32px; color: #eea355;"></i>
</p>
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
NICKNAME
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
AGE
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
GENDER
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
ORIENTATION
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
OCCUPATION
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
ROLE
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
STATUS
</div>
<div class="col-auto mx-2">
•
</div>
<div class="col text-right text-muted">
content
</div>
</div>
<!--====================================-->
</div>
</div>
<div class="col-lg order-lg-2 d-block d-lg-flex flex-column mt-lg-5 pt-lg-5">
<!-- PERSONALITY BARS (RIGHT) CARD =========
> edit the width (0-100%) to slide the
dot to the left or right
> like fields you can edit the names on
the sides of the progress bars, but
keep the same amount !
=========================================-->
<div class="card mt-lg-5 mb-4 p-3 text-monospace text-muted border-0" style="flex: 1 1 0; font-size: 18px; font-variant: small-caps; border-radius: 15px 60px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<hr class="m-0" style="position: absolute; top: 32px; right: 40px; left: 64px;">
<p>
<i class="fad fa-acorn" style="font-size: 32px; color: #eea355;"></i>
</p>
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
reserved
</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; background-color: #eea355; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
friendly
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
immature
</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; background-color: #eea355; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
serious
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
timid
</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; background-color: #eea355; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
brave
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
sincere
</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; background-color: #eea355; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
deceptive
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
sensitive
</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; background-color: #eea355; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
tough
</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
lazy
</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; background-color: #eea355; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
diligent
</div>
</div>
<!--====================================-->
</div>
</div>
</div>
<!-- MOODBOARD ==========================-->
<div class="card p-2 mb-5 border-0" style="border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters">
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
</div>
</div>
<!-- HISTORY ============================-->
<div class="row flex-lg-row-reverse my-4">
<div class="col-lg-auto text-center">
<img src="IMAGE URL" class="mb-4" style="max-width: 300px;">
<!-- pagedoll - looks best transparent -->
</div>
<div class="col-lg flex-column">
<div class="card d-block d-lg-flex mb-4 p-3 border-0" style="flex: 1 1 300px; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<p class="mt-n2" style="font-size: 28px; letter-spacing: 1px; font-variant: small-caps; color: #eea355;">
history
</p>
</div>
<div class="col">
<hr class="my-0 mx-3">
</div>
<div class="col-auto">
<i class="fad fa-tree-large" style="font-size: 24px; color: #eea355;"></i>
</div>
</div>
<div style="flex: 1 1 0; overflow-y: auto;">
<p>
Write about your characters' history here. This box will scroll!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra quis enim nec accumsan. In hac habitasse platea dictumst. Mauris blandit scelerisque augue et sollicitudin. Integer eget dignissim massa. Cras gravida nulla sit amet justo malesuada vestibulum. Praesent posuere commodo tellus at convallis. Sed in lectus feugiat, hendrerit elit vel, tempor ante. Integer interdum luctus lorem, eu euismod diam sagittis eget. Nulla et tempor augue. Maecenas pulvinar blandit arcu vel fringilla.
</p>
</div>
<p class="mt-3 text-monospace text-right" style="color: #eea355;"><i>
"A quote, title or tagline goes here."
</i></p>
</div>
</div>
</div>
<!-- DESIGN =============================-->
<div class="row justify-content-center align-items-center">
<div class="col-lg-auto order-lg-1 text-center">
<img src="IMAGE URL" class="w-100 mb-4" style="max-width: 550px;">
<!-- main fullbody image - looks best transparent -->
</div>
<div class="col-auto order-lg-2">
<!-- COLOUR SCHEME ======================-->
<div class="card flex-row flex-lg-column p-2 mb-4 border-0" style="border-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #000000;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #000000;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #000000;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #000000;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div style="
background-color: #000000;
width: 40px; height: 40px; border-radius: 50%;"></div>
</div>
</div>
<div class="col-lg">
<!-- DESIGN DETAILS + NOTES =============-->
<div class="card mb-2 p-3 text-monospace border-0" style="color: #eea355; border-radius: 25px 25px 5px 5px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
HEIGHT
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
content
</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
WEIGHT
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
content
</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
BUILD
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
content
</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
SPECIES
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
content
</div>
</div>
<!--====================================-->
</div>
<div class="card mb-4 p-3 text-monospace border-0" style="color: #eea355; border-radius: 5px 5px 25px 25px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
HAIR
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
colour
</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
SKIN
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
colour
</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">
EYES
</div>
<div class="col-auto mx-2">
//
</div>
<div class="col text-right text-body">
colour
</div>
</div>
<!--====================================-->
</div>
<div class="card mb-4 p-3 border-0" style="color: #eea355; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<p class="mt-n2 text-monospace" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
design notes
</p>
<ul class="mb-0 pl-3">
<li>
<span class="text-body">
Write design notes like this! You can copy+paste as many
li:s as you need - but make sure they look the same as
this one or they won't be styled correctly!
</span>
</li>
<li>
<span class="text-body">
A design note.
</span>
</li>
<li>
<span class="text-body">
Another design note.
</span>
</li>
</ul>
</div>
<div class="row no-gutters mb-4" style="height: 50px;">
<div class="col-auto mr-2">
<!-- DESIGNER CREDIT + WORTH ============-->
<a
href="DESIGNER URL"
title="Design by Designer Name"
data-toggle="tooltip" data-placement="bottom" class="btn btn-success d-flex justify-content-center align-items-center" style="height: 50px; width: 50px; font-size: 18px; background-color: #eea355; border-color: #eea355; border-radius: 25px 5px 5px 25px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<i class="fad fa-pencil-ruler"></i>
</a>
</div>
<div class="col">
<div class="card px-3 text-monospace border-0" style="height: 50px; border-radius: 5px 25px 25px 5px; color: #eea355; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters align-items-center h-100">
<div class="col">
<hr class="m-0" style="margin-bottom: -2px; border-width: 4px; border-top-style: dotted;">
</div>
<div class="col-auto ml-3">
WORTH $0
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY ========================-->
<div class="row my-4">
<div class="col-lg-auto text-center">
<img src="IMAGE URL" class="mb-4" style="max-width: 300px;">
<!-- pagedoll - looks best transparent -->
</div>
<div class="col-lg flex-column">
<div class="card d-block d-lg-flex mb-4 p-3 border-0" style="flex: 1 1 300px; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<p class="mb-2 text-monospace" style="color: #eea355;"><i>
MBTI // ALIGNMENT // ZODIAC // ELEMENT
</i></p>
<div style="flex: 1 1 0; overflow-y: auto;">
<p>
Write about your characters' personality here. This box will scroll!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra quis enim nec accumsan. In hac habitasse platea dictumst. Mauris blandit scelerisque augue et sollicitudin. Integer eget dignissim massa. Cras gravida nulla sit amet justo malesuada vestibulum. Praesent posuere commodo tellus at convallis. Sed in lectus feugiat, hendrerit elit vel, tempor ante. Integer interdum luctus lorem, eu euismod diam sagittis eget. Nulla et tempor augue. Maecenas pulvinar blandit arcu vel fringilla.
</p>
</div>
<div class="row no-gutters align-items-center mt-2 mb-n1">
<div class="col-auto">
<i class="fad fa-leaf-oak" style="font-size: 24px; color: #eea355;"></i>
</div>
<div class="col">
<hr class="my-0 mx-3">
</div>
<div class="col-auto">
<p class="mt-n2" style="font-size: 28px; letter-spacing: 1px; font-variant: small-caps; color: #eea355;">
personality
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- BIG LINKS (LEFT) ===================-->
<div class="col-lg flex-column">
<!--====================================-->
<div class="card flex-grow-1 p-3 mb-3 ml-lg-4 border-0" style="border-radius: 100px 15px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters">
<div class="col-lg-auto mb-3 mb-lg-0 mr-lg-3">
<div style="min-width: 150px; height: 100%; padding-bottom: 100%; background-color: #eea355;
background-image: url(IMAGE URL);
/* icon */;
background-size: cover; background-position: center; border-radius: 85px 5px 5px 5px;"></div>
</div>
<div class="col flex-column">
<div class="row no-gutters align-items-center">
<div class="col-auto mt-n2 mr-3">
<a href="CHARACTER URL" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
name
</a>
</div>
<div class="col text-monospace text-right text-muted">
relationship
</div>
</div>
<hr class="w-100 my-1">
<div class="text-center" style="color: #eea355;">
•
<!-- relationship level - fas are filled hearts, far are empty -->
<i class="fas fa-heart ml-2"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart mr-2"></i>
•
</div>
<div class="flex-grow-1 flex-column justify-content-center text-center font-italic" style="font-size: 13px;">
<p>
A short relationship summary goes here. This will not scroll, so keep it short!
</p>
</div>
</div>
</div>
</div>
<!--====================================-->
<div class="card flex-grow-1 p-3 mb-4 border-0" style="border-radius: 15px 15px 15px 100px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row flex-lg-row-reverse no-gutters">
<div class="col flex-column">
<div class="row no-gutters align-items-center">
<div class="col-auto mt-n2 mr-3">
<a href="CHARACTER URL" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
name
</a>
</div>
<div class="col text-monospace text-right text-muted">
relationship
</div>
</div>
<hr class="w-100 my-1">
<div class="text-center" style="color: #eea355;">
•
<i class="fas fa-heart ml-2"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart mr-2"></i>
•
</div>
<div class="flex-grow-1 flex-column justify-content-center text-center font-italic" style="font-size: 13px;">
<p>
Relationship summary.
</p>
</div>
</div>
<div class="col-lg-auto mt-3 mt-lg-0 mr-lg-3 ">
<div style="min-width: 150px; height: 100%; padding-bottom: 100%; background-color: #eea355;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 5px 5px 5px 85px;"></div>
</div>
</div>
</div>
<!--====================================-->
</div>
<!-- SMALL LINKS (RIGHT) ================-->
<div class="col-lg-auto flex-column justify-content-center">
<!--====================================-->
<div class="card p-2 mb-3 border-0" style="border-radius: 15px 65px 65px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters h-100">
<div class="col align-self-center mx-2">
<p class="mb-0">
<a href="CHARACTER URL" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
name
</a>
<i class="fad fa-leaf" style="font-size: 16px; color: #eea355;"></i>
<!-- little decorative icon. pick one that matches the character! -->
</p>
<hr class="my-1">
<div class="row no-gutters">
<div class="col mr-3 text-monospace text-muted">
relationship
</div>
<div class="col-auto" style="color: #eea355;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-auto">
<div style="width: 100px; height: 100%; padding-bottom: 100%; background-color: #eea355;
background-image: url(IMAGE URL);
/* icon */;
background-size: cover; background-position: center; border-radius: 50px;"></div>
</div>
</div>
</div>
<!--====================================-->
<div class="card p-2 mb-3 mr-lg-4 border-0" style="border-radius: 15px 65px 65px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters h-100">
<div class="col align-self-center mx-2">
<p class="mb-0">
<a href="CHARACTER URL" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
name
</a>
<i class="fad fa-flower" style="font-size: 16px; color: #eea355;"></i>
</p>
<hr class="my-1">
<div class="row no-gutters">
<div class="col mr-3 text-monospace text-muted">
relationship
</div>
<div class="col-auto" style="color: #eea355;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-auto">
<div style="width: 100px; height: 100%; padding-bottom: 100%; background-color: #eea355;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 50px;"></div>
</div>
</div>
</div>
<!--====================================-->
<div class="card p-2 mb-4 mr-lg-5 border-0" style="border-radius: 15px 65px 65px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters h-100">
<div class="col align-self-center mx-2">
<p class="mb-0">
<a href="CHARACTER URL" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
name
</a>
<i class="fad fa-wheat" style="font-size: 16px; color: #eea355;"></i>
</p>
<hr class="my-1">
<div class="row no-gutters">
<div class="col mr-3 text-monospace text-muted">
relationship
</div>
<div class="col-auto" style="color: #eea355;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-auto">
<div style="width: 100px; height: 100%; padding-bottom: 100%; background-color: #eea355;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 50px;"></div>
</div>
</div>
</div>
<!--====================================-->
</div>
</div>
<!-- CREDIT =============================-->
<div class="row no-gutters justify-content-end mr-n5 mb-n5">
<div class="col-auto">
<div class="card p-2 pt-3 pl-3 border-0" style="width: auto; font-size: 18px; border-radius: 40px 0 12px 0;">
<a href="https://toyhou.se/Togo" style="color: #eea355;">
<i class="fal fa-code"></i>
</a>
</div>
</div>
</div>
</div>
Recent Images
No images.