F2U | CHARACTER PROFILE (EXAMPLE CODE HTML)

hypnopuppy

Profile


<div class="container-fluid" style="max-width: 1000px;">

<div class="py-4 px-4 container-fluid mb-1" style="max-width: 900px; background-image: url(https://i.pinimg.com/originals/83/7b/06/837b0630d70f250f8b608a4d1d5a1b95.gif); background-size: cover; background-position: center; background-color: rgb(0, 0, 0, 0.0); background-repeat: no-repeat; border-radius: 30px;">

<!-- TITLE -->
<h1 class="text-center mb-3" style="font-weight:300; color:#D399FF;">
<i class="fal fa-stars" style="transform: rotateY(180deg);"></i>
CHARACTER NAME
<i class="fal fa-stars"></i>

</h1>
<!-- TITLE END -->
<!-- you can change the star icons to another, just replace "stars" with one of the options given from fontawesome.com-->

<!-- GENERAL INFO -->
<div class="row justify-content-center mb-3">

<!-- INFO 1 -->
<div class="col-md-6" style="max-width:325px;">
<div class="pb-1" style="overflow-x: auto;">

<ul class="list-group">

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">NAME</span>
<span style="pull-left">CONTENT</span>
</p>
</li>

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">PRONOUNS</span>
<span style="pull-left">CONTENT</span>
</p>
</li>

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">GENDER</span>
<span style="pull-left">
<!-- FLAG -->
<a class="tooltipster" title="GENDER"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/47868723_j6Wo8nbQp9tbtYG.png" style="opacity:0.6;"></a>
<!-- FLAG END -->
<!-- code for the flag can be removed and replaced with text, or multiple flags can br added. my flags can be found here: https://toyhou.se/15617965.-f2u-mini-pride-flags -->
</span>
</p>
</li>

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">ORIENTATION</span>
<span style="pull-left">
<!-- FLAG -->
<a class="tooltipster" title="ORIENTATION"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/47868723_j6Wo8nbQp9tbtYG.png" style="opacity:0.6;"></a>
<!-- FLAG END -->
<!-- code for the flag can be removed and replaced with text, or multiple flags can be added. my flags can be found here: https://toyhou.se/15617965.-f2u-mini-pride-flags -->
</span>
</p>
</li>

</ul>

</div>
</div>
<!-- INFO 1 END -->

<!-- PROFILE IMAGE -->
<div class="col-md-5 mb-2 mt-1" style="max-width:205px;">
<div class="border-0" style="min-height:170px; border-radius: 100px; background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/characters/14039064?1652096892'); background-size: 105%; background-position: center; background-color: rgb(0, 0, 0, 0.0); opacity: 0.9"></div>
</div>
<!-- PROFILE IMAGE END -->

<!-- INFO 2 -->
<div class="col-md-6" style="max-width:325px;">
<div class="pb-1" style="overflow-x: auto;">

<ul class="list-group">

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">AGE</span>
<span style="pull-left">CONTENT</span>
</p>
</li>

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">HEIGHT</span>
<span style="pull-left">CONTENT</span>
</p>
</li>

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">SPECIES</span>
<span style="pull-left">CONTENT</span>
</p>
</li>

<li class="list-group-item d-block">
<p class="justify-content-between">
<span class="text-muted">ECT</span>
<span style="pull-left">CONTENT</span>
</p>
</li>

</ul>

</div>
</div>
<!-- INFO 2 END -->

</div>
<!-- GENERAL INFO END -->

<!-- DIVIDER -->
<p class="text-center mb-3"><a href="https://www.deviantart.com/king-lulu-deer/art/Rollin-Stars-790912897"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf2836cb-5893-4a6c-b156-5a89d94fc721/dd2w0ap-0bc310d5-bacd-4355-95cd-76d7439cb656.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NmMjgzNmNiLTU4OTMtNGE2Yy1iMTU2LTVhODlkOTRmYzcyMVwvZGQydzBhcC0wYmMzMTBkNS1iYWNkLTQzNTUtOTVjZC03NmQ3NDM5Y2I2NTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.1K_G6IOvy0C-Gvg2wHnknHu2A6c2aPz_VcDRxmfEy4Q" style="opacity: 0.8;"></a></p>
<!-- DIVIDER END -->


