<!--
「 Rosewater 」
-------------
Info
❥ ctrl+f for quick color changes
❥ if you would like to hide the music box, simply delete the "show" tag in the class="collapse show" element
❥ if you hide the music box, it is recommended to edit the art credit's bottom position to be in the bottom corner instead
❥ to make the bg static, you can delete the "center fixed" after the bg url
❥ the art credit and music box bg both use RGBA codes for its color colors, as well as an opacity modifier. to edit the opacity, simply change the decimal number in the parantheses
❥ please feel free to change the FA icons to fit your oc! keeping the heart and wheat ones are not necessary
❥ insert images in the [IMAGE HERE] tags, and make sure to get rid of the brackets! make sure to NOT delete the (), those are necessary for the url to work!
❥ please do not remove my credit
-------------
Color List
❥ Main Content : #FCEEE9
❥ Text Color : #724C48
❥ Secondary Text Color : #FFFFFF #E1D3CE
❥ Accent Color : #724C48
❥ Border Color : #E1D3CE
❥ Musicbox Color : 245, 179, 176
-->
<!--Initial Container + Background Image -->
<div class="container-fluid p-3 shadow-sm" style="max-width:1060px; background:url([IMAGE HERE]) center fixed; background-size: cover; border-radius: 8px;">
<div class="row no-gutters">
<div class="col-lg-7">
<!----
「 CHARACTER NAME 」
---->
<div align="center" class="m-1 mb-2 p-2" style="background-color:#FCEEE9; font-size: 1.6rem; border-radius: 8px; font-variant: small-caps; color:#724C48;">Name</div>
<!----
「 BASICS 」
---->
<div class="m-1 mb-2 p-3 px-4" style="background-color:#FCEEE9; border-radius: 8px; font-size: 16px; color:#724C48;">
<div class="d-flex">
<span class="w-50">age </span>
<span class="w-50 text-right"> content </span></div>
<hr style="margin-top:3px; margin-bottom: 2px; border-color: #E1D3CE;">
<div class="d-flex">
<span class="w-50">gender </span>
<span class="w-50 text-right"> content </span></div>
<hr style="margin-top:3px; margin-bottom: 2px; border-color: #E1D3CE;">
<div class="d-flex">
<span class="w-50">birthday </span>
<span class="w-50 text-right"> content </span></div>
<hr style="margin-top:3px; margin-bottom: 2px; border-color: #E1D3CE;">
<div class="d-flex">
<span class="w-50">height </span>
<span class="w-50 text-right"> content </span></div>
<hr style="margin-top:3px; margin-bottom: 2px; border-color: #E1D3CE;">
<div class="d-flex">
<span class="w-50"> species </span>
<span class="w-50 text-right"> content </span></div>
</div>
<!----
「 PERSONALITY 」
---->
<div class="m-1 mb-2 p-3" style="background-color:#FCEEE9; border-radius: 8px;">
<div class="d-flex">
<span class="col" style="font-size: 1.3rem; color: #F5B3B0; margin-left: -12px;"> <i class="fal fa-heart"></i></span>
<div class="text-right" style="font-size: 1.3rem; color:#724C48;">personality</div>
</div>
<div><hr class="my-2 pb-1" style="border-color: #E1D3CE;"></div>
<div style="overflow: auto; height: 136px;">
<!----
「 TRAITS 」
---->
<div align="center">
<span class="rounded text-truncate px-1 text-right" style="background: #F5B3B0; border-radius: 10px; font-size:14px; letter-spacing: 1px; color: #FFFFFF;">TRAIT</span>
<span class="rounded text-truncate px-1 text-right" style="background: #F5B3B0; border-radius: 10px; font-size:14px; letter-spacing: 1px; color: #FFFFFF;">TRAIT</span>
<span class="rounded text-truncate px-1 text-right" style="background: #F5B3B0; border-radius: 10px; font-size:14px; letter-spacing: 1px; color: #FFFFFF;">TRAIT</span>
<span class="rounded text-truncate px-1 text-right" style="background: #F5B3B0; border-radius: 10px; font-size:14px; letter-spacing: 1px; color: #FFFFFF;">TRAIT</span>
<span class="rounded text-truncate px-1 text-right" style="background: #F5B3B0; border-radius: 10px; font-size:14px; letter-spacing: 1px; color: #FFFFFF;">TRAIT</span>
<!--- ADD MORE ABOVE THIS LINE --->
</div>
<p style="color:#724C48; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dolor urna, sit amet molestie mi pulvinar vel. Ut scelerisque malesuada vestibulum. Phasellus nec finibus nunc, et posuere eros. Etiam ac tempor risus, eu iaculis ex. Cras gravida gravida facilisis.</p>
</div>
</div>
<!----
「 OVERVIEW 」
---->
<div class="m-1 p-3" style="background-color:#FCEEE9; border-radius: 8px;">
<div class="d-flex">
<div class="text-left" style="font-size: 1.3rem; color:#724C48;">overview</div>
<span class="col text-right" style="font-size: 1.3rem; color: #F5B3B0; margin-right: -12px;"> <i class="fal fa-wheat"></i></span>
</div>
<div><hr class="my-2 pb-1" style="border-color: #E1D3CE;"></div>
<div style="overflow: auto; height: 136px;">
<p style="color:#724C48; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dolor urna, sit amet molestie mi pulvinar vel. Ut scelerisque malesuada vestibulum. Phasellus nec finibus nunc, et posuere eros. Etiam ac tempor risus, eu iaculis ex. Cras gravida gravida facilisis. Maecenas egestas fermentum leo vel lobortis.</p>
</div>
</div>
</div>
<!----
「 IMAGE 」
---->
<div class="col m-1 ml-2">
<div class="p-3" style=" background:url([IMAGE HERE]); background-size: cover; background-position: left; height:100%; border-radius: 8px; border: solid #FFFFFF 3px; position: relative; min-height:600px;">
<!----
「 CREDITS 」
---->
<div align="right"><a data-placement="top" data-toggle="tooltip" href="https://toyhou.se/hearticodes" style="color:#F5B3B0; font-size: 20px; position: absolute; top: 0px; right: 8px;" title="code by hearticodes"><i class="fa fa-heart-circle"></i></a></div>
<div align="right"><a href="[LINK HERE]" style="color: rgba(255, 255, 255, 0.6); font-size: 13px; position: absolute; bottom:45px; right: 4px;">art by [artist]</a></div>
<!----
「 MUSIC BOX 」
---->
<div class="collapse show" id="musicbox" style="min-height:45px;background-color:rgba(245, 179, 176,0.6); position: absolute; bottom: 0px; right: 0; left: 0px; border-radius: 0px 0px 5px 5px;">
<div class="row no-gutters mt-2 mb-0" style="position: absolute; bottom: 10px; right: 0; left: 4px;">
<div class="col-1 p-1">
<a class="p-0 mt-2 btn btn-primary melody-embed " style="border:0; border-color: transparent;position: absolute; top:1px; left:4px;height:1.5rem;width:1.5rem;z-index:2;color:#FFFFFF; background: transparent;">
<!---- SONG ID ----->
<iframe style="opacity:.01;position:absolute;top:0;bottom:0;" class="h-100 w-100" src="
https://www.youtube-nocookie.com/embed/[ID HERE]?controls=0
" frameborder="0"></iframe>
<i class="fas fa-compact-disc fa-fw fa-2x" style="font-size:1.5rem;text-align:center;height:100%;width:100%;"></i>
</a>
</div>
<!---
❥ NOTE: to edit the hr line and title spacing, edit the col-4 and col-7 elements in the two div classes below. smaller number makes things shorter, bigger number makes things wider. use this if you need more space for your song title or would like to make the divider line longer - ex. change it from col-4 to col-6
--->
<div class="col-4 p-1" style="color:#F5B3B0; font-size:1.2rem;">
<hr class="mt-3 p-1" style="margin-bottom: -2px; border-width: 2px; border-top-style: solid;"></div>
<!--- SONG TITLE + ARTIST --->
<div class="col-7 p-1 text-center mt-1" style="color:#FFFFFF; text-shadow: 0px 0px 4px rgba(159, 83, 89, 0.6); font-size:1.21rem; position: absolute; bottom: 0; right: 0; top: -4px;">
SONG NAME · ARTIST
</div>
</div>
</div>
</div>
</div>
</div>
</div>