[15] tiny card
created by:skysong
HTMLCustom ColorsCharacter
Copy
<!-----------------------------------------------------------------------------------------
T I N Y C A R D
> default version
f2u code by skysong
c o l o r p a l e t t e
color 1 #5a4eac
color 2 #979fec
color 3 #ffb2a0
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
TH fonts https://toyhou.se/23372355.fonts
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/39285196.15-tiny-card
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
------------------------------------------------------------------------------------------->
<div class="mx-auto" style="max-width:500px;">
<!--TITLE-->
<div style="font-weight:bold; font-size:50px; font-style:italic; letter-spacing:6px; color:#5a4eac;">
<!--MOBILE ICON-->
<i class="fa-sharp fa-thin fa-sparkle hidden-sm-up" style="color:#ffb2a0;"></i>
<!--[ fa-sparkle | replace with your icon - make sure to replace the large icon with the same one as well! ]-->
<span class="ml-sm-0 ml-n2" style="text-shadow:3px 0px #5a4eac">
BLANK</span>.
</div>
<!--BLURB-->
<span style="color:#979fec; font-weight:bold;"><s>Q</s></span>uick blurb here. Lorem ipsum dolor sit amet.
<!--MAIN CONTAINER-->
<div class="d-sm-flex mt-3">
<!--PC LARGE ICON-->
<i class="fa-sharp fa-thin fa-sparkle p-0 hidden-sm-down mr-3 fa-9x" style="color:#ffb2a0;"></i>
<!--[ fa-sparkle | replace with your icon - make sure to replace the mobile icon with the same one as well! ]-->
<!--CONTENT START-->
<div class="py-md-0" style="flex:1; border:1px solid #5a4eac; position:relative; min-height:140px;">
<div class="card rounded-0 p-2" style="position:absolute; top:-5px; bottom:5px; left:-5px; right:5px; border:1px solid #979fec; overflow:scroll; scrollbar-color: #979fec transparent">
<!---------------------------->
<!--INFO ROW | FULL NAME-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
FULL NAME</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>Blank Template</div>
</div>
<!--INFO ROW | NICKNAMES-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
NICKNAME(S)</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>"Wow"</div>
</div>
<!--INFO ROW | SPECIES-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
SPECIES</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>Creature</div>
</div>
<!--INFO ROW | AGE-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
AGE</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>0 years</div>
</div>
<!--INFO ROW | PRONOUNS-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
PRONOUNS</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>Any/all</div>
</div>
<!--INFO ROW | GENDER-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
GENDER</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>Yes</div>
</div>
<!--INFO ROW | ORIENTATION-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
ORIENTATION</div>
<!--LINE-->
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>Ramen</div>
</div>
<!--INFO ROW | OCCUPATION-->
<div class="d-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#979fec">
OCCUPATION</div>
<!--LINE-->
<div class="mx-2 align-items-center" style="flex:1;">
<!--LINE-->
<div style="width:1px; height:50%; background:#5a4eac;"></div>
<div style="height:1px; flex:1; background:#5a4eac;"></div>
<div style="width:1px; height:50%; background:#5a4eac;"></div>
</div>
<!--CONTENT-->
<div>Unemployed</div>
</div>
<!---------------------------->
</div></div> <!--end content-->
</div> <!--end main container-->
<!--BONUS AES DOTS-->
<div class="text-right mt-1" style="cursor:default">
<!--COLORS-->
<i class="fa fa-circle" style="color:#ffb2a0"></i>
<i class="fa fa-circle" style="color:#979fec"></i>
<i class="fa fa-circle" style="color:#5a4eac"></i>
<!--CREDIT-->
<!--[ do not edit ]-->
<a href="https://toyhou.se/39285196.15-tiny-card" class="tooltipster" title="code by sky" data-placement="bottom"><i class="fa fa-clouds-sun" style="color:#979fec"></i></a>
</div>
</div> <!--end code-->Copy
<!-----------------------------------------------------------------------------------------
T I N Y C A R D
> art fight version
f2u code by skysong
c o l o r p a l e t t e
color 1 #5a4eac
color 2 #979fec
color 3 #ffb2a0
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
TH fonts https://toyhou.se/23372355.fonts
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/39285196.15-tiny-card
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
-----------------------------------------------------------------------[ ART FIGHT NOTES ]--
- Art fight will automatically delete code that doesn't display properly onsite- this includes comments (and, ridiculously enough, spaces)
- This code is still mobile friendly on art fight!
- Reminder that due to compatibility limitations, there will be some differences from the original toyhouse version
------------------------------------------------------------------------------------------->
<div class="mx-auto" style="max-width:500px;">
<!--TITLE-->
<div style="font-weight:bold; font-size:50px; font-style:italic; color:#5a4eac;">
<span class="ml-sm-0 ml-n2">
BLANK</span>.
</div>
<!--BLURB-->
<span style="color:#979fec; font-weight:bold;"><s>Q</s></span>uick blurb here. Lorem ipsum dolor sit amet.
<!--MAIN CONTAINER-->
<div class="d-sm-flex mt-3">
<!--ICON-->
<div class="text-center mb-sm-0 mb-3" style="color:#ffb2a0;"><i class="fa-sharp fa-thin fa-sparkle fa-9x mr-sm-3"></i></div>
<!--[ fa-sparkle | replace with your icon! ]-->
<!--CONTENT START-->
<div class="py-md-0" style="width:100%; border:1px solid #5a4eac;">
<div class="card rounded-0 p-2" style="border:1px solid #979fec;margin-left:-5px;margin-right:5px;margin-top:-5px;margin-bottom:5px;">
<!---------------------------->
<!--INFO ROW | FULL NAME-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
FULL NAME</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">Blank Template</div>
</div>
<!--INFO ROW | NICKNAMES-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
NICKNAME(S)</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">"Wow"</div>
</div>
<!--INFO ROW | SPECIES-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
SPECIES</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">Creature</div>
</div>
<!--INFO ROW | AGE-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
AGE</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">0 years</div>
</div>
<!--INFO ROW | PRONOUNS-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
PRONOUNS</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">Any/all</div>
</div>
<!--INFO ROW | GENDER-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
GENDER</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">Yeah</div>
</div>
<!--INFO ROW | ORIENTATION-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
ORIENTATION</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">Ramen</div>
</div>
<!--INFO ROW | OCCUPATION-->
<div class="row mx-0">
<div class="col-auto p-0" style="font-weight:bold;color:#979fec;">
OCCUPATION</div>
<div class="col p-0 mx-2" style="height:1px;margin-top:10px;background:#5a4eac;"></div>
<div class="col-auto p-0">Unemployed</div>
</div>
<!---------------------------->
</div></div> <!--end content-->
</div> <!--end main container-->
<!--BONUS AES DOTS-->
<div class="text-right mt-1">
<!--COLORS-->
<span style="color:#ffb2a0;"><i class="fa fa-circle"></i></span>
<span style="color:#979fec;"><i class="fa fa-circle"></i></span>
<span style="color:#5a4eac;"><i class="fa fa-circle"></i></span>
<!--CREDITS-->
<a href="https://toyhou.se/39285196.15-tiny-card" title="code by sky" style="color:#979fec;"><i class="fa fa-clouds-sun"></i></a>
</div>
</div> <!--end code-->