<div class="row justify-content-center">

<!-- PROFILE -->
<div class="col-md-8">

<!-- NAVIGATOR -->
<ul class="nav nav-pills card-header-tab nav-justified mb-1" style="overflow-x: auto; overflow-y: hidden;">
<li class="nav-item"><a class="nav-link btn btn-default m-1 active" data-toggle="tab" href="#ONE" style="font-weight:300; font-size:14px;">ABOUT</a></li>
<li class="nav-item"><a class="nav-link btn btn-default m-1" data-toggle="tab" href="#TWO" style="font-weight:300; font-size:14px;">DESCRIPTION</a></li>
<li class="nav-item"><a class="nav-link btn btn-default m-1" data-toggle="tab" href="#THREE" style="font-weight:300; font-size:14px;">LINKS</a></li>
</ul>
<!-- NAVIGATOR END -->

<div class="tab-content">

<!-- ABOUT -->
<div class="tab-pane show active card fade p-4 mb-3" style="height:300px; overflow:auto;" id="ONE">

<p class ="text-center"><a href="https://www.deviantart.com/localtanuki/art/f2u-653326766"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b0b6bee8-0362-455c-84c4-5db55c596657/dasz25q-c72cd364-d821-4c43-9004-ac77bfb3fbbc.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2IwYjZiZWU4LTAzNjItNDU1Yy04NGM0LTVkYjU1YzU5NjY1N1wvZGFzejI1cS1jNzJjZDM2NC1kODIxLTRjNDMtOTAwNC1hYzc3YmZiM2ZiYmMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Ueci4RM-M0j8NNaHT9JBn5SCARCK8TOyr8ZbAj2fTKM"></a></p>

<p class="text-sm-left;" style="text-indent:30px;">Write about your character! Personality, story, ect. Copy and paste for a new paragaph! 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 class="text-sm-left;" style="text-indent:30px;">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>

<p class="text-sm-left;" style="text-indent:30px;">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>

<hr>

<div class="row justify-content-center">
<div class="card border-0 m-1" style="width:150px; height:150px; background-image: url('https://i.pinimg.com/564x/30/d0/be/30d0bee1df7eb3bbc0d8f8fe2e27d9a7.jpg'); background-size:cover; background-position: center;"></div>
<div class="card border-0 m-1" style="width:150px; height:150px; background-image: url('https://i.pinimg.com/564x/bf/b6/55/bfb655b5a099a18b5c1023c5f8de9367.jpg'); background-size:cover; background-position: center;"></div>
<div class="card border-0 m-1" style="width:150px; height:150px; background-image: url('https://i.pinimg.com/564x/bd/6d/d7/bd6dd7510e3f261e7035649111a32e9b.jpg'); background-size:cover; background-position: center;"></div>
</div>

</div>
<!-- ABOUT END -->

<!-- DESCRIPTION -->
<div class="tab-pane card fade p-4 mb-3" style="height:300px; overflow:auto;" id="TWO">

<div class="row justify-content-center">
<div class="card border-0 m-1" style="width:150px; height:150px; background-image: url('https://i.pinimg.com/564x/30/d0/be/30d0bee1df7eb3bbc0d8f8fe2e27d9a7.jpg'); background-size:cover; background-position: center;"></div>
<div class="card border-0 m-1" style="width:150px; height:150px; background-image: url('https://i.pinimg.com/564x/bf/b6/55/bfb655b5a099a18b5c1023c5f8de9367.jpg'); background-size:cover; background-position: center;"></div>
<div class="card border-0 m-1" style="width:150px; height:150px; background-image: url('https://i.pinimg.com/564x/bd/6d/d7/bd6dd7510e3f261e7035649111a32e9b.jpg'); background-size:cover; background-position: center;"></div>
</div>

<hr>

<p class="text-sm-left;" style="text-indent:30px;">Write a description for your character! Physical description, behaviors, design, conditions, ect. Copy and paste for a new paragaph! 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 class="text-sm-left;" style="text-indent:30px;">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>

