[09] simplified
created by:skysong
Mixed ColorsHTMLCharacter
Copy
<!------------------------------------------------------------------------------------
[ SIMPLIFIED ] // default version
f2u code by skysong
[ color palette ]
main bg bg-faded
accent color #378f7b
[ resources ]
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
------------------------------------------------------------------------------------->
<div class="mx-auto my-5" style="max-width:700px; padding-right:3px">
<!------------------------------------------------------------------------------------
HEADER AREA
-------------------------------------------------------------------------------------->
<div class="row mx-0 mb-4">
<!--QUOTE AREA-->
<div class=" col-sm-8 bg-faded card p-4 order-sm-0 order-1" style="box-shadow:3px 3px #378f7b;">
<div class="d-flex w-100 h-100">
<!--LEFT QUOTE-->
<div><i class="fa-sharp fa-light fa-quote-left fa-2x" style="opacity:0.5; color:#378f7b;"></i></div>
<!--WORDS-->
<div class="mx-3 align-items-center justify-content-center" style="flex:1;"><i>
Quote here. Lorem ipsum dolor sit amet.
</i></div>
</div>
</div>
<!--ART-->
<div class="col-sm col-9 mt-n3 ml-sm-n3 ml-auto mr-auto p-0 text-sm-right text-center mb-sm-0 mb-3" style="color:#378f7b">
<div class="card bg-faded mb-2" style="box-shadow:3px 3px #378f7b; overflow:hidden;
background-image:url(https://placehold.co/400/fff/378f7b?text=placeholder);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
"> <!--[ background-image:url(EDITHERE) | edit with your image url ]-->
<!--SPACER-->
<img src="https://iili.io/Cayw31R.png" class="w-100">
</div>
<!--ICONS-->
<i class="fa-sharp fa-circle"></i>
<i class="fa-sharp fa-circle"></i>
<!--ART CREDIT-->
<a href="LINK" class="text-reset" data-toggle="tooltip" data-placement="left" title="art by artist">
<!--[ href="EDITHERE" | replace with your link ]-->
<i class="fa-sharp fa-palette"></i>
</a>
</div>
</div> <!--end header area-->
<!------------------------------------------------------------------------------------
BASICS AREA
-------------------------------------------------------------------------------------->
<div class="bg-faded card mb-3" style="box-shadow:3px 3px #378f7b; overflow:hidden;">
<!--TITLE AREA-->
<div class="d-flex p-2 px-3" style="background:#378f7b">
<!--TITLE-->
<div style="flex:1">
<h1 class="m-0 font-weight-bold" style="font-family:monospace">basic info</h1>
</div>
<!--ICON-->
<h1 class="m-0">
<i class="fa-sharp fa-sparkle"></i>
<!--[ fa-sparkle | replace with your icon name ]-->
</h1>
</div>
<!--CONTENT CONTAINER-->
<div class="p-4" style="position:relative;">
<!--INFO ROW | FULL NAME-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-id-card faded mr-2"></i>
FULL NAME
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
Something
</div>
</div>
<!--INFO ROW | NICKNAMES-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-signature faded mr-2"></i>
NICKNAME(S)
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
"Thing"
</div>
</div>
<!--INFO ROW | SPECIES-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-user faded mr-2"></i>
SPECIES
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
Creature
</div>
</div>
<!--INFO ROW | AGE-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-cake-candles faded mr-2"></i>
AGE
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
0 years
</div>
</div>
<!--INFO ROW | PRONOUNS-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-cake-candles faded mr-2"></i>
PRONOUNS
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
Any/all
</div>
</div>
<!--INFO ROW | GENDER-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-transgender faded mr-2"></i>
GENDER
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
No
</div>
</div>
<!--INFO ROW | ORIENTATION-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-heartbeat faded mr-2"></i>
ORIENTATION
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
Ramen
</div>
</div>
<!--INFO ROW | STATUS-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-sparkle faded mr-2"></i>
AFFILIATION
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--INFO-->
Content
</div>
</div>
<!--INFO ROW | THEME-->
<div class="d-sm-flex">
<!--LABEL-->
<div style="font-weight:bold; color:#378f7b">
<!--ICON-->
<i class="fal fa-music faded mr-2"></i>
THEME
</div>
<!--LINE-->
<div class="align-items-center" style="flex:1">
<div class="ml-sm-3 ml-5 mr-3" style="flex:1; height:1px; opacity:0.3; background:#378f7b"></div>
<!--MUSIC PLAYER-->
<div class="mr-2" style="position:relative">
<!--ICON-->
<i class="fa-sharp faded fa-play pt-1" style="color:#378f7b"></i>
<!--EMBED CONTAINER-->
<div class="align-items-center justify-content-center" style="width:15px; height:25px; position:absolute; top:0; overflow:hidden;">
<!--EMBED-->
<iframe style="opacity:0.001; position:absolute; z-index:100" src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1" frameborder="0"></iframe>
<!--[ URLHERE | replace with everything that comes after v= and before any & symbols ]-->
</div>
</div> <!--end music player-->
<!--INFO-->
Song - Artist
</div>
</div>
</div> <!--end content area-->
</div> <!--end basics area-->
<!------------------------------------------------------------------------------------
INFO AREA START
-------------------------------------------------------------------------------------->
<div class="row mx-auto" style="min-height:250px;">
<!------------------------------------------------------------------------------------
TAB BUTTONS
-------------------------------------------------------------------------------------->
<div class="col-sm-1 p-0 card bg-faded rounded" style="position:sticky; top:0; z-index:1; max-height:200px; overflow:hidden; ">
<ul class="nav flex-sm-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; background:#378f7b">
<!--ICON-->
<i class="fa-sharp 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.3; position:absolute; top:0; box-shadow:none; mix-blend-mode:multiply"></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; background:#378f7b">
<!--ICON-->
<i class="fa-sharp 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.3; position:absolute; top:0; box-shadow:none; mix-blend-mode:multiply"> </a>
</li>
</ul></div> <!--end tab buttons-->
<!------------------------------------------------------------------------------------
INFO CONTAINER
-------------------------------------------------------------------------------------->
<div class="col-sm p-0 bg-faded card ml-sm-n2 mt-2" style="flex:1; box-shadow:3px 3px #378f7b; overflow:hidden">
<div class="tab-content">
<!------------------------------------------------------------------------------------
ABOUT TAB
-------------------------------------------------------------------------------------->
<div id="about" class="tab-pane show active" role="tabpanel">
<!--TITLE AREA-->
<div class="d-flex p-2 pl-sm-4 pl-3 pr-3" style="background:#378f7b">
<!--TITLE-->
<div style="flex:1">
<h1 class="m-0 font-weight-bold" style="font-family:monospace">about</h1>
</div>
<!--ICON-->
<h1 class="m-0">
<i class="fa-sharp fa-bookmark"></i>
</h1>
</div>
<div class="p-3 ml-sm-2">
<!--[ copy and paste below this line ]-->
<!--PARAGRAPH-->
<p>Write about your character here! This box will expand to fit your content.</p>
<!--PARAGRAPH-->
<p>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.</p>
<!--PARAGRAPH-->
<p>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.</p>
<!--PARAGRAPH-->
<p>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.</p>
<!--[ copy and paste above this line ]-->
</div></div> <!--end about tab-->
<!------------------------------------------------------------------------------------
HISTORY TAB
-------------------------------------------------------------------------------------->
<div id="history" class="tab-pane" role="tabpanel">
<!--TITLE AREA-->
<div class="d-flex p-2 pl-sm-4 pl-3 pr-3" style="background:#378f7b">
<!--TITLE-->
<div style="flex:1">
<h1 class="m-0 font-weight-bold" style="font-family:monospace">history</h1>
</div>
<!--ICON-->
<h1 class="m-0">
<i class="fa-sharp fa-bookmark"></i>
</h1>
</div>
<div class="p-3 ml-sm-2">
<!--[ copy and paste below this line ]-->
<!--PARAGRAPH-->
<p>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.</p>
<!--PARAGRAPH-->
<p>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.</p>
<!--PARAGRAPH-->
<p>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.</p>
<!--PARAGRAPH-->
<p>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.</p>
<!--[ copy and paste above this line ]-->
</div></div> <!--end history tab-->
<!------------------------------------------------------------------------------------
------------------------------------------------------------------------------------->
</div> <!--end tab content-->
</div> </div> <!--end info-->
<!------------------------------------------------------------------------------------
CREDITS
-------------------------------------------------------------------------------------->
<!--[ do not edit ! ]-->
<div class="mt-2 text-right">
<a href="https://toyhou.se/32831649.09-simplified" class="text-decoration-none" style="color:#378f7b"> code by sky <i class="fa-sharp fa-ticket-airline ml-1"></i> </a>
</div> <!--end credits-->
<!------------------------------------------------------------------------------------
------------------------------------------------------------------------------------->
</div> <!--end code-->