Don't feel pressured to use this code if you've got something more fitting for your guys, lol. I truly do not care.
True name goes here!
NAME
content
PRONOUNS
content
HEIGHT
content
MAJOR
content
BLESSING
content
OCCUPATION
content
BELIEF
GRADES
STYLE
[STAT]
The Witch-Patron Society (TWPS) is a university student group devoted to serving Osis, The Dark Overlord.¹ They meet in one of the library's conference rooms every Tuesday and Thursday evening. If they can reserve the room, they also try to meet on Saturdays, too.
Anyone interested can join TWPS. This includes those who have been blessed by The Dark Overlord, those who think they may become blessed, and those who wish to learn more about The Dark Overlord. Those of any gender can join (and be witches).
Don't worry about making the text too long. The other side of this code will automatically scale with it.
<!-- make sure you change the last stat to something specific to your character. for the funsies. For the CTRL+F girlies ACCENT COLOR: #8e95b9 SPECIAL ACCENT COLOR: #7a00b1 PROFILE IMAGE LINK (square image or you may have to adjust the icons or something): https://f2.toyhou.se/file/f2-toyhou-se/characters/23778414?1696650058 TOP LEFT ICON: fa-solid fa-leaf BOTTOM RIGHT ICON: fa-solid fa-sparkles --> <div class="container p-1 bg-dark" style="max-width: 850px;"> <div class="p-1" style=" background-color:#8e95b9"> <!-- TRUE/WITCH/PATRON NAME (If you don't want your OC to have one and you don't have anything else you want to put here, you can leave it blank or remove this section entirely --> <!-- // --> <div class="p-2 bg-dark" style="gap: 5px"></div> <div class="p-1 row no-gutters align-items-center" style="background-color: #8e95b9; gap: 5px;"> <div class="col"> <hr class="m-0 bg-dark"> </div> <div class="col-auto"> <h1 class="m-0 text-dark text-center" style="font-family: 'Lucida Handwriting', cursive"> <span class="font-weight-bold" style="color:#7a00b1">True name</span> goes here! </h1> </div> <div class="col"> <hr class="m-0 bg-dark"> </div> </div> <!-- // --> <!-- QUICK INFO --> <div class="p-1 bg-dark"> <div class="row no-gutters align-items-center"> <div class="col-lg-5 text-center mx-auto my-2 text-dark"> <img src="https://placekitten.com/200/200" style="height: 150px; background-color: #8e95b9" class="mb-3 p-1"> <!-- ICONS --> <!-- adjust top: and left: values as needed, or remove the <i> tags entirely if you don't want icons --> <i class="fa-solid fa-star fa-4x text-light" style="position:absolute; top: -20px; left: 70px;"></i> <i class="fa-solid fa-stars fa-3x fa-flip-horizontal" style="position:absolute; top: 110px; left: 210px; color: #7a00b1"></i> <div class="mx-2 p-1 mb-3" style="background-color: #8e95b9;"> <!-- NAME --> <div class="bg-light p-1"> <div class="row no-gutters align-items-center px-1" style="gap: 5px"> <div class="col-auto font-weight-bold"> NAME </div> <div class="col"> <hr class="m-0" style="border-color: #8e95b9"> </div> <div class="col-auto"> content </div> </div> <!-- PRONOUNS --> <div class="row no-gutters align-items-center px-1" style="gap: 5px"> <div class="col-auto font-weight-bold"> PRONOUNS </div> <div class="col"> <hr class="m-0" style="border-color: #8e95b9"> </div> <div class="col-auto"> content </div> </div> <!-- HEIGHT --> <div class="row no-gutters align-items-center px-1" style="gap: 5px"> <div class="col-auto font-weight-bold"> HEIGHT </div> <div class="col"> <hr class="m-0" style="border-color: #8e95b9"> </div> <div class="col-auto"> content </div> </div> <!-- MAJOR --> <div class="row no-gutters align-items-center px-1" style="gap: 5px"> <div class="col-auto font-weight-bold"> MAJOR </div> <div class="col"> <hr class="m-0" style="border-color: #8e95b9"> </div> <div class="col-auto"> content </div> </div> <!-- BLESSING --> <div class="row no-gutters align-items-center px-1" style="gap: 5px"> <div class="col-auto font-weight-bold"> BLESSING </div> <div class="col"> <hr class="m-0" style="border-color: #8e95b9"> </div> <div class="col-auto"> content </div> </div> <!-- OCCUPATION --> <div class="row no-gutters align-items-center px-1" style="gap: 5px"> <div class="col-auto font-weight-bold"> OCCUPATION </div> <div class="col"> <hr class="m-0" style="border-color: #8e95b9"> </div> <div class="col-auto"> content </div> </div> </div> </div> <!-- SLIDERS --> <div class="mx-2 p-1 text-left" style="background-color: #8e95b9;"> <!-- BELIEF --> <div class="bg-light px-2 pt-1 row no-gutters align-items-center"> <div class="col-4 text-center text-truncate font-weight-bold"> BELIEF </div> <div class="col-8"> <div class="card progress rounded-0" style="height: 10px; overflow: visible; border: 1px solid #8e95b9"> <div class="progress-bar" style="background-color: #8e95b9; width: 50% "></div> </div> </div> </div> <!-- GRADES --> <div class="bg-light px-2 row no-gutters align-items-center"> <div class="col-4 text-center text-truncate font-weight-bold"> GRADES </div> <div class="col-8"> <div class="card progress rounded-0" style="height: 10px; overflow: visible; border: 1px solid #8e95b9"> <div class="progress-bar" style="background-color: #8e95b9; width: 50% "></div> </div> </div> </div> <!-- STYLE --> <div class="bg-light px-2 row no-gutters align-items-center"> <div class="col-4 text-center text-truncate font-weight-bold"> STYLE </div> <div class="col-8"> <div class="card progress rounded-0" style="height: 10px; overflow: visible; border: 1px solid #8e95b9"> <div class="progress-bar" style="background-color: #8e95b9; width: 50% "></div> </div> </div> </div> <!-- put some stat unique to your guy here. make it funny --> <div class="bg-light px-2 row no-gutters align-items-center"> <div class="col-4 text-center text-truncate font-weight-bold" style="color: #7a00b1"> [STAT] </div> <div class="col-8"> <div class="card progress rounded-0" style="height: 10px; overflow: visible; border: 1px solid #7a00b1"> <div class="progress-bar" style="background-color: #7a00b1; width: 50% "></div> </div> </div> </div> </div> </div> <div class="col-lg-7 my-2 text-dark"> <div class="p-1 mx-2 h-100" style="background-color: #8e95b9;"> <!-- DESCRIPTION --> <div class="bg-light p-1 h-100"> <p> The Witch-Patron Society (TWPS) is a university student group devoted to serving Osis, The Dark Overlord.¹ They meet in one of the library's conference rooms every Tuesday and Thursday evening. If they can reserve the room, they also try to meet on Saturdays, too. </p> <p> Anyone interested can join TWPS. This includes those who have been blessed by The Dark Overlord, those who think they may become blessed, and those who wish to learn more about The Dark Overlord. Those of any gender can join (and be witches). </p> <p> Don't worry about making the text too long. The other side of this code will automatically scale with it. </p> </div> </div> </div> </div> </div> </div> </div> <div class="text-right mx-auto" style="max-width: 850px"> <a href="https://toyhou.se/charge"><i class="fa-solid fa-bolt"></i></a> </div>