<p class ="text-center"><a href="https://www.deviantart.com/spiritsiphon/art/Moon-and-Stars-593825406"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0d397352-de1e-4439-a72d-26fe08545872/d9tjqm6-f0c4bd23-059e-4d49-8fde-639e04fee852.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBkMzk3MzUyLWRlMWUtNDQzOS1hNzJkLTI2ZmUwODU0NTg3MlwvZDl0anFtNi1mMGM0YmQyMy0wNTllLTRkNDktOGZkZS02MzllMDRmZWU4NTIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.sL2wWlvMScY2QTygC75sZjujZtAMdwnWDMn89-xbglU"></a></p>

</div>
<!-- DESCRIPTION END -->

<!-- LINKS -->
<div class="tab-pane card fade p-4 mb-3" style="height:300px; overflow:auto;" id="THREE">

<!-- LINK  1 -->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/edb6d6ca-0201-4e4a-a01c-8878b4ce07a9/df54h9q-fa9ceee0-7257-4368-bb4e-4a484614bcfb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VkYjZkNmNhLTAyMDEtNGU0YS1hMDFjLTg4NzhiNGNlMDdhOVwvZGY1NGg5cS1mYTljZWVlMC03MjU3LTQzNjgtYmI0ZS00YTQ4NDYxNGJjZmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.D1fTFvxu3yD3b25GLxV1NDL8Vpm7KLnr4XyJ8oWolck" style="max-height:150px; border-radius:100px;" class="rounded float-sm-right d-block mx-auto mb-3"/>

<div class="justify-content-between">

<h2 class="my-2" style="font-weight: 300;"><a href="TOYHOUSE-URL"style="color:#D399FF;">NAME</a></h2>
<h2 class="my-2 text-muted" style="font-weight: 300;">RELATIONSHIP</h2>
</div>

<p class="text-sm-left" style="text-indent:20px;">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>

<!-- LINK 1 END -->

<hr>

<!-- LINK  2 -->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/edb6d6ca-0201-4e4a-a01c-8878b4ce07a9/df54h9q-fa9ceee0-7257-4368-bb4e-4a484614bcfb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VkYjZkNmNhLTAyMDEtNGU0YS1hMDFjLTg4NzhiNGNlMDdhOVwvZGY1NGg5cS1mYTljZWVlMC03MjU3LTQzNjgtYmI0ZS00YTQ4NDYxNGJjZmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.D1fTFvxu3yD3b25GLxV1NDL8Vpm7KLnr4XyJ8oWolck" style="max-height:150px; border-radius: 100px;" class="rounded float-sm-right d-block mx-auto mb-3"/>

<div class="justify-content-between">

<h2 class="my-2" style="font-weight: 300;"><a href="TOYHOUSE-URL"style="color:#D399FF;">NAME</a></h2>
<h2 class="my-2 text-muted" style="font-weight: 300;">RELATIONSHIP</h2>
</div>

<p class="text-sm-left" style="text-indent:20px;">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>

<!-- LINK 2 END -->

</div>
<!-- LINKS END -->

</div>

<!-- STAMPS -->
<div class="row justify-content-center mt-1" style="opacity:0.8;">

<a href="https://www.deviantart.com/cyooti/art/037-664111332"><img class="p-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8b535ce0-6b96-4d5c-9567-9ceb47c5b113/daze7l0-ab48ffb3-05b6-4ad0-a863-1ea45ac54f18.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzhiNTM1Y2UwLTZiOTYtNGQ1Yy05NTY3LTljZWI0N2M1YjExM1wvZGF6ZTdsMC1hYjQ4ZmZiMy0wNWI2LTRhZDAtYTg2My0xZWE0NWFjNTRmMTgucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.lHwdrKLoUN3D7_M8I_ec-M32LUcG4qxzkl4iIH8PPZg"></a>

