[12] fun fact!
created by:Skysong
Custom ColorsMixed ColorsHTMLMiscellaneous
Copy
<!-----------------------------------------------------------------------------------------
F U N F A C T !
> default version / custom accent
f2u code by skysong
c o l o r p a l e t t e
main bg bg-faded
main text default, unspecified
main accent #848bb2 (borders, icon bg, linked text)
aes color 1 #b0b7da
aes color 2 #d6dbf4
aes color 3 #ecefff (icon color)
(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/33690294.12-fun-fact
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:450px;">
<!-------------------------------------------------------------------------- [ TOP ROW ] -->
<div class="d-flex">
<!--BLURB-->
<div class="bg-faded mr-3 px-2 py-1" style="max-height:180px; overflow:scroll; flex:1; z-index:2; margin-bottom:-40px; border-radius:5px; border:1px solid #848bb2; border-top:30px solid #848bb2">
A short blurb, quote, or something else(?) This box will scroll, but looks best if it doesn't.
</div>
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="width:150px; height:150px; border-radius:5px; background:#848bb2; color:#ecefff">
<!--ICON-->
<i class="fa fa-sparkle fa-6x"></i>
<!--[ fa-___ | replace with the icon of your choice ]-->
</div>
</div> <!--end top row-->
<!----------------------------------------------------------------------- [ BOTTOM ROW ] -->
<div class="d-flex mt-3">
<!--AES COLORS-->
<div class="mr-3 flex-column" style="flex:1; margin-top:30px; border-radius:5px; overflow:hidden;">
<!--[ background:#___ | replace with your colors ]-->
<!--COLOR 1-->
<div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#ecefff"></div>
<!--COLOR 2-->
<div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#d6dbf4"></div>
<!--COLOR 3-->
<div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#b0b7da"></div>
<!--MAIN COLOR-->
<div style="flex:1; background:#848bb2"></div>
</div>
<!--CONTENT-->
<div class="bg-faded p-2" style="flex:6; min-height:400px; border-radius:5px; border:1px solid #848bb2; border-top:50px solid #848bb2">
<ul class="pl-4">
<li>List your trivia! Or headcanons! Or whatever!</li>
<li>Really, they can take any form you like, it's just bullet points by default.</li>
<li>This box will expand to fit your content</li>
<li>You can also have subitems! (the bullet styling is automatic)</li>
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus</li>
<li>You can also change the style of the bullet! More info <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" style="color:#848bb2">here</a>.</li>
<li>Remember to close all the tags</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
</div> <!--end bottom row-->
<!--------------------------------------------------------------------- [ CODE CREDITS ] -->
<div class="mt-2 text-center">
<!--[ do not edit!! ]-->
<a class="text-muted" href="https://toyhou.se">
<i class="text-muted fa fa-clouds-sun tooltipster" data-placement="right" title="code by sky"></i>
</a></div>
<!----------------------------------------------------------------------------------------->
</div> <!--end everything-->Copy
<!-----------------------------------------------------------------------------------------
F U N F A C T !
> default version / custom colors
f2u code by skysong
c o l o r p a l e t t e
main text #484e72
main accent #848bb2 (borders, icon bg, linked text)
aes color 1 #b0b7da
aes color 2 #d6dbf4
aes color 3 #ecefff (main bg, icon color)
(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/33690294.12-fun-fact
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:450px; color:#484e72">
<!-------------------------------------------------------------------------- [ TOP ROW ] -->
<div class="d-flex">
<!--BLURB-->
<div class="mr-3 px-2 py-1" style="max-height:180px; overflow:scroll; flex:1; z-index:2; margin-bottom:-40px; border-radius:5px; border:1px solid #848bb2; border-top:30px solid #848bb2; background:#ecefff">
A short blurb, quote, or something else(?) This box will scroll, but looks best if it doesn't.
</div>
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="width:150px; height:150px; border-radius:5px; background:#848bb2; color:#ecefff">
<!--ICON-->
<i class="fa fa-sparkle fa-6x"></i>
<!--[ fa-___ | replace with the icon of your choice ]-->
</div>
</div> <!--end top row-->
<!----------------------------------------------------------------------- [ BOTTOM ROW ] -->
<div class="d-flex mt-3">
<!--AES COLORS-->
<div class="mr-3 flex-column" style="flex:1; margin-top:30px; border-radius:5px; overflow:hidden;">
<!--[ background:#___ | replace with your colors ]-->
<!--COLOR 1-->
<div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#ecefff"></div>
<!--COLOR 2-->
<div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#d6dbf4"></div>
<!--COLOR 3-->
<div class="mb-2"><img src="https://iili.io/3SQk2tV.png" style="min-width:100%; background:#b0b7da"></div>
<!--MAIN COLOR-->
<div style="flex:1; background:#848bb2"></div>
</div>
<!--CONTENT-->
<div class="p-2" style="flex:6; min-height:400px; border-radius:5px; border:1px solid #848bb2; border-top:50px solid #848bb2; background:#ecefff">
<ul class="pl-4">
<li>List your trivia! Or headcanons! Or whatever!</li>
<li>Really, they can take any form you like, it's just bullet points by default.</li>
<li>This box will expand to fit your content</li>
<li>You can also have subitems! (the bullet styling is automatic)</li>
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus</li>
<li>You can also change the style of the bullet! More info <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" style="color:#848bb2">here</a>.</li>
<li>Remember to close all the tags</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
</div> <!--end bottom row-->
<!--------------------------------------------------------------------- [ CODE CREDITS ] -->
<div class="mt-2 text-center">
<!--[ do not edit!! ]-->
<a class="text-muted" href="https://toyhou.se">
<i class="text-muted fa fa-clouds-sun tooltipster" data-placement="right" title="code by sky"></i>
</a></div>
<!----------------------------------------------------------------------------------------->
</div> <!--end everything-->Copy
<!-----------------------------------------------------------------------------------------
F U N F A C T !
> tabbed version / custom accent
f2u code by skysong
c o l o r p a l e t t e
main bg bg-faded
main text default, unspecified
main accent #848bb2 (borders, icon bg, linked text)
aes color 1 #b0b7da
aes color 2 #d6dbf4
aes color 3 #ecefff (main icon color)
tab icon color #484e72
(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/33690294.12-fun-fact
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 id="ta" class="mx-auto tab-pane fade show active" role="tabpanel" style="max-width:450px;">
<!-------------------------------------------------------------------------- [ TOP ROW ] -->
<div class="d-flex">
<!--BLURB-->
<div class="bg-faded mr-3 px-2 py-1" style="max-height:180px; overflow:scroll; flex:1; z-index:2; margin-bottom:-40px; border-radius:5px; border:1px solid #848bb2; border-top:30px solid #848bb2">
A short blurb, quote, or something else(?) This box will scroll, but looks best if it doesn't.
</div>
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="width:150px; height:150px; border-radius:5px; background:#848bb2; color:#ecefff">
<!--ICON-->
<i class="fa fa-sparkle fa-6x"></i>
<!--[ fa-___ | replace with the icon of your choice ]-->
</div>
</div> <!--end top row-->
<!----------------------------------------------------------------------- [ BOTTOM ROW ] -->
<div class="d-flex mt-3">
<!--TAB BUTTONS-->
<div class="flex-column mr-3" style="flex:1; margin-top:30px; border-radius:5px; overflow:hidden;">
<ul class="nav flex-column">
<!--[ background:#___ | replace with your colors ]-->
<!--[ fa-___ | replace with the icon of your choice ]-->
<!--[ if you change the tab ID remember to change it here too! ]-->
<!--TAB 1-->
<li class="nav-item mb-2 align-items-center justify-content-center" style="position:relative; background:#ecefff">
<img src="https://iili.io/3SQk2tV.png" style="min-width:100%; margin-left:-102%;">
<!--LINK-->
<a data-target="#tab1" class="nav-link active" data-toggle="tab" style="cursor:pointer">
<!--LABEL ICON-->
<i class="fal fa-star fa-2x" style="color:#484e72;"></i></a>
</li>
<!--TAB 2-->
<li class="nav-item mb-2 align-items-center justify-content-center" style="position:relative; background:#d6dbf4">
<img src="https://iili.io/3SQk2tV.png" style="min-width:100%; margin-left:-102%;">
<!--LINK-->
<a data-target="#tab2" class="nav-link" data-toggle="tab" style="position:absolute; cursor:pointer">
<!--LABEL ICON-->
<i class="fal fa-star fa-2x" style="color:#484e72"></i></a>
</li>
<!--TAB 3-->
<li class="nav-item mb-2 align-items-center justify-content-center" style="position:relative; background:#b0b7da">
<img src="https://iili.io/3SQk2tV.png" style="min-width:100%; margin-left:-102%;">
<!--LINK-->
<a data-target="#tab3" class="nav-link" data-toggle="tab" style="position:absolute; cursor:pointer">
<!--LABEL ICON-->
<i class="fal fa-star fa-2x" style="color:#484e72"></i></a>
</li>
</ul>
<!--MAIN COLOR-->
<div style="flex:1; background:#848bb2"></div>
</div>
<!--CONTENT-->
<div class="bg-faded p-2" style="flex:6; min-height:400px; border-radius:5px; border:1px solid #848bb2; border-top:50px solid #848bb2">
<div class="tab-content">
<!--[ if you change the tab ID remember to change it in the buttons too! ]-->
<!--TAB 1-->
<div id="tab1" class="tab-pane fade show active" role="tabpanel">
<ul class="pl-4">
<li>And here's a tabbed version!</li>
<li>In case you want to organize your info better. Or if you want to use this for multiple OC's or AU's?</li>
<li>Same info from the untabbed version also applies here.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
<!--TAB 2-->
<div id="tab2" class="tab-pane fade" role="tabpanel">
<ul class="pl-4">
<li>List your trivia! Or headcanons! Or whatever!</li>
<li>Really, they can take any form you like, it's just bullet points by default.</li>
<li>This box will expand to fit your content</li>
<li>You can also have subitems! (the bullet styling is automatic)</li>
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus</li>
<li>You can also change the style of the bullet! More info <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" style="color:#848bb2">here</a>.</li>
<li>Remember to close all the tags</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
<!--TAB 3-->
<div id="tab3" class="tab-pane fade" role="tabpanel">
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet.</li>
<li>consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros.</li>
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
</div></div>
</div> <!--end bottom row-->
<!--------------------------------------------------------------------- [ CODE CREDITS ] -->
<div class="mt-2 text-center">
<!--[ do not edit!! ]-->
<a class="text-muted" href="https://toyhou.se">
<i class="text-muted fa fa-clouds-sun tooltipster" data-placement="right" title="code by sky"></i>
</a></div>
<!----------------------------------------------------------------------------------------->
</div> <!--end everything-->Copy
<!-----------------------------------------------------------------------------------------
F U N F A C T !
> tabbed version / custom colored
f2u code by skysong
c o l o r p a l e t t e
main bg #ecefff (also aes color 3, main icon color)
main text #484e72 (also tab icon color)
main accent #848bb2 (borders, icon bg, linked text)
aes color 1 #b0b7da
aes color 2 #d6dbf4
(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/33690294.12-fun-fact
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:450px; color:#484e72">
<!-------------------------------------------------------------------------- [ TOP ROW ] -->
<div class="d-flex">
<!--BLURB-->
<div class="mr-3 px-2 py-1" style="max-height:180px; overflow:scroll; flex:1; z-index:2; margin-bottom:-40px; border-radius:5px; border:1px solid #848bb2; border-top:30px solid #848bb2; background:#ecefff">
A short blurb, quote, or something else(?) This box will scroll, but looks best if it doesn't.
</div>
<!--ICON BOX-->
<div class="align-items-center justify-content-center" style="width:150px; height:150px; border-radius:5px; background:#848bb2; color:#ecefff">
<!--ICON-->
<i class="fa fa-sparkle fa-6x"></i>
<!--[ fa-___ | replace with the icon of your choice ]-->
</div>
</div> <!--end top row-->
<!----------------------------------------------------------------------- [ BOTTOM ROW ] -->
<div class="d-flex mt-3">
<!--TAB BUTTONS-->
<div class="flex-column mr-3" style="flex:1; margin-top:30px; border-radius:5px; overflow:hidden;">
<ul class="nav flex-column">
<!--[ background:#___ | replace with your colors ]-->
<!--[ fa-___ | replace with the icon of your choice ]-->
<!--[ if you change the tab ID remember to change it here too! ]-->
<!--TAB 1-->
<li class="nav-item mb-2 align-items-center justify-content-center" style="position:relative; background:#ecefff">
<img src="https://iili.io/3SQk2tV.png" style="min-width:100%; margin-left:-102%;">
<!--LINK-->
<a data-target="#tab1" class="nav-link active" data-toggle="tab" style="cursor:pointer">
<!--LABEL ICON-->
<i class="fal fa-star fa-2x" style="color:#484e72;"></i></a>
</li>
<!--TAB 2-->
<li class="nav-item mb-2 align-items-center justify-content-center" style="position:relative; background:#d6dbf4">
<img src="https://iili.io/3SQk2tV.png" style="min-width:100%; margin-left:-102%;">
<!--LINK-->
<a data-target="#tab2" class="nav-link" data-toggle="tab" style="position:absolute; cursor:pointer">
<!--LABEL ICON-->
<i class="fal fa-star fa-2x" style="color:#484e72"></i></a>
</li>
<!--TAB 3-->
<li class="nav-item mb-2 align-items-center justify-content-center" style="position:relative; background:#b0b7da">
<img src="https://iili.io/3SQk2tV.png" style="min-width:100%; margin-left:-102%;">
<!--LINK-->
<a data-target="#tab3" class="nav-link" data-toggle="tab" style="position:absolute; cursor:pointer">
<!--LABEL ICON-->
<i class="fal fa-star fa-2x" style="color:#484e72"></i></a>
</li>
</ul>
<!--MAIN COLOR-->
<div style="flex:1; background:#848bb2"></div>
</div>
<!--CONTENT-->
<div class="p-2" style="flex:6; min-height:400px; border-radius:5px; border:1px solid #848bb2; border-top:50px solid #848bb2; background:#ecefff">
<div class="tab-content">
<!--[ if you change the tab ID remember to change it in the buttons too! ]-->
<!--TAB 1-->
<div id="tab1" class="tab-pane fade show active" role="tabpanel">
<ul class="pl-4">
<li>And here's a tabbed version!</li>
<li>In case you want to organize your info better. Or if you want to use this for multiple OC's or AU's?</li>
<li>Same info from the untabbed version also applies here.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
<!--TAB 2-->
<div id="tab2" class="tab-pane fade" role="tabpanel">
<ul class="pl-4">
<li>List your trivia! Or headcanons! Or whatever!</li>
<li>Really, they can take any form you like, it's just bullet points by default.</li>
<li>This box will expand to fit your content</li>
<li>You can also have subitems! (the bullet styling is automatic)</li>
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus</li>
<li>You can also change the style of the bullet! More info <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" style="color:#848bb2">here</a>.</li>
<li>Remember to close all the tags</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
<!--TAB 3-->
<div id="tab3" class="tab-pane fade" role="tabpanel">
<ul class="pl-4">
<li>Lorem ipsum dolor sit amet.</li>
<li>consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros.</li>
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
</div></div>
</div> <!--end bottom row-->
<!--------------------------------------------------------------------- [ CODE CREDITS ] -->
<div class="mt-2 text-center">
<!--[ do not edit!! ]-->
<a class="text-muted" href="https://toyhou.se">
<i class="text-muted fa fa-clouds-sun tooltipster" data-placement="right" title="code by sky"></i>
</a></div>
<!----------------------------------------------------------------------------------------->
</div> <!--end everything-->