[09] simplified
created by:Skysong
Mixed ColorsHTMLCharacter
Copy
<!-----------------------------------------------------------------------------------------
S I M P L I F I E D
f2u code by skysong
c o l o r p a l e t t e
background bg-faded
text default, unspecified
button hover btn-outline-primary
accent color #378f7b
(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/32831649.09-simplified
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 my-5" style="max-width:700px; padding-right:3px">
<!-----------------------------------------------------------------------[ HEADER AREA ]-->
<div class="d-flex mb-3" style="padding-bottom:10px;">
<!--QUOTE AREA-->
<div class="bg-faded card rounded-0 p-4" style="flex:1; margin-right:-10px; margin-bottom:-10px; margin-top:10px; box-shadow:3px 3px #378f7b">
<div class="d-flex w-100 h-100">
<!--LEFT QUOTE-->
<div><i class="fa fa-quote-left fa-2x" style="opacity:0.5; color:#378f7b;"></i></div>
<!--WORDS-->
<div class="mx-3 align-items-center justify-content-center text-justify" style="flex:1;">
A nice quote here. Lorem ipsum dolor sit amet.
</div>
<!--LEFT QUOTE-->
<div class="align-items-end"><i class="fa fa-quote-right fa-2x" style="opacity:0.5; color:#378f7b;"></i></div>
</div>
</div>
<!--ICON-->
<div class="bg-faded" style="z-index:1; width:35%; height:0; padding-bottom:35%; background-image:url(https://placehold.co/400/fff/378f7b?text=placeholder); background-size:cover; background-repeat:no-repeat; background-position:center; box-shadow:3px 3px #378f7b"></div>
<!--[ background-image:url(EDITHERE) | edit with your image url ]-->
</div> <!--end header area-->
<!-----------------------------------------------------------------------[ BASICS AREA ]-->
<div class="bg-faded card rounded-0 mb-3 p-4" style="box-shadow:3px 3px #378f7b">
<!--TITLE AREA-->
<div class="d-flex mb-2">
<!--TITLE-->
<div>
<h1 class="m-0" style="font-family:monospace">basic info</h1>
</div>
<!--LINE-->
<div class="my-auto mx-3" style="flex:1; height:3px; background:#378f7b"></div>
<!--ICON-->
<div>
<h1 class="m-0"><i class="fa fa-star fa-fw" style="color:#378f7b;"></i></h1>
<!--[ fa-star | replace with your icon name ]-->
</div>
</div>
<!--CONTENT CONTAINER-->
<div style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<div class="ml-3">
<!--INFO ROW | FULL NAME-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-id-card fa-fw mr-2" style="opacity:0.5"></i>
FULL NAME
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">Something</div></div>
</div>
<!--INFO ROW | NICKNAMES-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-signature fa-fw mr-2" style="opacity:0.5"></i>
NICKNAME(S)
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">Thing</div></div>
</div>
<!--INFO ROW | SPECIES-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-user fa-fw mr-2" style="opacity:0.5"></i>
SPECIES
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">Creature</div></div>
</div>
<!--INFO ROW | AGE-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-cake fa-fw mr-2" style="opacity:0.5"></i>
AGE
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">0 years</div></div>
</div>
<!--INFO ROW | PRONOUNS-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-comments fa-fw mr-2" style="opacity:0.5"></i>
PRONOUNS
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">Any/All</div></div>
</div>
<!--INFO ROW | GENDER-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-venus-mars fa-fw mr-2" style="opacity:0.5"></i>
GENDER
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">Yes</div></div>
</div>
<!--INFO ROW | ORIENTATION-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-heart fa-fw mr-2" style="opacity:0.5"></i>
ORIENTATION
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO-->
<div class="ml-3 p-0">Ramen</div></div>
</div>
<!--INFO ROW | THEME-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-music fa-fw mr-2" style="opacity:0.5"></i>
THEME
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO W/TOOLTIP-->
<div class="ml-3 p-0">
<span style="border-bottom:1px dotted; cursor:help" data-toggle="tooltip" title="Artist" data-placement="left">
Song</span></div></div>
</div>
<!--INFO ROW | ART FIGHT-->
<div class="row m-0">
<!--LABEL-->
<div class="col-auto p-0 mr-3" style="font-weight:bold">
<!--ICON-->
<i class="fal fa-pen-paintbrush fa-fw mr-2" style="opacity:0.5"></i>
ART FIGHT
</div>
<!--LINE-->
<div class="col-sm d-flex p-0 align-items-center">
<div class="w-100" style="flex:1; height:1px; opacity:0.5; background:#378f7b"></div>
<!--INFO W/LINK-->
<div class="ml-3 p-0"><a href="https://artfight.net/" style="color:#378f7b">
Link</a></div></div>
</div>
</div> <!--end rows-->
</div> <!--end content area-->
</div> <!--end basics area-->
<!-------------------------------------------------------------------------[ INFO AREA ]-->
<div class="d-flex" style="min-height:300px;">
<!--------------------------------------------------------------[ TAB BUTTONS + CREDIT ]-->
<div class="bg-faded card rounded-0" style="position:sticky; top:0; z-index:1; width:60px; max-height:300px; box-shadow:3px 3px #378f7b;">
<ul class="nav flex-column h-100">
<!--ABOUT BUTTON-->
<li class="nav-item" style="flex:1; position:relative;">
<a class="nav-link btn justify-content-center align-items-center h-100 border-0 rounded-0" style="font-size:20px; box-shadow:none;">
<!--ICON-->
<i class="fa fa-user fa-fw"></i>
</a>
<!--LINK + HOVER-->
<a href="#about" data-toggle="tab" class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block active" style="z-index:100; opacity:0.1; position:absolute; top:0; box-shadow:none;"></a>
</li>
<!--HISTORY BUTTON-->
<li class="nav-item" style="flex:1; position:relative;">
<a class="nav-link btn justify-content-center align-items-center h-100 border-0 rounded-0" style="font-size:20px; box-shadow:none;">
<!--ICON-->
<i class="fa fa-book fa-fw"></i>
</a>
<!--LINK + HOVER-->
<a href="#history" data-toggle="tab" class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block" style="z-index:100; opacity:0.1; position:absolute; top:0; box-shadow:none;"> </a>
</li>
<!--CODE BUTTON-->
<li class="nav-item" style="flex:1; position:relative;">
<a class="nav-link btn justify-content-center align-items-center h-100 border-0 rounded-0" style="font-size:20px; box-shadow:none;">
<!--ICON-->
<i class="fa fa-clouds-sun fa-fw"></i>
</a>
<!--LINK + HOVER-->
<a href="https://toyhou.se/32831649.09-simplified" class="h-100 w-100 btn btn-outline-primary rounded-0 outline-0 border-0 d-block tooltipster" title="code by skysong" data-placement="right" style="z-index:100; opacity:0.1; position:absolute; top:0; box-shadow:none;"> </a>
</li>
</ul></div> <!--end tab buttons-->
<!--------------------------------------------------------------------[ INFO CONTAINER ]-->
<div class="bg-faded card rounded-0" style="flex:1; margin-top:10px; margin-left:-10px; margin-bottom:-10px; box-shadow:3px 3px #378f7b">
<div class="tab-content p-3 ml-3">
<!-------------------------------------------------------------------------[ ABOUT TAB ]-->
<div id="about" class="tab-pane fade show active" role="tabpanel">
<!--TITLE AREA-->
<div class="d-flex mb-2">
<!--TITLE-->
<div>
<h1 class="m-0" style="font-family:monospace">about</h1>
</div>
<!--LINE-->
<div class="my-auto mx-3" style="flex:1; height:3px; background:#378f7b"></div>
<!--ICON-->
<div>
<h1 class="m-0"><i class="fa fa-bookmark fa-fw" style="color:#378f7b;"></i></h1>
</div>
</div>
<!--PARAGRAPH-->
<div style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
Write about your character here! This box will expand to fit your content.
</div>
</div> <!--end paragraph-->
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
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> <!--end paragraph-->
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
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> <!--end paragraph-->
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
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> <!--end paragraph-->
</div> <!--end about tab-->
<!-----------------------------------------------------------------------[ HISTORY TAB ]-->
<div id="history" class="tab-pane fade" role="tabpanel">
<!--TITLE AREA-->
<div class="d-flex mb-2">
<!--TITLE-->
<div>
<h1 class="m-0" style="font-family:monospace">history</h1>
</div>
<!--LINE-->
<div class="my-auto mx-3" style="flex:1; height:3px; background:#378f7b"></div>
<!--ICON-->
<div>
<h1 class="m-0"><i class="fa fa-bookmark fa-fw" style="color:#378f7b;"></i></h1>
</div>
</div>
<!--PARAGRAPH-->
<div style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
Write about your character's backstory here!
</div>
</div> <!--end paragraph-->
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
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. 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> <!--end paragraph-->
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
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> <!--end paragraph-->
<!--PARAGRAPH-->
<div class="mt-2" style="position:relative;">
<!--LINE-->
<div class="h-100" style="position:absolute; width:3px; background:#378f7b"></div>
<!--CONTENT-->
<div class="ml-3">
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> <!--end paragraph-->
</div> <!--end history tab-->
<!---------------------------------------------------------------------------------------->
</div> <!--end tab content-->
</div> <!--end info container-->
</div> <!--end info area-->
</div> <!--end everything-->