<a href="https://www.deviantart.com/tokyo-cisco/art/Sunset-City-Aesthetic-Stamp-3-832330279"><img class="p-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1e3184db-a1db-48ca-aa32-77135eeb59c2/ddrjq5j-fb0a2590-78ed-4fe0-995f-9e4c339e89d1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFlMzE4NGRiLWExZGItNDhjYS1hYTMyLTc3MTM1ZWViNTljMlwvZGRyanE1ai1mYjBhMjU5MC03OGVkLTRmZTAtOTk1Zi05ZTRjMzM5ZTg5ZDEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.drU2LVdZ7JsLRKcAH4T_UrigsGsSP4Xpvvuv3f_xG4c"></a>

<a href="https://www.deviantart.com/arandomvelociraptor/art/Stamp-Night-Sky-689977155"><img class="p-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ad1d3cf5-dd36-41a3-b390-add90cdc2aea/dbesls3-b9a9e70d-9121-49f5-8496-9cf987210295.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FkMWQzY2Y1LWRkMzYtNDFhMy1iMzkwLWFkZDkwY2RjMmFlYVwvZGJlc2xzMy1iOWE5ZTcwZC05MTIxLTQ5ZjUtODQ5Ni05Y2Y5ODcyMTAyOTUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.drsSFaib6aeHgOjOw4KnsguxBWq3eKy07a0EWBl0bKw"></a>

<a href="https://www.deviantart.com/drowsyfaun/art/--730828473"><img class="p-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/13955afe-6510-418e-9039-b1aceafb175a/dc346ux-81f18dcc-8c81-427a-ab7e-bb76e86b7aad.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzEzOTU1YWZlLTY1MTAtNDE4ZS05MDM5LWIxYWNlYWZiMTc1YVwvZGMzNDZ1eC04MWYxOGRjYy04YzgxLTQyN2EtYWI3ZS1iYjc2ZTg2YjdhYWQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.T27M3Z-eBpULrz-zPqMxLx9j3HE01wBmkCQFHCoUgoE"></a>

<a href="https://www.deviantart.com/xpufflex/art/STAMP-Purple-f2U-OO2-749355406"><img class="p-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c3958595-ddf8-4f5f-9823-1ee15e39cc11/dce5aby-bec8bac2-790d-488f-8399-bf7be773ae8b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2MzOTU4NTk1LWRkZjgtNGY1Zi05ODIzLTFlZTE1ZTM5Y2MxMVwvZGNlNWFieS1iZWM4YmFjMi03OTBkLTQ4OGYtODM5OS1iZjdiZTc3M2FlOGIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xyOsK8IYmgUXWSOjUIWE3Y3P9GzemZP5Uantl8qCiZc"></a>

</div>
<!-- STAMPS END -->

</div>
<!-- PROFILE END -->

<div class="col-md-4">

<!-- MUSIC PLAYER -->
<div class="justify-content-center text-center mb-1 mt-1" style="color:#D399FF;">
<div id="music-player" class="carousel slide" data-interval="999999">
<div class="carousel-inner">

<!-- FIRST SONG -->
<div class="carousel-item active">
<div style="text-align:center;">
<h4 class="text-center" style="font-weight:300; height:35px; width:300px;">
NO NORMAL - BLACK DRESSES
</h4>
<h4 style="display:inline-block;">
<span class="pull-left">
<a href="#music-player" role="button" data-slide="prev"><i class="fas fa-backward-step" style="color:#D399FF"></i></a>
</span>
<span>
<iframe class="flex-fill" style="height:1em; width:1em; left: 25px; position: relative; z-index:0; opacity:0;" frameborder="0" src="https://www.youtube.com/embed/_tVNvacpSio"></iframe>
<i class="fas fa-play" style="color:#D399FF"></i>
<iframe class="flex-fill" style="height:1em; width:1em; position: relative; z-index:0; opacity:0;" frameborder="0"></iframe>
</span>
<span class="pull-right">
<a href="#music-player" role="button" data-slide="next"><i class="fas fa-step-forward" style="color:#D399FF"></i></a>
</span>
</h4>
</div>
</div>
<!-- FIRST SONG END -->

