Profile
<!-- Window by Exo-Comet -->
<!-- Note: whenever you see LINKHERE or URLHERE, replace with the appropriate link or url! -->
<!-- Custom colour list: -->
<!-- Primary: #00FCDD -->
<!-- Background: #424242 -->
<!-- Alt Background + Dashed Borders: #4F4F4F -->
<!-- Text Colour: white -->
<!-- Faded Text Colour: #CACACA -->
<div class="mx-auto px-3 py-4" style="max-width:1000px;background:#424242;color:white;border-radius:1rem">
<div class="row m-n1">
<!-- Character name, quote and icon column -->
<div class="col-md-3 p-2 flex-column">
<div class="p-2 flex-fill" style="border-radius:1rem;background:#4F4F4F;overflow:hidden;position:relative">
<div class="ml-n2 pl-3 py-1 mt-2 text-monospace" style="position:relative">
<span style="position:absolute;left:0;top:0;bottom:0;border-left:4px solid #00FCDC;border-radius:50rem"></span>
<!-- Character name -->
<h1 class="m-0">Character Name</h1>
</div>
<!-- Quote -->
<blockquote class="p-3 border-0 m-0" style="font-size:1em;color:#CACACA;position:relative;z-index:1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</blockquote>
<!-- Decorative icon -->
<div style="position:absolute;bottom:-1em;left:-.5em;z-index:0">
<!-- Change fa-biohazard to something else! -->
<i class="fa-regular fa-biohazard fa-8x" style="color:#00FCDC;opacity:.25"></i>
</div>
</div>
<!-- Divider -->
<hr class="my-3 mx-3 mb-0" style="border:2px dashed #4F4F4F">
<!-- Icon container -->
<div class="d-flex">
<!-- Decorative border -->
<div class="mr-2 my-3" style="border-left:4px solid #00FCDC;border-radius:50rem"></div>
<div class="p-2" style="border-radius:1rem;background:#4F4F4F;overflow:hidden;position:relative">
<!-- Icon -->
<img class="w-100" src="URLHERE" style="border-radius:.5rem">
</div>
<!-- Decorative border -->
<div class="ml-2 my-3" style="border-left:4px solid #00FCDC;border-radius:50rem"></div>
</div>
</div>
<!-- Main content column -->
<div class="col-md p-2 flex-column">
<!-- Navigation list -->
<!-- You don't need to worry about the decoration too much -->
<!-- If you want to change the icons, look for something along the lines of fa-train or fa-paint-brush -->
<!-- If you want to add more tabs, you can just copy and paste the style - it shouldn't require any additional formatting -->
<!-- Same goes for removing tabs -->
<ul class="nav mb-n4 justify-content-center align-items-end" style="position:relative;z-index:1;" role="tablist">
<li class="border-top-0 mx-1 pb-1 px-1" style="background:#424242;border: 2px solid #5D5D5D;border-radius:0 0 .5em .5em;position:relative">
<span style="background:#424242;position:absolute;top:0;height:calc(1em);left:-2px;width:2px"></span>
<span style="background:#424242;position:absolute;top:0;height:calc(1em);right:-2px;width:2px"></span>
<a class="nav-link p-0" href id="about-tab" data-toggle="tab" data-target="#about" role="tab" aria-controls="about" aria-selected="true">
<!-- Icon - change this! -->
<i class="fa-regular fa-train d-flex align-items-center justify-content-center fa-fw fa-2x" style="color:#CACACA;"></i>
</a>
</li>
<li class="border-top-0 mx-1 pb-1 px-1" style="background:#424242;border: 2px solid #5D5D5D;border-radius:0 0 .5em .5em;position:relative">
<span style="background:#424242;position:absolute;top:0;height:calc(1em);left:-2px;width:2px"></span>
<span style="background:#424242;position:absolute;top:0;height:calc(1em);right:-2px;width:2px"></span>
<a class="nav-link p-0" href id="design-tab" data-toggle="tab" data-target="#design" role="tab" aria-controls="design" aria-selected="false">
<!-- Icon - change this! -->
<i class="fa-regular fa-paint-brush d-flex align-items-center justify-content-center fa-fw fa-2x" style="color:#CACACA;"></i>
</a>
</li>
<li class="border-top-0 mx-1 pb-1 px-1" style="background:#424242;border: 2px solid #5D5D5D;border-radius:0 0 .5em .5em;position:relative">
<span style="background:#424242;position:absolute;top:0;height:calc(1em);left:-2px;width:2px"></span>
<span style="background:#424242;position:absolute;top:0;height:calc(1em);right:-2px;width:2px"></span>
<a class="nav-link p-0" href id="abilities-tab" data-toggle="tab" data-target="#abilities" role="tab" aria-controls="abilities" aria-selected="false">
<!-- Icon - change this! -->
<i class="fa-regular fa-sparkles d-flex align-items-center justify-content-center fa-fw fa-2x" style="color:#CACACA;"></i>
</a>
</li>
<li class="border-top-0 mx-1 pb-1 px-1" style="background:#424242;border: 2px solid #5D5D5D;border-radius:0 0 .5em .5em;position:relative">
<span style="background:#424242;position:absolute;top:0;height:calc(1em);left:-2px;width:2px"></span>
<span style="background:#424242;position:absolute;top:0;height:calc(1em);right:-2px;width:2px"></span>
<a class="nav-link p-0" href id="music-tab" data-toggle="tab" data-target="#music" role="tab" aria-controls="music" aria-selected="false">
<!-- Icon - change this! -->
<i class="fa-regular fa-music d-flex align-items-center justify-content-center fa-fw fa-2x" style="color:#CACACA;"></i>
</a>
</li>
</ul>
<!-- Tabs -->
<div class="tab-content flex-column flex-fill mt-1 p-2 pt-4" style="border:2px solid #5D5D5D;border-radius:1rem;height:300px;overflow:auto">
<!-- About / general information tab -->
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
<!-- Tab title -->
<h2 class="text-monospace px-2 pb-2 mr-auto" style="position:relative">
About
<span style="position:absolute;left:0;right:0;bottom:0;border-bottom: 4px solid #00FCDC;border-radius:50rem"></span>
</h2>
<!-- Introduction - write as much as you want! -->
<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.</p>
<!-- Divider -->
<hr class="my-3 w-100" style="border:2px dashed #4F4F4F">
<!-- Basic info columns -->
<!-- Feel free to change any of the fields -->
<div class="row m-n1">
<!-- Left column -->
<div class="col-md p-1">
<div class="p-3" style="background: #4F4F4F;border-radius:1rem;">
<!-- The top element will be the field / category -->
<!-- The bottom element will be the content / value -->
<div class="d-flex flex-wrap">
<span>Full Name</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Gender</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Pronouns</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Age</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Birthday</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
</div>
</div>
<!-- Divider -->
<div class="col-md-auto p-1 d-flex flex-md-column">
<div class="flex-fill" style="background:#00FCDC;min-width:4px;min-height:4px;border-radius:50rem"></div>
</div>
<!-- Right column -->
<div class="col-md p-1">
<div class="p-3" style="background: #4F4F4F;border-radius:1rem;">
<div class="d-flex flex-wrap">
<span>Orientation</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Species</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Occupation</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>Alignment</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
<div class="d-flex flex-wrap">
<span>MBTI</span>
<span class="flex-fill text-right" style="color:#CACACA">content</span>
</div>
</div>
</div>
</div>
</div>
<!-- Design info tab -->
<div class="tab-pane fade flex-fill" id="design" role="tabpanel" aria-labelledby="design-tab">
<!-- Tab title -->
<h2 class="text-monospace px-2 pb-2 w-100" style="position:relative">
Design
<span style="position:absolute;left:0;right:0;bottom:0;border-bottom: 4px solid #00FCDC;border-radius:50rem"></span>
</h2>
<!-- Palette and reference image columns -->
<div class="row m-n1 justify-content-center">
<!-- Palette column -->
<!-- Colours can be added and removed whenever you want -->
<!-- You can wrap multiple colours together in one element -->
<!-- I'd recommend keeping a copy of both a single colour and group of colours -->
<!-- You can also change the tooltip to indicate the colour value and where the colour appears on the character -->
<!-- You can do this by changing the title attribute -->
<div class="col-md-auto flex-column p-1">
<div class="flex-md-column flex-row flex-fill m-n1" style="min-height:3rem;min-width:5rem">
<!-- Group of colours -->
<!-- I'd recommend only having 2-3 colours in one group -->
<div class="d-flex flex-fill m-1" style="border-radius:1em;overflow:hidden">
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#00FCDA"></span>
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#00CAA9"></span>
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#9FFFEE"></span>
</div>
<!-- Group of colours -->
<div class="d-flex flex-fill m-1" style="border-radius:1em;overflow:hidden">
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#FDE6D8"></span>
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#DDC2B2"></span>
</div>
<!-- Single colour -->
<span class="flex-fill m-1" data-toggle="tooltip" title="Colour" style="border-radius:1em;background:#FFFFFF"></span>
<!-- Group of colours -->
<div class="d-flex flex-fill m-1" style="border-radius:1em;overflow:hidden">
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#746BFB"></span>
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#574FCF"></span>
</div>
<!-- Group of colours -->
<div class="d-flex flex-fill m-1" style="border-radius:1em;overflow:hidden">
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#36353C"></span>
<span class="flex-fill" data-toggle="tooltip" title="Colour" style="background:#4B4A51"></span>
</div>
<!-- Single colour -->
<span class="flex-fill m-1" data-toggle="tooltip" title="Colour" style="border-radius:1em;background:#FF1386"></span>
</div>
</div>
<!-- I'd recommend playing around with the width of the column and the height of the image -->
<!-- You can increase the width of the column by change col-md-4 to something like col-md-5, etc -->
<!-- Do note that the maximum value is 11, otherwise you will break the layout -->
<!-- You can change the height of the image by changing the height in the style attribute -->
<div class="col-md-4 p-1">
<div style="
background: url('URLHERE') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
height:200px">
<!-- Change the above height! -->
<!-- Reference sheet link -->
<a class="px-1" href="LINKHERE" data-toggle="tooltip" title="Link to Reference Sheet" style="position:absolute;bottom:.5em;right:.5em;background:#00FCDC;color:black;border-radius:.25em">
<i class="fa-regular fa-image fa-fw"></i>
</a>
</div>
</div>
</div>
<!-- Design notes -->
<!-- Tab subtitle -->
<h3 class="text-monospace mx-2 text-center mb-0 mt-2">Dos</h3>
<!-- Divider -->
<hr class="my-2 w-100" style="border:2px dashed #4F4F4F">
<!-- Notes -->
<!-- The notes make use of icon lists -->
<!-- You can change the icons of individual list elements to something else! -->
<div class="mb-2 pl-1" style="background:#4F4F4F;border-radius:1em;">
<ul class="ml-3 p-2 m-0 fa-ul">
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-check" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-check" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-check" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-check" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
</ul>
</div>
<!-- Tab subtitle -->
<h3 class="text-monospace mx-2 text-center mb-0">Don'ts</h3>
<!-- Divider -->
<hr class="my-2 w-100" style="border:2px dashed #4F4F4F">
<!-- Notes -->
<div class="mb-2 pl-1" style="background:#4F4F4F;border-radius:1em;">
<ul class="ml-3 p-2 m-0 fa-ul">
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-xmark" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-xmark" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-xmark" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-xmark" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
</ul>
</div>
<!-- Tab subtitle -->
<h3 class="text-monospace mx-2 text-center mb-0">Optional</h3>
<!-- Divider -->
<hr class="my-2 w-100" style="border:2px dashed #4F4F4F">
<!-- Notes -->
<div class="pl-1" style="background:#4F4F4F;border-radius:1em;">
<ul class="ml-3 p-2 m-0 fa-ul">
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-question" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-question" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-question" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
<li>
<span class="fa-li">
<!-- Change this! -->
<i class="fa-solid fa-question" style="color:#00FCDD"></i>
</span>
<!-- Add the design note -->
Design note
</li>
</ul>
</div>
</div>
<!-- Abilities / combat tab -->
<div class="tab-pane fade flex-fill" id="abilities" role="tabpanel" aria-labelledby="abilities-tab">
<!-- Tab title -->
<h2 class="text-monospace px-2 pb-2 w-100" style="position:relative">
Abilities
<span style="position:absolute;left:0;right:0;bottom:0;border-bottom: 4px solid #00FCDC;border-radius:50rem"></span>
</h2>
<!-- Image and ability summary columns -->
<div class="row m-n1">
<!-- Image column -->
<div class="col-md-3 p-1">
<div class="p-2 h-100 d-flex flex-column" style="border-radius: 1em;background:#4F4F4F">
<!-- Image goes here! -->
<img class="d-block w-100 flex-fill" src="URLHERE" style="object-fit:cover;border-radius:.5em">
</div>
</div>
<!-- Divider -->
<div class="col-md-auto p-1 d-flex flex-md-column">
<div class="flex-fill" style="background:#00FCDC;min-width:4px;min-height:4px;border-radius:50rem"></div>
</div>
<!-- Stats column -->
<div class="col-md p-1">
<div class="p-2 h-100 flex-column justify-content-center mb-n1 mt-md-n1 mt-0" style="border-radius: 1em;background:#4F4F4F">
<!-- These stat bars have an icon on the left and then five elements afterwards -->
<!-- Those five elements are for you to fill in with the colours of your choosing -->
<!-- I've decided to use the primary colour to indicate the value of the stat and the background as a base -->
<div class="d-flex align-items-center m-1">
<!-- Change this icon and change the tooltip text -->
<span class="mr-2" data-toggle="tooltip" title="stat">
<i class="fa-solid fa-sword fa-fw"></i>
</span>
<div class="d-flex flex-fill m-n1">
<!-- Change the colours -->
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
</div>
</div>
<div class="d-flex align-items-center m-1">
<!-- Change this icon and change the tooltip text -->
<span class="mr-2" data-toggle="tooltip" title="stat">
<i class="fa-solid fa-hand fa-fw"></i>
</span>
<div class="d-flex flex-fill m-n1">
<!-- Change the colours -->
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
</div>
</div>
<div class="d-flex align-items-center m-1">
<!-- Change this icon and change the tooltip text -->
<span class="mr-2" data-toggle="tooltip" title="stat">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
<div class="d-flex flex-fill m-n1">
<!-- Change the colours -->
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
</div>
</div>
<div class="d-flex align-items-center m-1">
<!-- Change this icon and change the tooltip text -->
<span class="mr-2" data-toggle="tooltip" title="stat">
<i class="fa-solid fa-brain fa-fw"></i>
</span>
<div class="d-flex flex-fill m-n1">
<!-- Change the colours -->
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
</div>
</div>
<div class="d-flex align-items-center m-1">
<!-- Change this icon and change the tooltip text -->
<span class="mr-2" data-toggle="tooltip" title="stat">
<i class="fa-solid fa-eye fa-fw"></i>
</span>
<div class="d-flex flex-fill m-n1">
<!-- Change the colours -->
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#00FCDC;border-radius:50rem"></div>
</div>
</div>
<div class="d-flex align-items-center m-1">
<!-- Change this icon and change the tooltip text -->
<span class="mr-2" data-toggle="tooltip" title="stat">
<i class="fa-solid fa-comment fa-fw"></i>
</span>
<div class="d-flex flex-fill m-n1">
<!-- Change the colours -->
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
<div class="m-1 flex-fill py-1" style="background:#424242;border-radius:50rem"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Divider -->
<hr class="mt-2 mb-3" style="border:none;border-bottom:4px solid #00FCDC;border-radius:50rem">
<!-- Ability list -->
<!-- In order to add more abilities, you will need to add another collapse to the accordion -->
<!-- I'd recommend copying one that exists and changes the id and data-target (i.e. ability-1) -->
<!-- Remember that each id needs to be unique, otherwise the accordion will break -->
<div class="accordion my-n2" id="ability-accordion">
<!-- Ability container -->
<div class="p-2 my-2" style="background:#4F4F4F;border-radius:1em;position:relative;overflow:hidden">
<!-- Change this icon -->
<i class="fa-regular fa-star fa-3x" style="position:absolute;right:0;bottom:0;transform:rotate(2deg);opacity:.25;color:#CACACA"></i>
<a href class="d-block text-monospace font-italic" data-toggle="collapse" data-target="#ability-1" aria-expanded="false" aria-controls="ability-1" style="color:#00FCDC;position:relative">
<!-- Change the text here -->
Ability
</a>
<div id="ability-1" class="collapse" data-parent="#ability-accordion" style="color:#CACACA;position:relative">
<div class="p-2">
<!-- Add the ability description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!-- Ability container -->
<div class="p-2 my-2" style="background:#4F4F4F;border-radius:1em;position:relative;overflow:hidden">
<!-- Change this icon -->
<i class="fa-regular fa-star fa-3x" style="position:absolute;right:0;bottom:0;transform:rotate(2deg);opacity:.25;color:#CACACA"></i>
<a href class="d-block text-monospace font-italic" data-toggle="collapse" data-target="#ability-2" aria-expanded="false" aria-controls="ability-2" style="color:#00FCDC;">
<!-- Change the text here -->
Ability
</a>
<div id="ability-2" class="collapse" data-parent="#ability-accordion" style="color:#CACACA">
<div class="p-2">
<!-- Add the ability description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!-- Ability container -->
<div class="p-2 my-2" style="background:#4F4F4F;border-radius:1em;position:relative;overflow:hidden">
<!-- Change this icon -->
<i class="fa-regular fa-star fa-3x" style="position:absolute;right:0;bottom:0;transform:rotate(2deg);opacity:.25;color:#CACACA"></i>
<a href class="d-block text-monospace font-italic" data-toggle="collapse" data-target="#ability-3" aria-expanded="false" aria-controls="ability-3" style="color:#00FCDC;">
<!-- Change the text here -->
Ability
</a>
<div id="ability-3" class="collapse" data-parent="#ability-accordion" style="color:#CACACA">
<div class="p-2">
<!-- Add the ability description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!-- Ability container -->
<div class="p-2 my-2" style="background:#4F4F4F;border-radius:1em;position:relative;overflow:hidden">
<!-- Change this icon -->
<i class="fa-regular fa-star fa-3x" style="position:absolute;right:0;bottom:0;transform:rotate(2deg);opacity:.25;color:#CACACA"></i>
<a href class="d-block text-monospace font-italic" data-toggle="collapse" data-target="#ability-4" aria-expanded="false" aria-controls="ability-4" style="color:#00FCDC;">
<!-- Change the text here -->
Ability
</a>
<div id="ability-4" class="collapse" data-parent="#ability-accordion" style="color:#CACACA">
<div class="p-2">
<!-- Add the ability description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Music / playlist tab -->
<div class="tab-pane fade flex-fill" id="music" role="tabpanel" aria-labelledby="music-tab">
<!-- Tab title -->
<h2 class="text-monospace px-2 pb-2 w-100" style="position:relative">
Music
<span style="position:absolute;left:0;right:0;bottom:0;border-bottom: 4px solid #00FCDC;border-radius:50rem"></span>
</h2>
<!-- Playlist grid -->
<div class="row m-n1">
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://upload.wikimedia.org/wikipedia/en/e/e9/Starset_Transmissions.jpg') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://upload.wikimedia.org/wikipedia/en/1/18/Starset_Vessels.jpg') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://i.ytimg.com/vi/vKdiqVHRatA/hq720.jpg?sqp=-oaymwEXCK4FEIIDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCd3oJTZd4LOTtYe6tNPP1hdNH1_g') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://upload.wikimedia.org/wikipedia/en/8/8d/Starset_-_Horizons.png') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://upload.wikimedia.org/wikipedia/en/e/e9/Starset_Transmissions.jpg') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://upload.wikimedia.org/wikipedia/en/1/18/Starset_Vessels.jpg') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://i.ytimg.com/vi/vKdiqVHRatA/hq720.jpg?sqp=-oaymwEXCK4FEIIDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCd3oJTZd4LOTtYe6tNPP1hdNH1_g') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 p-1">
<!-- Change the background image on this element! -->
<div class="d-flex justify-content-center"
style="padding-bottom:calc(100% - .5rem);
background: url('https://upload.wikimedia.org/wikipedia/en/8/8d/Starset_-_Horizons.png') no-repeat center;
background-size:cover;
position:relative;
border-radius:1em;
border:.5rem solid #4F4F4F">
<div class="px-2 pt-2" style="position:absolute;bottom:0;background:#424242;border-radius:2rem 2rem 0 0">
<div class="text-center py-1 px-3 flex-column d-flex" style="border-radius:1.75rem 1.75rem 0 0;background:#4F4F4F">
<!-- Include a link to the audio and change the tooltip text to credit the artist -->
<a href="LINKHERE" style="color:#00FCDD" data-toggle="tooltip" title="Song / Artist">
<!-- You can also change the icon if you want -->
<i class="fa-solid fa-music"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Adjective list -->
<div class="text-center text-monospace my-2"> text <span style="color:#00FCDC">+</span> text <span style="color:#00FCDC">+</span> text </div>
<!-- Stat bars -->
<!-- I've put my-3 on the centre element in both columns. If you add anymore stat bars, I'd recommend adding it to any bars that are neither the first nor the last in their column. -->
<!-- If you only have two in each column, add mb-3 to the first instead. -->
<div class="row m-n2">
<!-- Left column -->
<div class="col-md p-2">
<div class="d-flex align-items-center" style="position:relative;background:#5D5D5D;border-radius:50rem">
<!-- Change the width on this -->
<div style="height:.5rem;background:#00FCDC;width:50%;border-radius:50rem"></div>
<!-- Change the title attribute on this -->
<span data-toggle="tooltip" title="stat" class="d-flex justify-content-center align-items-center px-1" style="position:absolute;left:calc(50% - .625em - .25rem);background:#424242;border-radius:50rem">
<!-- Change the fa-star class to change the icon -->
<i class="fa-solid fa-star fa-fw d-flex align-items-center justify-content-center" style="height:1.25em;color:#CACACA"></i>
</span>
</div>
<div class="d-flex align-items-center my-3" style="position:relative;background:#5D5D5D;border-radius:50rem">
<!-- Change the width on this -->
<div style="height:.5rem;background:#00FCDC;width:75%;border-radius:50rem"></div>
<!-- Change the title attribute on this -->
<span data-toggle="tooltip" title="stat" class="d-flex justify-content-center align-items-center px-1" style="position:absolute;left:calc(50% - .625em - .25rem);background:#424242;border-radius:50rem">
<!-- Change the fa-star class to change the icon -->
<i class="fa-solid fa-star fa-fw d-flex align-items-center justify-content-center" style="height:1.25em;color:#CACACA"></i>
</span>
</div>
<div class="d-flex align-items-center" style="position:relative;background:#5D5D5D;border-radius:50rem">
<!-- Change the width on this -->
<div style="height:.5rem;background:#00FCDC;width:25%;border-radius:50rem"></div>
<!-- Change the title attribute on this -->
<span data-toggle="tooltip" title="stat" class="d-flex justify-content-center align-items-center px-1" style="position:absolute;left:calc(50% - .625em - .25rem);background:#424242;border-radius:50rem">
<!-- Change the fa-star class to change the icon -->
<i class="fa-solid fa-star fa-fw d-flex align-items-center justify-content-center" style="height:1.25em;color:#CACACA"></i>
</span>
</div>
</div>
<!-- Right column -->
<div class="col-md p-2">
<div class="d-flex align-items-center" style="position:relative;background:#5D5D5D;border-radius:50rem">
<!-- Change the width on this -->
<div style="height:.5rem;background:#00FCDC;width:50%;border-radius:50rem"></div>
<!-- Change the title attribute on this -->
<span data-toggle="tooltip" title="stat" class="d-flex justify-content-center align-items-center px-1" style="position:absolute;left:calc(50% - .625em - .25rem);background:#424242;border-radius:50rem">
<!-- Change the fa-star class to change the icon -->
<i class="fa-solid fa-star fa-fw d-flex align-items-center justify-content-center" style="height:1.25em;color:#CACACA"></i>
</span>
</div>
<div class="d-flex align-items-center my-3" style="position:relative;background:#5D5D5D;border-radius:50rem">
<!-- Change the width on this -->
<div style="height:.5rem;background:#00FCDC;width:75%;border-radius:50rem"></div>
<!-- Change the title attribute on this -->
<span data-toggle="tooltip" title="stat" class="d-flex justify-content-center align-items-center px-1" style="position:absolute;left:calc(50% - .625em - .25rem);background:#424242;border-radius:50rem">
<!-- Change the fa-star class to change the icon -->
<i class="fa-solid fa-star fa-fw d-flex align-items-center justify-content-center" style="height:1.25em;color:#CACACA"></i>
</span>
</div>
<div class="d-flex align-items-center" style="position:relative;background:#5D5D5D;border-radius:50rem">
<!-- Change the width on this -->
<div style="height:.5rem;background:#00FCDC;width:25%;border-radius:50rem"></div>
<!-- Change the title attribute on this -->
<span data-toggle="tooltip" title="stat" class="d-flex justify-content-center align-items-center px-1" style="position:absolute;left:calc(50% - .625em - .25rem);background:#424242;border-radius:50rem">
<!-- Change the fa-star class to change the icon -->
<i class="fa-solid fa-star fa-fw d-flex align-items-center justify-content-center" style="height:1.25em;color:#CACACA"></i>
</span>
</div>
</div>
</div>
</div>
<!-- Side image column -->
<div class="col-md-auto p-2">
<!-- Don't worry about most of this - it's just for decoration -->
<div class="pr-md-3 pb-md-4 pt-md-4 pl-md-0 p-2 d-flex flex-column align-items-center h-100" style="position:relative">
<!-- DECORATION -->
<div class="d-md-block d-none" style="position:absolute;border-radius:1rem;background:#00FCDC;top:0;bottom:0;right:0;left:2rem"></div>
<div class="d-md-none" style="position:absolute;border-radius:1rem;background:#00FCDC;top:0;bottom:0;right:0;left:0"></div>
<div class="p-2 mt-auto mb-md-2" style="background:#4F4F4F;border-radius:1rem;position:relative;max-width:80px">
<div style="position:absolute;width:2rem;left:0;background:#424242;height:100%;top:0;border-radius: 1rem 0 0 1rem"></div>
<div class="d-md-block d-none" style="position:absolute;background:#4F4F4F;left:2rem;top:-1rem;">
<div style="width:1rem;height:1rem;background:#00FCDC;border-radius: 0 0 0 50rem"></div>
</div>
<div class="d-md-block d-none" style="position:absolute;background:#4F4F4F;left:2rem;bottom:-1rem;">
<div style="width:1rem;height:1rem;background:#00FCDC;border-radius: 50rem 0 0 0"></div>
</div>
<!-- Put your image here! I'd recommened one with a transparent background so you can benefit from the drop-shadow. -->
<img src="URLHERE" style="border-radius:.5rem;display:block;filter:drop-shadow(5px 0px 0 #424242)">
</div>
</div>
</div>
</div>
</div>
<!-- Credit - please do not remove or make difficult to find -->
<p class="text-center mt-2">
<a href="https://toyhou.se/Exo-Comet" data-toggle="tooltip" title="Profile by Exo-Comet"><i class="fa-solid fa-meteor"></i></a>
<a href="https://toyhou.se/Togo" data-toggle="tooltip" title="Layout / Concept by Togo"><i class="fa-solid fa-cards"></i></a>
</p>
Recent Images
No images.