<!--
=====================================
woof woof bow wow
thank you for using my code !! :3 i really appreciate it, and if there's something that can be improved, i'll always be ready to listen !
the majority of these images were saved monthss ago, so i might not be able to credit them all :(
and the wings flap weird sometimes...
image credits:
bunny - https://id.pinterest.com/pin/729231364697467385/
wings - https://supplies.ju.mp/#tiny
ferret - https://id.pinterest.com/pin/729231364697524827/
ribbon - somewhere in pinterest
stamps - somewhere in tumblr
kitty pfp - me !!
update, 10/12/2023
i fixed som of the code :')
=====================================
-->
<div style="background-color: #fff; width: 447px; height: 300px; border: 1px solid #FBCDD7; margin: auto; color: #959595; font-size: 12px; font-family: simsun;">
<div class="row no-gutters">
<!-- left area -->
<div style="height: 300px; width: 170px; padding: 10px;">
<!-- icon / image. replace the "url here" in the img tag and replace it with your own link. -->
<div style="border: 1px solid #FBCDD7; width: 149px; height: 149px;
background: url('url here')
no-repeat; background-size: 100%;">
</div>
<!-- name -->
<div style="border: 1px solid #FBCDD7; width: 149px; height: 30px; margin-top: 5px; font-weight: bold; text-align: center; font-size: 20px; color: #FBCDD7;">
<img src="https://supplies.ju.mp/assets/images/tiny1/064f6c03.gif?v=6a50b904">
name
<img src="https://supplies.ju.mp/assets/images/tiny1/7ec3c3fa.gif?v=6a50b904">
</div>
<!-- quote -->
<div style="border: 1px solid #FBCDD7; width: 149px; height: 90px; margin-top: 5px; padding: 5px;">
" insert a quote or anything you want. this doesn't scroll, so keep it short !! "
</div>
</div>
<!-- right area -->
<div style="height: 300px; width: 230px; padding: 10px;">
<div style="background-color: #ffedf1; background-attatchement: fixed; border: 1px solid #FBCDD7; height: 220px; width: 258px; padding: 5px; overflow: auto; overflow-x: hidden; ">
<!-- basic info -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: auto; width: 229px; padding: 5px;">
<span style="text-align: center; font-size: 13px; color: #FBCDD7;">Basic Info</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- info box -->
<div class="row" style="background-color: #fee0e8; margin-bottom: 5px; margin-left: 1px; margin-right: 1px;">
<div class="col">
<b>Full name:</b><br> info <br>
<b>Species:</b><br> info <br>
<b>Birthday:</b><br> 00/00 <br>
</div>
<div class="col">
<b>Gender:</b><br> info <br>
<b>Pronouns:</b><br> info <br>
<b>Ethnicity:</b><br> info <br>
</div>
</div>
<!-- end of info box -->
<!-- basic info (you write) -->
write some basic info about the character here!! you can write as much as you want here, as this entire box will just start to expand.
</div>
<!-- personality -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: auto; width: 229px; padding: 5px; margin-top: 5px;">
<span style="text-align: center; font-size: 13px; color: #FBCDD7;">Personality</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- little bar things idk what theyre called
if you want to add extras, copy and paste one of the pre-made (?) ones.
also be sure to change the "wdith: 50%" in order to change the position of the grey line! -->
<!-- first -->
<div class="float-left"> Introverted </div>
<div class="float-right"> Extroverted </div>
<br>
<div class="mx-auto" style="width: 190px; height: 10px; border: 1px dashed #FBCDD7; margin-bottom: 5px;">
<div class="progress-bar d-flex" style="
width: 50%;
height: 0; background: none; border: none;">
<hr class="my-auto" style="border: none;">
<div class="p-0" style="background: #A4A4A4; width: 5px; height: 9px;"></div>
</div>
</div>
<!-- end -->
<!-- second -->
<div class="float-left"> Optimistic </div>
<div class="float-right"> Pessimistic </div>
<br>
<div class="mx-auto" style="width: 190px; height: 10px; border: 1px dashed #FBCDD7; margin-bottom: 5px;">
<div class="progress-bar d-flex" style="
width: 50%;
height: 0; background: none; border: none;">
<hr class="my-auto" style="border: none;">
<div class="p-0" style="background: #A4A4A4; width: 5px; height: 9px;"></div>
</div>
</div>
<!-- end -->
<!-- third -->
<div class="float-left"> Confident </div>
<div class="float-right"> Insecure </div>
<br>
<div class="mx-auto" style="width: 190px; height: 10px; border: 1px dashed #FBCDD7; margin-bottom: 5px;">
<div class="progress-bar d-flex" style="
width: 50%;
height: 0; background: none; border: none;">
<hr class="my-auto" style="border: none;">
<div class="p-0" style="background: #A4A4A4; width: 5px; height: 9px;"></div>
</div>
</div>
<!-- end -->
<!-- fourth -->
<div class="float-left"> Responsible </div>
<div class="float-right"> Irresponsible </div>
<br>
<div class="mx-auto" style="width: 190px; height: 10px; border: 1px dashed #FBCDD7; margin-bottom: 5px;">
<div class="progress-bar d-flex" style="
width: 50%;
height: 0; background: none; border: none;">
<hr class="my-auto" style="border: none;">
<div class="p-0" style="background: #A4A4A4; width: 5px; height: 9px;"></div>
</div>
</div>
<!-- end -->
<!-- fifth -->
<div class="float-left"> Honest </div>
<div class="float-right"> Deceptive </div>
<br>
<div class="mx-auto" style="width: 190px; height: 10px; border: 1px dashed #FBCDD7; margin-bottom: 5px;">
<div class="progress-bar d-flex" style="
width: 50%;
height: 0; background: none; border: none;">
<hr class="my-auto" style="border: none;">
<div class="p-0" style="background: #A4A4A4; width: 5px; height: 9px;"></div>
</div>
</div>
<!-- end -->
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- likes and dislikes start -->
<div class="row">
<div class="col">
<b>Likes :3</b><br>
<i class="fa-solid fa-heart" style="font-size: 8px; color: #FBCDD7;"></i> like <br>
<i class="fa-solid fa-heart" style="font-size: 8px; color: #FBCDD7;"></i> like <br>
<i class="fa-solid fa-heart" style="font-size: 8px; color: #FBCDD7;"></i> like <br>
<i class="fa-solid fa-heart" style="font-size: 8px; color: #FBCDD7;"></i> like <br>
</div>
<div class="col">
<b>Dislikes :(</b><br>
<i class="fa-solid fa-heart-crack" style="font-size: 8px; color: #FBCDD7;"></i> dislike <br>
<i class="fa-solid fa-heart-crack" style="font-size: 8px; color: #FBCDD7;"></i> dislike <br>
<i class="fa-solid fa-heart-crack" style="font-size: 8px; color: #FBCDD7;"></i> dislike <br>
<i class="fa-solid fa-heart-crack" style="font-size: 8px; color: #FBCDD7;"></i> dislike <br>
</div>
</div>
<!-- likes and dislikes end -->
</div>
<!-- story -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: auto; width: 229px; padding: 5px; margin-top: 5px;">
<span style="text-align: center; font-size: 13px; color: #FBCDD7;">Story</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
write your character's lore here! nya nya nya nya nya nya nya nya nya nya nya nya nya nya nya <br>
<!-- subheading -->
<div style="margin-top: 10px; margin-bottom: 6px; display: box; background-color: #fee0e8; font-weight: bold; font-size: 13px; padding: 2px;"><i class="fa-solid fa-heart"></i> subheading</div>
here's a subheading for chapters or other things. you can do whatever you want with them!
</div>
<!-- appearance -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: auto; width: 229px; padding: 5px; margin-top: 5px;">
<span style="text-align: center; font-size: 13px; color: #FBCDD7;">Appearance</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- color scheme hearts !! these can be used to show the main colors of a character.
you can always add more if needed.-->
<div style="width: auto; height: auto; text-align: center;">
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FEE0E0;"></i>
<i class="fa-solid fa-heart" style="font-size: 15px; color: #D8AFAF;"></i>
<i class="fa-solid fa-heart" style="font-size: 15px; color: #624844;"></i>
<i class="fa-solid fa-heart" style="font-size: 15px; color: #212027;"></i><br>
</div>
<div class="row">
<div class="col">
<!-- design notes -->
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> list appearence notes here!<br>
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> 7'10" (tall)<br>
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> adjective<br>
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> im starting to regret making this so small i cant fit ANYTHING<br>
</div>
<div class="col">
<!-- you can insert a tiny fullbody image, and maybe some clothing that they might wear. replace the "url here" in src="url here" with an image link.-->
<!-- first image -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="url here"
alt="">
</div>
<!-- second image -->
<div class="carousel-item">
<img class="d-block w-100"
src="url here"
alt="">
</div>
<!-- third image -->
<div class="carousel-item">
<img class="d-block w-100"
src="https://media.discordapp.net/attachments/845678133407645696/1182364971825381516/dress.png?ex=65846e30&is=6571f930&hm=8a3b7faa3b2bac54703c605ffe15849274a5c2c4bc35f1c76dddb96c86beb0e3&=&format=webp&quality=lossless&width=362&height=476"
alt="">
</div>
</div>
<!-- image end -->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- short description about their design / appearence -->
<div style="border: 1px solid #FBCDD7; margin-top: 5px; padding: 5px;">
<b>Design</b><br>
you can add a short description about the character's appearence here!
</div>
<!-- important notes -->
<div style="border: 1px solid #FBCDD7; margin-top: 5px; padding: 5px;">
<b>Important notes !!</b><br>
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> important notes here :3 <br>
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> meow <br>
<i class="fa-solid fa-thumbtack" style="font-size: 8px; color: #FBCDD7;"></i> woofwoof <br>
</div>
</div>
<!-- relationships. if you want to add more people, you can always copy and paste person 2 and adjust as needed. -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: auto; width: 229px; padding: 5px; margin-top: 5px;">
<span style="text-align: center; font-size: 13px; color: #FBCDD7;">Relationships</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- person 1 -->
<div class="row" style="height: 100px; margin: 0 auto; margin-top: 10px;">
<div class="col-5" style="padding: 0px;">
<!-- icon. replace the "url here" with your own image.-->
<div style="border: 1px dashed #FBCDD7; border-radius: 50%;
background: url('url here')
no-repeat; background-size: 100%; height: 80px; width: 80px;"></div>
<!-- hearts below icon -->
<div style="margin-top: 5px; text-align: center;">
<!-- if you want to change the hearts, find the "fa-solid" part of it, and change it to "fa-regular" -->
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
</div>
</div>
<!-- words -->
<div class="col" style="padding: 5px;">
<span class="float-left"><a href="character link here" style="font-weight: bold; color: #FBCDD7;">
name
</a></span>
<span class="float-right">
relation
</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- description -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: 70px; padding: 5px; margin-top: 5px; overflow: auto;">
you can write about their relationship here! nya nya
</div>
</div>
</div>
<!-- end of person 1 -->
<!-- person 2 -->
<div class="row" style="height: 100px; margin: 0 auto; margin-top: 30px;">
<div class="col-5" style="padding: 0px;">
<!-- icon -->
<div style="border: 1px dashed #FBCDD7; border-radius: 50%;
background: url('url here')
no-repeat; background-size: 100%; height: 80px; width: 80px;"></div>
<!-- hearts below icon -->
<div style="margin-top: 5px; text-align: center;">
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
<i class="fa-regular fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
</div>
</div>
<!-- words -->
<div class="col" style="padding: 5px;">
<span class="float-left"><a href="character link here" style="font-weight: bold; color: #FBCDD7;">
name
</a></span>
<span class="float-right">
relation
</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- description -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: 70px; padding: 5px; margin-top: 5px; overflow: auto;">
meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
</div>
</div>
</div>
<!-- end of person 2 -->
<!-- person 3 -->
<div class="row" style="height: 100px; margin: 0 auto; margin-top: 30px;">
<div class="col-5" style="padding: 0px;">
<!-- icon -->
<div style="border: 1px dashed #FBCDD7; border-radius: 50%;
background: url('url here')
no-repeat; background-size: 100%; height: 80px; width: 80px;"></div>
<!-- hearts below icon -->
<div style="margin-top: 5px; text-align: center;">
<i class="fa-solid fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
<i class="fa-regular fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
<i class="fa-regular fa-heart" style="font-size: 15px; color: #FBCDD7;"></i>
</div>
</div>
<!-- words -->
<div class="col" style="padding: 5px;">
<span class="float-left"><a href="character link here" style="font-weight: bold; color: #FBCDD7;">
name
</a></span>
<span class="float-right">
relation
</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- description -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: 70px; padding: 5px; margin-top: 5px; overflow: auto;">
woof woof woof woof woof woof woof woof woof woof woof woof
</div>
</div>
</div>
<!-- end of person 3 -->
</div>
<!-- trivia -->
<div style="background-color: #fff; border: 1px solid #FBCDD7; height: auto; width: 229px; padding: 5px; margin-top: 5px;">
<span style="text-align: center; font-size: 13px; color: #FBCDD7;">Trivia !!</span>
<hr style="border-top: 1px dashed #fde7ec; margin-top: 2px; margin-bottom: 6px;">
<!-- start of funfacts ! -->
<i class="fa-solid fa-paperclip" style="font-size: 8px; color: #FBCDD7;"></i> you can write funfacts about your character here!<br>
<i class="fa-solid fa-paperclip" style="font-size: 8px; color: #FBCDD7;"></i> cats have flexible ribcages.<br>
<i class="fa-solid fa-paperclip" style="font-size: 8px; color: #FBCDD7;"></i> rice has sugar ??<br>
<i class="fa-solid fa-paperclip" style="font-size: 8px; color: #FBCDD7;"></i> fact<br>
<br>
</div>
</div>
<!-- stamps -->
<div style="border: 1px solid #FBCDD7; color: #fff; margin-top: 10px; height: 48px; width: 260px; ">
<!-- stamp 1 -->
<img
src="https://cdn.discordapp.com/attachments/795593658370883592/1153486085830225990/paw_stamp_2_by_aestheticstamps_d9p12z8.png?ex=65141e61&is=6512cce1&hm=f5f55ba786d4f174f68173427ba985c0349ce097db62aff5649c011278084e09&"
style="height: 46px;" alt="">
<!-- stamp 2 -->
<img
src="https://64.media.tumblr.com/e1044a273974461dcf6c008509505e0b/509dca664f2eb5e4-4e/s100x200/878ccb8f10828d44336196bfb106a95ed4174b49.pnj"
style="height: 46px;" alt="">
<!-- stamp 3 -->
<img
src="https://cdn.discordapp.com/attachments/795593658370883592/1153486064674164808/paw_stamp_by_aestheticstamps_d9p12z4.png?ex=65141e5c&is=6512ccdc&hm=52f944035b8aaedadddb02e1f0f7e7a9291f278d88a186c08c95595863ad5b64&"
style="height: 46px;" alt="">
<!-- stamps -->
</div>
<!-- decorations :3 -->
<!-- bunny -->
<img src="https://media.discordapp.net/attachments/845678133407645696/1182614912808259674/bunny.png?ex=658556f7&is=6572e1f7&hm=143cd5a0abf1ec35154d42d6f747dc5f851c4ce206c677b16d3269ac1ae5b590&=&format=webp&quality=lossless&width=226&height=321" style="width: 100px; position: absolute; right: 470px; top: 400px;">
<!-- ribbon -->
<img src="https://cdn.discordapp.com/attachments/845678133407645696/1182617879380770846/ribbon.png?ex=658559ba&is=6572e4ba&hm=1059f0f8ad4780f0ddb076302a8c8280fd519150b5dc9ad2503f9993bfdd8c3f&" style="width: 30px; position: absolute; left: 690px; top: 210px;">
<!-- paperclip -->
<i class="fas fa-paperclip" style="font-size: 20px; color: #ccc; position: absolute; left: 665px; top: 487px;"></i>
</div>
</div>
<!-- credits !! please don't remove them :( -->
<!-- code credits -->
<a href="https://toyhou.se/catoonbuttr" title="code by cato :3" style="color: #FBCDD7;"><i class="fa-solid fa-heart"></i> <i class="fa-solid fa-sparkles" style="color: #ccc;"></i></a>
</div>
