ROCKSTAR [custom for wahammett]
created by:FlowerlyRat
HTMLCustom ColorsCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱/╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Custom for @wahammett: code by FlowerlyRat || Released to the public on 03/06/2026 [DD/MM/YYYY]
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing!!! -> https://th.circlejourney.net/
Any links added use the following format [target="_blank" is optional]:
<a target="_blank" style="color: #ff0a00" href="LINK_HERE">text_here</a>
Color scheme:
Main color: #ff0a00
Text + decoration color: #9a0702
Decoration color: #2e2e2e
Background color: #000
-->
<div class="container p-0 col-md-11 mx-auto" style="font-family: Rockwell; color: #9a0702">
<div class="row no-gutters">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
RIGHT COLUMN - name/surname, avatar, and basic informations
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-3 order-md-4">
<div class="card rounded-0 border-0 pb-4" style="background-color: #000">
<!-- Decorations -->
<i class="fa-sharp fas fa-compact-disc fa-spin" style="position: absolute; top: -5px; right: 15px; font-size: 100px; color: #9a0702; transform: rotate(-25deg)"></i>
<i class="fa-sharp fas fa-hand-horns" style="position: absolute; top: 160px; left: 30%; font-size: 50px; color: #2e2e2e; transform: rotate(15deg)"></i>
<i class="fa-sharp fas fa-star" style="position: absolute; top: 150px; left: 5px; font-size: 40px; color: #9a0702; transform: rotate(-25deg)"></i>
<i class="fa-sharp fas fa-star" style="position: absolute; top: 200px; left: 15%; font-size: 30px; color: #ff0a00; transform: rotate(20deg)"></i>
<!-- Decorations end -->
<!--===/// AVATAR 1 ///===-->
<div class="card rounded-0 p-2 mx-auto" style="margin-top: -40px; left: -45px; height: 185px; width: 170px; background-color: #fff; transform: rotate(3deg); z-index: 5">
<!-- Decorative tape -->
<a target="_blank" href="https://www.pngwing.com/en/free-png-vnpqn"><img class="tooltipster" src="https://i.ibb.co/VDfyQ1P/image-holder-7.png" title="From pngwing" style="position: absolute; top: -15px; left: -30px; width: 80px; opacity: 0.5; filter: drop-shadow(0px 2px 2px #000); transform: rotate(-40deg); z-index: 5"></a>
<!-- Decorative tape end -->
<div class="card border-0 rounded-0 mx-auto" style="height: 130px; width: 100%; background-color: #2e2e2e; overflow: hidden;
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png);
background-size: cover;
background-position: center
"><!-- Feel free to change the size and position of the image by modifying the "background-size" and "background-position" with pixels or percents, just don't mix both unit together lol -->
</div>
<div class="text-uppercase my-auto" style="font-weight: bold; font-size: 25px; color: #ff0a00; text-shadow: 1px 0 0 #000, 0 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000">
<p class="text-truncate text-center" style="width: 100%">
<!--/// Name ///-->
Name
<!--/// Name end ///-->
</p>
</div>
</div>
<!--===/// AVATER 1 end ///===-->
<!--===/// AVATAR 2 ///===-->
<div class="card rounded-0 p-2 mx-auto" style="margin-top: -80px; right: -55px; height: 155px; width: 140px; background-color: #fff; transform: rotate(-5deg)">
<!-- Decorative tape -->
<a target="_blank" href="https://www.pngwing.com/en/free-png-vnpqn"><img class="tooltipster" src="https://i.ibb.co/VDfyQ1P/image-holder-7.png" title="From pngwing" style="position: absolute; top: -5px; right: -25px; width: 80px; opacity: 0.5; filter: drop-shadow(0px 2px 2px #000); transform: rotate(40deg); z-index: 5"></a>
<!-- Decorative tape end -->
<div class="card border-0 rounded-0 mx-auto" style="height: 100px; width: 100%; background-color: #2e2e2e; overflow: hidden;
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png);
background-size: cover;
background-position: center
"><!-- Feel free to change the size and position of the image by modifying the "background-size" and "background-position" with pixels or percents, just don't mix both unit together lol -->
</div>
<div class="text-uppercase my-auto" style="font-weight: bold; font-size: 20px; color: #ff0a00; text-shadow: 1px 0 0 #000, 0 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000">
<p class="text-truncate text-center" style="width: 100%">
<!--/// Name ///-->
Surname
<!--/// Name end ///-->
</p>
</div>
</div>
<!--===/// AVATER 2 end ///===-->
<!--===/// BASIC INFO //===/-->
<!--/ Age /-->
<div class="row no-gutters p-2">
<div class="col-auto" style="font-weight: bold; color: #ff0a00">
<p>Age</p>
</div>
<div class="col mx-2 my-auto" style="height: 11px; background-image: url(https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7); filter: brightness(40%)">
<a href="https://gifcity.carrd.co/#dividers" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></a>
</div>
<div class="col-auto" style="font-weight: bold">
<p>
1234
</p>
</div>
</div>
<!--/ Age end /-->
<!--/ Height /-->
<div class="row no-gutters p-2">
<div class="col-auto" style="font-weight: bold; color: #ff0a00">
<p>Height</p>
</div>
<div class="col mx-2 my-auto" style="height: 11px; background-image: url(https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7); filter: brightness(40%)">
<a href="https://gifcity.carrd.co/#dividers" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></a>
</div>
<div class="col-auto" style="font-weight: bold">
<p>
0m 0 or 0ft 0
</p>
</div>
</div>
<!--/ Height end /-->
<!--/ Gender /-->
<div class="row no-gutters p-2">
<div class="col-auto" style="font-weight: bold; color: #ff0a00">
<p>Gender</p>
</div>
<div class="col mx-2 my-auto" style="height: 11px; background-image: url(https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7); filter: brightness(40%)">
<a href="https://gifcity.carrd.co/#dividers" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></a>
</div>
<div class="col-auto" style="font-weight: bold">
<p>
gender
</p>
</div>
</div>
<!--/ Gender end /-->
<!--/ Pronouns /-->
<div class="row no-gutters p-2">
<div class="col-auto" style="font-weight: bold; color: #ff0a00">
<p>Pronouns</p>
</div>
<div class="col mx-2 my-auto" style="height: 11px; background-image: url(https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7); filter: brightness(40%)">
<a href="https://gifcity.carrd.co/#dividers" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></a>
</div>
<div class="col-auto" style="font-weight: bold">
<p>
pro/noun
</p>
</div>
</div>
<!--/ Pronouns end /-->
<!--/ Orientation /-->
<div class="row no-gutters p-2">
<div class="col-auto" style="font-weight: bold; color: #ff0a00">
<p>Orientation</p>
</div>
<div class="col mx-2 my-auto" style="height: 11px; background-image: url(https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7); filter: brightness(40%)">
<a href="https://gifcity.carrd.co/#dividers" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></a>
</div>
<div class="col-auto" style="font-weight: bold">
<p>
orientation
</p>
</div>
</div>
<!--/ Orientation end /-->
<!--===/// BASIC INFO end ///===-->
</div>
<div class="card rounded-0 hidden-sm-up" style="border-width: 2px 0 0 0; border-color: #ff0a00"></div>
</div>
<!--==============[RIGHT COLUMN end]==============-->
<div class="card rounded-0 order-md-2" style="border-width: 0 2px 0 0; border-color: #ff0a00"></div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LEFT COLUMN - buttons, tabs, text, and stamps
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md order-md-1">
<div class="card rounded-0 border-0" style="background-color: #000">
<div id="TABS">
<div class="row no-gutters">
<!--===///// BUTTONS /////===-->
<div class="col col-md-2">
<!-- Decorations and credits -->
<i class="fa-sharp fas fa-star" style="position: absolute; top: 30px; left: -15px; font-size: 50px; color: #2e2e2e; transform: rotate(15deg)"></i>
<i class="fa-sharp fas fa-star" style="position: absolute; top: -15px; left: -20px; font-size: 40px; color: #9a0702; transform: rotate(45deg)"></i>
<a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" class="tooltipster" title="Code by FlowerlyRat" style="position: absolute; left: 30px; color: #ff0a00; transform: rotate(20deg); z-index: 5">
<span class="fa-stack fa-2x" style="font-size: 17px">
<i class="fas fa-sharp fa-star fa-stack-2x"></i>
<i class="fas fa-sharp fa-code fa-stack-1x fa-inverse" style="font-size: 10px; color: #fff"></i>
</span>
</a>
<!-- Decorations and credits end -->
<div id="TABS_2">
<div class="card border-0 rounded-0 bg-transparent" style="height: 330px">
<ul class="nav nav-pills justify-content-center row no-gutters mt-auto">
<!--/// Buttons use images, feel free to copy/paste the link inside your browser to download and recolor them, or even just complately replace them ///-->
<!--Character desc-->
<li class="col-auto my-2">
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 70px; height: 70px; cursor: pointer">
<!--Inactive version-->
<img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/84282490_yUugH7oR8Wxn4cR.png?1719598035" style="height: 70px; width: 70px">
<div class="collapse fade show CHARA_DESC" style="position: absolute; top: 1px; left: 0; right: 0; bottom: 0" data-parent="#TABS_2">
<!--Active version-->
<img class="d-block mx-auto my-auto fa-spin" src="https://f2.toyhou.se/file/f2-toyhou-se/images/84282481_8z4l3gInRZsn4Zr.png?1719598404" style="animation-duration: 30s; height: 70px; width: 70px; border-radius:50%; background-color: #000">
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".CHARA_DESC"></a>
</div>
</li>
<!--Character desc end-->
<!--Character desc-->
<li class="col-auto my-2">
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2 fa-flip-vertical" style="width: 70px; height: 70px; cursor: pointer">
<!--Inactive version-->
<img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/84282490_yUugH7oR8Wxn4cR.png?1719598035" style="height: 70px; width: 70px">
<div class="collapse fade OTHER" style="position: absolute; top: 1px; left: 0; right: 0; bottom: 0" data-parent="#TABS_2">
<!--Active version-->
<img class="d-block mx-auto my-auto fa-spin" src="https://f2.toyhou.se/file/f2-toyhou-se/images/84282481_8z4l3gInRZsn4Zr.png?1719598404" style="animation-duration: 30s; height: 70px; width: 70px; border-radius:50%; background-color: #000">
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OTHER"></a>
</div>
</li>
<!--Character desc end-->
<!--Relationships-->
<li class="col-auto my-2">
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2 fa-flip-horizontal" style="width: 70px; height: 70px; cursor: pointer">
<!--Inactive version-->
<img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/84282490_yUugH7oR8Wxn4cR.png?1719598035" style="height: 70px; width: 70px">
<div class="collapse fade RELA" style="position: absolute; top: 1px; left: 0; right: 0; bottom: 0" data-parent="#TABS_2">
<!--Active version-->
<img class="d-block mx-auto my-auto fa-spin fa-spin-reverse" src="https://f2.toyhou.se/file/f2-toyhou-se/images/84282481_8z4l3gInRZsn4Zr.png?1719598404" style="animation-duration: 30s; height: 70px; width: 70px; border-radius:50%; background-color: #000">
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".RELA"></a>
</div>
</li>
<!--Relationships end-->
</ul>
</div>
</div>
</div>
<!--===///// BUTTONS end /////===-->
<div class="card rounded-0" style="border-width: 0 2px 0 0; border-color: #ff0a00"></div>
<!--===///// TABS /////===-->
<div class="col-9 col-md">
<!--/// DESCRIPTION + INTERESTS ///-->
<div class="collapse fade show CHARA_DESC" data-parent="#TABS">
<div class="card p-2 pt-3 border-0 rounded-0 bg-transparent" style="height: 330px; font-weight: bold; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ff0a00 #000">
<div class="card border-0 bg-transparent rounded-0 text-justify">
<!-- Decorations -->
<i class="fa-sharp fas fa-star" style="position: absolute; top: -15px; right: -15px; font-size: 50px; color: #2e2e2e; transform: rotate(45deg)"></i>
<i class="fa-sharp fas fa-star" style="position: absolute; top: 20px; right: 40px; font-size: 40px; color: #9a0702; transform: rotate(15deg)"></i>
<!-- Decorations end -->
<h1 class="text-truncate" style="font-size: 2.7em; color: #ff0a00; z-index: 5">
Description
</h1>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%)"></a>
<!----------------------------------------------------------------------------------------------------
TEXT BELOW
---------------------------------------------------------------------------------------------------->
<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>
<p>
<!--/// Image ///-->
<!-- If changing the image, don't forget to get rid of the "drop-shadow" filter if not needed -->
<a href="https://oceancake.carrd.co/" target="_blank"><img class="float-right ml-md-1 my-1" src="https://oceancake.carrd.co/assets/images/gallery02/98cc9e31.gif?v=a5d4a997" style="width: 150px; filter: drop-shadow(1px 1px #fff) drop-shadow(-1px 1px #fff) drop-shadow(1px -1px #fff) drop-shadow(-1px -1px #fff)"></a>
<!--/// Image end ///-->
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.
</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.
<br>
<!--/// Image ///-->
<!-- If changing the image, don't forget to get rid of the "drop-shadow" filter if not needed -->
<a href="https://oceancake.carrd.co/" target="_blank"><img class="float-left mr-1 my-1" src="https://oceancake.carrd.co/assets/images/gallery22/9bd1d552.gif?v=a5d4a997" style="width: 150px; filter: drop-shadow(1px 1px #fff) drop-shadow(-1px 1px #fff) drop-shadow(1px -1px #fff) drop-shadow(-1px -1px #fff)"></a>
<!--/// Image end ///-->
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>
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0">
<!-- Decorations -->
<i class="fa-sharp fas fa-music" style="position: absolute; top: -15px; right: 0px; font-size: 50px; color: #9a0702; transform: rotate(10deg)"></i>
<i class="fa-sharp fas fa-music-note" style="position: absolute; top: 15px; right: 70px; font-size: 40px; color: #2e2e2e; transform: rotate(340deg)"></i>
<!-- Decorations end -->
<h1 class="text-truncate" style="font-size: 2.7em; color: #ff0a00; z-index: 5">
Interests
</h1>
</div>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%)"></a>
<!----------------------------------------------------------------------------------------------------
TEXT BELOW
---------------------------------------------------------------------------------------------------->
<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.
</p>
</div>
</div>
</div>
<!--/// DESCRIPTION + INTERESTS end ///-->
<!--/// OTHER ///-->
<div class="collapse fade OTHER" data-parent="#TABS">
<div class="card p-2 pt-3 border-0 rounded-0 bg-transparent" style="height: 330px; font-weight: bold; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ff0a00 #000">
<div class="card border-0 bg-transparent rounded-0 text-justify">
<!-- Decorations -->
<i class="fa-sharp fas fa-guitar-electric" style="position: absolute; top: -10px; right: -10px; font-size: 50px; color: #9a0702; transform: rotate(350deg)"></i>
<i class="fa-sharp fas fa-amp-guitar" style="position: absolute; top: 15px; right: 50px; font-size: 40px; color: #2e2e2e; transform: rotate(340deg)"></i>
<!-- Decorations end -->
<h1 class="text-truncate" style="font-size: 2.7em; color: #ff0a00; z-index: 5">
Trivia
</h1>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%)"></a>
<!--/// List ///-->
<ul class="list-unstyled">
<!--/// Image ///-->
<img class="float-md-left d-block my-1 mx-auto mr-md-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png" style="width: 150px">
<!--/// Image end ///-->
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
</ul>
<!--/// List end ///-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0">
<!-- Decorations -->
<i class="fa-sharp fas fa-swatchbook" style="position: absolute; top: -15px; right: -10px; font-size: 50px; color: #2e2e2e"></i>
<i class="fa-sharp fas fa-pen" style="position: absolute; top: 15px; right: 50px; font-size: 40px; color: #9a0702; transform: rotate(260deg)"></i>
<!-- Decorations end -->
<h1 class="text-truncate" style="font-size: 2.7em; color: #ff0a00; z-index: 5">
Design notes
</h1>
</div>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%)"></a>
<!----------------------------------------------------------------------------------------------------
LIST + IMAGES BELOW
---------------------------------------------------------------------------------------------------->
<!--/// List ///-->
<ul class="list-unstyled">
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
<li><i class="fa-sharp fas fa-star mr-1"></i>content</li>
</ul>
<!--/// List end ///-->
<!--/// Images ///-->
<div class="row no-gutters justify-content-between">
<!--/ [1] /-->
<div class="col-auto mx-auto my-1">
<img class="d-block" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png" style="width: 150px">
</div>
<!--/ [1] /-->
<!--/ [2] /-->
<div class="col-auto mx-auto my-1">
<img class="d-block" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png" style="width: 150px">
</div>
<!--/ [2] /-->
<!--/ [3] /-->
<div class="col-auto mx-auto my-1">
<img class="d-block" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png" style="width: 150px">
</div>
<!--/ [3] /-->
</div>
<!--/// Images end ///-->
</div>
</div>
</div>
<!--/// OTHER end ///-->
<!--/// RELATIONSHIPS ///-->
<div class="collapse fade RELA" data-parent="#TABS">
<div class="card p-2 pt-3 border-0 rounded-0 bg-transparent" style="height: 330px; font-weight: bold; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ff0a00 #000">
<div class="card border-0 bg-transparent rounded-0 text-justify">
<!-- Decorations -->
<i class="fa-sharp fas fa-family" style="position: absolute; top: -15px; right: 0px; font-size: 50px; color: #2e2e2e; transform: rotate(10deg)"></i>
<i class="fa-sharp fas fa-heart" style="position: absolute; top: 15px; right: 60px; font-size: 40px; color: #9a0702; transform: rotate(340deg)"></i>
<!-- Decorations end -->
<h1 class="text-truncate" style="font-size: 2.7em; color: #ff0a00; z-index: 5">
Relationships
</h1>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%); z-index: 6"></a>
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// CHARA 1 //-->
<div class="row no-gutters mt-3">
<div class="col-md-3">
<div class="card rounded-0 p-2 mx-auto mb-3 mb-md-0" style="height: 150px; width: 140px; background-color: #fff; transform: rotate(-5deg); z-index: 5">
<!-- Decorative tape -->
<a target="_blank" href="https://www.pngwing.com/en/free-png-vnpqn"><img class="tooltipster" src="https://i.ibb.co/VDfyQ1P/image-holder-7.png" title="From pngwing" style="position: absolute; top: -15px; right: -30px; width: 80px; opacity: 0.5; filter: drop-shadow(0px 2px 2px #000); transform: rotate(40deg); z-index: 5"></a>
<!-- Decorative tape end -->
<div class="card border-0 rounded-0 mx-auto" style="height: 120px; width: 100%; background-color: #2e2e2e; overflow: hidden">
<!--/// Image ///--> <!--Feel free to change the size and position of the image by modifying the top/bottom/left/right and height/width-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png" style="top: px; bottom: 10px; left: px; right: px; height: px; width: px">
<!--/// Image end ///-->
</div>
<div class="text-uppercase my-auto text-center text-truncate" style="font-weight: bold">
<p class="text-center text-truncate" style="width: 100%; color: #ff0a00">
<!--/// Relationship status ///-->
relationship
<!--/// Relationship status end ///-->
</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card p-md-2 border-0 rounded-0 bg-transparent" style="height: 150px; font-weight: bold; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ff0a00 #000">
<div class="card border-0 bg-transparent rounded-0 text-justify">
<!-- Relationship Intensity -->
<div class="card border-0 rounded-0 bg-transparent" style="position: absolute; top: -5px; right: 0; font-size: 20px; transform: rotate(5deg)">
<p>
<i class="fa-sharp fas fa-heart-broken fa-fw" style="color: #2e2e2e"></i>
<i class="fa-sharp fas fa-heart-broken fa-fw" style="color: #2e2e2e"></i>
<i class="fa-sharp fas fa-heart fa-fw" style="color: #9a0702"></i>
<i class="fa-sharp fas fa-heart fa-fw" style="color: #9a0702"></i>
<i class="fa-sharp fas fa-heart fa-fw" style="color: #9a0702"></i>
</p>
</div>
<!-- Relationship Intensity end -->
<h1 class="text-truncate" style="font-size: 2em; z-index: 5">
<a style="color: #ff0a00" href=
"LINK_TO_PROFILE_HERE"
>Name Surname
<!--/// Link + name above ///-->
</a>
</h1>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%)"></a>
<!----------------------------------------------------------------------------------------------------
TEXT BELOW
---------------------------------------------------------------------------------------------------->
<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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
</div>
<!--// CHARA 1 end //-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<a href="https://gifcity.carrd.co/#dividers"><img class="mt-3 mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%); z-index: 6"></a>
<!--// CHARA 2 //-->
<div class="row no-gutters mt-3">
<div class="col-md-3 order-md-2">
<div class="card rounded-0 p-2 mx-auto mb-3 mb-md-0" style="height: 150px; width: 140px; background-color: #fff; transform: rotate(5deg); z-index: 5">
<!-- Decorative tape -->
<a target="_blank" href="https://www.pngwing.com/en/free-png-vnpqn"><img class="tooltipster" src="https://i.ibb.co/VDfyQ1P/image-holder-7.png" title="From pngwing" style="position: absolute; top: -5px; left: -25px; width: 80px; opacity: 0.5; filter: drop-shadow(0px 2px 2px #000); transform: rotate(-40deg); z-index: 5"></a>
<!-- Decorative tape end -->
<div class="card border-0 rounded-0 mx-auto" style="height: 120px; width: 100%; background-color: #2e2e2e; overflow: hidden">
<!--/// Image ///--> <!--Feel free to change the size and position of the image by modifying the top/bottom/left/right and height/width-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png" style="top: px; bottom: 10px; left: px; right: px; height: px; width: px">
<!--/// Image end ///-->
</div>
<div class="text-uppercase my-auto text-center text-truncate" style="font-weight: bold">
<p class="text-center text-truncate" style="width: 100%; color: #ff0a00">
<!--/// Relationship status ///-->
relationship
<!--/// Relationship status end ///-->
</p>
</div>
</div>
</div>
<div class="col-md order-md-1">
<div class="card p-md-2 border-0 rounded-0 bg-transparent" style="height: 150px; font-weight: bold; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ff0a00 #000">
<div class="card border-0 bg-transparent rounded-0 text-justify">
<!-- Relationship Intensity -->
<div class="card border-0 rounded-0 bg-transparent" style="position: absolute; top: -5px; right: 0; font-size: 20px; transform: rotate(5deg)">
<p>
<i class="fa-sharp fas fa-heart-broken fa-fw" style="color: #2e2e2e"></i>
<i class="fa-sharp fas fa-heart-broken fa-fw" style="color: #2e2e2e"></i>
<i class="fa-sharp fas fa-heart fa-fw" style="color: #9a0702"></i>
<i class="fa-sharp fas fa-heart fa-fw" style="color: #9a0702"></i>
<i class="fa-sharp fas fa-heart fa-fw" style="color: #9a0702"></i>
</p>
</div>
<!-- Relationship Intensity end -->
<h1 class="text-truncate" style="font-size: 2em; z-index: 5">
<a style="color: #ff0a00" href=
"LINK_TO_PROFILE_HERE"
>Name Surname
<!--/// Link + name above ///-->
</a>
</h1>
<a href="https://gifcity.carrd.co/#dividers"><img class="mb-2 d-block w-100" src="https://gifcity.carrd.co/assets/images/gallery43/f78ad0cd.gif?v=49903ca7" style="filter: brightness(40%)"></a>
<!----------------------------------------------------------------------------------------------------
TEXT BELOW
---------------------------------------------------------------------------------------------------->
<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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
</div>
<!--// CHARA 2 end //-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
</div>
</div>
</div>
<!--/// RELATIONSHIPS end ///-->
</div>
<!--===///// TABS end /////===-->
</div>
</div>
<div class="card rounded-0" style="border-width: 2px 0 0 0; border-color: #ff0a00"></div>
<!--===///// STAMPS /////===-->
<!-- More can be added, horizontally scrolls -->
<div class="card border-0 rounded-0 bg-transparent justify-content-center mx-2" style="height: 100px">
<div class="row no-gutters flex-nowrap mx-auto" style="overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ff0a00 #000">
<!-- Stamp 1 -->
<div class="col-auto mx-2">
<a href="https://www.deviantart.com/justyoungheroes/art/Red-Moon-Lover-568244159" target="_blank"><img class="d-block my-auto" src="https://y2k.neocities.org/stamps/tumblr_inline_pe6lc7ijO61v11djx_1280.gif" width="130"></a>
</div>
<!-- Stamp 1 end -->
<!-- Stamp 2 -->
<div class="col-auto mx-2">
<a href="https://www.deviantart.com/jazzaaro/art/Red-equalizer-stamp-114740033" target="_blank"><img class="d-block my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/59781387_1Lw0pk6lnk0pxrV.gif" width="130"></a>
</div>
<!-- Stamp 2 end -->
<!-- Stamp 3 -->
<div class="col-auto mx-2">
<a href="https://www.deviantart.com/puppystamps/art/59-715736046" target="_blank"><img class="d-block my-auto" src="https://gifcity.carrd.co/assets/images/gallery51/815e51d1.png?v=49903ca7" width="130"></a>
</div>
<!-- Stamp 3 end -->
<!-- Stamp 4 -->
<div class="col-auto mx-2">
<a href="https://www.deviantart.com/smol-panda/art/guitar-aesthetic-788914591" target="_blank"><img class="d-block my-auto" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/81078a64-3f5e-4205-b773-c53226726754/dd1p6e7-db8aad46-bdbf-4f42-9122-5815efca9193.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgxMDc4YTY0LTNmNWUtNDIwNS1iNzczLWM1MzIyNjcyNjc1NFwvZGQxcDZlNy1kYjhhYWQ0Ni1iZGJmLTRmNDItOTEyMi01ODE1ZWZjYTkxOTMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.8CQzPrdy7IpT21K_I2SIEyw_iI01FMc2mVdRKx7QvaI" width="130"></a>
</div>
<!-- Stamp 4 end -->
<!-- Stamp 5 -->
<div class="col-auto mx-2">
<a href="https://www.deviantart.com/hematology/art/red-glow-aesthetic-stamp-708930928" target="_blank"><img class="d-block my-auto" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf79e087-c4e0-406e-8eed-fc62e1142056/dbq2uls-a2888c48-eba7-4602-9bb4-661e0a67e2e7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NmNzllMDg3LWM0ZTAtNDA2ZS04ZWVkLWZjNjJlMTE0MjA1NlwvZGJxMnVscy1hMjg4OGM0OC1lYmE3LTQ2MDItOWJiNC02NjFlMGE2N2UyZTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ig70X39ob5jnnDfwCPQVv8knzo6MUJKRQYs8cvrdfbk" width="130"></a>
</div>
<!-- Stamp 5 end -->
</div>
</div>
<!--===///// STAMPS /////===-->
</div>
</div>
<!--==============[LEFT COLUMN end]==============-->
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUSIC PLAYER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card rounded-0 p-2 col-md-4 ml-auto mt-n4 mr-md-0 mr-n2" style="color: #ff0a00; border-radius: 50px 0 0 50px; border-width: 2px; border-color: #ff0a00; background-color: #000; transform: rotate(-3deg)">
<!-- Decorations -->
<i class="fa-sharp fas fa-star" style="position: absolute; right: 50px; font-size: 50px; color: #2e2e2e; transform: rotate(15deg)"></i>
<i class="fa-sharp fas fa-star" style="position: absolute; top: -15px; right: 5px; font-size: 40px; color: #9a0702; transform: rotate(45deg)"></i>
<i class="fa-sharp fas fa-star" style="position: absolute; top: 30px; right: 5px; font-size: 30px; color: #ff0a00; transform: rotate(20deg)"></i>
<!-- Decorations end -->
<div class="d-inline-block" style="position: relative; overflow: hidden">
<p class="text-truncate ml-5" style="text-shadow: 1px 0 0 #000, 0 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000">
<i class="fas fa-sharp fa-play mr-1"></i>
<b>Song title</b> - artist
</p><!-- If the title/artist gets cut off, add it a second time on the tooltip in the decoration section below -->
<iframe class="flex-fill" style="position: absolute; top: -25vh; left: -25vw; height: 100vh; width: 100vw; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID
"></iframe><!-- Add the YouTube video ID above -->
</div>
<!--/// Decorative spinning album + Song title tooltip ///-->
<span class="fa-stack fa-2x" style="position: absolute; top: -11px; left: -15px; font-size: 30px" data-toggle="tooltip"
title="song title - artist"
>
<i class="fa-sharp fas fa-album fa-stack-2x"></i>
<i class="fa-sharp fas fa-compact-disc fa-stack-1x fa-inverse fa-spin" style="margin-top: -1px; color: ##fff"></i>
</span>
</div>
<!--==============[MUSIC PLAYER end]==============-->