<!-- SONG -->
<div class="carousel-item">
<div style="text-align:center;">
<h4 class="text-center" style="font-weight:300; height:35px; width:300px;">
FIGHTER - JACK STAUBER
</h4>
<h4 style="display:inline-block;">
<span class="pull-left">
<a href="#music-player" role="button" data-slide="prev"><i class="fas fa-backward-step" style="color:#D399FF"></i></a>
</span>
<span>
<iframe class="flex-fill" style="height:1em; width:1em; left: 25px; position: relative; z-index:0; opacity:0;" frameborder="0" src="https://www.youtube.com/embed/tNvp-BMUZik"></iframe>
<i class="fas fa-play" style="color:#D399FF"></i>
<iframe class="flex-fill" style="height:1em; width:1em; position: relative; z-index:0; opacity:0;" frameborder="0"></iframe>
</span>
<span class="pull-right">
<a href="#music-player" role="button" data-slide="next"><i class="fas fa-step-forward" style="color:#D399FF"></i></a>
</span>
</h4>
</div>
</div>
<!-- SONG END -->

<!-- SONG -->
<div class="carousel-item">
<div style="text-align:center;">
<h4 class="text-center" style="font-weight:300; height:35px; width:300px;">
THE CHATTERING LACK OF COMMON SENSE - GHOST
</h4>
<h4 style="display:inline-block;">
<span class="pull-left">
<a href="#music-player" role="button" data-slide="prev"><i class="fas fa-backward-step" style="color:#D399FF"></i></a>
</span>
<span>
<iframe class="flex-fill" style="height:1em; width:1em; left: 25px; position: relative; z-index:0; opacity:0;" frameborder="0" src="https://www.youtube.com/embed/ksW7SuH6IAs"></iframe>
<i class="fas fa-play" style="color:#D399FF"></i>
<iframe class="flex-fill" style="height:1em; width:1em; position: relative; z-index:0; opacity:0;" frameborder="0"></iframe>
</span>
<span class="pull-right">
<a href="#music-player" role="button" data-slide="next"><i class="fas fa-step-forward" style="color:#D399FF"></i></a>
</span>
</h4>
</div>
</div>
<!-- SONG END -->

</div>
</div>
</div>
<!-- MUSIC PLAYER END -->
<!--
version for one song:
<div class="justify-content-center text-center mb-1 mt-1" style="color:#D399FF;">
<div style="text-align:center;">
<h4 class="text-center" style="font-weight:300; height:35px;">
SONG TITLE - ARTIST
</h4>
<h4 style="display:inline-block;">
<span>
<iframe class="flex-fill" style="height:1em; width:1em; left: 25px; position: relative; z-index:0; opacity:0;" frameborder="0" src="https://www.youtube.com/embed/END-OF-YOUTUBE-LINK"></iframe>
<i class="fas fa-circle-play" style="color:#D399FF"></i>
<iframe class="flex-fill" style="height:1em; width:1em; position: relative; z-index:0; opacity:0;" frameborder="0"></iframe>
</span>
</h4>
</div>
</div>
-->

<!-- PAGEDOLL -->
<div class="border-0 rounded mt-1" style="height: 330px; background-image:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/edb6d6ca-0201-4e4a-a01c-8878b4ce07a9/df53yyj-5816d77e-17cb-4ce0-945d-a6a3edd92db3.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VkYjZkNmNhLTAyMDEtNGU0YS1hMDFjLTg4NzhiNGNlMDdhOVwvZGY1M3l5ai01ODE2ZDc3ZS0xN2NiLTRjZTAtOTQ1ZC1hNmEzZWRkOTJkYjMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QtrzdUN77gPyMqSORvmeBsPPI6AZP21rvUL82EuwfP8'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity:0.9;"></div>
<!-- PAGEDOLL END -->

<!--
alternative code for non pagedoll art:
<div class="border-0 rounded mt-1" style="height: 330px; background-image:url('IMAGE-URL'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity:0.9;"></div>
-->

</div>

</div>

</div>

<p class="text-center" style="font-size:smaller; opacity:0.4;"><a href="https://toyhou.se/16055875.-f2u-character-profile">HTML</a> BY CAVITYCLOWN</p>

</div>