<!---=====
vampirish by honee_pie__ / cantajam on toyhouse
this code is thoroughly commented but may not be fully beginner-friendly. youre welcome to ask for assistance!
---===+===---
to change the custom colors please copy a hex code youd like to use and select the snippet color in the key below, press control f, hit the all button, and paste
to change the font awesome icons please use icons from https://fontawesome.com/icons and select the snippet in the key below, press control f, hit the all button, and paste
---===+===---
custom color key:
#e23535 || MAIN ACCENT. USED FOR ABOUT EVERYTHING
#a31010 || SECONDARY ACCENT. USED FOR NAME DECOR AND BORDERS
#ffffff || ACCENT TEXT. USED FOR TEXT INSIDE ACCENTED BOXES (e.g. quote)
font awesome icons key:
fas fa-droplet || ABOUT ICON
fas fa-bat || PERSONALITY ICON
fas fa-coffin-cross || DESIGN NOTES ICON
fas fa-syringe || RELATIONSHIPS ICON
=====--->
<div class="row no-gutters mx-auto" style="max-width: 800px; font-family: calibri">
<!---===== NAME DECOR, DELETABLE!!! SELECT THIS COMMENT TO THE NEXT ONE =====--->
<div class="col-12 text-right text-uppercase font-italic" style="font-family: georgia; font-size: 3em; text-shadow: -3px 3px 0px #a31010">
ridley tepes
</div>
<!---===== NAME DECOR =====--->
<!---===== HEADER =====--->
<div class="col-12 p-2 mb-2" style="background-color: #e23535; color: #e23535; border-top: 5px solid #a31010"><div style="opacity: 0">TEXT TO MAKE PADDING WORK LOL</div></div>
<!---===== HEADER =====--->
<!---===== INFO =====--->
<div class="col-12"><div class="row no-gutters">
<!---===== SUMMARY OF INFORMATION =====--->
<div class="col-md-4 col-sm-12 pr-md-2"><div class="sticky-top" style="top: 12%">
<div class="card rounded-0 bg-faded p-3"><div class="card bg-transparent rounded-0 mb-3 pt-2 pl-2" style="border-top: #e23535 solid 5px; border-left: #e23535 solid 5px; border-right: none; border-bottom: none;"><div class="card rounded-0" style="background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/characters/24133156?1702705544
); background-size: cover; background-position: center; background-repeat: no-repeat; height: 150px"></div></div>
<!-- NAME -->
<div style="border-bottom: #e23535 dotted 2px"><i class="far fa-signature fa-fw" style="color: #e23535"></i><span class="pull-right">
name
</span></div>
<!-- NAME -->
<!-- AGE -->
<div class="mt-2" style="border-bottom: #e23535 dotted 2px"><i class="far fa-address-card fa-fw" style="color: #e23535"></i><span class="pull-right">
age
</span></div>
<!-- AGE -->
<!-- BIRTHDAY -->
<div class="mt-2" style="border-bottom: #e23535 dotted 2px"><i class="far fa-calendar fa-fw" style="color: #e23535"></i><span class="pull-right">
birthday
</span></div>
<!-- BIRTHDAY -->
<!-- GENDER/PRONOUNS -->
<div class="mt-2" style="border-bottom: #e23535 dotted 2px"><i class="far fa-venus-mars fa-fw" style="color: #e23535"></i><span class="pull-right">
pro/nouns
</span></div>
<!-- GENDER/PRONOUNS -->
<!-- RACE/SPECIES -->
<div class="mt-2" style="border-bottom: #e23535 dotted 2px"><i class="far fa-dna fa-fw" style="color: #e23535"></i><span class="pull-right">
species/race
</span></div>
<!-- RACE/SPECIES -->
<!-- MASTERLIST, DELETABLE!! JUST DELETE FROM THIS COMMENT TO THE ONE BELOW -->
<div class="mt-2" style="border-bottom: #e23535 dotted 2px"><i class="far fa-users fa-fw" style="color: #e23535"></i><span class="pull-right"><a href="
MASTERLIST_LINKHERE
" target="_blank" class="text-reset">
masterlist #000
</a></span></div>
<!-- MASTERLIST -->
<!-- HEIGHT -->
<div class="mt-2" style="border-bottom: #e23535 dotted 2px"><i class="far fa-ruler fa-fw" style="color: #e23535"></i><span class="pull-right">
hei'ght"
</span></div>
<!-- HEIGHT -->
<!-- QUOTE -->
<div class="card bg-transparent rounded-0 mt-3 pb-2 pr-2" style="border-right: #e23535 solid 5px; border-bottom: #e23535 solid 5px; border-top: none; border-left: none;"><div class="py-2 px-3" style="background-color: #e23535; font-family: Georgia; color: #ffffff">
<!-- DELETE THIS IF YOU WANT -->
<i class="fad fa-quote-left fa-lg" style="position: absolute; left: 7px; top: 15px; opacity: 0.5"></i>
<!-- DELETE THIS IF YOU WANT -->
put a short quote here! not too much of course.
</div></div>
<!-- QUOTE -->
</div>
</div></div>
<!---===== SUMMARY OF INFORMATION =====--->
<!---===== ABOUT =====--->
<div class="col-md-8 col-sm-12 mt-md-0 mt-2"><div class="card rounded-0 p-3 bg-faded">
<!-- TITLE -->
<div class="row no-gutters align-items-center" style="font-family: georgia; font-size: 1.2em">
<div class="col-auto">
<span style="color: #e23535">A</span>BOUT
</div>
<div class="col px-3"><hr></div>
<div class="col-auto">
<i class="fas fa-droplet fa-fw" style="color: #e23535"></i>
</div>
</div>
<!-- TITLE -->
<div class="mt-2 font-italic">
<p>Write a bit about your OC here. You don't need to include personality since that will be a bit later down below. I recommend adding a paragraph or two so the box doesn't look so short. It's up to you of course. The box will grow and shrink depending on your text.</p>
<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 class="py-2 mt-2"><hr class="my-0" style="border-color: #e23535; border-style: dotted; border-width: 1px"></div>
<!---===== PERSONALITY =====--->
<div class="card bg-faded rounded-0 mt-2 p-3">
<!-- TITLE -->
<div class="row no-gutters align-items-center" style="font-family: georgia; font-size: 1.2em">
<div class="col-auto">
<span style="color: #e23535">P</span>ERSONALITY
</div>
<div class="col px-3"><hr></div>
<div class="col-auto">
<i class="fas fa-bat fa-fw" style="color: #e23535"></i>
</div>
</div>
<!-- TITLE -->
<!-- PERSONALITY SLIDERS, CHANGE WIDTH % (e.g. width: 50% to width: 75%) -->
<div class="row no-gutters mt-2">
<div class="col text-left">
introverted
</div>
<div class="col-md-8 col-5 my-auto">
<div class="progress rounded-0" style="height: 4px; overflow: visible"><div class="progress-bar ml-n1" style="background: none; width:
50%
"></div><i class="fas fa-diamond fa-lg" style="margin-top: 2px; color: #e23535"></i></div>
</div>
<div class="col text-right">
extroverted
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col text-left">
optimistic
</div>
<div class="col-md-8 col-5 my-auto">
<div class="progress rounded-0" style="height: 4px; overflow: visible"><div class="progress-bar ml-n1" style="background: none; width:
50%
"></div><i class="fas fa-diamond fa-lg" style="margin-top: 2px; color: #e23535"></i></div>
</div>
<div class="col text-right">
pessimistic
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col text-left">
calculated
</div>
<div class="col-md-8 col-5 my-auto">
<div class="progress rounded-0" style="height: 4px; overflow: visible"><div class="progress-bar ml-n1" style="background: none; width:
50%
"></div><i class="fas fa-diamond fa-lg" style="margin-top: 2px; color: #e23535"></i></div>
</div>
<div class="col text-right">
impulsive
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col text-left">
expressive
</div>
<div class="col-md-8 col-5 my-auto">
<div class="progress rounded-0" style="height: 4px; overflow: visible"><div class="progress-bar ml-n1" style="background: none; width:
50%
"></div><i class="fas fa-diamond fa-lg" style="margin-top: 2px; color: #e23535"></i></div>
</div>
<div class="col text-right">
flat-toned
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col text-left">
rational
</div>
<div class="col-md-8 col-5 my-auto">
<div class="progress rounded-0" style="height: 4px; overflow: visible"><div class="progress-bar ml-n1" style="background: none; width:
50%
"></div><i class="fas fa-diamond fa-lg" style="margin-top: 2px; color: #e23535"></i></div>
</div>
<div class="col text-right">
emotional
</div>
</div>
<!-- PERSONALITY SLIDERS, CHANGE WIDTH % (e.g. width: 50% to width: 75%) -->
<div class="mt-2 font-italic">
<p><span class="font-weight-bold" style="color: #e23535">
<!-- FLAVOR TEXT, replace with whatever and continue below! -->
Write a bit
</span>
about your OC's personality here. You don't have to get into it, or you can delete the texting section entirely. You can also delete the sliders for pure text if you'd like! The world is your oyster, or... whatever.
</p>
<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>
<!---===== PERSONALITY =====--->
<!---===== DESIGN NOTES =====--->
<div class="row no-gutters mt-2"><div class="col-md-1 col-sm-12 d-flex flex-column hidden-sm-down">
<!-- COLORS, for this one replace the background-color: #HEXCODE with your hexcode! -->
<div class="w-100 mt-0" style="flex: 1; background-color: #dd2c2c"></div>
<div class="w-100 mt-1" style="flex: 1; background-color: #CB2828"></div>
<div class="w-100 mt-1" style="flex: 1; background-color: #B82323"></div>
<div class="w-100 mt-1" style="flex: 1; background-color: #A61F1F"></div>
<div class="w-100 mt-1" style="flex: 1; background-color: #931A1A"></div>
<div class="w-100 mt-1" style="flex: 1; background-color: #811616"></div>
<!-- COLORS, for this one replace the background-color: #HEXCODE with your hexcode! -->
</div><div class="col-md-11 col-sm-12 pl-md-2"><div class="card rounded-0 bg-faded p-3">
<!-- CHARACTER REF IMAGE, put image link over example and change background-position: top to center or bottom as needed -->
<div class="card bg-transparent rounded-0 pt-2 pr-2" style="border-top: #e23535 solid 5px; border-right: #e23535 solid 5px; border-left: none; border-bottom: none;"><div class="card rounded-0" style="background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/74830915_l8WnFfdh1BexIVr.png?1706117586
); height: 20em; background-size: cover; background-position: top; background-repeat: no-repeat">
<!-- CHARACTER REF IMAGE, put image link over example and change background-position: top to center or bottom as needed -->
<!-- CHARACTER REF CREDIT, replace keywords with links and text!-->
<div style="position: absolute; right: 5px; bottom: 0"><a href="
ARTISTLINKHERE
" target="_blank" style="color: rgba(255,255,255,0.85); text-shadow: rgba(0,0,0,0.5) 1px 2px 2px"><i class="fas fa-image fa-lg tooltipster" title="
Art by ARTIST
" data-placement="top"></i></a></div></div></div>
<!-- CHARACTER REF CREDIT, replace keywords with links and text!-->
<!-- TITLE -->
<div class="row no-gutters align-items-center mt-2" style="font-family: georgia; font-size: 1.2em">
<div class="col-auto">
<span style="color: #e23535">D</span>ESIGN NOTES
</div>
<div class="col px-3"><hr></div>
<div class="col-auto">
<i class="fas fa-coffin-cross fa-fw" style="color: #e23535"></i>
</div>
</div>
<!-- TITLE -->
<!-- NOTES LIST -->
<div class="mt-2"><ul class="m-0 fa-ul text-lowercase">
<li><i class="fa-sharp fa-diamond mr-2" style="color: #e23535"></i>
write a design note here
</li>
<li><i class="fa-sharp fa-diamond mr-2 mt-1" style="color: #e23535"></i>
and one here
</li>
<li><i class="fa-sharp fa-diamond mr-2 mt-1" style="color: #e23535"></i>
maybe another?
</li>
<li><i class="fa-sharp fa-diamond mr-2 mt-1" style="color: #e23535"></i>
lorem ipsum dolor sit amet
</li>
<li><i class="fa-sharp fa-diamond mr-2 mt-1" style="color: #e23535"></i>
consectetur adipiscing elit
</li>
<!-- ADD MORE NOTES ABOVE THIS LINE -->
</ul></div>
<!-- NOTES LIST -->
</div></div></div>
<!---===== DESIGN NOTES =====--->
<!---===== MOODBOARD, hidden on mobile! delete the hidden-sm-down if youd like on mobile =====--->
<div class="card mt-2 rounded-0 bg-transparent border-0 hidden-sm-down "><div class="row no-gutters">
<div class="col-md-4 col-sm-12 pr-md-1"><div class="card border-0 rounded-0 bg-transparent" style="background-image: url(
https://i.pinimg.com/236x/5e/a9/d9/5ea9d99282376983c099d9ce910d543d.jpg
); height: 150px; background-size: cover; background-position: center; background-repeat: no-repeat;"></div></div>
<div class="col-md-4 col-sm-12 px-md-1 mt-md-0 mt-2"><div class="card border-0 rounded-0 bg-transparent" style="background-image: url(
https://f4.bcbits.com/img/a1340148313_65
); height: 150px; background-size: cover; background-position: center; background-repeat: no-repeat;"></div></div>
<div class="col-md-4 col-sm-12 pl-md-1 mt-md-0 mt-2"><div class="card border-0 rounded-0 bg-transparent" style="background-image: url(
https://i.pinimg.com/236x/5e/a9/d9/5ea9d99282376983c099d9ce910d543d.jpg
); height: 150px; background-size: cover; background-position: center; background-repeat: no-repeat;"></div></div>
</div></div>
<!---===== MOODBOARD =====--->
<div class="py-2 mt-2"><hr class="my-0" style="border-color: #e23535; border-style: dotted; border-width: 1px"></div>
<!---===== RELATIONSHIPS =====--->
<div class="card mt-2 rounded-0 bg-faded p-3">
<!-- TITLE -->
<div class="row no-gutters align-items-center" style="font-family: georgia; font-size: 1.2em">
<div class="col-auto">
<span style="color: #e23535">R</span>ELATIONSHIPS
</div>
<div class="col px-3"><hr></div>
<div class="col-auto">
<i class="fas fa-syringe fa-fw" style="color: #e23535"></i>
</div>
</div>
<!-- TITLE -->
<!---===== RELATIONSHIP =====--->
<div class="row no-gutters">
<!-- CHARACTER PHOTO -->
<div class="col-md-3 col-sm-12"><div class="card rounded-0 bg-transparent pl-2" style="border-top: none; border-bottom: none; border-right: none; border-left: #e23535 solid 5px"><div class="card rounded-0" style="background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/characters/21451350?1683510180
); background-size: cover; background-position: center; background-repeat: no-repeat; height: 125px;"></div></div></div>
<!-- CHARACTER PHOTO -->
<!-- CHARACTER INFO -->
<div class="col-md-9 col-sm-12 pl-md-2 pl-0 mt-md-0 mt-2"><div class="card rounded-0 bg-transparent text-uppercase" style="border-top: none; border-left: none; border-right: none; border-bottom: #e23535 dotted 2px; font-family: georgia; font-size: 1.1em"><span>
<a href="LINKHERE" target="_blank" class="text-reset">
<span style="color: #e23535">l</span>
azarus
</a>
<!-- HEARTS, change each one as follows:
fas fa-heart : solid heart
far fa-heart-half-stroke : half-full heart
far fa-heart : empty heart
-->
<span class="pull-right" style="color: #e23535">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart-half-stroke"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</span></span>
<!-- HEARTS, change each one as follows:
fas fa-heart : solid heart
far fa-heart-half-stroke : half-full heart
far fa-heart : empty heart
-->
</div>
<div class="mt-2 font-italic">
<p>Write a bit about your OC and this OC's relationship here. It can be as long as you'd like, don't worry about it being too short or too long! 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>
<!-- CHARACTER INFO -->
</div>
<!---===== RELATIONSHIP =====--->
<!---===== RELATIONSHIP =====--->
<div class="row no-gutters mt-2">
<!-- CHARACTER PHOTO -->
<div class="col-md-3 col-sm-12"><div class="card rounded-0 bg-transparent pl-2" style="border-top: none; border-bottom: none; border-right: none; border-left: #e23535 solid 5px"><div class="card rounded-0" style="background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/characters/21451350?1683510180
); background-size: cover; background-position: center; background-repeat: no-repeat; height: 125px;"></div></div></div>
<!-- CHARACTER PHOTO -->
<!-- CHARACTER INFO -->
<div class="col-md-9 col-sm-12 pl-md-2 pl-0 mt-md-0 mt-2"><div class="card rounded-0 bg-transparent text-uppercase" style="border-top: none; border-left: none; border-right: none; border-bottom: #e23535 dotted 2px; font-family: georgia; font-size: 1.1em"><span>
<a href="LINKHERE" target="_blank" class="text-reset">
<span style="color: #e23535">l</span>
azarus
</a>
<!-- HEARTS, change each one as follows:
fas fa-heart : solid heart
far fa-heart-half-stroke : half-full heart
far fa-heart : empty heart
-->
<span class="pull-right" style="color: #e23535">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart-half-stroke"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</span></span>
<!-- HEARTS, change each one as follows:
fas fa-heart : solid heart
far fa-heart-half-stroke : half-full heart
far fa-heart : empty heart
-->
</div>
<div class="mt-2 font-italic">
<p>Write a bit about your OC and this OC's relationship here. It can be as long as you'd like, don't worry about it being too short or too long! 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>
<!-- CHARACTER INFO -->
</div>
<!---===== RELATIONSHIP =====--->
<!-- ADD MORE RELATIONSHIPS ABOVE THIS LINE -->
</div>
<!---===== RELATIONSHIPS =====--->
</div>
<!---===== ABOUT =====--->
</div></div>
<!---===== INFO =====--->
<!---===== FOOTER =====--->
<div class="col-12 p-2 mt-2" style="background-color: #e23535; color: #ffffff; border-bottom: 5px solid #a31010; font-family: Georgia">
<!-- CODE CREDITS DO NOT REMOVE -->
<div class="text-center"><a href="https://toyhou.se/cantajam/" target="_blank" class="text-reset">code by honee_pie__</a></div>
<!-- CODE CREDITS DO NOT REMOVE -->
</div>
<!---===== FOOTER =====--->
</div>
