[10] icon
created by:Skysong
Custom ColorsHTMLCharacter
Copy
<!-----------------------------------------------------------------------------------------
I C O N
f2u code by skysong
c o l o r p a l e t t e
color 1 #2c4537 (main text)
color 2 #4d6b5a (icon bg, tag bg, accent text, links)
color 3 #6a8777 (aes color 1, icon color)
color 4 #93ae9f (aes color 2)
color 5 #c2d5cb (aes color 3, stat bar bg)
color 6 #e5f0e9 (tag text, main bg, side icon)
(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/33126983.10-icon
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="my-5 mx-auto flex-column" style="width:250px; height:220px;">
<!-----------------------------------------------------------------------[ TOP AES ROW ]-->
<div class="d-flex" style="flex:1;">
<!--ICON BOX-->
<div style="position:relative; background:#4d6b5a">
<!--this is to keep a square aspect ratio-->
<img src="https://iili.io/3SQk2tV.png" style="min-height:100%;">
<!--ICON CONTAINER-->
<div class="d-flex justify-content-center align-items-center" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<!--ICON-->
<i class="fa fa-star fa-2x" style="color:#93ae9f"></i>
<!--[ class="fa-___" | change it to your font awesome icon ]-->
</div>
</div>
<!--COLORS AREA-->
<div class="mx-1 d-flex" style="flex:1; flex-shrink:0;">
<div class="d-flex" style="flex:3; background:#6a8777"></div>
<div class="mx-1 d-flex" style="flex:2; background:#93ae9f"></div>
<div class="d-flex" style="flex:1; background:#c2d5cb"></div>
</div>
<!--TAGS AREA-->
<div class="flex-column" style="flex:1; font-family:monospace; font-weight:bold; color:#e5f0e9">
<!--TAG 1-->
<div style="flex:1; position:relative; text-wrap:nowrap; overflow:hidden;">
<a class="btn align-items-center py-1 px-2 border-0 rounded-0" style="box-shadow:none; font-weight:bold; background:#4d6b5a; color:#e5f0e9">
# tags !!</a>
<!--HOVER-->
<a class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block" style="z-index:100; opacity:0.2; position:absolute; top:0; box-shadow:none; mix-blend-mode:lighten"></a>
<!--[ you can change the hover color by using different bootstrap buttons! see https://toyhou.se/14213077.buttons-masterpost-html-f2u- for more ]-->
</div>
<!--TAG 1-->
<div class="mt-1" style="flex:1; position:relative; text-wrap:nowrap; overflow:hidden;">
<a class="btn align-items-center py-1 px-2 border-0 rounded-0" style="box-shadow:none; font-weight:bold; background:#4d6b5a; color:#e5f0e9">
# something</a>
<!--HOVER-->
<a class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block" style="z-index:100; opacity:0.2; position:absolute; top:0; box-shadow:none; mix-blend-mode:lighten"></a>
</div>
</div>
</div>
<!-----------------------------------------------------------------------[ CONTENT ROW ]-->
<div class="my-2" style="flex:2; position:relative; overflow-y:scroll; overflow-x:visible; scrollbar-width:none; background:#c2d5cb; color:#2c4537;">
<!-------------------------------------------------------------------------[ I | IMAGE ]-->
<div class="d-flex w-100 h-100">
<!--IMAGE-->
<div class="w-100 h-100" style="background-image:url(https://iili.io/3r2Fnet.jpg); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; position:relative;">
<!--SCROLL TEXT-->
<div class="ml-1" style="position:absolute; bottom:0; font-family:monospace; font-weight:bold; color:#e5f0e9; text-shadow:0 0px 5px #000">
<!--[ colors will probably need to be adjusted with different images ]-->
<i class="fa fa-square-chevron-down"></i>
scroll</div>
</div>
<!--[ background-image:url(EDITHERE) | replace with your image URL ]-->
<!--[ i recommend using a high quality vertical image without a clear focal point ]-->
<!--[ (due to how the fixed background works it'll mess with positioning) ]-->
<!--SIDE AREA-->
<div class="h-100" style="position:sticky; top:0;">
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="background:#4d6b5a; color:#e5f0e9; height:20px; min-width:20px;">
<!--ICON-->
<i class="fas fa-image"></i>
</div>
<!--COLORS-->
<div style="background:#6a8777; height:20px; min-width:20px;"></div>
<div style="background:#93ae9f; height:20px; min-width:20px;"></div>
<!--NUMBER-->
<div class="align-items-center justify-content-center" style="height:32px;">I</div>
</div>
</div> <!--end image-->
<!-----------------------------------------------------------------------[ II | BASICS ]-->
<div class="d-flex">
<!--INFO ROWS-->
<div class="pt-3 px-3 w-100" style="background:#e5f0e9">
<!--ROW | FULL NAME-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="full name" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-id-card fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Something</div>
</div>
<!--ROW | NICKNAMES-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="nickname(s)" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-signature fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Thing</div>
</div>
<!--ROW | SPECIES-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="species" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-user fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Creature</div>
</div>
<!--ROW | AGE-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="age" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-cake fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">0 years</div>
</div>
<!--ROW | BIRTHDAY-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="birthday" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-calendar fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">1 Jan</div>
</div>
<!--ROW | PRONOUNS-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="pronouns" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-comments fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Any/all</div>
</div>
<!--ROW | GENDER-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="gender" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-venus-mars fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Yes</div>
</div>
<!--ROW | ORIENTATION-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="orientation" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-heart fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Ramen</div>
</div>
<!--ROW | OCCUPATION-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="occupation" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-suitcase fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Unemployed</div>
</div>
<!--ROW | STATUS-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="status" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-sparkle fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Alive, dead inside</div>
</div>
<!--ROW | THEME-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="theme" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-music fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">Song - Artist</div>
</div>
<!--ROW | ART FIGHT-->
<div class="d-flex">
<!--LABEL-->
<div class="mr-2 tooltipster" data-placement="right" title="art fight" style="color:#4d6b5a; cursor:help; font-weight:bold;">
<!--ICON-->
<i class="fa fa-pen-paintbrush fa-fw"></i>
</div>
<!--INFO-->
<div class="text-right" style="flex:1">
<a href="https://artfight.net/" style="color:#4d6b5a">
Link</a></div>
</div>
</div> <!--end info rows-->
<!--SIDE AREA-->
<div class="h-100" style="position:sticky; top:0;">
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="background:#4d6b5a; color:#e5f0e9; height:20px; min-width:20px;">
<!--ICON-->
<i class="fas fa-user"></i>
</div>
<!--COLORS-->
<div style="background:#6a8777; height:20px; min-width:20px;"></div>
<div style="background:#93ae9f; height:20px; min-width:20px;"></div>
<!--NUMBER-->
<div class="align-items-center justify-content-center" style="height:32px;">II</div>
</div>
</div> <!--end basics-->
<!------------------------------------------------------------------------[ III | TEXT ]-->
<div class="d-flex">
<div class="pt-3 px-3 w-100" style="background:#e5f0e9">
<!--PARAGRAPH-->
<div style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:2px; background:#4d6b5a"></div>
<!--CONTENT-->
<div class="ml-3 text-justify">
Here's some space for miscellaneous text. 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.
</div>
</div>
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:2px; background:#4d6b5a"></div>
<!--CONTENT-->
<div class="ml-3 text-justify">
You can put as many paragraphs as you like! Just copy and paste this one for more.
</div>
</div>
</div> <!--end content-->
<!--SIDE AREA-->
<div class="h-100" style="position:sticky; top:0;">
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="background:#4d6b5a; color:#e5f0e9; height:20px; min-width:20px;">
<!--ICON-->
<i class="fas fa-bookmark"></i>
</div>
<!--COLORS-->
<div style="background:#6a8777; height:20px; min-width:20px;"></div>
<div style="background:#93ae9f; height:20px; min-width:20px;"></div>
<!--NUMBER-->
<div class="align-items-center justify-content-center" style="height:32px;">III</div>
</div>
</div> <!--end about-->
<!------------------------------------------------------------------------[ IV | STATS ]-->
<div class="d-flex">
<div class="pt-3 px-3 w-100" style="background:#e5f0e9">
<!--STAT BAR | CONFIDENCE-->
<div class="align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-hand-fist fa-fw mr-2 tooltipster" data-placement="right" title="confidence" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
<!--STAT BAR | CREATIVITY-->
<div class="mt-1 align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-palette fa-fw mr-2 tooltipster" data-placement="right" title="creativity" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
<!--STAT BAR | HONESTY-->
<div class="mt-1 align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-book-open-cover fa-fw mr-2 tooltipster" data-placement="right" title="honesty" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
<!--STAT BAR | HUMOR-->
<div class="mt-1 align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-face-grin-squint-tears fa-fw mr-2 tooltipster" data-placement="right" title="humor" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
<!--STAT BAR | INTELLIGENCE-->
<div class="mt-1 align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-brain fa-fw mr-2 tooltipster" data-placement="right" title="intelligence" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
<!--STAT BAR | KINDNESS-->
<div class="mt-1 align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-handshake fa-fw mr-2 tooltipster" data-placement="right" title="kindness" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
<!--STAT BAR | PATIENCE-->
<div class="mt-1 align-items-center">
<!--ICON/TOOLTIP-->
<i class="fa fa-clock mr-2 tooltipster" data-placement="right" title="patience" style="cursor:help; color:#4d6b5a;"></i>
<div class="progress" style="flex:1; height:5px; background:#c2d5cb">
<!--change this part-->
<div class="progress-bar" style="width:50%; background:#4d6b5a;"></div>
<!--[ width:EDITHERE% | replace with the percentage of your choice ]-->
</div>
</div>
</div> <!--end content-->
<!--SIDE AREA-->
<div class="h-100" style="position:sticky; top:0;">
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="background:#4d6b5a; color:#e5f0e9; height:20px; min-width:20px;">
<!--ICON-->
<i class="fas fa-chart-bar"></i>
</div>
<!--COLORS-->
<div style="background:#6a8777; height:20px; min-width:20px;"></div>
<div style="background:#93ae9f; height:20px; min-width:20px;"></div>
<!--NUMBER-->
<div class="align-items-center justify-content-center" style="height:32px;">IV</div>
</div>
</div> <!--end stats-->
<!------------------------------------------------------------------------[ V | TRIVIA ]-->
<div class="d-flex">
<div class="pt-3 px-3 w-100" style="background:#e5f0e9">
<!--LIKES AREA-->
<!--LIKES 1-->
<div>
<!--ICON-->
<i class="fa fa-heart fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
List their likes here!
</div>
<!--LIKES 2-->
<div>
<!--ICON-->
<i class="fa fa-heart fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
Lorem ipsum dolor sit amet.
</div>
<!--LIKES 3-->
<div>
<!--ICON-->
<i class="fa fa-heart fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
Consectetur adipiscing elit. Duis sollicitudin elit.
</div>
<!--DISLIKES AREA-->
<!--DISLIKES 1-->
<div>
<!--ICON-->
<i class="fa fa-heart-crack fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
List their dislikes here!
</div>
<!--DISLIKES 2-->
<div>
<!--ICON-->
<i class="fa fa-heart-crack fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
Sed tellus blandit viverra sed eget odio.
</div>
<!--DISLIKES 3-->
<div>
<!--ICON-->
<i class="fa fa-heart-crack fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
Donec accumsan tempor lacus, et venenatis elit.
</div>
<!--MISC. TRIVIA-->
<!--TRIVIA 1-->
<div>
<!--ICON-->
<i class="fa fa-sparkles fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
List some fun facts here!
</div>
<!--TRIVIA 2-->
<div>
<!--ICON-->
<i class="fa fa-sparkles fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<!--TRIVIA 3-->
<div>
<!--ICON-->
<i class="fa fa-sparkles fa-fw mr-2" style="color:#4d6b5a"></i>
<!--TEXT-->
Duis porta eros et velit blandit dapibus.
</div>
</div> <!--end content-->
<!--SIDE AREA-->
<div class="h-100" style="position:sticky; top:0;">
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="background:#4d6b5a; color:#e5f0e9; height:20px; min-width:20px;">
<!--ICON-->
<i class="fas fa-seal-question"></i>
</div>
<!--COLORS-->
<div style="background:#6a8777; height:20px; min-width:20px;"></div>
<div style="background:#93ae9f; height:20px; min-width:20px;"></div>
<!--NUMBER-->
<div class="align-items-center justify-content-center" style="height:32px;">IV</div>
</div>
</div> <!--end trivia-->
<!---------------------------------------------------------------------------------------->
</div> <!--end content row-->
<!--------------------------------------------------------------------[ BOTTOM AES ROW ]-->
<div class="d-flex" style="flex:1;">
<!--CREDITS AREA-->
<div class="flex-column" style="flex:1; font-family:monospace; font-weight:bold;">
<!--IMAGE CREDITS-->
<div style="flex:1; position:relative; text-wrap:nowrap; overflow:hidden;">
<a class="btn align-items-center py-1 px-2 border-0 rounded-0" style="box-shadow:none; font-weight:bold; background:#4d6b5a; color:#e5f0e9">
<i class="fal fa-image mr-2"></i>
pexels
</a>
<!--LINK/HOVER-->
<a href="https://www.pexels.com/photo/green-leafed-plant-2382325/" class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block" style="z-index:100; opacity:0.2; position:absolute; top:0; box-shadow:none; mix-blend-mode:lighten"></a>
<!--[ you can change the hover color by using different bootstrap buttons! see https://toyhou.se/14213077.buttons-masterpost-html-f2u- for more ]-->
<!--[ href="EDITHERE" | replace with your link ]-->
</div>
<!--CODE CREDITS-->
<div class="mt-1" style="flex:1; position:relative; text-wrap:nowrap; overflow:hidden;">
<a class="btn align-items-center py-1 px-2 border-0 rounded-0" style="box-shadow:none; font-weight:bold; background:#4d6b5a; color:#e5f0e9">
<i class="fal fa-code mr-2"></i>
skysong
</a>
<!--LINK/HOVER-->
<a href="https://toyhou.se/33126983.10-icon" class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block" style="z-index:100; opacity:0.2; position:absolute; top:0; box-shadow:none; mix-blend-mode:lighten"></a>
<!--[ do not edit !! ]-->
</div>
</div>
<!--COLORS AREA-->
<div class="mx-1 d-flex" style="flex:1; flex-shrink:0;">
<div class="d-flex" style="flex:1; background:#c2d5cb"></div>
<div class="mx-1 d-flex" style="flex:2; background:#93ae9f"></div>
<div class="d-flex" style="flex:3; background:#6a8777"></div>
</div>
<!--ICON BOX-->
<div style="position:relative; text-align:right; background:#4d6b5a">
<!--this is to keep a square aspect ratio-->
<img src="https://iili.io/3SQk2tV.png" style="min-height:100%;">
<!--ICON CONTAINER-->
<div class="d-flex justify-content-center align-items-center" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<!--ICON-->
<i class="fa fa-star fa-2x" style="color:#93ae9f"></i>
<!--[ class="fa-___" | change it to your font awesome icon ]-->
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------->
</div> <!--end everything-->