[USER] Dark n Pink
created by:FlowerlyRat
Custom ColorsHTMLUser
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
V1: code by FlowerlyRat || Part of the user growing bundle
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Text color: #fff
Accent color: #f5335a
Background color - uses rgba value: 8, 5, 35, 0.8
-->
<!--/////////////////// EXTRA ///////////////////-->
<!--/////////////////////// SIDE RIBBONS ///////////////////////-->
<!-- CoraMagics' ribbon masterlist: https://toyhou.se/20187371.-->
<!--///// Ribbon 1 //////-->
<div class="tooltipster" data-placement="top" style="position: absolute; top: 70px; left: -95px; z-index: 10000" title="
Ribbon name
"><span data-toggle="tooltip" data-placement="bottom" title="
Ribbon description
"><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png
"><!--///// Ribbon image link right above /////-->
</span>
</div>
<!--///// Ribbon 1 end //////-->
<!--///// Ribbon 2 //////-->
<div class="tooltipster" data-placement="top" style="position: absolute; top: 70px; left: -50px; z-index: 10000" title="
Ribbon name
"><span data-toggle="tooltip" data-placement="bottom" title="
Ribbon description
"><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png
"><!--///// Ribbon image link right above /////-->
</span>
</div>
<!--///// Ribbon 2 end //////-->
<!--/////////////////////// SIDE RIBBONS end ///////////////////////-->
<!--///// MUSIC //////-->
<div class="align-items-center fixed-bottom pb-2" style="left: 5px; right: inherit">
<i class="fas fa-compact-disc fa-spin" style="font-size: 50px; color: #f5335a; z-index: 3"></i>
<div class="card bg-faded border-1 rounded-1 p-2" style="border-style: double; border-width: 5px; border-radius: 30px; display: inline-block; margin-left: -49px">
<span class="justify-content-between" style="margin-left: 43px">
<span class="text-muted"><b>
Song title
</b><span style="font-size: 10px; opacity: 0.5"><em>-
artist
</em></span>
<!-- YOUTUBE VIDEOID BELOW --><iframe class="flex-fill" style="position:absolute; margin-left: 30px; top: 5px; width: 50px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEOID
"></iframe><i class="fas fa-play-circle text-muted" style="margin-left: 50px"></i>
</span>
</span>
</div>
</div>
<!--///// MUSIC end //////-->
<!--/////////////////// EXTRA end ///////////////////-->
<!--/////////////////// CODE ///////////////////-->
<!--///// BACKGROUND /////-->
<div style="position: absolute; top:-50px; left:0; bottom: -15px; width: 100%;
background-size:auto;
background-attachment:fixed;
background-position: center
background-color: #000000;
background-image: url(
BACKGROUND_LINK_HERE
);
z-index: -1"></div>
<!--///// BACKGROUND end /////-->
<div class="container p-0">
<div class="card bg-transparent rounded-0 border-0 p-2" style="color: #fff">
<!--///// SIDE NOTE /////-->
<div class="card rounded-0 border-0 px-3 py-2 text-white mb-3" style="background: rgba(8, 5, 35, 0.8)">
<p><span class="text-uppercase"><i class="fas fa-exclamation-triangle"></i><b> note: </b></span>
Side note about the user
</p>
</div>
<!--///// SIDE NOTE end /////-->
<div class="row no-gutters">
<!--/////////////////// STICKY IMAGE ///////////////////-->
<div class="col-12 col-lg-3 mr-lg-2" style="background: rgba(8, 5, 35, 0.8)">
<div class="p-1 sticky-top" style="height: 100vh;">
<div class="h-100 flex-column">
<p class="text-center text-secondary">*.✧««----- ≪ °✧✦✧° ≫ -----»»✧.*</p>
<!--============= UPPER CARD =============-->
<div class="card bg-transparent border-0 rounded-0 px-1">
<p class="text-center text-uppercase" style="color: #f5335a; font-size:23px">
<!-- NAME -->
<i class="fad fa-icons"></i><b> Name</b>
</p><span class="mx-1 text-muted text-center text-capitalize">
<!-- NICKNAMES -->
nickname[s]
</span>
</div>
<!--============= UPPER CARD end =============-->
<!--============= CHARACTER IMAGE =============-->
<div class="card bg-transparent border-0 rounded-0 px-1 py-2 mb-2 flex-grow-1">
<div class="h-100" data-toggle="tooltip" title="
Art by ---
" style="background-image: url(
IMAGE_LINK_HERE
);background-size: cover;
background-position: center;"></div>
</div>
<!--============= CHARACTER IMAGE end =============-->
<!--============= LOWER CARD =============-->
<!-- PRONOUNS -->
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color:#f5335a"><b>✦ Pronouns</b></p>
<span class="text-right">
pro/noun
</span>
</div>
<hr class="m-1">
<!-- AGE -->
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color:#f5335a"><b>✦ Age</b></p>
<span class="text-right">
99
</span>
</div>
<hr class="m-1">
<!-- GENDER --><!-- https://toyhou.se/15051459.mars-character-resources/15051502.mini-pride-flag-stamps -->
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color:#f5335a"><b>✦ Gender</b></p>
<span class="text-right">
<!-- PINS VERSION --><!-- Feel free to delete -->
<a data-toggle="tooltip" title="
GENDER
"><img src="
https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/dfvoj2q-b88d5d71-f75c-4f00-9343-770d5ac2950c.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGZ2b2oycS1iODhkNWQ3MS1mNzVjLTRmMDAtOTM0My03NzBkNWFjMjk1MGMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.EN7t9m7SYlppxx8khJOgvbC3G7ISbZX-NXDp9qqaahE
" width="20"></a>
<!-- FLAG VERSION -->
<a data-toggle="tooltip" title="
GENDER
"><img src="
https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw
" width="30"></a>
</span>
</div>
<hr class="m-1">
<!-- ORIENTATION --><!-- https://toyhou.se/15051459.mars-character-resources/15051502.mini-pride-flag-stamps -->
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color:#f5335a"><b>✦ Orientation</b></p>
<span class="text-right">
<a data-toggle="tooltip" title="
SEXUALITY
"><img src="
https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA
" width="30"></a>
</span>
</div>
<hr class="m-1">
<!-- ETHNICITY --><!-- https://toyhou.se/29828536.ethnicity-nationality -->
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color:#f5335a"><b>✦ Ethnicity</b></p>
<span class="text-right" style="margin-top: -5px">
<!-- CONTINENT -->
<a data-toggle="tooltip" title="
CONTINENT
"><img src="
https://i.imgur.com/dukom6m.png
" width="30"></a>
<!-- COUNTRY -->
<a data-toggle="tooltip" title="
COUNTRY
"><img src="
https://i.imgur.com/cQJ2CV8.png
" width="30"></a>
</span>
</div>
<hr class="mx-1 mb-1" style="margin-top: -13px">
<!--== LINKS ==-->
<!-- Commission link -->
<ul class="nav nav-button nav-justified" style="background:#f5335a">
<li class="nav-item">
<a class="nav-link btn btn-outline-primary rounded-0 border-0" style="box-shadow:none;mix-blend-mode: luminosity;color:#fff;" target="_blank" href="
COMMISSIONS_LINK
"><span style="font-size: 15px;">>>> COMMISSIONS <<<</span></a>
</li>
</ul>
<hr class="m-1">
<div class="col-auto p-0 justify-content-between flex-wrap mb-2">
<!-- Link 1 --><!-- Duplicate this entire section to add another one -->
<a class="btn btn-outline-secondary border-0 py-1 px-2 d-inline-block tooltipster mx-auto" style="font-size: 20px; color: #f5335a" href="
LINK_HERE
" title="LINK_NAME">
<i class="fad fa-exclamation-circle fa-fw"></i>
</a>
<!-- Link 1 end -->
</div>
<!--== LINKS end ==-->
<p class="text-center text-secondary">*.✧««----- ≪ °✧✦✧° ≫ -----»»✧.*</p>
<!--============= LOWER CARD end =============-->
</div>
</div>
</div>
<!--/////////////////// STICKY IMAGE end ///////////////////-->
<!--/////////////////// MAIN CONTENT ///////////////////-->
<div class="col-12 col-lg mt-2 mt-lg-0">
<!--============= QUOTE =============-->
<div class="card border-0 rounded-0 px-3 py-2 text-center text-muted font-italic" style="font-size:large;background: rgba(8, 5, 35, 0.8)">
<div class="mb-n3 w-25 text-dark" style="border-width: 5px 0 0 5px; border-style: double; height: 50px;"></div>
<p style="font-style: oblique">"
Quote here
"</p>
<div class="mt-n3 w-25 ml-auto text-dark" style="border-width: 0 5px 5px 0; border-style: double; height: 50px;"></div>
</div>
<!--============= QUOTE end =============-->
<!--============= BUTTONS =============-->
<ul class="nav nav-button nav-justified mt-2" style="background: #f5335a">
<li class="nav-item">
<a class="nav-link btn btn-outline-primary active rounded-0 border-0" style="box-shadow:none;mix-blend-mode: luminosity;color:#fff; font-size:20px" data-toggle="pill" href="#profile-1"><span data-toggle="tooltip" data-placement="top" title="ABOUT"><i class="fad fa-info-circle"></i></span></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary border-0 rounded-0" style="box-shadow:none;mix-blend-mode:luminosity;color:#fff; font-size:20px" data-toggle="pill" href="#profile-2"><span data-toggle="tooltip" data-placement="top" title="BEFORE YOU FOLLOW"><i class="fad fa-exclamation-circle"></i></span></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary border-0 rounded-0" style="box-shadow:none;mix-blend-mode:luminosity;color:#fff; font-size:20px" data-toggle="pill" href="#profile-3"><span data-toggle="tooltip" data-placement="top" title="DO NOT INTERACT"><i class="fad fa-do-not-enter"></i></span></a>
</li>
</ul>
<!--============= BUTTONS end =============-->
<!--============= PROFILE TABS =============-->
<div class="tab-content">
<!----------- TAB 1: DESCRIPTION ----------->
<div id="profile-1" class="tab-pane fade show active">
<div class="p-4 text-justify" style="background: rgba(8, 5, 35, 0.8)">
<!-- Top divider -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/80030992_kgb4cpLMbefPN2t.png
" style="display: block; margin-left: auto; margin-right: auto;" width="706">
<!-- Top divider end -->
<!--============= ABOUT SECTION =============-->
<div class="profile-fields-title"><h2><span style="color: #f5335a"><i class="fas fa-star"></i></span> About</h2></div>
<hr class="col mt-0 mb-2">
<!-- 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.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>
<!-- Divider -->
<div class="card bg-transparent my-2 rounded-0" style="padding:1px;"></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>
<!-- Divider -->
<div class="card bg-transparent my-2 rounded-0" style="padding:1px;"></div>
<p>
PS: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- TEXT end -->
<!--============= ABOUT SECTION end =============-->
<div class="my-4" style="border-width: 5px 0 0 0; border-style: double; color: #f5335a"></div>
<!--============= FEATURED CHARACTER SECTION =============-->
<div class="profile-fields-title"><h2><span style="color: #f5335a"><i class="fas fa-heart"></i></span> Featured characters</h2></div>
<hr class="col mt-0 mb-2">
<div class="row">
<!-- CHARACTER 1 -->
<div class="col-lg-3 col-6 text-center">
<div class="container justify-content-center text-capitalize">
Name
</div>
<div class="container justify-content-center">
<ul class="nav nav-button nav-justified" style="background-image: url(
CHARACTER_AVATAR_LINK_HERE
); background-size:cover; width: 100px; height: 100px">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="box-shadow:none;mix-blend-mode: screen; width: 100px; height: 100px" href="
https://toyhou.se/CHARAID.
"></a>
</li>
</ul>
</div>
</div>
<!-- CHARACTER 1 end -->
<!-- CHARACTER 2 -->
<div class="col-lg-3 col-6 text-center">
<div class="container justify-content-center text-capitalize">
Name
</div>
<div class="container justify-content-center">
<ul class="nav nav-button nav-justified" style="background-image: url(
CHARACTER_AVATAR_LINK_HERE
); background-size:cover; width: 100px; height: 100px">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="box-shadow:none;mix-blend-mode: screen; width: 100px; height: 100px" href="
https://toyhou.se/CHARAID.
"></a>
</li>
</ul>
</div>
</div>
<!-- CHARACTER 2 end -->
<!-- CHARACTER 3 -->
<div class="col-lg-3 col-6 text-center mt-md-0 mt-2">
<div class="container justify-content-center text-capitalize">
Name
</div>
<div class="container justify-content-center">
<ul class="nav nav-button nav-justified" style="background-image: url(
CHARACTER_AVATAR_LINK_HERE
); background-size:cover; width: 100px; height: 100px">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="box-shadow:none;mix-blend-mode: screen; width: 100px; height: 100px" href="
https://toyhou.se/CHARAID.
"></a>
</li>
</ul>
</div>
</div>
<!-- CHARACTER 3 end -->
<!-- CHARACTER 4 -->
<div class="col-lg-3 col-6 text-center mt-md-0 mt-2">
<div class="container justify-content-center text-capitalize">
Name
</div>
<div class="container justify-content-center">
<ul class="nav nav-button nav-justified" style="background-image: url(
CHARACTER_AVATAR_LINK_HERE
); background-size:cover; width: 100px; height: 100px">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="box-shadow:none;mix-blend-mode: screen; width: 100px; height: 100px" href="
https://toyhou.se/CHARAID.
"></a>
</li>
</ul>
</div>
</div>
<!-- CHARACTER 4 end -->
</div>
<!--============= FEATURED CHARACTER SECTION end =============-->
<!-- Bottom divider -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/80030979_tlSXZwWUk4FRi6W.png
" style="display: block; margin-left: auto; margin-right: auto;" width="584">
<!-- Bottom divider -->
</div>
</div>
<!----------- TAB 1: DESCRIPTION end ----------->
<!----------- TAB 2: BYF + WARNING ----------->
<div id="profile-2" class="tab-pane fade">
<div class="p-4 text-justify" style="background: rgba(8, 5, 35, 0.8)">
<!-- Top divider -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/80030992_kgb4cpLMbefPN2t.png
" style="display: block; margin-left: auto; margin-right: auto;" width="706">
<!-- Top divider end -->
<!--============= BEFORE YOU FOLLOW SECTION =============-->
<div class="profile-fields-title"><h2><span style="color: #f5335a"><i class="fad fa-exclamation-circle"></i></span> Before you follow</h2></div>
<hr class="col mt-0 mb-2">
<!-- 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 -->
<!--============= BEFORE YOU FOLLOW SECTION end =============-->
<!-- Divider -->
<div class="card bg-transparent my-2 rounded-0" style="padding:1px;"></div>
<!--============= CONTENT WARNING SECTION =============-->
<p class="mb-0">Now please be warned that some of my characters may contain:</p>
<ul class="list-unstyled">
<li><span style="color: #F5335A"><i class="fas fa-star mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-star mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-star mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-star mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-star mr-1"></i></span>content</li>
</ul>
<p>Any characters in need of warnings will have one mentioning relevant information, though it is possible that some pass through the cracks. If this ever happens please be sure to tell me in the character's comments.</p>
<!--============= CONTENT WARNING SECTION end =============-->
<!-- Bottom divider -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/80030979_tlSXZwWUk4FRi6W.png
" style="display: block; margin-left: auto; margin-right: auto;" width="584">
<!-- Bottom divider -->
</div>
</div>
<!----------- TAB 2: BYF + WARNING end ----------->
<!----------- TAB 3: DNI ----------->
<div id="profile-3" class="tab-pane fade">
<div class="p-4 text-justify" style="background: rgba(8, 5, 35, 0.8)">
<!-- Top divider -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/80030992_kgb4cpLMbefPN2t.png
" style="display: block; margin-left: auto; margin-right: auto;" width="706">
<!-- Top divider end -->
<!--============= DO NOT INTERACT SECTION =============-->
<div class="profile-fields-title"><h2><span style="color: #f5335a"><i class="fad fa-do-not-enter"></i></span> Do not interact</h2></div>
<hr class="col mt-0 mb-2">
<p class="mb-2"><b>Never</b> interact with me if:</p>
<ul class="list-unstyled m-0">
<li><span style="color: #F5335A"><i class="fas fa-times mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-times mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-times mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-times mr-1"></i></span>content</li>
<li><span style="color: #F5335A"><i class="fas fa-times mr-1"></i></span>content</li>
</ul>
<!--============= DO NOT INTERACT SECTION end =============-->
<div class="my-4" style="border-width: 5px 0 0 0; border-style: double; color: #f5335a"></div>
<!--============= WARY SECTION =============-->
<div class="profile-fields-title"><h2><span style="color: #f5335a"><i class="fad fa-exclamation-circle"></i></span> Wary</h2></div>
<hr class="col mt-0 mb-2">
<p class="mb-2">You can interact but I will be wary of you if:</p>
<ul class="list-unstyled m-0">
<li><span style="color: #F5335A">~</span> content</li>
<li><span style="color: #F5335A">~</span> content</li>
<li><span style="color: #F5335A">~</span> content</li>
<li><span style="color: #F5335A">~</span> content</li>
<li><span style="color: #F5335A">~</span> content</li>
</ul>
<!--============= WARY SECTION end =============-->
<!-- Bottom divider -->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/80030979_tlSXZwWUk4FRi6W.png
" style="display: block; margin-left: auto; margin-right: auto;" width="584">
<!-- Bottom divider -->
</div>
</div>
<!----------- TAB 3: DNI end ----------->
</div>
<!--============= PROFILE TABS end =============-->
</div>
<!--/////////////////// MAIN CONTENT end ///////////////////-->
</div>
<!--------------------- CODE CREDITS --------------------->
<div class="card bg-transparent border-0 rounded-0 py-2">
<div class="row no-gutters align-items-center">
<div class="col p-0"><hr class="m-0"></div>
<div class="col-auto p-0">
<a class="btn btn-outline-secondary border-0 py-1 px-2 justify-content-center align-items-center d-inline-block tooltipster" title="Code by FlowerlyRat" style="font-size:11px;" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560"><i class="fas fa-code"></i></a>
</div>
<div class="col p-0"><hr class="m-0"></div>
</div>
</div>
<!--------------------- CODE CREDITS end --------------------->
</div>
</div>
<!--/////////////////// CODE end ///////////////////-->Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
V2: code by FlowerlyRat || Part of the user growing bundle
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Text color: #fff
Secondary text color: #759aab
Text glow, main accent color, medium stars glow: #f5335a
Text glow, tertiary text color, medium stars glow: #f49542
Text glow, secondary accent color, medium stars color: #ffd96e
Big stars: color #ace8f5, glow #3b4eb7 #cb0ac3
Small stars: color #f59985, glow #e44343 #df0202
Background color: #251a26
Darkest background color: #1c141d
-->
<!--/////////////////////// SIDE RIBBONS ///////////////////////-->
<!-- CoraMagics' ribbon masterlist: https://toyhou.se/20187371.-->
<!--///// Ribbon 1 //////-->
<div class="tooltipster" data-placement="top" style="position: absolute; top: 70px; left: -95px; z-index: 10000" title="
Ribbon name
"><span data-toggle="tooltip" data-placement="bottom" title="
Ribbon description
"><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png
"><!--///// Ribbon image link right above /////-->
</span>
</div>
<!--///// Ribbon 1 end //////-->
<!--///// Ribbon 2 //////-->
<div class="tooltipster" data-placement="top" style="position: absolute; top: 70px; left: -50px; z-index: 10000" title="
Ribbon name
"><span data-toggle="tooltip" data-placement="bottom" title="
Ribbon description
"><img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png
"><!--///// Ribbon image link right above /////-->
</span>
</div>
<!--///// Ribbon 2 end //////-->
<!--/////////////////////// SIDE RIBBONS end ///////////////////////-->
<!--/////////////////////// BACKGROUND ///////////////////////-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: -15px; left: 0; width: 100%; background-color: #1c141d; background-image: url(
https://www.transparenttextures.com/patterns/stardust.png
); z-index: -1"></div>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: 0; z-index: 5">
<p><a target="_blank" href="https://www.transparenttextures.com/" style="color: #492f56" data-toggle="tooltip" data-placement="top" title="Background texture"><i class="fas fa-image"></i></a></p>
</div>
<!--/////////////////////// BACKGROUND end ///////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
MAIN CODE
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="container p-0" style="color: #fff; overflow: hidden">
<div class="row no-gutters" style="margin-top: 84px">
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
MIDDLE COLUMN
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-3 order-md-2 mx-2 mb-5">
<!--/////////////////////// AVATAR ///////////////////////-->
<div class="card border-0 rounded-0 justify-content-center align-items-center mx-auto mb-2" style="margin-top: -84px; height: 162px; width: 162px; background-color: #f5335a; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); z-index: 5">
<div class="card border-0 rounded-0 justify-content-center align-items-center" style="height: 155px; width: 155px; background-color: #1c141d; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<div class="card border-0 rounded-0 justify-content-center align-items-center" style="height: 139px; width: 139px; background: url(
PROFILE_AVATAR_LINK
); background-size: cover; background-position: center; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"></div>
</div>
</div>
<!--/////////////////////// AVATAR end ///////////////////////-->
<div class="card rounded-0 text-center px-1 pb-1" style="margin-top: -92px; padding-top: 87px; height: 520px; border: 5px double #f5335a; background-color: #251a26">
<!--///// Decorations /////-->
<i class="fad fa-star-christmas fa-beat-fade" style="animation-duration: 4s; position: absolute; top: 10px; left: 25px; font-size: 20px; color: #ace8f5; text-shadow: 0 0 1px #ace8f5, 0 0 5px #3b4eb7, 0 0 10px #cb0ac3;"></i>
<i class="fad fa-star-christmas fa-beat-fade" style="animation-duration: 4s; animation-delay: 3s; position: absolute; top: 55px; right: 10px; font-size: 20px; color: #ace8f5; text-shadow: 0 0 1px #ace8f5, 0 0 5px #3b4eb7, 0 0 10px #cb0ac3;"></i>
<i class="fad fa-star-christmas fa-beat-fade" style="animation-duration: 4s; animation-delay: 3.5s; position: absolute; top: 195px; left: 30px; font-size: 20px; color: #ace8f5; text-shadow: 0 0 1px #ace8f5, 0 0 5px #3b4eb7, 0 0 10px #cb0ac3;"></i>
<i class="fad fa-star-christmas fa-beat-fade" style="animation-duration: 3s; position: absolute; top: 115px; left: 10px; font-size: 15px; color: #ffd96e; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a"></i>
<i class="fad fa-sparkle fa-beat-fade" style="animation-duration: 3s; animation-delay: 0.5s; position: absolute; top: 45px; right: 80px; font-size: 15px; color: #ffd96e; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a"></i>
<i class="fad fa-sparkle fa-beat-fade" style="animation-duration: 3s; animation-delay: 1s; position: absolute; top: 185px; right: 10px; font-size: 15px; color: #ffd96e; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a"></i>
<i class="fad fa-sparkle fa-beat-fade" style="animation-duration: 2s; animation-delay: 0.5s; position: absolute; top: 160px; right: 80px; font-size: 10px; color: #f59985; text-shadow: 0 0 1px #f59985, 0 0 5px #e44343, 0 0 10px #df0202"></i>
<i class="fad fa-sparkle fa-beat-fade" style="animation-duration: 2s; position: absolute; top: 55px; left: 80px; font-size: 10px; color: #f59985; text-shadow: 0 0 1px #f59985, 0 0 5px #e44343, 0 0 10px #df0202"></i>
<i class="fad fa-sparkle fa-beat-fade" style="animation-duration: 2s; animation-delay: 1s; position: absolute; top: 10px; right: 9px; font-size: 10px; color: #f59985; text-shadow: 0 0 1px #f59985, 0 0 5px #e44343, 0 0 10px #df0202"></i>
<!--///// Decorations end /////-->
<!--/////////////////////// BASIC INFO ///////////////////////-->
<div style="font-variant: small-caps; letter-spacing: 1px; color: #ffd96e; text-shadow: 0 0 1px #f49542, 0 0 5px #f49542, 0 0 10px #f5335a">
<h1 style="letter-spacing: 3px; color: #fff; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a">
Name
</h1>
<p>
Nicknames
<br>
age || pro/nouns
</p>
<p>
<!--
STARSHAPE's mini flags: https://toyhou.se/15051459.STARSHAPE-s-character-resources/15051502.-mini-pride-flag-stamps
ghoulipede's mini flags: https://toyhou.se/21030925.f2u-mini-pride-flags/gallery
-->
<!-- Flag 1 -->
<a data-toggle="tooltip" title="FLAG_NAME">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/63559388_johSB8m26KqWMs3.png
" style="box-shadow: 0 0 1px #f49542, 0 0 5px #f49542, 0 0 10px #f5335a;">
</a>
<!-- Flag 2 -->
<a data-toggle="tooltip" title="FLAG_NAME">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/63559388_johSB8m26KqWMs3.png
" style="box-shadow: 0 0 1px #f49542, 0 0 5px #f49542, 0 0 10px #f5335a;">
</a>
</p>
</div>
<!--/////////////////////// BASIC INFO end ///////////////////////-->
<!--///// Divider + credits /////-->
<div class="card border-0 rounded-0 mx-1 mt-3 mb-2" style="background-color: #251a26">
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto mx-1">
<a data-toggle="tooltip" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" title="Code by FlowerlyRat" style="color: #ffd96e">
<i class="fas fa-sharp fa-less-than" style="font-size: 12px"></i>
<i class="fas fa-sharp fa-eye-slash fa-flip-horizontal mx-n1"></i>
<i class="fas fa-sharp fa-greater-than" style="font-size: 12px"></i>
</a>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(245, 51, 90, 0.3)"></div>
</div>
</div>
<!--///// Divider + credits /////-->
<!--/////////////////////// PLAYLIST ///////////////////////-->
<div style="font-variant: small-caps; letter-spacing: 1px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a">
<p class="mb-1" style="font-size: 15px">
<i class="fad fa-sun" style="color: #ffd96e"></i>
Playlist
<i class="fad fa-sun" style="color: #ffd96e"></i>
<br><span style="font-size: 9px; color: #ffd96e">
[Click on the play button to start the playlist]</span>
</p>
<i class="fas fa-play-circle" style="font-size: 20px; color: #ffd96e"></i>
<!--/////
Copy the playlist ID and paste it where "PLAYLIST_ID_GOES_HERE" is written below
The ID is the big series of numbers, letters and symbols found right after "/watch?v=" in the URL, yes it's the entirety of it after "/watch?v="
If you don't want it to loop, delete "&loop=1" at the end
/////-->
<iframe style="position: absolute; margin-top: -8px; margin-left: -29px; width: 35px; height: 35px; opacity: 0.01; z-index: 5" frameborder="0" src="
https://www.youtube.com/embed/videoseries?si=PLAYLIST_ID_GOES_HERE&loop=1
"></iframe>
</div>
<!--///// SONG TITLES + ARTISTS /////-->
<div class="card rounded-0 mx-1 p-1 text-left my-2 h-100" style="font-variant: small-caps; border-width: 3px 2px 3px 2px; border-style: dashed solid; border-color: rgba(245, 51, 90, 0.5); background-color: #1c141d; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a; scrollbar-width: thin; scrollbar-color: #f5335a rgba(0, 0, 0,0 ); overflow: auto">
<!--/// [SONG 1] ///-->
<div class="row no-gutters align-items-center">
<div class="col-auto ml-1">
<p><a target="_blank" style="color: #fff" href=
"YOUTUBE_LINK_HERE">
Song title
</a></p>
</div>
<div class="col justify-content-center m-1 mt-2" style="border-width: 0 0 1px 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
</div>
<p class="ml-3" style="font-style: oblique; font-size: 10px; color: #ffd96e">
Artist
</p>
<!--/// [SONG 1] ///-->
<!--/// [SONG 2] ///-->
<div class="row no-gutters align-items-center">
<div class="col-auto ml-1">
<p><a target="_blank" style="color: #fff" href=
"YOUTUBE_LINK_HERE">
Song title
</a></p>
</div>
<div class="col justify-content-center m-1 mt-2" style="border-width: 0 0 1px 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
</div>
<p class="ml-3" style="font-style: oblique; font-size: 10px; color: #ffd96e">
Artist
</p>
<!--/// [SONG 2] ///-->
</div>
<!--///// SONG TITLES + ARTISTS end /////-->
<!--/////////////////////// PLAYLIST end ///////////////////////-->
<!--/////////////////////// SOCIALS ///////////////////////-->
<div class="card bg-transparent border-0 rounded-0" style="margin-top: -0px; bottom: -10px; z-index: 5">
<!--
Adding more than 4 socials will mess up the format a little, so you'll have to play around with the "margin-top" and "bottom" placement right above
To keep the aesthetic when you add more than 5 socials:
If there are 6: change the "col-3" of the last two socials as "col-6"
If there are 7: keep it as "col-3"
If you have more, I would recommend playing around with the columns
-->
<ul class="nav nav-button justify-content-center row no-gutters mx-2">
<!--
FontAwesome icons: https://fontawesome.com/v6/icons?o=r&s=solid
-->
<!--///// Social 1 /////-->
<li class="col-3 justify-content-center">
<div class="card border-0 rounded-0 mb-n4" style="width: 57px; height: 57px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color: #f5335a">
<a class="btn btn-outline-danger border-0 rounded-0 align-items-center tooltipster" style="color: #ffd96e; box-shadow: none; mix-blend-mode: screen; width: 57px; height: 57px;" target="_blank" data-placement="top" href=
"LINK_OF_SOCIAL" title=
"NAME_OF_SOCIAL">
<i class="fas fa-star fa-fw" style="font-size: 23px"></i>
</a>
</div>
</li>
<!--///// Social 1 /////-->
<!--///// Social 2 /////-->
<li class="col-3 justify-content-center">
<div class="card border-0 rounded-0 mb-n4" style="width: 57px; height: 57px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color: #f5335a">
<a class="btn btn-outline-danger border-0 rounded-0 align-items-center tooltipster" style="color: #ffd96e; box-shadow: none; mix-blend-mode: screen; width: 57px; height: 57px;" target="_blank" data-placement="top" href=
"LINK_OF_SOCIAL" title=
"NAME_OF_SOCIAL">
<i class="fas fa-star fa-fw" style="font-size: 23px"></i>
</a>
</div>
</li>
<!--///// Social 2 /////-->
</ul>
</div>
<!--/////////////////////// SOCIALS end ///////////////////////-->
</div>
</div>
<!--/////////////////////////////////////////////////////////////// MIDDLE COLUMN end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
LEFT COLUMN
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md order-md-1 mt-4">
<div class="card rounded-0 p-1" style="height: 560px; border-width: 2px; border-color: #f5335a; background-color: #251a26">
<!--///// Buttons /////-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: -30px; left: 0; right: 0; z-index: 5">
<ul class="nav nav-pills justify-content-between mx-4">
<!--/// Info ///-->
<li class="card border-0 rounded-0 mb-n4" style="width: 57px; height: 57px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #f5335a">
<a data-toggle="tab" class="btn active btn-outline-danger border-0 rounded-0 align-items-center tooltipster" style="color: #ffd96e; box-shadow: none; mix-blend-mode: screen; width: 57px; height: 57px" data-placement="top" href="#ABOUT" title="About">
<i class="fad fa-address-card fa-fw" style="font-size: 23px"></i>
</a>
</li>
<!--/// Feature ///-->
<li class="card border-0 rounded-0 mb-n4" style="width: 57px; height: 57px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #f5335a">
<a data-toggle="tab" class="btn btn-outline-danger border-0 rounded-0 align-items-center tooltipster" style="color: #ffd96e; box-shadow: none; mix-blend-mode: screen; width: 57px; height: 57px" data-placement="top" href="#FEATURE" title="Featured Characters">
<i class="fad fa-heart-circle fa-fw" style="font-size: 23px"></i>
</a>
</li>
</ul>
</div>
<!--///// Buttons /////-->
<div class="tab-content">
<!--////////////////////////////////////////////////////////////////////////////////////////////
TAB 1 [ABOUT + INTERESTS + LIKES]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div id="ABOUT" class="tab-pane fade show active">
<!--///// Sun decoration /////-->
<div class="card bg-transparent rounded-0 border-0 align-items-center mt-1"><i class="fad fa-sun fa-spin mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-sun fa-spin mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-sun fa-spin mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<!--///// Sun decoration /////-->
<!--/////////////////////// QUOTE 1 ///////////////////////-->
<hr style="width: 95%; border: 1px dashed #f5335a; opacity: 0.5">
<p class="text-center" style="font-variant: small-caps; font-style: oblique; color: #759aab; text-shadow: 0 0 1px #713cc8, 0 0 5px #713cc8, 0 0 10px #f5335a;">"
Insert quote 1
"</p>
<hr style="width: 95%; border: 1px dashed #f5335a; opacity: 0.5">
<!--/////////////////////// QUOTE 1 end ///////////////////////-->
<div class="card rounded-0 border-0 px-2 bg-transparent text-justify" style="height: 415px; scrollbar-width: thin; scrollbar-color: #f5335a rgba(0, 0, 0,0 ); overflow: auto">
<!--/////////////////////// ABOUT SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
About the user
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--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.
</p>
<hr class="mt-n1" style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<p>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!--///// TEXT end /////-->
<!--/////////////////////// ABOUT SECTION end ///////////////////////-->
<hr class="mt-n1" style="width: 99%; border: 1px solid #f5335a; opacity: 0.3">
<!--/////////////////////// INTERESTS SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Interests
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--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.
</p>
<!--///// TEXT end /////-->
<hr class="mt-n1" style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<!--///// LIST /////-->
<ul class="list-unstyled ml-3 mb-n1">
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
</ul>
<!--///// LIST end /////-->
<!--/////////////////////// INTERESTS SECTION end ///////////////////////-->
<hr style="width: 99%; border: 1px solid #f5335a; opacity: 0.3">
<!--/////////////////////// OTHER FAVS SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Other favorites
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--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.
</p>
<!--///// TEXT end /////-->
<hr style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<!--///// LIST /////-->
<ul class="list-unstyled ml-3">
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-genderless fa-fw" style="color: #f5335a"></i>Content</li>
</ul>
<!--///// LIST end /////-->
<!--/////////////////////// OTHER FAVS end ///////////////////////-->
</div>
</div>
<!--/////////////////////////////////////////////////////////////// TAB 1 [ABOUT + INTERESTS + LIKES] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
TAB 2 [FEATURED CHARACTERS]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div id="FEATURE" class="tab-pane fade" style="font-variant: small-caps; ">
<!--///// Sun decoration /////-->
<div class="card bg-transparent rounded-0 border-0 align-items-center mt-1"><i class="fad fa-sun fa-spin mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-sun fa-spin mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-sun fa-spin mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<!--///// Sun decoration /////-->
<hr style="width: 95%; border: 1px dashed #f5335a; opacity: 0.5">
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mx-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Featured characters
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<div class="card rounded-0 border-0 px-2 bg-transparent" style="height: 444px; scrollbar-width: thin; scrollbar-color: #f5335a rgba(0, 0, 0,0 ); text-shadow: 0 0 1px #713cc8, 0 0 5px #713cc8, 0 0 10px #f5335a; overflow: auto">
<!--/////////////////////// CHARACTER 1 ///////////////////////-->
<!--///// Name + role /////-->
<div class="row no-gutters" style="letter-spacing: 3px">
<div class="col-auto">
<p style="font-weight: bold; font-size: 15px; color: #ffd96e; text-shadow: 0 0 1px #f49542, 0 0 5px #f49542, 0 0 10px #f5335a;">
Name Surname
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<p style="color: #759aab">
Meta character role
</p>
</div>
</div>
<!--///// Name + role end /////-->
<!---->
<div class="row no-gutters mt-2">
<!--///// Other info /////-->
<div class="col my-auto mr-2">
<!-- Folder -->
<div class="row no-gutters" style="letter-spacing: 2px">
<div class="col-auto">
<p style="color: #759aab">
Part of
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<a style="color: #f5335a; text-shadow: 0 0 1px #713cc8, 0 0 5px #f5335a" href=
"FOLDER_LINK">
story/folder name
</a>
</div>
</div>
<!-- Folder -->
<!-- Attachement -->
<div class="row no-gutters" style="letter-spacing: 2px">
<div class="col-auto">
<p style="color: #759aab">
Attachement
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<p style="letter-spacing: 0px; font-size: 12px; color: #f5335a; text-shadow: 0 0 1px #713cc8, 0 0 5px #f5335a">
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: opacity: 0.5
-->
<i class="fas fa-heart" style="opacity: 1"></i>
<i class="fas fa-heart" style="opacity: 1"></i>
<i class="fas fa-heart" style="opacity: 1"></i>
<i class="fad fa-heart-half" style="opacity: 1"></i>
<i class="fas fa-heart" style="opacity: 0.5"></i>
</p>
</div>
</div>
<!-- Attachement -->
<!-- Story role -->
<div class="row no-gutters" style="letter-spacing: 2px">
<div class="col-auto">
<p style="color: #759aab">
Role
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<p style="color: #f5335a; text-shadow: 0 0 1px #713cc8, 0 0 5px #f5335a">
role name
</p>
</div>
</div>
<!-- Story role -->
</div>
<!--///// Other info end /////-->
<!--///// Avatar ////-->
<div class="col-auto">
<div class="card border-0 rounded-0 tooltipster justify-content-center align-items-center" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); margin-right: -4px; height: 100px; width: 100px; overflow: hidden; background-color: #f5335a">
<div class="card border-0 rounded-0 tooltipster justify-content-center align-items-center" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); height: 95px; width: 95px; overflow: hidden; background-color: #1c141d">
<ul class="nav nav-button nav-justified" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); background-image: url(
CHARACTER_AVATAR_IMAGE_LINK
); background-size:cover; width: 85px; height: 85px;">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); box-shadow:none;mix-blend-mode: overlay; width: 85px; height: 85px;" href="
https://toyhou.se/CHARA_ID.
"></a>
</li>
</ul>
</div>
</div>
</div>
<!--///// Avatar end ////-->
</diV>
<hr style="width: 99%; border: 1px solid #f5335a; opacity: 0.3">
<!--/////////////////////// CHARACTER 1 end ///////////////////////-->
<!--/////////////////////// CHARACTER 2 ///////////////////////-->
<!--///// Name + role /////-->
<div class="row no-gutters" style="letter-spacing: 3px">
<div class="col-auto">
<p style="font-weight: bold; font-size: 15px; color: #ffd96e; text-shadow: 0 0 1px #f49542, 0 0 5px #f49542, 0 0 10px #f5335a;">
Name Surname
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<p style="color: #759aab">
Meta character role
</p>
</div>
</div>
<!--///// Name + role end /////-->
<!---->
<div class="row no-gutters mt-2">
<!--///// Other info /////-->
<div class="col my-auto ml-3 order-2">
<!-- Folder -->
<div class="row no-gutters" style="letter-spacing: 2px">
<div class="col-auto">
<p style="color: #759aab">
Part of
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<a style="color: #f5335a; text-shadow: 0 0 1px #713cc8, 0 0 5px #f5335a" href=
"FOLDER_LINK">
story/folder name
</a>
</div>
</div>
<!-- Folder -->
<!-- Attachement -->
<div class="row no-gutters" style="letter-spacing: 2px">
<div class="col-auto">
<p style="color: #759aab">
Attachement
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<p style="letter-spacing: 0px; font-size: 12px; color: #f5335a; text-shadow: 0 0 1px #713cc8, 0 0 5px #f5335a">
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: opacity: 0.5
-->
<i class="fas fa-heart" style="opacity: 1"></i>
<i class="fas fa-heart" style="opacity: 1"></i>
<i class="fas fa-heart" style="opacity: 1"></i>
<i class="fad fa-heart-half" style="opacity: 1"></i>
<i class="fas fa-heart" style="opacity: 0.5"></i>
</p>
</div>
</div>
<!-- Attachement -->
<!-- Story role -->
<div class="row no-gutters" style="letter-spacing: 2px">
<div class="col-auto">
<p style="color: #759aab">
Role
</p>
</div>
<div class="col my-auto mx-1" style="border-width: 0 0 1px 0; height: 5px; border-style: dashed; color: rgba(245, 51, 90, 0.3)"></div>
<div class="col-auto">
<p style="color: #f5335a; text-shadow: 0 0 1px #713cc8, 0 0 5px #f5335a">
role name
</p>
</div>
</div>
<!-- Story role -->
</div>
<!--///// Other info end /////-->
<!--///// Avatar ////-->
<div class="col-auto order-1">
<div class="card border-0 rounded-0 tooltipster justify-content-center align-items-center" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); margin-right: -4px; height: 100px; width: 100px; overflow: hidden; background-color: #f5335a">
<div class="card border-0 rounded-0 tooltipster justify-content-center align-items-center" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); height: 95px; width: 95px; overflow: hidden; background-color: #1c141d">
<ul class="nav nav-button nav-justified" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); background-image: url(
CHARACTER_AVATAR_IMAGE_LINK
); background-size:cover; width: 85px; height: 85px;">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); box-shadow:none;mix-blend-mode: overlay; width: 85px; height: 85px;" href="
https://toyhou.se/CHARA_ID.
"></a>
</li>
</ul>
</div>
</div>
</div>
<!--///// Avatar end ////-->
</diV>
<hr style="width: 99%; border: 1px solid #f5335a; opacity: 0.3">
<!--/////////////////////// CHARACTER 2 end ///////////////////////-->
</div>
</div>
<!--/////////////////////////////////////////////////////////////// TAB 2 [FEATURED CHARACTERS] end ///////////////////////////////////////////////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// LEFT COLUMN end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
RIGHT COLUMN
///////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md order-md-3 mt-4">
<div class="card rounded-0 px-1" style="height: 560px; border-width: 2px; border-color: #f5335a; background-color: #251a26">
<!--///// Buttons /////-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: -30px; left: 0; right: 0; z-index: 5">
<ul class="nav nav-pills justify-content-between mx-4">
<!--/// Info ///-->
<li class="card border-0 rounded-0 mb-n4" style="width: 57px; height: 57px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #f5335a">
<a data-toggle="tab" class="btn active btn-outline-danger border-0 rounded-0 align-items-center tooltipster" style="color: #ffd96e; box-shadow: none; mix-blend-mode: screen; width: 57px; height: 57px" data-placement="top" href="#BYF" title="Before You Follow">
<i class="fad fa-comment-alt-exclamation fa-fw" style="font-size: 23px"></i>
</a>
</li>
<!--/// Feature ///-->
<li class="card border-0 rounded-0 mb-n4" style="width: 57px; height: 57px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #f5335a">
<a data-toggle="tab" class="btn btn-outline-danger border-0 rounded-0 align-items-center tooltipster" style="color: #ffd96e; box-shadow: none; mix-blend-mode: screen; width: 57px; height: 57px" data-placement="top" href="#DNI" title="Do Not Interact">
<i class="fad fa-times-circle fa-fw" style="font-size: 23px"></i>
</a>
</li>
</ul>
</div>
<!--///// Buttons /////-->
<div class="tab-content">
<!--////////////////////////////////////////////////////////////////////////////////////////////
TAB 3 [CONTENT WARNING]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div id="BYF" class="tab-pane fade show active">
<!--///// Sun decoration /////-->
<div class="card bg-transparent rounded-0 border-0 align-items-center mt-1"><i class="fad fa-moon-stars fa-beat mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-moon-stars fa-beat mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-moon-stars fa-beat mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<!--///// Sun decoration /////-->
<!--/////////////////////// QUOTE 2 ///////////////////////-->
<hr style="width: 95%; border: 1px dashed #f5335a; opacity: 0.5">
<p class="text-center" style="font-variant: small-caps; font-style: oblique; color: #759aab; text-shadow: 0 0 1px #713cc8, 0 0 5px #713cc8, 0 0 10px #f5335a;">"
Insert quote 2
"</p>
<hr style="width: 95%; border: 1px dashed #f5335a; opacity: 0.5">
<!--/////////////////////// QUOTE 2 end ///////////////////////-->
<div class="card rounded-0 border-0 px-2 bg-transparent text-justify" style="height: 415px; scrollbar-width: thin; scrollbar-color: #f5335a rgba(0, 0, 0,0 ); overflow: auto">
<!--/////////////////////// WARNING SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Content warnings
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--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.
</p>
<!--///// TEXT end /////-->
<hr class="mt-n1" style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<!--///// LIST /////-->
<ul class="list-unstyled ml-3 mb-n1">
<li><i class="fas fa-exclamation-triangle fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-exclamation-triangle fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-exclamation-triangle fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-exclamation-triangle fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-exclamation-triangle fa-fw" style="color: #f5335a"></i>Content</li>
</ul>
<!--/////////////////////// WARNING SECTION end ///////////////////////-->
<hr style="width: 99%; border: 1px solid #f5335a; opacity: 0.3">
<!--/////////////////////// ABOUT SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Before you follow
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--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.
</p>
<hr class="mt-n1" style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<p>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!--///// TEXT end /////-->
<!--/////////////////////// ABOUT SECTION end ///////////////////////-->
</div>
</div>
<!--/////////////////////////////////////////////////////////////// TAB 3 [CONTENT WARNING] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
TAB 4 [DO NOT INTERACT]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div id="DNI" class="tab-pane fade">
<!--///// Sun decoration /////-->
<div class="card bg-transparent rounded-0 border-0 align-items-center mt-1"><i class="fad fa-moon-stars fa-beat mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-moon-stars fa-beat mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<div class="card bg-transparent rounded-0 border-0 align-items-center" style="margin-top: -38px"><i class="fad fa-moon-stars fa-beat mt-2" style="animation-duration: 5s; font-size: 30px; color: #ffd96e"></i></div>
<!--///// Sun decoration /////-->
<hr style="width: 95%; border: 1px dashed #f5335a; opacity: 0.5">
<div class="card rounded-0 border-0 px-2 bg-transparent text-justify" style="height: 476px; scrollbar-width: thin; scrollbar-color: #f5335a rgba(0, 0, 0,0 ); overflow: auto">
<!--/////////////////////// DNI SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Do not interact
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--First letter of the body text is right below-->
P
</span>lease never interct with me, under any kind of circumstances, if:
</p>
<!--///// TEXT end /////-->
<hr class="mt-n1" style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<!--///// LIST /////-->
<ul class="list-unstyled ml-3 mb-n1">
<li><i class="fas fa-times fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-times fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-times fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-times fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-times fa-fw" style="color: #f5335a"></i>Content</li>
</ul>
<!--/////////////////////// DNI SECTION end ///////////////////////-->
<hr style="width: 99%; border: 1px solid #f5335a; opacity: 0.3">
<!--/////////////////////// WARY SECTION ///////////////////////-->
<!--/// TITLE ///-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<h5 class="text-capitalize mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #f49542, 0 0 10px #f5335a;">
Will be wary
</h5>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<!--/// TITLE end ///-->
<!--///// 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: 20px; background-color: rgba(245, 51, 90, 0.5); text-shadow: 0 0 1px #fff, 0 0 5px #ffd96e, 0 0 10px #f49542; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">
<!--First letter of the body text is right below-->
Y
</span>ou may interact with me if you want, but I will be wary of you if:
</p>
<!--///// TEXT end /////-->
<hr style="width: 99%; border: 1px dashed #f5335a; opacity: 0.3">
<!--///// LIST /////-->
<ul class="list-unstyled ml-3 mb-n1">
<li><i class="fas fa-tilde fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-tilde fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-tilde fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-tilde fa-fw" style="color: #f5335a"></i>Content</li>
<li><i class="fas fa-tilde fa-fw" style="color: #f5335a"></i>Content</li>
</ul>
<!--/////////////////////// WARY SECTION end ///////////////////////-->
</div>
</div>
<!--/////////////////////////////////////////////////////////////// TAB 4 [DO NOT INTERACT] end ///////////////////////////////////////////////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// RIGHT COLUMN end ///////////////////////////////////////////////////////////////-->
</div>
</div>