[CHARA] Bauhaus
created by:FlowerlyRat
Custom ColorsHTMLCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Bauhaus: code by FlowerlyRat || Based on the August 2023 Coders' Quarters prompt
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Text font: comic sans MS
Color 1: #ed0000
Color 2: #ffdc25
Color 3: #2932c8
Color 4: #fff
Color 5: #000
-->
<div class="justify-content-center">
<div class="card rounded-0 border-0 p-2" style="margin-left: -15px; margin-right: -15px; max-width: 800px; font-weight: bold; font-family: comic sans MS; background-color: #000; overflow: hidden">
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
INTRODUCTION AND NAME
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-2 mx-2 mt-2 mb-1 rounded-0 border-0" style="height: 150px; background-color: #ffdc25">
<!--/// Decoration ///-->
<div class="card bg-transparent rounded-0" style="position: absolute; top: 30px; right: -30px; height: 150px; width: 150px; border: 7px solid #ed0000; border-radius: 50%; z-index: 2"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 50px; right: -40px; height: 150px; width: 150px; border-radius: 50%; background-color: #fff; z-index: 1"></div>
<!--/// Decoration end ///-->
<div class="row no-gutters">
<div class="col my-auto mr-2">
<div class="card border-0 rounded-0 mt-2" style="height: 5px; background-color: #2932c8; box-shadow: 2px 0 0 #ffdc25, 2px 2px 0 #ffdc25, -2px 0 0 #ffdc25, 2px -2px 0 #ffdc25, -2px 2px 0 #ffdc25, 0 2px 0 #ffdc25, 0 -2px 0 #ffdc25, -2px -2px 0 #ffdc25, 0 2px 0 #ffdc25, 5px 5px 0 #ed0000"></div>
</div>
<div class="col-auto" style="max-width: 96%; z-index: 5">
<!--/////////////////////// NAME ///////////////////////-->
<p class="text-truncate" style="font-size: 3em; color: #2932c8; text-shadow: 2px 0 0 #ffdc25, 2px 2px 0 #ffdc25, -2px 0 0 #ffdc25, 2px -2px 0 #ffdc25, -2px 2px 0 #ffdc25, 0 2px 0 #ffdc25, 0 -2px 0 #ffdc25, -2px -2px 0 #ffdc25, 0 2px 0 #ffdc25, 5px 5px 0 #ed0000" data-toggle="tooltip" title="
Name [nickname]"><!-- Tooltip in case the name gets truncated -->
Name
<span style="color: #ed0000; text-shadow: 2px 0 0 #ffdc25, 2px 2px 0 #ffdc25, -2px 0 0 #ffdc25, 2px -2px 0 #ffdc25, -2px 2px 0 #ffdc25, 0 2px 0 #ffdc25, 0 -2px 0 #ffdc25, -2px -2px 0 #ffdc25, 0 2px 0 #ffdc25, 5px 5px 0 #2932c8">
[nickname]
</span>
</p>
<!--/////////////////////// NAME end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// INTRODUCTION AND NAME end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
MAIN CODE
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--////////////////////////////////////////////////////////////////////////////////////////////
FAR LEFT COLUMN
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-8">
<div class="row no-gutters">
<!--/////////////////////// AVATAR + MUSIC + BASIC INFO ///////////////////////-->
<div class="col-md-auto mr-2">
<div class="row no-gutters">
<!--///// AVATAR /////-->
<div class="col-auto">
<div class="card rounded-0 p-2 ml-2 mb-1" style="margin-top: -76px; height: 180px; width: 180px; border-width: 8px 8px 0 0; border-color: #000; background-color: #ed0000">
<!--/// Decoration ///-->
<div class="card bg-transparent rounded-0" style="position: absolute; top: -10px; left: -10px; height: 180px; width: 180px; border: 3px solid #fff"></div>
<!--/// Decoration end ///-->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png">
</div>
</div>
<!--///// AVATAR end /////-->
<!--///// MUSIC /////-->
<div class="col align-items-end">
<div class="card rounded-0 border-0 p-2 my-1 justify-content-center align-items-center" style="height: 100px; width: 100px; color: #ffdc25; background-color: #2932c8" data-toggle="tooltip" title="
Song title - by artist
">
<span class="fa-stack fa-2x" style="font-size: 40px">
<i class="fas fa-sharp fa-compact-disc fa-stack-2x fa-spin"></i>
<i class="fas fa-sharp fa-play fa-stack-1x fa-inverse" style="margin-left: 3px; font-size: 22px; color: #ffdc25"></i>
</span>
<iframe class="flex-fill" style="position: absolute; top: 15%; left: 15%; width: 70px; height: 70px; opacity: 0.01; z-index: 5;" frameborder="0" src="
https://www.youtube.com/embed/VIDEOID">
<!--ONLY REPLACE "VIDEOID"-->
</iframe>
</div>
</div>
<!--///// MUSIC end /////-->
</div>
<!--///// BASIC /////-->
<div class="card rounded-0 border-0 ml-2 my-1" style="height: 120px; color: #ed0000; background-color: #ffdc25">
<div class="row no-gutters px-2">
<div class="col-auto mr-2">
<p style="font-size: 1.5em; color: #2932c8; text-shadow: 0 3px 0 #ed0000; z-index: 5">
Basics
</p>
</div>
<div class="col">
<div class="card border-0 rounded-0 mt-3" style="height: 5px; background-color: #2932c8; box-shadow: 0 3px 0 #ed0000"></div>
</div>
</div>
<div class="card bg-transparent rounded-0 border-0 p-2" style="scrollbar-width: thin; scrollbar-color: #ed0000 #2932c8; text-shadow: 1px 0 0 #ffdc25, 1px 1px 0 #ffdc25, -1px 0 0 #ffdc25, 1px -1px 0 #ffdc25, -1px 1px 0 #ffdc25, 0 1px 0 #ffdc25, 0 -1px 0 #ffdc25, -1px -1px 0 #ffdc25; overflow: auto; z-index: 5">
<div class="row no-gutters mt-1">
<div class="col">
<!--/// Alias ///-->
<i class="fas fa-sharp fa-masks-theater fa-fw mr-1"></i>
alias<br>
<!--/// Alias end ///-->
<!--/// Age ///-->
<i class="fas fa-sharp fa-cake-slice fa-fw mr-1"></i>
age<br>
<!--/// Age end ///-->
<!--/// Pronouns ///-->
<i class="fas fa-sharp fa-venus-mars fa-fw mr-1"></i>
pro/noun<br>
<!--/// Pronouns end ///-->
</div>
<div class="col-auto mx-2">
<div class="card rounded-0 border-0 h-100" style="width: 2px; background-color: #ed0000"></div>
</div>
<div class="col">
<!--/// Height ///-->
<i class="fas fa-sharp fa-ruler fa-fw mr-1"></i>
height<br>
<!--/// Height end ///-->
<!--/// Species ///-->
<i class="fas fa-sharp fa-cat fa-fw mr-1"></i>
species<br>
<!--/// Species end ///-->
<!--/// Pronouns ///-->
<i class="fas fa-sharp fa-thumbtack fa-fw mr-1"></i>
extra<br>
<!--/// Pronouns end ///-->
</div>
</div>
</div>
</div>
<!--///// BASIC end /////-->
</div>
<!--/////////////////////// AVATAR + MUSIC + BASIC INFO end ///////////////////////-->
<!--/////////////////////// PERSONALITY ///////////////////////-->
<div class="col-md mx-2 ml-md-0 my-1">
<div class="card rounded-0 border-0 h-100" style="max-height: 228px; color: #fff; background-color: #ed0000">
<div class="row no-gutters px-2">
<div class="col-auto mr-2">
<p style="font-size: 1.5em; color: #fff; text-shadow: 0 3px 0 #2932c8; z-index: 5">
Personality
</p>
</div>
<div class="col">
<div class="card border-0 rounded-0 mt-3" style="height: 5px; background-color: #fff; box-shadow: 0 3px 0 #2932c8"></div>
</div>
</div>
<div class="card bg-transparent rounded-0 border-0 p-2" style="scrollbar-width: thin; scrollbar-color: #2932c8 #ffdc25; text-shadow: 1px 0 0 #ed0000, 1px 1px 0 #ed0000, -1px 0 0 #ed0000, 1px -1px 0 #ed0000, -1px 1px 0 #ed0000, 0 1px 0 #ed0000, 0 -1px 0 #ed0000, -1px -1px 0 #ed0000; overflow: auto; z-index: 5">
<!--///// TEXT /////-->
<p><span class="card rounded-0 border-0 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; background-color: #2932c8; text-shadow: 0px 0px 0px">
<!--First letter of the body text is right below-->
T
</span>ext box to write about the character's personality!<br>
This box scrolls once it hits the box's limit.
</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>
<!--///// TEXT end /////-->
</div>
</div>
</div>
<!--/////////////////////// PERSONALITY end ///////////////////////-->
</div>
<!--/////////////////////// QUOTE ///////////////////////-->
<div class="card rounded-0 border-0 mx-2 my-1" style="color: #000; background-color: #fff">
<i class="fas fa-sharp fa-quote-left" style="position: absolute; top: -20px; left: -10px; font-size: 2.5em; color: #2932c8; text-shadow: 0 3px 0 #ed0000"></i>
<p class="py-2 px-4 text-truncate" style="z-index: 5">
Insert a quote here
</p>
<i class="fas fa-sharp fa-quote-right" style="position: absolute; bottom: -20px; right: -10px; font-size: 2.5em; color: #ffdc25; text-shadow: 0 3px 0 #fff; z-index: 1"></i>
</div>
<!--/////////////////////// QUOTE end ///////////////////////-->
<!--/////////////////////// STORY + DESIGN + IMAGE ///////////////////////-->
<div class="row no-gutters mt-2">
<!--///// STORY /////-->
<div class="col-md-8">
<div class="card rounded-0 border-0 mx-2 mr-md-1 mb-2" style="height: 335px; color: #fff; background-color: #ed0000">
<div style="scrollbar-width: thin; scrollbar-color: #2932c8 #ffdc25; text-shadow: 1px 0 0 #ed0000, 1px 1px 0 #ed0000, -1px 0 0 #ed0000, 1px -1px 0 #ed0000, -1px 1px 0 #ed0000, 0 1px 0 #ed0000, 0 -1px 0 #ed0000, -1px -1px 0 #ed0000; overflow: auto; z-index: 5">
<!-- /// CHAPTER 1 ///-->
<div class="row no-gutters px-2">
<div class="col-auto mr-2">
<p style="font-size: 1.5em; color: #fff; text-shadow: 0 3px 0 #2932c8">
Chapter 1
</p>
</div>
<div class="col">
<div class="card border-0 rounded-0 mt-3" style="height: 5px; background-color: #fff; box-shadow: 0 3px 0 #2932c8"></div>
</div>
</div>
<div class="card bg-transparent rounded-0 border-0 p-2">
<!--///// TEXT /////-->
<p><span class="card rounded-0 border-0 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; background-color: #2932c8; text-shadow: 0px 0px 0px">
<!--First letter of the body text is right below-->
T
</span>ext box to write about the character's story, job, relationships, what have you!<br>
This box scrolls once it hits the box's limit.
</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>
<!--///// TEXT end /////-->
</div>
<!-- /// CHAPTER 1 end ///-->
<hr style="width: 94%; border: 2px dashed #2932c8">
<!-- /// CHAPTER 2 ///-->
<div class="row no-gutters px-2">
<div class="col-auto mr-2">
<p style="font-size: 1.5em; color: #fff; text-shadow: 0 3px 0 #2932c8; z-index: 5">
Chapter 2
</p>
</div>
<div class="col">
<div class="card border-0 rounded-0 mt-3" style="height: 5px; background-color: #fff; box-shadow: 0 3px 0 #2932c8"></div>
</div>
</div>
<div class="card bg-transparent rounded-0 border-0 p-2">
<!--///// TEXT /////-->
<p><span class="card rounded-0 border-0 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; background-color: #2932c8; text-shadow: 0px 0px 0px">
<!--First letter of the body text is right below-->
L
</span>orem 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>
<!-- /// CHAPTER 2 end ///-->
</div>
</div>
</div>
<!--///// STORY end /////-->
<!--///// DESIGN + IMAGE /////-->
<div class="col-md-4">
<!--/// Decoration ///-->
<div class="card bg-transparent rounded-0" style="position: absolute; top: -60px; right: -60px; height: 165px; width: 165px; border: 1px solid #fff; z-index: 1"></div>
<div class="card bg-transparent rounded-0" style="position: absolute; top: 60px; left: -50px; height: 165px; width: 165px; border: 1px solid #fff; z-index: 1"></div>
<!--/// Decoration end ///-->
<!--/// Design notes ///-->
<div class="card rounded-0 border-0 mx-2 ml-md-1 mb-2" style="height: 165px; color: #ffdc25; background-color: #2932c8">
<div class="row no-gutters px-2">
<div class="col-auto mr-2" style="z-index: 5">
<p style="font-size: 1.5em; color: #ffdc25; text-shadow: 0 3px 0 #ed0000">
Design
</p>
</div>
<div class="col">
<div class="card border-0 rounded-0 mt-3" style="height: 5px; background-color: #ffdc25; box-shadow: 0 3px 0 #ed0000"></div>
</div>
</div>
<div class="card bg-transparent rounded-0 border-0 p-2" style="scrollbar-width: thin; scrollbar-color: #ffdc25 #ed0000; text-shadow: 1px 0 0 #2932c8, 1px 1px 0 #2932c8, -1px 0 0 #2932c8, 1px -1px 0 #2932c8, -1px 1px 0 #2932c8, 0 1px 0 #2932c8, 0 -1px 0 #2932c8, -1px -1px 0 #2932c8; overflow: auto; z-index: 5">
<!--///// TEXT /////-->
<ul class="list-unstyled mb-n2">
<li><i class="fas fa-sharp fa-brush fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-brush fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-brush fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-brush fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-brush fa-fw mr-1"></i>content</li>
</ul>
<!--///// TEXT end /////-->
</div>
</div>
<!--/// Design notes end ///-->
<!--/// Image link ///-->
<!-- Feel free to play around with the object fit and object position -->
<div class="card rounded-0 border-0 mx-2 p-2 ml-md-1 my-1" style="background-color: #ffdc25">
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png"
style="height: 146px; object-fit: cover; object-position: center">
</div>
<!--/// Image link end ///-->
</div>
<!--///// DESIGN + IMAGE end /////-->
</div>
<!--/////////////////////// STORY + DESIGN + IMAGE ///////////////////////-->
</div>
<!--/////////////////////////////////////////////////////////////// FAR LEFT COLUMN end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
FAR LEFT COLUMN
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md">
<!--/////////////////////// BIG IMAGE ///////////////////////-->
<div class="card rounded-0 border-0 my-1 mx-2 ml-md-0" style="height: 351px; color: #ffdc25; background-color: #2932c8">
<div class="row no-gutters px-2">
<div class="col-auto mr-2" style="z-index: 5">
<p style="font-size: 1.5em; color: #ffdc25; text-shadow: 0 3px 0 #ed0000">
Featured
</p>
</div>
<div class="col">
<div class="card border-0 rounded-0 mt-3" style="height: 5px; background-color: #ffdc25; box-shadow: 0 3px 0 #ed0000"></div>
</div>
</div>
<!--///// IMAGE LINK /////-->
<!-- Feel free to play around with the object fit and object position -->
<div class="card bg-transparent rounded-0 border-0 p-2"><img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png"
style="height: 303px; object-fit: cover; object-position: center">
</div>
<!--///// IMAGE LINK /////-->
</div>
<!--/////////////////////// BIG IMAGE end ///////////////////////-->
<!--/////////////////////// LIKES + DISLIKES ///////////////////////-->
<!--///// BUTTONS /////-->
<ul class="nav row no-gutters my-2">
<li class="col card rounded-0 border-0 ml-2 ml-md-0" style="background-color: #ed0000">
<a href="#trivia" class="btn active px-0" data-toggle="tab" style="font-weight: bold; font-size: 1.5em; color: #fff; text-shadow: 0 3px 0 #2932c8; box-shadow: none; z-index: 5">
Trivia</a>
</li>
<li class="col card rounded-0 border-0 mx-2" style="background-color: #ffdc25">
<a href="#likes" class="btn px-0" data-toggle="tab" style="font-weight: bold; font-size: 1.5em; color: #2932c8; text-shadow: 0 3px 0 #ed0000; box-shadow: none; z-index: 5">
Like</a>
</li>
<li class="col card rounded-0 border-0 mr-2" style="background-color: #fff">
<a href="#dislikes" class="btn px-0" data-toggle="tab" style="font-weight: bold; font-size: 1.5em; color: #000; text-shadow: 0 3px 0 #ed0000; box-shadow: none; z-index: 5">
Dislike</a>
</li>
</ul>
<!--///// BUTTONS end /////-->
<!--///// TABS /////-->
<div class="tab-content">
<!--/// Trivia ///-->
<div class="tab-pane fade active show" id="trivia">
<div class="card rounded-0 border-0 mb-2 mx-2 ml-md-0" style="height: 205px; color: #fff; background-color: #ed0000">
<div class="card bg-transparent rounded-0 border-0 p-2" style="scrollbar-width: thin; scrollbar-color: #2932c8 #ffdc25; text-shadow: 1px 0 0 #ed0000, 1px 1px 0 #ed0000, -1px 0 0 #ed0000, 1px -1px 0 #ed0000, -1px 1px 0 #ed0000, 0 1px 0 #ed0000, 0 -1px 0 #ed0000, -1px -1px 0 #ed0000; overflow: auto; z-index: 5">
<!--///// TEXT /////-->
<p><span class="card rounded-0 border-0 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; background-color: #2932c8; text-shadow: 0px 0px 0px">
<!--First letter of the body text is right below-->
T
</span>ext box to write some trivia!<br>
This box scrolls once it hits the box's limit.
</p>
<!--///// TEXT end /////-->
<hr style="width: 98%; border: 2px dashed #2932c8">
<!--///// LIST /////-->
<ul class="list-unstyled mb-1">
<li><i class="fas fa-sharp fa-palette fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-palette fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-palette fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-palette fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-palette fa-fw mr-1"></i>content</li>
</ul>
<!--///// LIST end /////-->
<hr style="width: 98%; border: 2px dashed #2932c8">
<!--///// RIBBONS /////-->
<!--CoraMagics' ribbon masterlist: https://toyhou.se/20187371.-->
<div class="row no-gutters" style="filter: drop-shadow(1px 0 0 #ed0000) drop-shadow(1px 1px 0 #ed0000) drop-shadow(-1px 0 0 #ed0000) drop-shadow(1px -1px 0 #ed0000) drop-shadow(-1px 1px 0 #ed0000) drop-shadow(0 1px 0 #ed0000) drop-shadow(0 -1px 0 #ed0000) drop-shadow(-1px -1px 0 #ed0000)">
<!-- [1] -->
<div class="col-3 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- [1] -->
<!-- [2] -->
<div class="col-3 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- [2] -->
<!-- [3] -->
<div class="col-3 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- [3] -->
<!-- [4] -->
<div class="col-3 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- [4] -->
</div>
<!--///// RIBBONS end /////-->
</div>
</div>
</div>
<!--/// Trivia end ///-->
<!--/// Likes ///-->
<div class="tab-pane fade" id="likes">
<div class="card rounded-0 border-0 mb-2 mx-2 ml-md-0" style="height: 205px; color: #2932c8; background-color: #ffdc25">
<div class="card bg-transparent rounded-0 border-0 p-2" style="scrollbar-width: thin; scrollbar-color: #ed0000 #2932c8; text-shadow: 1px 0 0 #ffdc25, 1px 1px 0 #ffdc25, -1px 0 0 #ffdc25, 1px -1px 0 #ffdc25, -1px 1px 0 #ffdc25, 0 1px 0 #ffdc25, 0 -1px 0 #ffdc25, -1px -1px 0 #ffdc25; overflow: auto; z-index: 5">
<ul class="list-unstyled mb-n2">
<li><i class="fas fa-sharp fa-heart fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart fa-fw mr-1"></i>content</li>
</ul>
</div>
</div>
</div>
<!--/// Likes end ///-->
<!--/// Dislikes ///-->
<div class="tab-pane fade" id="dislikes">
<div class="card rounded-0 border-0 mb-2 mx-2 ml-md-0" style="height: 205px; color: #000; background-color: #fff">
<div class="card bg-transparent rounded-0 border-0 p-2" style="scrollbar-width: thin; scrollbar-color: #ed0000 #000; text-shadow: 1px 0 0 #fff, 1px 1px 0 #fff, -1px 0 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px -1px 0 #fff; overflow: auto; z-index: 5">
<ul class="list-unstyled mb-n2">
<li><i class="fas fa-sharp fa-heart-broken fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart-broken fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart-broken fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart-broken fa-fw mr-1"></i>content</li>
<li><i class="fas fa-sharp fa-heart-broken fa-fw mr-1"></i>content</li>
</ul>
</div>
</div>
</div>
<!--/// Dislikes end ///-->
</div>
<!--///// TABS end /////-->
<!--/////////////////////// LIKES + DISLIKES end ///////////////////////-->
</div>
<!--/////////////////////////////////////////////////////////////// FAR RIGHT COLUMN end ///////////////////////////////////////////////////////////////-->
</div>
<!--/////////////////////////////////////////////////////////////// MAIN CODE end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
CREDITS
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-2 mx-2 mb-2 rounded-0 border-0" style="background-color: #fff">
<!--/// Decoration ///-->
<div class="card bg-transparent rounded-0" style="position: absolute; bottom: -10px; left: -50px; height: 150px; width: 250px; border: 5px solid #ffdc25; border-radius: 0% 100% 0% 0%; z-index: 2"></div>
<div class="card border-0 rounded-0" style="position: absolute; bottom: 4px; left: 140px; height: 90px; width: 90px; border-radius: 0% 100% 0% 0%; background-color: #2932c8; z-index: 1"></div>
<!--/// Decoration end ///-->
<p style="z-index: 5">
<a target="_blank" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: #000">
<i class="fas fa-sharp fa-less-than" style="font-size: 11px"></i><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-sharp fa-greater-than" style="font-size: 11px"></i></a>
<a target="_blank" href="https://toyhou.se/~world/82691.coders-quarters/page/96660.august-2023-layout" data-toggle="tooltip" title="Layout by Togo" style="color: #000">
<i class="fas fa-sharp fa-table-layout"></i></a>
</p>
</div>
<!--/////////////////////////////////////////////////////////////// CREDITS end ///////////////////////////////////////////////////////////////-->
</div>
</div>