Profile
<!-- Crossing by Exo-Comet -->
<!-- Note: if you see LINKHERE or URLHERE, replace with the appropriate link or url! -->
<!-- Main profile -->
<div class="mx-auto" style="max-width:650px">
<!-- Top row -->
<div class="row m-n1 align-items-end">
<!-- Character image and name -->
<div class="col-md-4 p-1">
<div style="
background:
url('URLHERE')
no-repeat
center;
background-size:cover;
padding-bottom:100%;
position:relative">
<!-- Name card -->
<h1 class="m-0 card border-0 rounded-0 p-2 text-center" style="position:absolute;bottom:1rem;left:0;right:0;">
Character Name
</h1>
</div>
</div>
<!-- Introduction and icon -->
<div class="col p-1">
<div class="row m-n1">
<div class="col-md p-1">
<div class="card bg-faded rounded-0 p-2 border-0 h-100" style="max-height:120px;overflow:auto;">
<div class="card p-2 rounded-0">
<!-- Introduction goes here! -->
<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>
</div>
</div>
</div>
<div class="col-md-auto p-1">
<div class="card p-2 rounded-0 bg-faded border-0 align-items-center justify-content-center h-100">
<!-- Font Awesome icon -->
<i class="fa-solid fa-star fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="mb-1" aria-hidden="true"></div>
<!-- Bottom row -->
<div class="row m-n1">
<!-- Left column -->
<div class="col-md-4 p-1">
<div class="card bg-faded border-0 rounded-0 p-1 h-100">
<!-- Info blocks -->
<!-- Gender -->
<div class="card p-1 rounded-0 flex-row m-1">
<div class="d-flex bg-primary text-white py-2 px-1 mr-1">
<i class="fa-solid fa-venus-mars fa-fw d-flex align-items-center justify-content-center"></i>
</div>
<div class="d-flex flex-column justify-content-center">
<small class="text-primary">Gender</small>
<span>Content</span>
</div>
</div>
<!-- Pronouns -->
<div class="card p-1 rounded-0 flex-row m-1">
<div class="d-flex bg-primary text-white py-2 px-1 mr-1">
<i class="fa-solid fa-signature fa-fw d-flex align-items-center justify-content-center"></i>
</div>
<div class="d-flex flex-column justify-content-center">
<small class="text-primary">Pronouns</small>
<span>Content</span>
</div>
</div>
<!-- Age -->
<div class="card p-1 rounded-0 flex-row m-1">
<div class="d-flex bg-primary text-white py-2 px-1 mr-1">
<i class="fa-solid fa-birthday-cake fa-fw d-flex align-items-center justify-content-center"></i>
</div>
<div class="d-flex flex-column justify-content-center">
<small class="text-primary">Age</small>
<span>Content</span>
</div>
</div>
<!-- Orientation -->
<div class="card p-1 rounded-0 flex-row m-1">
<div class="d-flex bg-primary text-white py-2 px-1 mr-1">
<i class="fa-solid fa-heart fa-fw d-flex align-items-center justify-content-center"></i>
</div>
<div class="d-flex flex-column justify-content-center">
<small class="text-primary">Orientation</small>
<span>Content</span>
</div>
</div>
<!-- Reference sheet -->
<div class="card p-1 rounded-0 flex-row m-1">
<div class="d-flex bg-primary text-white py-2 px-1 mr-1">
<i class="fa-solid fa-paintbrush fa-fw d-flex align-items-center justify-content-center"></i>
</div>
<div class="d-flex flex-column justify-content-center">
<small class="text-primary">Reference Sheet</small>
<span>
<a href="LINKHERE">Image</a>
</span>
</div>
</div>
<!-- Colour palette -->
<div class="card p-1 rounded-0 flex-row m-1 flex-fill">
<div class="d-flex bg-primary text-white py-2 px-1 mr-1">
<i class="fa-solid fa-palette fa-fw d-flex align-items-center justify-content-center"></i>
</div>
<div class="d-flex flex-column justify-content-center w-100">
<small class="text-primary">Colour Palette</small>
<div class="d-flex flex-wrap">
<!-- These colour blocks are intended to show which colours are allocated to specific parts of a character, such as skin tone, hair colour, clothing ,etc -->
<!-- Set the colour by changing the background style. Remember to change the colour to something contrasting! -->
<!-- Change the title attribute to change what the tooltip displays -->
<div class="px-3 py-1 text-center flex-fill" data-toggle="tooltip" title="Trait - Colour" style="background:#000000;color:white">
<i class="fa-solid fa-star"></i>
</div>
<div class="px-3 py-1 text-center flex-fill" data-toggle="tooltip" title="Trait - Colour" style="background:#3b3b3b;color:white">
<i class="fa-solid fa-star"></i>
</div>
<div class="px-3 py-1 text-center flex-fill" data-toggle="tooltip" title="Trait - Colour" style="background:#777777;color:white">
<i class="fa-solid fa-star"></i>
</div>
<div class="px-3 py-1 text-center flex-fill" data-toggle="tooltip" title="Trait - Colour" style="background:#b9b9b9;color:black">
<i class="fa-solid fa-star"></i>
</div>
<div class="px-3 py-1 text-center flex-fill" data-toggle="tooltip" title="Trait - Colour" style="background:#ffffff;color:black">
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right column -->
<div class="col flex-column p-1">
<!-- Quote -->
<div class="bg-primary text-white p-2 mb-2">
<blockquote class="d-flex border-0 font-italic m-0 p-0" style="font-size:1em;">
<i class="fa-solid fa-quote-left fa-fw"></i>
<!-- Quote text here! -->
<span class="flex-fill text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus.
</span>
<i class="fa-solid fa-quote-right fa-fw mt-auto"></i>
</blockquote>
</div>
<!-- Relations and playlist columns -->
<div class="row m-n1 flex-fill">
<!-- Relations -->
<div class="col-md flex-column p-1">
<h2 class="card rounded-0 p-2 text-center mb-2">Relations</h2>
<!-- This box may scroll depending on the height of other elements -->
<div class="flex-fill" style="position:relative;min-height:200px">
<div style="position:absolute;left:0;right:0;top:0;bottom:0;overflow:auto;">
<!-- Link to the character -->
<h3 class="card rounded-0 p-2 text-center mb-2" style="position:sticky;top:0;z-index:1">
<a href="LINKHERE">Character Name</a>
<small class="font-italic text-secondary" style="font-size:.8rem">Relationship</small>
</h3>
<!-- Character image -->
<div class="card rounded-0 p-2 mb-2">
<img class="d-block" src="URLHERE">
</div>
<div class="card rounded-0 p-2 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<!-- Divider -->
<hr>
<!-- Link to the character -->
<h3 class="card rounded-0 p-2 text-center mb-2" style="position:sticky;top:0;z-index:1">
<a href="LINKHERE">Character Name</a>
<small class="font-italic text-secondary" style="font-size:.8rem">Relationship</small>
</h3>
<!-- Character image -->
<div class="card rounded-0 p-2 mb-2">
<img class="d-block" src="URLHERE">
</div>
<div class="card rounded-0 p-2 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
</div>
<!-- Playlist -->
<div class="col p-1">
<div class="card rounded-0 bg-faded border-0 h-100" style="min-height:200px;position:relative">
<!-- This box may scroll depending on the height of other elements -->
<div class="card rounded-0 p-1" style="position:absolute;top:.5rem;left:.5rem;right:.5rem;bottom:.5rem;overflow:auto">
<h2 class="text-center mb-1">Playlist</h2>
<div class="d-flex m-1">
<!-- Album cover -->
<img class="d-block" src="URLHERE" style="max-width:40px">
<a href="LINKHERE" class="btn btn-outline-primary border-0 px-2 py-1 text-left rounded-0 d-flex flex-column justify-content-center flex-fill">
<!-- Song info -->
<span>Song Name</span>
<small>Artist</small>
</a>
</div>
<div class="d-flex m-1">
<!-- Album cover -->
<img class="d-block" src="URLHERE" style="max-width:40px">
<a href="LINKHERE" class="btn btn-outline-primary border-0 px-2 py-1 text-left rounded-0 d-flex flex-column justify-content-center flex-fill">
<!-- Song info -->
<span>Song Name</span>
<small>Artist</small>
</a>
</div>
<div class="d-flex m-1">
<!-- Album cover -->
<img class="d-block" src="URLHERE" style="max-width:40px">
<a href="LINKHERE" class="btn btn-outline-primary border-0 px-2 py-1 text-left rounded-0 d-flex flex-column justify-content-center flex-fill">
<!-- Song info -->
<span>Song Name</span>
<small>Artist</small>
</a>
</div>
<div class="d-flex m-1">
<!-- Album cover -->
<img class="d-block" src="URLHERE" style="max-width:40px">
<a href="LINKHERE" class="btn btn-outline-primary border-0 px-2 py-1 text-left rounded-0 d-flex flex-column justify-content-center flex-fill">
<!-- Song info -->
<span>Song Name</span>
<small>Artist</small>
</a>
</div>
<div class="d-flex m-1">
<!-- Album cover -->
<img class="d-block" src="URLHERE" style="max-width:40px">
<a href="LINKHERE" class="btn btn-outline-primary border-0 px-2 py-1 text-left rounded-0 d-flex flex-column justify-content-center flex-fill">
<!-- Song info -->
<span>Song Name</span>
<small>Artist</small>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Credits - please do not remove or make difficult to find -->
<p class="text-center">
<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 by Togo"><i class="fa-solid fa-cards"></i></a>
</p>
Recent Images
No images.