Profile
<!--------------------------------
code by lemons / @valyriz
contact either account if you have questions!
feel free to move/style the credit. just keep it visible and easy to find.
NOTES:
- You can add/remove individual color circles, aesthetic images and characters links.
- Feel free to rename text sections according to your own needs.
- This layout changes colours with your toyhou.se theme! If you want to change the base colours you can search and replace "primary" with the colour class you want. You can see how the colours look on different themes here: https://toyhou.se/1706277.-resources-/3054134.theme-colours
--------------------------------->
<div class="container-fluid" style="padding-bottom: 40px;">
<div class="row no-gutters d-flex flex-row">
<div class="col-lg-3 align-items-stretch d-flex flex-column">
<!--------------------------------
LEFT CARD
-------------------------------->
<div class="card card-primary text-light flex-grow-1" style="margin: 5px;">
<div class="row">
<div class="col-lg-10 col-md-8 col-sm-6 col-8 mx-auto text-center" style="padding-bottom: 30px;">
<img class="fr-rounded" src="IMAGE LINK" style="padding: 5px; border: 7px double; margin-top: 20px; margin-bottom: 20px;">
<!-- Replace IMAGE LINK with a link to the image you want to use. The image should be square. -->
<p>
Write a short character description here.
</p>
</div>
</div>
<p style="position: absolute; bottom: 10px; right: 10px;">
<a class="text-light" href="https://toyhou.se/lemons" data-toggle="popover" data-content="code by lemons" data-trigger="hover" data-placement="left">
<i class="fal fa-code"></i>
</a>
</p>
</div>
</div>
<div class="col-lg-9 align-items-stretch d-flex flex-column">
<div class="row">
<div class="col-12">
<!--------------------------------
TOP CARD
-------------------------------->
<div class="card card-primary text-light text-center" style="padding: 10px; margin: 5px;">
<p>
<span style="font-size: 30px; text-transform: uppercase; font-weight: 300; font-style: italic;">Name.
</span>Title
<br>
gender || pronouns || orientation
</p>
</div>
<div class="card text-primary text-center border-0" style="padding: 5px; margin: 5px; margin-bottom: 0px;">
MBTI / zodiac / alignment / content / content
</div>
</div>
</div>
<div class="row no-gutters flex-grow-1">
<div class="col-lg-8 flex-grow-1 d-flex">
<!--------------------------------
MIDDLE CARD
-------------------------------->
<div class="card card-outline-primary flex-grow-1" style="margin: 5px; padding: 10px; padding-bottom: 20px;">
<p>
Write a longer character description here.
</p>
<p class="text-center text-muted w-100" style="position: absolute; bottom: 10px; right: 0px;">
<i class="fal fa-heart"></i>
</p>
<!-- Bottom icon -->
</div>
</div>
<div class="col-lg-4 flex-grow-1 d-flex">
<!--------------------------------
TRIVIA LIST
-------------------------------->
<div class="card flex-grow-1" style="margin: 5px; padding: 10px; padding-top: 0px; border: none;">
<p class="text-primary">
<i class="fal fa-chevron-double-right" style="font-size: 20px;"></i>
<span style="font-size: 30px; font-weight: 300; font-style: italic;">
Trivia
</span>
</p>
<hr class="w-100 mt-0 text-primary" style="border-top: 1px solid;">
<ul style="list-style-type: circle; padding-left: 20px;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters d-flex flex-row align-items-stretch">
<div class="col-lg-8 flex-grow-1 d-flex flex-column">
<!--------------------------------
STAT BARS
-------------------------------->
<div class="card" style="margin: 5px; padding: 10px;">
<div class="row no-gutters text-center" style="text-transform: uppercase; letter-spacing: 1px;">
<div class="col-lg-6" style="padding: 5px;">
Charisma
<div class="progress" style="margin-top: 5px;">
<!-- CHARISMA -->
<div class="progress-bar" role="progressbar" style="width:50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Edit the width to change how far the bar has progressed. "Aria-valuenow" should be the same as the width. -->
</div>
</div>
<div class="col-lg-6" style="padding: 5px;">
Confidence
<div class="progress" style="margin-top: 5px;">
<!-- CONFIDENCE -->
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6" style="padding: 5px;">
Kindness
<div class="progress" style="margin-top: 5px;">
<!-- KINDNESS -->
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6" style="padding: 5px;">
Humor
<div class="progress" style="margin-top: 5px;">
<!-- HUMOR -->
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6" style="padding: 5px;">
Intelligence
<div class="progress" style="margin-top: 5px;">
<!-- INTELLIGENCE -->
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6" style="padding: 5px;">
Patience
<div class="progress" style="margin-top: 5px;">
<!-- PATIENCE -->
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--------------------------------
BACKSTORY / PERSONALITY
-------------------------------->
<div class="card flex-grow-1" style="margin: 5px; padding: 10px;">
<p class="text-primary m-0">
<i class="fal fa-chevron-double-right" style="font-size: 20px;"></i>
<span style="font-size: 30px; font-weight: 300; font-style: italic;">
Backstory
</span>
</p>
<hr class="w-100 mt-0 text-primary" style="border-top: 1px solid;">
<p>
Write about your characters backstory here.
</p>
<p class="text-primary m-0">
<i class="fal fa-chevron-double-right" style="font-size: 20px;"></i>
<span style="font-size: 30px; font-weight: 300; font-style: italic;">
Personality
</span>
</p>
<hr class="w-100 mt-0 text-primary" style="border-top: 1px solid;">
<p>
Write about your characters personality here.
</p>
</div>
</div>
<div class="col-lg-4 flex-grow-1 d-flex flex-column">
<!--------------------------------
COLOR SCHEME
-------------------------------->
<div class="card text-center" style="margin: 5px; letter-spacing: 1px; border: none;">
<div class="row no-gutters justify-content-center" style="padding: 5px;">
<div class="col-2" style="padding: 5px;">
<div class="rounded-circle" style="width: 100%; padding-bottom: 100%; background-color: #92e6d2;">
</div>
</div>
<!-- Edit the background-color to change the color of the circle. You can add/remove circles if you want to. -->
<div class="col-2" style="padding: 5px;">
<div class="rounded-circle" style="width: 100%; padding-bottom: 100%; background-color: #ac7c5b;">
</div>
</div>
<div class="col-2" style="padding: 5px;">
<div class="rounded-circle" style="width: 100%; padding-bottom: 100%; background-color: #5c412e;">
</div>
</div>
<div class="col-2" style="padding: 5px;">
<div class="rounded-circle" style="width: 100%; padding-bottom: 100%; background-color: #75cdd2;">
</div>
</div>
<div class="col-2" style="padding: 5px;">
<div class="rounded-circle" style="width: 100%; padding-bottom: 100%; background-color: #ffd38a;">
</div>
</div>
</div>
</div>
<!--------------------------------
DESIGN NOTES
-------------------------------->
<div class="card card-outline-primary flex-grow-1" style="margin: 5px; padding: 10px; padding-bottom: 20px;">
<p class="text-center" style="text-transform: uppercase; letter-spacing: 1px; font-size: 18px;">
Design notes
</p>
<p>
Write some design notes here.
</p>
<ul style="list-style-type: circle; padding-left: 20px;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p class="text-center text-muted w-100" style="position: absolute; bottom: 10px; right: 0;">
<i class="fal fa-star"></i>
</p>
<!-- Bottom icon. -->
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-12">
<!--------------------------------
AESTHETIC
-------------------------------->
<div class="card" style="margin: 5px; border: none;">
<div class="row no-gutters justify-content-center">
<div class="col-6 col-lg-2 col-md-3" style="padding: 5px;">
<div class="card rounded-0" style="width: 100%; padding-bottom: 100%; border: none; background-size: cover; background-position: center; background-image: url(IMAGE LINK);">
</div>
</div>
<!-- Replace IMAGE LINK with a link to the image you want to use. You don't need to make the images square yourself, they will get cropped automatically. -->
<div class="col-6 col-lg-2 col-md-3" style="padding: 5px;">
<div class="card rounded-0" style="width: 100%; padding-bottom: 100%; border: none; background-size: cover; background-position: center; background-image: url(IMAGE LINK);">
</div>
</div>
<div class="col-6 col-lg-2 col-md-3" style="padding: 5px;">
<div class="card rounded-0" style="width: 100%; padding-bottom: 100%; border: none; background-size: cover; background-position: center; background-image: url(IMAGE LINK);">
</div>
</div>
<div class="col-6 col-lg-2 col-md-3" style="padding: 5px;">
<div class="card rounded-0" style="width: 100%; padding-bottom: 100%; border: none; background-size: cover; background-position: center; background-image: url(IMAGE LINK);">
</div>
</div>
<div class="col-6 col-lg-2 col-md-3" style="padding: 5px;">
<div class="card rounded-0" style="width: 100%; padding-bottom: 100%; border: none; background-size: cover; background-position: center; background-image: url(IMAGE LINK);">
</div>
</div>
<div class="col-6 col-lg-2 col-md-3" style="padding: 5px;">
<div class="card rounded-0" style="width: 100%; padding-bottom: 100%; border: none; background-size: cover; background-position: center; background-image: url(IMAGE LINK);">
</div>
</div>
</div>
</div>
</div>
</div>
<!--------------------------------
LINKS
-------------------------------->
<div class="row no-gutters d-flex flex-row">
<div class="col-lg-6 flex-grow-1 d-flex">
<div class="card flex-grow-1" style="margin: 5px; padding: 10px;">
<div class="row no-gutters flex-grow-1">
<div class="col-lg-9 order-1 order-lg-0 flex-grow-1" style="padding: 5px;">
<p class="m-0 d-flex flex-row" style="align-items: flex-end; justify-content: space-between;">
<a href="CHARACTER LINK" class="text-primary" style="font-size: 30px; font-weight: 300; font-style: italic; text-decoration: none; float: left;">
Name
</a>
<span style="float: right; margin-bottom: 5px;"><i class="fal fa-heart"></i>
Relationship
</span>
</p>
<hr class="w-100 mt-0 text-primary" style="border-top: 1px solid;">
<p class="flex-grow-1">
Write about the characters relationship here.
</p>
</div>
<div class="col-9 col-lg-3 order-0 order-lg-1 mx-auto flex-grow-1 d-flex flex-column" style="padding: 5px;">
<div class="" style="display: table; height: 100%;">
<div class="" style="display: table-cell; vertical-align: middle;">
<img src="IMAGE LINK" class="fr-rounded">
<!-- Replace IMAGE LINK with a link to the image you want to use. The image should be square. -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 flex-grow-1 d-flex">
<div class="card flex-grow-1" style="margin: 5px; padding: 10px;">
<div class="row no-gutters flex-grow-1">
<div class="col-lg-9 order-1 order-lg-0 flex-grow-1" style="padding: 5px;">
<p class="m-0 d-flex flex-row" style="align-items: flex-end; justify-content: space-between;">
<a href="CHARACTER LINK" class="text-primary" style="font-size: 30px; font-weight: 300; font-style: italic; text-decoration: none; float: left;">
Name
</a>
<span style="float: right; margin-bottom: 5px;"><i class="fal fa-heart"></i>
Relationship
</span>
</p>
<hr class="w-100 mt-0 text-primary" style="border-top: 1px solid;">
<p class="flex-grow-1">
Write about the characters relationship here.
</p>
</div>
<div class="col-9 col-lg-3 order-0 order-lg-1 mx-auto flex-grow-1 d-flex flex-column" style="padding: 5px;">
<div class="" style="display: table; height: 100%;">
<div class="" style="display: table-cell; vertical-align: middle;">
<img src="IMAGE LINK" class="fr-rounded">
<!-- Replace IMAGE LINK with a link to the image you want to use. The image should be square. -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 flex-grow-1 d-flex">
<div class="card flex-grow-1" style="margin: 5px; padding: 10px;">
<div class="row no-gutters flex-grow-1">
<div class="col-lg-9 order-1 order-lg-0 flex-grow-1" style="padding: 5px;">
<p class="m-0 d-flex flex-row" style="align-items: flex-end; justify-content: space-between;">
<a href="CHARACTER LINK" class="text-primary" style="font-size: 30px; font-weight: 300; font-style: italic; text-decoration: none; float: left;">
Name
</a>
<span style="float: right; margin-bottom: 5px;"><i class="fal fa-heart"></i>
Relationship
</span>
</p>
<hr class="w-100 mt-0 text-primary" style="border-top: 1px solid;">
<p class="flex-grow-1">
Write about the characters relationship here.
</p>
</div>
<div class="col-9 col-lg-3 order-0 order-lg-1 mx-auto flex-grow-1 d-flex flex-column" style="padding: 5px;">
<div class="" style="display: table; height: 100%;">
<div class="" style="display: table-cell; vertical-align: middle;">
<img src="IMAGE LINK" class="fr-rounded">
<!-- Replace IMAGE LINK with a link to the image you want to use. The image should be square. -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.