[CHARA] Lepidopteran
created by:FlowerlyRat
Mixed ColorsHTMLCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Lepidopteran: HTML by @FlowerlyRat
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
- Play around with the filter to change its color!
<a class="text-warning" style="font-weight: bold; box-shadow: none; filter: hue-rotate(300deg) saturate(250%) brightness(105%)"
href="LINK">text</a>
Aesthetic changes:
Font: century gothic, monaco
Accent color: #f5335a
Secondary color: #ffaaba
-->
<div class="card border-0 px-3 py-5" style="margin-top: -15px; margin-left: -15px; margin-right: -15px; overflow: hidden">
<div class="card bg-transparent border-0 mx-auto" style="max-width: 800px">
<!--////////// NAME //////////-->
<div class="card pl-2 py-2 border-0" style="max-width: 60%; position: absolute; top: -25px; right: -10px; z-index: 5">
<div class="card p-2 border-0 bg-faded" style="background: #ffaaba">
<p class="text-truncate tooltipster" style="font-weight: bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco; color: #f5335a"
title="Name_again_for_when_it_s_truncated">
Name
</p>
</div>
</div>
<!--////////// NAME end //////////-->
<!--////////// MAIN CONTENT //////////-->
<div class="row no-gutters">
<!--////////// SIDE IMAGE + AVATAR //////////-->
<div class="col">
<!--////// AVATAR //////-->
<div class="card border-0 p-2 ml-md-5 ml-n3" style="position: absolute; top: 17px; height: 115px; width: 115px; z-index: 5">
<!--Decoraive butterfly-->
<a href="https://www.pngwing.com/en/free-png-ybdau " target="_blank" style="position: absolute; top: -25px; right: -15px; transform: rotate(20deg); z-index: 5">
<img class="tooltipster fa-flip-horizontal" data-placement="top" title="From pngwing" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75045664_xSpFsjgzk1Mn77G.png
" style="width: 60px; filter: hue-rotate(340deg) saturate(120%) brightness(110%)">
</a>
<!--Decoraive butterfly end-->
<div class="card m-auto h-100 w-100 border-0 bg-faded">
<img class="card border-0" src="
https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803
"><!-- ^ Avatar link above -->
</div>
</div>
<!--////// AVATAR end //////-->
<!--////// SIDE IMAGE //////-->
<div class="card p-2 h-100 border-0 bg-faded" style="background-image: url(
https://i.pinimg.com/736x/13/51/eb/1351eb077f9e7f57c41202e499e47b6d.jpg
); background-size: cover; background-position: center;">
<div class="card border-0" style="padding-left: 1px; padding-right: 2px; position: absolute; bottom: -4px; left: -3px">
<a class="mb-n1" href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
<!-- Template credit -->
<a class="tooltipster" title="HTML by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" style="color: #ffaaba">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
<!--////// SIDE IMAGE end //////-->
</div>
<!--////////// SIDE IMAGE + AVATAR end //////////-->
<!--////////// MAIN TEXT //////////-->
<div class="col-10 pl-2">
<div class="tab-content">
<!--////// TAB 1 //////-->
<div class="tab-pane fade active show" id="DESC">
<div class="card pt-md-2 border-0 bg-faded" style="padding-top: 35px; padding-left: 35px; height: 150px">
<p style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Description
</p>
<div class="pb-2 pr-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<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>
</div>
</div>
<!--////// TAB 1 end //////-->
</div>
<!--////// BUTTONS //////-->
<div class="card p-2 my-2 border-0 bg-faded row no-gutters nav nav-tabs" style="height: 50px;
background-image: url(https://cdn.pixabay.com/photo/2026/07/17/15/47/15-47-36-440_1280.jpg);
background-size: cover;
background-position: center">
<div class="card border-0" style="padding-left: 2px; padding-right: 1px; padding-top: 1px; position: absolute; top: -15px; right: -3px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
<a class="col-auto btn btn-warning font-weight-bold active" data-toggle="tab" href="#tab1" style="box-shadow: none; font-family: century gothic, monaco;
filter: hue-rotate(300deg) saturate(250%) brightness(105%)">
Basics</a>
<a class="col-auto btn btn-warning font-weight-bold ml-2" data-toggle="tab" href="#tab2" style="box-shadow: none; font-family: century gothic, monaco;
filter: hue-rotate(300deg) saturate(250%) brightness(105%)">
Identity</a>
<a class="col-auto btn btn-warning font-weight-bold mx-2" data-toggle="tab" href="#tab3" style="box-shadow: none; font-family: century gothic, monaco;
filter: hue-rotate(300deg) saturate(250%) brightness(105%)">
Story</a>
<a class="col-auto btn btn-warning font-weight-bold" data-toggle="tab" href="#tab4" style="box-shadow: none; font-family: century gothic, monaco;
filter: hue-rotate(300deg) saturate(250%) brightness(105%)">
Design</a>
</div>
<!--////// BUTTONS end //////-->
<!--////// MIDDLE SECTION //////-->
<div class="tab-content">
<!--/// BASICS TAB ///-->
<div class="tab-pane fade show active" id="tab1"><div class="row no-gutters">
<!--/// BASIC INFORMATION ///-->
<div class="col-md mb-md-0">
<div class="card pt-2 border-0 bg-faded" style="height: 223px">
<p class="px-2" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Basic info
</p>
<div class="pb-2 px-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<!--/// Species ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Species
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
species
</p>
</div>
</div>
<!--/// Species end ///-->
<!--/// Alias ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Alias
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
alias
</p>
</div>
</div>
<!--/// Alias end ///-->
<!--/// Age ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Age
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
99
</p>
</div>
</div>
<!--/// Age end ///-->
<!--/// Gender ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Gender
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
gender
</p>
</div>
</div>
<!--/// Gender end ///-->
<!--/// Pronouns ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Pronouns
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
pro/noun
</p>
</div>
</div>
<!--/// Pronouns end ///-->
<!--/// Orientation ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Orientation
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
orientation
</p>
</div>
</div>
<!--/// Orientation end ///-->
<!--/// Additional ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Field
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
field
</p>
</div>
</div>
<!--/// Additional end ///-->
</div>
</div>
</div>
<!--/// BASIC INFORMATION end ///-->
<!--/// IMAGE DIVIDER ///-->
<div class="col-md-1 mx-md-2 my-md-0 my-2">
<div class="card p-2 border-0 bg-faded h-100" style="
background-image: url(https://cdn.pixabay.com/photo/2018/10/03/15/51/sunflower-3721718_1280.jpg);
background-size: cover;
background-position: center
">
<div class="card border-0" style="padding-left: 1px; padding-right: 2px; position: absolute; bottom: -4px; left: -3px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!--/// IMAGE DIVIDER end ///-->
<!--/// SPECIES TRAITS ///-->
<div class="col-md mb-md-0">
<div class="card pt-2 border-0 bg-faded" style="height: 223px">
<p class="px-2 text-right" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Species traits
</p>
<div class="pb-2 px-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<!--/// Trait 1 ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Trait name
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
rarity
</p>
</div>
</div>
<!--/// Trait 1 end ///-->
<!--/// Trait 2 ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Trait name
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
rarity
</p>
</div>
</div>
<!--/// Trait 2 end ///-->
<!--/// Trait 3 ///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Trait name
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
rarity
</p>
</div>
</div>
<!--/// Trait 3 end ///-->
<hr class="mx-1 mb-2" style="border-width: 2px; border-color: #f5335a">
<!--/// Items used 1///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Item name
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
number used
</p>
</div>
</div>
<!--/// Items used 1 end ///-->
<!--/// Items used 2///-->
<div class="row no-gutters align-items-center mb-n2">
<div class="col-auto">
<p style="font-weight: bold">
Item name
</p>
</div>
<hr class="col mx-1" style="border-width: 1px; border-color: #ffaaba">
<div class="col-auto ml-auto">
<p>
number used
</p>
</div>
</div>
<!--/// Items used 2 end ///-->
</div>
</div>
</div>
<!--/// SPECIES TRAITS end ///-->
</div></div>
<!--/// BASICS TAB end ///-->
<!--/// IDENTITY TAB ///-->
<div class="tab-pane fade" id="tab2">
<div class="card pt-2 border-0 bg-faded" style="height: 223px">
<div class="pb-2 px-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<!--// Personality //-->
<div class="row no-gutters">
<div class="col-auto mr-2">
<p class="mb-0" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Personality
</p>
</div>
<div class="col py-1">
<div class="card p-2 border-0 bg-faded h-100" style="
background-image: url(https://cdn.pixabay.com/photo/2018/10/03/15/51/sunflower-3721718_1280.jpg);
background-size: cover;
background-position: center
"></div>
</div>
</div>
<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>
<!--// Personality end //-->
<hr class="mt-3 mb-2" style="border: 1px solid #f5335a">
<!--// Interests //-->
<div class="row no-gutters">
<div class="col-auto ml-2 order-2">
<p class="mb-0" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Interests
</p>
</div>
<div class="col py-1 order-1">
<div class="card p-2 border-0 bg-faded h-100" style="
background-image: url(https://cdn.pixabay.com/photo/2018/10/03/15/51/sunflower-3721718_1280.jpg);
background-size: cover;
background-position: center
"></div>
</div>
</div>
<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>
<!--// Interests end //-->
<hr class="mt-3 mb-2" style="border: 1px solid #f5335a">
<!--// Preferences //-->
<div class="row no-gutters">
<div class="col-auto mr-2">
<p class="mb-0" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Preferences
</p>
</div>
<div class="col py-1">
<div class="card p-2 border-0 bg-faded h-100" style="
background-image: url(https://cdn.pixabay.com/photo/2018/10/03/15/51/sunflower-3721718_1280.jpg);
background-size: cover;
background-position: center
"></div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-6 pr-md-1">
<p class="mb-0" style="font-weight:bold; font-size: 1.1em; font-style: oblique; font-family: century gothic, monaco;">
Likes
</p>
<ul class="list-unstyled mb-0">
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
</ul>
</div>
<div class="col-md-6 pl-md-1">
<p class="mb-0" style="font-weight:bold; font-size: 1.1em; font-style: oblique; font-family: century gothic, monaco;">
Dislikes
</p>
<ul class="list-unstyled mb-0">
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-check mr-2" style="color: #ffaaba"></i> content</li>
</ul>
</div>
</div>
<!--// Preferences end //-->
</div>
</div>
</div>
<!--/// IDENTITY TAB end ///-->
<!--/// STORY TAB ///-->
<div class="tab-pane fade" id="tab3">
<div class="card pt-2 border-0 bg-faded" style="height: 223px">
<div class="pb-2 px-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<!--// Chapter 1 //-->
<p class="mb-0" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Chapter I / Early days
</p>
<div class="row no-gutters">
<div class="col mr-2">
<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>
<div class="card" style="width: 10%;
background-image: url(https://cdn.pixabay.com/photo/2018/10/03/15/51/sunflower-3721718_1280.jpg);
background-size: cover;
background-position: center
"></div>
</div>
<!--// Chapter 1 end //-->
<hr class="mt-3 mb-2" style="border: 1px solid #f5335a">
<!--// Chapter 2 //-->
<p class="mb-0 text-right" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Chapter II / Current day
</p>
<div class="row no-gutters">
<div class="col ml-2 order-2">
<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>
<div class="card order-1" style="width: 10%;
background-image: url(https://cdn.pixabay.com/photo/2018/10/03/15/51/sunflower-3721718_1280.jpg);
background-size: cover;
background-position: center
"></div>
</div>
<!--// Chapter 2 end //-->
</div>
</div>
</div>
<!--/// STORY TAB end ///-->
<!--/// DESIGN TAB ///-->
<div class="tab-pane fade" id="tab4">
<div class="card pt-2 border-0 bg-faded" style="height: 223px">
<div class="pb-2 px-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<!--// Text //-->
<p class="mb-0" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Notice
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!--// Text end //-->
<hr class="my-3" style="border: 1px solid #f5335a">
<!--// Palette //-->
<p class="mb-1 text-right" style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Color palette and notes
</p>
<div class="justify-content-end">
<div class="card p-2 border-0 mb-2" style="display: inline-block; border-radius: 32px">
<div class="row no-gutters" style="border-radius: 25px; overflow: hidden">
<!-- Color 1 -->
<div class="col card p-1 border-0 rounded-0 tooltipster" style="
background: #f5335a" title="where_it_s_found">
<p style="font-size: 10px; color: #fff">#f5335a</p>
</div>
<!-- Color 2 -->
<div class="col card p-1 border-0 rounded-0 tooltipster" style="
background: #ffaaba" title="where_it_s_found">
<p style="font-size: 10px; color: #000">#ffaaba</p>
</div>
<!-- Color 3 -->
<div class="col card p-1 border-0 rounded-0 tooltipster" style="
background: #ffd96e" title="where_it_s_found">
<p style="font-size: 10px; color: #000">#ffd96e</p>
</div>
<!-- Color 4 -->
<div class="col card p-1 border-0 rounded-0 tooltipster" style="
background: #fba050" title="where_it_s_found">
<p style="font-size: 10px; color: #000">#fba050</p>
</div>
</div>
</div>
</div>
<!--// Palette end //-->
<!--// Notes //-->
<ul class="list-unstyled">
<li><i class="fas fa-caret-right mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-caret-right mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-caret-right mr-2" style="color: #ffaaba"></i> content</li>
<li><i class="fas fa-caret-right mr-2" style="color: #ffaaba"></i> content</li>
</ul>
<!--// Notes end //-->
<!--// Images //-->
<div class="row no-gutters justify-content-center">
<!-- 1 -->
<div class="col-3 p-1" style="height: 120px">
<div class="card w-100 h-100" style="
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803);
background-size: cover;
background-position: center
">
<div class="card bg-faded border-0" style="padding-left: 2px; padding-right: 2px; position: absolute; bottom: -4px; left: -4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!-- 1 end-->
<!-- 2 -->
<div class="col-3 p-1" style="height: 120px">
<div class="card w-100 h-100" style="
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803);
background-size: cover;
background-position: center
">
<div class="card bg-faded border-0" style="padding-left: 2px; padding-right: 2px; position: absolute; bottom: -4px; left: -4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!-- 2 end-->
<!-- 3 -->
<div class="col-3 p-1" style="height: 120px">
<div class="card w-100 h-100" style="
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803);
background-size: cover;
background-position: center
">
<div class="card bg-faded border-0" style="padding-left: 2px; padding-right: 2px; position: absolute; bottom: -4px; left: -4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!-- 3 end-->
<!-- 4 -->
<div class="col-3 p-1" style="height: 120px">
<div class="card w-100 h-100" style="
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803);
background-size: cover;
background-position: center
">
<div class="card bg-faded border-0" style="padding-left: 2px; padding-right: 2px; position: absolute; bottom: -4px; left: -4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!-- 4 end-->
</div>
<!--// Images end //-->
</div>
</div>
</div>
<!--/// DESIGN TAB end ///-->
</div>
<!--////// MIDDLE SECTION end //////-->
<!--////// RELATIONSHIPS //////-->
<div class="card pt-2 px-2 border-0 bg-faded mt-2">
<!--Decoraive butterfly-->
<a href="https://www.pngegg.com/en/png-fxeid" target="_blank" style="position: absolute; bottom: -30px; right: -40px; transform: rotate(-20deg); z-index: 5">
<img class="tooltipster" data-placement="top" title="From pngegg" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679
" style="width: 90px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)">
</a>
<!--Decoraive butterfly end-->
<p class="fa-fade small" style="animation-duration: 3s; position: absolute; top: 5px; right: 8px; font-style: oblique; color: #ffaaba">Scroll <i class="fas fa-caret-right"></i></p>
<p style="font-weight:bold; font-size: 1.5em; font-style: oblique; font-family: century gothic, monaco;">
Relationships
</p>
<div class="pt-1 pb-2" style="scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<div class="row no-gutters flex-nowrap">
<!--/// CHARACTER 1 ///--><!-- COPY THIS ENTIRE SECTION TO ADD ANOTHER CHARACTER -->
<div class="col-md-6 col-12 pr-1">
<div class="row no-gutters">
<!--/// Avatar ///-->
<div class="col-auto mr-1">
<div class="col-auto card border-0 p-2" style="height: 110px; width: 110px">
<div class="card bg-faded border-0 h-100 w-100">
<!-- Link + image -->
<a href="https://toyhou.se/CHARAID.">
<img class="card border-0" src="
https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803
"></a>
</div>
</div>
<p class="text-center small justify-content-around mt-1" style="color: #ffaaba">
<!-- Attachement level -->
<!--
Full: <i class="fas fa-butterfly"></i>
Empty: <i class="fat fa-butterfly"></i>
-->
<i class="fas fa-butterfly"></i>
<i class="fas fa-butterfly"></i>
<i class="fas fa-butterfly"></i>
<i class="fat fa-butterfly"></i>
<i class="fat fa-butterfly"></i>
</p>
</div>
<!--/// Avatar end ///-->
<!--/// Text ///-->
<div class="col card border-0">
<div class="row no-gutters pt-2 px-2">
<div class="col-auto">
<p class="text-truncate" style="font-weight:bold; font-style: oblique; font-family: century gothic, monaco;">
Name
</p>
</div>
<hr class="col my-auto ml-1" style="border: 1px solid #f5335a">
</div>
<div class="card bg-transparent border-0 p-2" style="height: 96px; scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<p>
Very small description
</p>
</div>
</div>
<!--/// Text end ///-->
</div>
</div>
<!--/// CHARACTER 1 end ///-->
<!--/// CHARACTER 2 ///--><!-- COPY THIS ENTIRE SECTION TO ADD ANOTHER CHARACTER -->
<div class="col-md-6 col-12 pr-1">
<div class="row no-gutters">
<!--/// Avatar ///-->
<div class="col-auto mr-1">
<div class="col-auto card border-0 p-2" style="height: 110px; width: 110px">
<div class="card bg-faded border-0 h-100 w-100">
<!-- Link + image -->
<a href="https://toyhou.se/CHARAID.">
<img class="card border-0" src="
https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803
"></a>
</div>
</div>
<p class="text-center small justify-content-around mt-1" style="color: #ffaaba">
<!-- Attachement level -->
<!--
Full: <i class="fas fa-butterfly"></i>
Empty: <i class="fat fa-butterfly"></i>
-->
<i class="fas fa-butterfly"></i>
<i class="fas fa-butterfly"></i>
<i class="fas fa-butterfly"></i>
<i class="fat fa-butterfly"></i>
<i class="fat fa-butterfly"></i>
</p>
</div>
<!--/// Avatar end ///-->
<!--/// Text ///-->
<div class="col card border-0">
<div class="row no-gutters pt-2 px-2">
<div class="col-auto">
<p class="text-truncate" style="font-weight:bold; font-style: oblique; font-family: century gothic, monaco;">
Name
</p>
</div>
<hr class="col my-auto ml-1" style="border: 1px solid #f5335a">
</div>
<div class="card bg-transparent border-0 p-2" style="height: 96px; scrollbar-color: #f5335a rgba(0, 0, 0, 0); scrollbar-width: thin; overflow: auto">
<p>
Very small description
</p>
</div>
</div>
<!--/// Text end ///-->
</div>
</div>
<!--/// CHARACTER 2 end ///-->
</div>
</div>
</div>
<!--////// RELATIONSHIPS end //////-->
</div>
<!--////////// MAIN TEXT end //////////-->
</div>
<!--////////// MAIN CONTENT end //////////-->
<!--////////// AESTHETIC BOARD //////////-->
<div class="row no-gutters mt-2">
<!--////// IMAGE 1 //////-->
<div class="col-md col-6 pl-md-0 pr-1 mb-2">
<div class="card p-2 border-0 bg-faded" style="height: 120px">
<div class="card bg-transparent h-100" style="background-image: url(
https://i.pinimg.com/736x/2c/6a/73/2c6a73466cdd71e98d5c5c414f5a9dea.jpg
); background-position: center; background-size: cover"></div>
<div class="card bg-faded border-0 pb-1" style="padding-left: 2px; padding-right: 2px; position: absolute; bottom: 0px; right: 4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!--////// IMAGE 1 end //////-->
<!--////// IMAGE 2 //////-->
<div class="col-md col-6 pl-md-1 pl-1 mb-2">
<div class="card p-2 border-0 bg-faded" style="height: 120px">
<div class="card bg-transparent h-100" style="background-image: url(
https://i.pinimg.com/736x/8c/c8/cb/8cc8cb2a53478e6ca003b0378a7f286c.jpg
); background-position: center; background-size: cover"></div>
<div class="card bg-faded border-0 pb-1" style="padding-left: 2px; padding-right: 1px; position: absolute; bottom: 0px; right: 4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!--////// IMAGE 2 end //////-->
<!--////// IMAGE 3 //////-->
<div class="col-md col-6 pl-md-2 pr-1 mb-2">
<div class="card p-2 border-0 bg-faded" style="height: 120px">
<div class="card bg-transparent h-100" style="background-image: url(
https://i.pinimg.com/736x/80/55/9d/80559d9af4417a960eb28dc52c38c26f.jpg
); background-position: 0px -40px; background-size: cover"></div>
<div class="card bg-faded border-0 pb-1" style="padding-left: 2px; padding-right: 2px; position: absolute; bottom: 0px; right: 4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!--////// IMAGE 3 end //////-->
<!--////// IMAGE 4 //////-->
<div class="col-md col-6 pl-md-1 pl-1 mb-2">
<div class="card p-2 border-0 bg-faded" style="height: 120px">
<div class="card bg-transparent h-100" style="background-image: url(
https://i.pinimg.com/736x/2d/5b/97/2d5b970c29fe99d72e7d8597412d0d35.jpg
); background-position: center; background-size: cover"></div>
<div class="card bg-faded border-0 pb-1" style="padding-left: 2px; padding-right: 1px; position: absolute; bottom: 0px; right: 4px">
<a href="
LINK_TO_ORIGINAL_PICTURE_HERE
" style="color: #ffaaba">
<i class="fas fa-image"></i>
</a>
</div>
</div>
</div>
<!--////// IMAGE 4 end //////-->
</div>
<!--////////// AESTHETIC BOARD end //////////-->
</div>
</div>