[CHARA] FΛSHION
created by:FlowerlyRat
BootstrapHTMLCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
FΛSHION: code by FlowerlyRat || Based on the FΛSHION by Britney Manson single cover
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
This code was specifically made for the character adopt of the same name by FlowerlyRat [me], but has been made available for public use. [the code was too cool to keep private lol]
Text, title and decorative text sizes and margins may need to be played around with if the content is changed.
Some of them have a computer-only and phone-only version, both need to be modified and played around with.
Font: century gothic
"ITS A MAN!" font: arial narrow
-->
<div class="card p-2 rounded-0 col-md-9 mx-auto mt-5" style="font-family: century gothic; border-width: 0 2px">
<!--/// Border title break ///-->
<!-- Computer -->
<div class="row no-gutters mx-n2 mt-n2 hidden-md-down">
<div class="col card rounded-0"></div>
<div class="col-6 mx-2"></div>
<div class="col card rounded-0"></div>
</div>
<!-- Phone -->
<div class="row no-gutters mx-n2 mt-n2 hidden-md-up">
<div class="col card rounded-0"></div>
<div class="col-10"></div>
<div class="col card rounded-0"></div>
</div>
<!--/// Border title break end ///-->
<!--/// TITLE ///-->
<div class="text-center">
<!-- Computer -->
<p class="card bg-transparent border-0 hidden-md-down" style="margin-top: -80px; margin-bottom: -20px; font-size: 7em; display: inline-block">
FΛSHION
</p>
<!-- Phone -->
<p class="card bg-transparent border-0 hidden-md-up" style="margin-top: -55px; font-size: 5em; display: inline-block">
FΛSHION
</p>
</div>
<!--/// TITLE end ///-->
<!--/// TOP CAMERA DECOR ///-->
<div class="row no-gutters mt-n2 mb-n1">
<div class="col">
<div class="card bg-transparent border-0" style="position: absolute; top: -10px; left: 27%; font-family: arial narrow">
<p class="align-items-center"><i class="fas fa-bolt mr-2" style="font-size: 10px"></i><i class="fas fa-battery mr-1" style="font-size: 20px"></i></p>
</div>
<div class="bg-transparent w-25" style="height: 70px; border-width: 2px 0 0 2px; border-style: solid"></div>
</div>
<div class="col">
<div class="card bg-transparent border-0" style="position: absolute; top: -10px; right: 27%; font-family: arial narrow">
<p class="align-items-center"><i class="fas fa-circle mr-1" style="font-size: 8px; color: red"></i>REC</p>
</div>
<div class="bg-transparent w-25 ml-auto" style="height: 70px; border-width: 2px 2px 0 0; border-style: solid"></div>
</div>
</div>
<!--/// TOP CAMERA DECOR end ///-->
<!--/// AVATAR + MUSIC + QUOTE + DESCRIPTION ///-->
<div class="row no-gutters mx-3" style="margin-top: -40px">
<!--// DECORATIVE TEXT ///-->
<!-- Computer -->
<p class="hidden-md-down" style="position: absolute; top: 320px; right: 2%; font-weight: bold; font-size: 24px; color: #000; text-shadow: 0 20px 0 rgba(0, 0, 0, 0.8), 0 40px 0 rgba(0, 0, 0, 0.6), 0 60px 0 rgba(0, 0, 0, 0.4), 0 80px 0 rgba(0, 0, 0, 0.2); z-index: 1">
FΛSHION
</p>
<!-- Phone -->
<p class="hidden-md-up" style="position: absolute; top: 220px; right: 0.5%; font-weight: bold; font-size: 24px; color: #000; text-shadow: 0 20px 0 rgba(0, 0, 0, 0.8), 0 40px 0 rgba(0, 0, 0, 0.6), 0 60px 0 rgba(0, 0, 0, 0.4), 0 80px 0 rgba(0, 0, 0, 0.2); z-index: 1">
FΛSHION
</p>
<div class="card border-0 rounded-0 text-uppercase px-md-1" style="position: absolute; top: 55px; left: 6%; font-size: 24px; z-index: 1">
<p>DELULU</p>
<p style="margin-top: -21px; font-size: 7.5px">is the new black</p>
</div>
<!--// DECORATIVE TEXT end ///-->
<!--/// RIGHT COL [avatar + music] ///-->
<div class="order-md-2 col-md-auto card border-0 mb-3 mb-md-0 align-items-center">
<!--// AVATAR //-->
<div class="card p-1 rounded-0" style="height: 150px; width: 150px">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
">
</div>
<!--// AVATAR end //-->
<!--// MUSIC //-->
<div class="card bg-transparent border-0 rounded-0 text-uppercase mt-2 text-center" style="width: 150px; z-index: 2">
<p class="text-truncate tooltipster" style="line-height: 15px" title=
"song title - artist"><!-- Add the title and artist twice -->
Song title<br>
by artist
</p>
<!-- Explicit lyrics warning -->
<p style="margin-top: -15px; margin-bottom: 0px; font-size: 10px">
explicit lyrics
</p>
<!-- Explicit lyrics warning end -->
<p><iframe class="flex-fill" style="position: absolute; left: 0; width: 100%; height: 20px; opacity: 0.0001; z-index: 1" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID
"></iframe><!-- VIDEO ID above -->
<i class="fas fa-sharp fa-play fa-fw" style="font-size: "></i></p>
<div class="card bg-transparent border-0 rounded-0 mt-n1">
<div class="row no-gutters align-items-center">
<div class="col-auto">
<p>0:00</p>
</div>
<div class="col mx-2">
<div class="card rounded-0 justify-content-center"></div>
</div>
<div class="col-auto">
<p>
<!-- Music length -->
1:00
</p>
</div>
</div>
</div>
</div>
<!--// MUSIC end //-->
</div>
<!--/// RIGHT COL [avatar + music] end ///-->
<!--/// LEFT COL [quote + description] ///-->
<div class="order-md-1 col-md card border-0 rounded-0 mr-md-3">
<!--// QUOTE //--><!-- Box expands with text -->
<div class="card p-3 pt-4 rounded-0" style="font-family: arial narrow">
<p style="position: absolute; top: -18px; left: 2px; font-size: 5em; opacity: 0.2">"</p>
<p class="fa-flip-vertical" style="position: absolute; bottom: -35px; right: 2px; font-size: 5em; opacity: 0.2">"</p>
<p class="text-center" style="font-size: 20px">
Quote here
</p>
</div>
<!--// QUOTE end //-->
<!--// BASIC INFO + DESCRIPTION + AUTHORS NOTE //-->
<div class="card border-0 rounded-0 mt-4">
<div class="card border-0 rounded-0 text-uppercase px-1" style="position: absolute; top: -8px; right: -5px; font-size: 0.8em; font-weight: bold; z-index: 1030">
<p>scroll down</p>
</div>
<div class="card pt-3 pb-2 px-3 rounded-0 text-justify" style="height: 200px; scrollbar-width: none; overflow: auto">
<!-- / BASIC INFO /-->
<div class="row no-gutters">
<div class="col-auto mr-2">
<div class="sticky-top" style="font-weight: bold; font-size: 1.1em; padding-top: 70px">
<div class="card rounded-0 border-0" style="height: 96px">
<div class="card rounded-0 text-uppercase fa-rotate-270 text-center" style="margin-left: -95px; margin-right: -87px; width: 202px">
<p>basic info</p>
</div>
</div>
</div>
</div>
<div class="col">
<!-- NAME -->
<div class="row no-gutters mb-2">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>name</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<i class="col-auto < my-auto fas fa-sharp fa-diamond"></i>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
name
</p>
</div>
</div>
<!-- NAME end -->
<!-- ALIAS -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>alias</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
alias
</p>
</div>
</div>
<!-- ALIAS end -->
<!-- AGE -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>age</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
age
</p>
</div>
</div>
<!-- AGE end -->
<!-- HEIGHT -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>height</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
0m - 0ft
</p>
</div>
</div>
<!-- HEIGHT end -->
<!-- GENDER -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>gender</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
gender
</p>
</div>
</div>
<!-- GENDER end -->
<!-- PRONOUNS -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>pronouns</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
pro/nouns
</p>
</div>
</div>
<!-- PRONOUNS end -->
<!-- ORIENTATION -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>orientation</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
orientation
</p>
</div>
</div>
<!-- ORIENTATION end -->
<!-- SPECIES -->
<div class="row no-gutters">
<div class="col-auto text-uppercase" style="font-weight: bold">
<p>species</p>
</div>
<hr class="col w-100 mx-2 my-auto" style="border: 1px solid; opacity: 0.1">
<div class="col-auto">
<p>
species
</p>
</div>
</div>
<!-- SPECIES end -->
</div>
</div>
<!-- Divider -->
<div class="card" style="margin-top: 16.5px; margin-bottom: 16px; border-style: solid; border-width: 0 0 1px 0"></div>
<!-- Divider -->
<!-- / BASIC INFO end /-->
<!-- / DESCRIPTION /-->
<div class="row no-gutters">
<div class="col-auto order-2 ml-2">
<div class="sticky-top" style="font-weight: bold; font-size: 1.1em; padding-top: 71px">
<div class="card rounded-0 border-0" style="height: 96px">
<div class="card rounded-0 text-uppercase fa-rotate-90 text-center" style="margin-left: -87px; margin-right: -95px; width: 202px">
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col order-1">
<!-- Text -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.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. 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>
<!-- Text end -->
</div>
</div>
<!-- Divider -->
<div class="card" style="margin-top: 16.5px; margin-bottom: 18px; border-style: solid; border-width: 0 0 1px 0"></div>
<!-- Divider -->
<!-- / DESCRIPTION end /-->
<!-- / AUTHORS NOTE /--><!-- Feel free to repurpose this section for something else -->
<div class="row no-gutters">
<div class="col-auto mr-2">
<div class="sticky-top" style="font-weight: bold; font-size: 1.1em; padding-top: 69px">
<div class="card rounded-0 border-0" style="height: 96px">
<div class="card rounded-0 text-uppercase fa-rotate-270 text-center" style="margin-left: -95px; margin-right: -87px; width: 202px">
<p>author's note</p>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Text -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- Text end -->
</div>
</div>
<!-- Divider -->
<div class="card" style="margin-top: 17px; border-style: solid; border-width: 0 0 1px 0"></div>
<!-- Divider -->
<!-- / AUTHORS NOTE end /-->
</div>
</div>
<!--// BASIC INFO + DESCRIPTION + AUTHORS NOTE end //-->
</div>
<!--/// LEFT COL [quote + description] end ///-->
</div>
<!--/// AVATAR + MUSIC + QUOTE + DESCRIPTION end ///-->
<!--/// TRIVIA + RELATIONSHIPS ///-->
<div class="row no-gutters mx-3" style="z-index: 2">
<!--/// RIGHT COL ///-->
<div class="order-md-2 col-md-auto card bg-transparent border-0 rounded-0 mt-n3 align-items-center">
<!--// TRANSPARENT FULL BODY IMAGE //--><!-- Depending on the image's width, it'll make the information on the left smaller. Avoid putting images that are too big width-wise -->
<!-- Add "fa-flip-horizontal" to the class to flip it horizontally -->
<img class="d-block mt-auto" style="max-height: 500px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/98803310_jRcdpBxZH0E4QEg.png?1744668316
">
<!--// TRANSPARENT FULL BODY IMAGE end //-->
<!--// DECORATIVE TEXT //-->
<div class="card bg-transparent border-0 rounded-0 text-uppercase mr-md-n3" style="position: absolute; bottom: 70px; right: 2%; font-family: arial narrow; font-size: 33px; font-weight: bold; color: #fff; text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; z-index: 1">
<p>
its a man!
</p>
<p class="text-right" style="margin-top: -26px; font-size: 10px">
and 100+ ridiculous comments<br>inside!
</p>
</div>
<!--// DECORATIVE TEXT end //-->
</div>
<!--/// RIGHT COL end ///-->
<!--/// LEFT COL ///-->
<div class="order-md-1 col-md card border-0 mr-md-3 mb-md-0 align-items-center">
<!--// TRIVIA + DESIGN NOTES //-->
<div class="card border-0 rounded-0 mt-4 mb-3">
<div class="card border-0 rounded-0 text-uppercase px-1" style="position: absolute; top: -8px; left: -5px; font-size: 0.8em; font-weight: bold; z-index: 1030">
<p>scroll down</p>
</div>
<div class="card pt-3 pb-2 px-3 rounded-0 text-justify" style="height: 200px; scrollbar-width: none; overflow: auto">
<!-- / TRIVIA /-->
<div class="row no-gutters">
<div class="col-auto order-2 ml-2">
<div class="sticky-top" style="font-weight: bold; font-size: 1.1em; padding-top: 71px">
<div class="card rounded-0 border-0" style="height: 96px">
<div class="card rounded-0 text-uppercase fa-rotate-90 text-center" style="margin-left: -87px; margin-right: -95px; width: 202px">
<p>trivia</p>
</div>
</div>
</div>
</div>
<div class="col order-1">
<!-- Text -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- Text end -->
<!-- List -->
<ul class="list-unstyled mt-1 mb-n2">
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
</ul>
<!-- List end -->
</div>
</div>
<!-- Divider -->
<div class="card" style="margin-top: 16.5px; margin-bottom: 18px; border-style: solid; border-width: 0 0 1px 0"></div>
<!-- Divider -->
<!-- / TRIVIA end /-->
<!-- / DESIGN NOTES /-->
<div class="row no-gutters">
<div class="col-auto mr-2">
<div class="sticky-top" style="font-weight: bold; font-size: 1.1em; padding-top: 69px">
<div class="card rounded-0 border-0" style="height: 96px">
<div class="card rounded-0 text-uppercase fa-rotate-270 text-center" style="margin-left: -95px; margin-right: -87px; width: 202px">
<p>design notes</p>
</div>
</div>
</div>
</div>
<div class="col">
<!-- List -->
<ul class="list-unstyled mb-n1">
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
<li><i class="fas fa-sharp fa-angle-right mr-2"></i>content</li>
</ul>
<!-- List end -->
</div>
</div>
<!-- Divider -->
<div class="card" style="margin-top: 16.5px; border-style: solid; border-width: 0 0 1px 0"></div>
<!-- Divider -->
<!-- / DESIGN NOTES end /-->
</div>
</div>
<!--// TRIVIA + DESIGN NOTES end //-->
<!--// RELATIONSHIPS + RIBBONS //-->
<div class="row no-gutters">
<!--/ RIBBONS /-->
<div class="col-md order-md-2 card border-0 rounded-0 ml-md-3">
<div class="row no-gutters justify-content-between mb-n2">
<p class="col-auto order-md-2 text-uppercase" style="font-weight: bold">
ribbons
</p>
<p class="col-auto order-md-1 text-uppercase mt-1" style="font-size: 0.8em; font-weight: bold">
scroll down
</p>
</div>
<div class="card border-0 rounded-0" style="height: 214px; scrollbar-width: none; overflow: auto">
<div class="row no-gutters justify-content-center my-auto">
<!-- https://toyhou.se/20187371.ribbon-masterlist -->
<!-- [1] --><!-- duplicate this section to add a ribbon -->
<div class="col-3 p-1 justify-content-center" data-toggle="tooltip" title="
Ribbon name - Ribbon description
"><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png
">
</div>
<!-- [1] -->
</div>
</div>
</div>
<!--/ RIBBONS end /-->
<!--/ RELATIONSHIPS /-->
<div class="col-md order-md-1 card border-0 rounded-0">
<div class="row no-gutters justify-content-between mb-n2">
<p class="col-auto order-md-2 text-uppercase mt-1" style="font-size: 0.8em; font-weight: bold">
scroll down
</p>
<p class="col-auto order-md-1 text-uppercase" style="font-weight: bold">
relationships
</p>
</div>
<div class="card border-0 rounded-0" style="max-height: 214px; scrollbar-width: none; overflow: auto">
<!-- [1] --><!-- duplicate this section to add a character -->
<div class="row no-gutters">
<div class="col-auto mr-2">
<div class="sticky-top">
<div class="card p-1 rounded-0" style="height: 100px; width: 100px">
<!-- Avatar + link -->
<a href="https://toyhou.se/CHARA_ID."><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
"></a>
</div>
</div>
</div>
<div class="col">
<p class="mb-n1">
<!-- Name + link -->
<a href="https://toyhou.se/CHARA_ID." class="text-reset" style="font-weight: bold">
Oc name
</a>
</p>
<p class="text-right mb-n1 mr-1">
<!-- Attachement -->
<!--
Full heart: <i class="fas fa-sharp fa-heart"></i>
Half heart: <i class="far fa-sharp fa-heart-half-stroke"></i>
Void heart: <i class="far fa-sharp fa-heart"></i>
-->
<i class="fas fa-sharp fa-heart"></i>
<i class="fas fa-sharp fa-heart"></i>
<i class="fas fa-sharp fa-heart"></i>
<i class="far fa-sharp fa-heart-half-stroke"></i>
<i class="far fa-sharp fa-heart"></i>
</p>
<!-- Text -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</p>
<!-- Text end -->
</div>
</div>
<!-- [1] end -->
<!-- Divider -->
<div class="card my-3" style="border-style: solid; border-width: 0 0 1px 0"></div>
<!-- Divider -->
<!-- [2] --><!-- duplicate this section to add a character -->
<div class="row no-gutters">
<div class="col-auto mr-2">
<div class="sticky-top">
<div class="card p-1 rounded-0" style="height: 100px; width: 100px">
<!-- Avatar + link -->
<a href="https://toyhou.se/CHARA_ID."><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
"></a>
</div>
</div>
</div>
<div class="col">
<p class="mb-n1">
<!-- Name + link -->
<a href="https://toyhou.se/CHARA_ID." class="text-reset" style="font-weight: bold">
Oc name
</a>
</p>
<p class="text-right mb-n1 mr-1">
<!-- Attachement -->
<!--
Full heart: <i class="fas fa-sharp fa-heart"></i>
Half heart: <i class="fas fa-sharp fa-heart-half-stroke"></i>
Void heart: <i class="far fa-sharp fa-heart"></i>
-->
<i class="fas fa-sharp fa-heart"></i>
<i class="fas fa-sharp fa-heart"></i>
<i class="fas fa-sharp fa-heart"></i>
<i class="far fa-sharp fa-heart-half-stroke"></i>
<i class="far fa-sharp fa-heart"></i>
</p>
<!-- Text -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<!-- Text end -->
</div>
</div>
<!-- [2] end -->
</div>
</div>
<!--/ RELATIONSHIPS end /-->
</div>
<!--// RELATIONSHIPS + RIBBONS end //-->
</div>
<!--/// LEFT COL end ///-->
</div>
<!--/// TRIVIA + RELATIONSHIPS end ///-->
<!--/// BOTTOM CAMERA DECOR ///-->
<div class="row no-gutters mb-n1" style="margin-top: -50px">
<div class="col">
<div class="bg-transparent w-25" style="height: 70px; border-width: 0 0 2px 2px; border-style: solid"></div>
</div>
<div class="col">
<div class="bg-transparent w-25 ml-auto" style="height: 70px; border-width: 0 2px 2px 0; border-style: solid"></div>
</div>
</div>
<!--/// BOTTOM CAMERA DECOR end ///-->
<!-- Credits [DO NOT REMOVE] -->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" class="text-reset text-center" style="margin-bottom: -10px; opacity: 0.5" data-toggle="tooltip" title="Code by FlowerlyRat">
<i class="fas fa-sharp fa-less-than" style="font-size: 10px"></i><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-sharp fa-greater-than" style="font-size: 10px"></i>
</a>
<!--/// Border credit break ///-->
<div class="row no-gutters mx-n2 mb-n2">
<div class="col card rounded-0"></div>
<div class="col-auto mx-2" style="width: 30px"></div>
<div class="col card rounded-0"></div>
</div>
<!--/// Border credit break end ///-->
</div>