Profile
<!----------
Use ctrl f to replace the colors used
> background (white) : #ffffff
> black (for text) : #000000
> color 1 (darkest) : #629c29
> color 2 : #6fb02e
> color 3 : #7bc433
> color 4 : #88ce43
> color 5 : #95d357
> color 5 (lightest) : #aede80
----------->
<div class="mx-auto container" style="max-width: 500px;">
<div class="row no-gutters">
<!----- SIDEBAR THING ----->
<div class="col-auto p-2 mr-1" style="width: 30px;">
<div class="card p-2 h-100" style="width: 30px; background-color: #7bc433;"></div>
</div>
<!---- RIGHT SIDE ---->
<div class="col p-2 w-100 ml-2">
<div id="accordion">
<div id="collapseMain" class="collapse show" data-parent="#accordion" style=""> <!----- FRONT PAGE ---->
<div class="card p-0" style="background-color: #ffffff; border: 1px solid #629c29;">
<!----- CHARACTER IMAGE (replace the IMG URL with your character's image or some other image)------>
<div class="card w-100" style="background:url(IMG URL ); background-size:cover; background-position:center; background-repeat:no-repeat; min-height: 200px;">
<!----- CHARACTER NAME ---->
<div class="text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 130px; margin-left: 15px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><i>first name.</i></div>
</div>
<!----- TITLE AND QUOTE ---->
<div class="row no-gutters mt-1 p-3">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>char title here</i></div>
</div>
<div class="col w-100 pl-3 text-right">
<p style="font-size: 10px; color: #000000;">"character quote here."</p>
</div>
</div>
</div>
<!------ BUTTONS ---->
<div class="row no-gutters mt-2">
<div class="col-5 pr-1"><a href="#collapseMore1" data-toggle="collapse" aria-expanded="false" aria-controls="collapseMore" class="tooltipster collapsed btn btn-block p-1" title="main info" style="background-color: #88ce43; color: #ffffff; height: 25px; font-size: 12px;">dossier</a></div>
<div class="col-4 pl-1 pr-1"><a href="#collapseMore2" data-toggle="collapse" aria-expanded="false" aria-controls="collapseMore" class="tooltipster collapsed btn btn-block p-1" title="relationships" style="background-color: #95d357; color: #ffffff; height: 25px; font-size: 12px;">relations</a></div>
<div class="col-3 pl-1"><a href="#collapseMore3" data-toggle="collapse" aria-expanded="false" aria-controls="collapseMore" class="tooltipster collapsed btn btn-block p-1" title="design" style="background-color: #aede80; color: #629c29; height: 25px; font-size: 12px;">design</a></div>
</div>
</div>
<div id="collapseMore1" class="collapse" data-parent="#accordion" style=""> <!---- DOSSIER START --->
<div class="card p-0" style="background-color: #ffffff; border: 1px solid #629c29;">
<!---- HEADER (replace IMG/GIF URL with the desired image/gif) ----->
<div class="card w-100 h-100" style="background:url(IMG/GIF URL); background-size:cover; background-position:center; background-repeat:no-repeat;">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 20px; margin-left: 15px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><i>dossier.</i></div>
</div>
<div class="col w-100 text-right">
<i><a href="#collapseMain" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMain" class="nav-link text-right text-white text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 5px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><</a></i> <!----BACK BUTTON --->
</div>
</div>
</div>
<!---- SMALL CHARACTER BLURB/QUOTE HERE ---->
<div class="col w-100 pl-3 text-right mt-2 ">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tempor dui. Sed blandit fringilla diam ut mollis. Nulla congue erat sed dui imperdiet, </p>
</div>
<div class="row no-gutters">
<div class="col-md-6 p-2">
<div class="card p-2 mx-auto" style="background: none; border: 1px solid #88ce43; height: 140px;"> <!---- CHARACTER ICON---->
<div class="card w-100 h-100" style="background:url(CHARACTER ICON HERE); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<!----- BASICS CONTENT ---->
<div class="col-md-6 p-2 mt-2">
<div class="row no-gutters">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>name.</i></div>
</div>
<div class="col w-100 pl-3 text-right">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>nickname.</i></div>
</div>
<div class="col w-100 pl-3 text-right">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>age.</i></div>
</div>
<div class="col w-100 pl-3 text-right">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>birthday.</i></div>
</div>
<div class="col w-100 pl-3 text-right">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>sexuality.</i></div>
</div>
<div class="col w-100 pl-3 text-right">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
</div>
</div>
<!----- PERSONALITY PART ---->
<div class="text-lowercase text-monospace" style="font-weight: bold; font-size: 30px;margin-left: 15px; color: #6fb02e;"><i>personality.</i></div>
<div class="mb-1 text-justify" style="margin-left: 15px; margin-right: 10px;">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat velit, eu tempus nisl. Quisque condimentum pellentesque venenatis. Phasellus tristique viverra sapien, vitae lobortis mauris ultrices eu. Sed urna metus, ornare eget diam ut, suscipit semper quam. Integer ultrices iaculis nulla, vitae cursus mauris maximus at. Quisque lobortis ultrices nibh. Pellentesque id metus interdum nibh sodales porttitor non a turpis. Suspendisse potenti. Ut id lacus interdum mauris molestie bibendum.
<br><br>
Praesent ut nisi sed quam efficitur tempor. Curabitur venenatis, urna vitae blandit euismod, nisl tellus porttitor felis, ut vulputate leo dui at lorem. Sed vulputate ac tellus id euismod. </p>
</div>
<!----- HISTORY/BIOGRAPHY PART ---->
<div class="text-lowercase text-monospace mt-3" style="font-weight: bold; font-size: 30px;margin-left: 15px; color: #6fb02e;"><i>history.</i></div>
<div class="mb-3 text-justify" style="margin-left: 15px; margin-right: 10px;">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat velit, eu tempus nisl. Quisque condimentum pellentesque venenatis. Phasellus tristique viverra sapien, vitae lobortis mauris ultrices eu. Sed urna metus, ornare eget diam ut, suscipit semper quam. Integer ultrices iaculis nulla, vitae cursus mauris maximus at. Quisque lobortis ultrices nibh. Pellentesque id metus interdum nibh sodales porttitor non a turpis. Suspendisse potenti. Ut id lacus interdum mauris molestie bibendum.
<br><br>
Praesent ut nisi sed quam efficitur tempor. Curabitur venenatis, urna vitae blandit euismod, nisl tellus porttitor felis, ut vulputate leo dui at lorem. Sed vulputate ac tellus id euismod. </p>
</div>
<!----
FOR THE FOOTER :
- its best if you use the same image/gif as the one used for the header
----->
<div class="card w-100" style="background:url(IMG/GIF URL); background-size:cover; background-position:center; background-repeat:no-repeat; height: 30px;"></div>
</div>
</div>
<div id="collapseMore2" class="collapse" data-parent="#accordion" style=""> <!----- RELATIONSHIP START --->
<div class="card p-0" style="background-color: #ffffff; border: 1px solid #629c29;">
<!---- HEADER (replace IMG/GIF URL with the desired image/gif) ----->
<div class="card w-100 h-100" style="background:url(IMG/GIF URL); background-size:cover; background-position:center; background-repeat:no-repeat;">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 20px; margin-left: 15px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><i>relations.</i></div>
</div>
<div class="col w-100 text-right">
<i><a href="#collapseMain" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMain" class="nav-link text-right text-white text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 5px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><</a></i>
</div>
</div>
</div>
<!--- SMALL CHARACTER QUOTE/BLURB HERE ---->
<div class="col w-100 pl-3 text-right mt-2 ">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tempor dui. Sed blandit fringilla diam ut mollis. Nulla congue erat sed dui imperdiet, </p>
</div>
<!----- RELATIONSHIP ONE --->
<div class="mt-2 p-2">
<div class="float-left mr-2 mb-0">
<div class="card p-2 mx-auto" style="background: none; border: 1px solid #88ce43; height: 120px; width: 120px;"> <!---- CHARACTER AVATAR HERE --->
<div class="card w-100 h-100" style="background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<!----- CHARACTER LINK ---->
<a class="text-lowercase text-monospace" href="CHARACTER URL HERE" style="font-weight: bold; font-size: 30px; color: #6fb02e;"><i>name.</i></a>
<span class="pl-1 pr-1" style="background-color: #7bc433; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>relationship status.</i></span>
<div class="mb-3 text-justify" style="margin-right: 10px;">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat velit, eu tempus nisl. Quisque condimentum pellentesque venenatis. Phasellus tristique viverra sapien, vitae lobortis mauris ultrices eu. Sed urna metus, ornare eget diam ut.</p>
</div>
</div>
<!----- RELATIONSHIP TWO --->
<div class="mt-2 p-2">
<div class="float-left mr-2 mb-0">
<div class="card p-2 mx-auto" style="background: none; border: 1px solid #88ce43; height: 120px; width: 120px;"> <!---- CHARACTER AVATAR HERE --->
<div class="card w-100 h-100" style="background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<!----- CHARACTER LINK ---->
<a class="text-lowercase text-monospace" href="CHARACTER URL HERE" style="font-weight: bold; font-size: 30px; color: #6fb02e;"><i>name.</i></a>
<span class="pl-1 pr-1" style="background-color: #7bc433; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>relationship status.</i></span>
<div class="mb-3 text-justify" style="margin-right: 10px;">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat velit, eu tempus nisl. Quisque condimentum pellentesque venenatis. Phasellus tristique viverra sapien, vitae lobortis mauris ultrices eu. Sed urna metus, ornare eget diam ut.</p>
</div>
</div>
<!----- RELATIONSHIP THREE --->
<div class="mt-2 p-2">
<div class="float-left mr-2 mb-0">
<div class="card p-2 mx-auto" style="background: none; border: 1px solid #88ce43; height: 120px; width: 120px;"> <!---- CHARACTER AVATAR HERE --->
<div class="card w-100 h-100" style="background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<!----- CHARACTER LINK ---->
<a class="text-lowercase text-monospace" href="CHARACTER URL HERE" style="font-weight: bold; font-size: 30px; color: #6fb02e;"><i>name.</i></a>
<span class="pl-1 pr-1" style="background-color: #7bc433; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>relationship status.</i></span>
<div class="mb-3 text-justify" style="margin-right: 10px;">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat velit, eu tempus nisl. Quisque condimentum pellentesque venenatis. Phasellus tristique viverra sapien, vitae lobortis mauris ultrices eu. Sed urna metus, ornare eget diam ut.</p>
</div>
</div>
<div class="card w-100" style="background:url(IMG/GIF URL); background-size:cover; background-position:center; background-repeat:no-repeat; height: 30px;"></div>
</div>
</div>
<div id="collapseMore3" class="collapse" data-parent="#accordion" style=""> <!----- DESIGN START ---->
<div class="card p-0" style="background-color: #ffffff; border: 1px solid #629c29;">
<!---- HEADER (replace IMG/GIF URL with the desired image/gif) ----->
<div class="card w-100 h-100" style="background:url(IMG/GIF URL); background-size:cover; background-position:center; background-repeat:no-repeat;">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 20px; margin-left: 15px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><i>design.</i></div>
</div>
<div class="col w-100 text-right">
<i><a href="#collapseMain" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMain" class="nav-link text-right text-white text-lowercase text-monospace" style="font-weight: bold; font-size: 40px; margin-top: 5px; color: #ffffff; text-shadow: 1px 4px 1px #629c29;"><</a></i>
</div>
</div>
</div>
<div class="p-2">
<!---- CHARACTER REF SHEET, REPLACE IMG URL W THE IMAGE URL (well no shit sherlock) ----->
<div class="card p-2 mt-2 mb-2 w-100" style="background: none; border: 1px solid #88ce43; height: 250px;">
<div class="card w-100 h-100" style="background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<!----
COLOR PALLET
> copy paste the <a class="col".....></div> to make more
> change the HEXCOLORHERE to ur chars colors
------>
<div class="row no-gutters pl-1 pr-1" style="height: 20px;">
<a class="col tooltipster w-100" title="#HEXCOLORHERE" style="#HEXCOLORHERE"></a>
<a class="col tooltipster w-100" title="#HEXCOLORHERE" style="#HEXCOLORHERE"></a>
<a class="col tooltipster w-100" title="#HEXCOLORHERE" style="#HEXCOLORHERE"></a>
<a class="col tooltipster w-100" title="#HEXCOLORHERE" style="#HEXCOLORHERE"></a>
<a class="col tooltipster w-100" title="#HEXCOLORHERE" style="#HEXCOLORHERE"></a>
</div>
</div>
<!---- DESIGN NOTES ---->
<div class="text-lowercase text-monospace" style="font-weight: bold; font-size: 30px;margin-left: 15px; color: #6fb02e;"><i>design notes.</i></div>
<div class="row no-gutters mt-1 pl-3 pr-3 pb-1">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>height</i></div>
</div>
<div class="col w-100 pl-2 text-left">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-1 pl-3 pr-3 pb-1">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>build</i></div>
</div>
<div class="col w-100 pl-2 text-left">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-1 pl-3 pr-3 pb-1">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>eyes</i></div>
</div>
<div class="col w-100 pl-2 text-left">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-1 pl-3 pr-3 pb-1">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>body marks/scars</i></div>
</div>
<div class="col w-100 pl-2 text-left">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-1 pl-3 pr-3 pb-1">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>accesories</i></div>
</div>
<div class="col w-100 pl-2 text-left">
<p style="font-size: 12px; color: #000000;">content</p>
</div>
</div>
<div class="row no-gutters mt-1 pl-3 pr-3 pb-1">
<div class="col-auto">
<div class="pl-1 pr-1" style="background-color: #6fb02e; font-size: 14px; color: #ffffff; height: 18px; font-family: georgia;"><i>any additional design notes</i></div>
</div>
<div class="col-12 w-100 text-left mt-2 mb-3">
<p style="font-size: 10px; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat velit, eu tempus nisl. Quisque condimentum pellentesque venenatis. Phasellus tristique viverra sapien, vitae lobortis mauris ultrices eu.</p>
</div>
</div>
<!----
FOR THE FOOTER :
- its best if you use the same image/gif as the one used for the header
----->
<div class="card w-100" style="background:url(IMG/GIF URL); background-size:cover; background-position:center; background-repeat:no-repeat; height: 30px;"></div>
</div>
</div>
</div>
</div>
</div>
<!---- CREDIT (DO NOT REMOVE) ---->
<div class="mx-auto w-100" style="padding-left: 230px;">
<a style="color: #6fb02e" href="https://toyhou.se/Wren_Song"><i class="fa-solid fa-code"></i></a>
</div>
</div>
</div>
</div>
Recent Images
No images.