Profile
optional css
copy-paste this snippet to the right in the CSS section of your character page. this won't work unless you have Toyhouse premium, but the base code is still completely usable without this CSS!
#cntnt::-webkit-scrollbar{background:none; width:8px}
#cntnt::-webkit-scrollbar-thumb{background:#f28780}
<!-- ===================================
[ F2U ] midsummer
by sharkadelic
notes:
- a medium character code with simple about, design, and relationships sections.
- this code uses bootstrap colors with a single custom color accent.
> primary accent color : [ #f28780 ]
- press [ ctrl/cmd + h ] and select the color above for easier replacement.
- uses some flexbox, but is unobtrusive enough to not warrant any warnings!
- need a live code editor? try [ https://th.circlejourney.net/# ]
- need an easy palette generator? try [ https://coolors.co ]
- need free-to-use vector icons? try [ https://fontawesome.com ]
=================================== -->
<!--======== CODE START ========-->
<div class="container py-3" style="max-width:880px; font-size:13px; letter-spacing:0.4px; font-family:calibri">
<div class="row no-gutters">
<!--=======================
> LEFT SIDEBAR <
> includes:
- focal image
=========================-->
<div class="col-lg-3 p-2">
<!--=========================
CHARACTER IMAGE
> replace [ IMG_URL ] with the link to the image you want!
- looks best with large, high-res images!
> uses [ background-blend-mode ] to manipulate the image; a full list of valid blend mode effects can be found here: [ https://toyhou.se/6825162.f2u-snippets-resources/7232142.blend-modes ]
=========================== -->
<div class="card h-100 rounded-0 p-2 align-items-end justify-content-end" style="min-height:300px;
background:#f28780 url('IMG_URL');
background-size:cover;
background-blend-mode:screen">
<!--======= CHARACTER NAME =======-->
<p class="text-uppercase font-weight-bold text-white display-3 text-right" style="font-family:georgia; word-break:break-all; text-shadow:0px 2px #f28780, 0px -2px #f28780, 2px 0px #f28780, -2px 0px #f28780">
name
</p>
</div>
</div>
<!--===== END LEFT SIDEBAR ====== -->
<!--=======================
> NAVIGATION <
=========================-->
<div class="col-lg-auto flex-column align-items-center justify-content-center p-1 py-2 mx-lg-0 mx-1">
<!--======== DECOR ========-->
<div class="card mb-1 py-1 rounded-0 border-0 w-100" style="background:#f28780"></div>
<div class="card pt-1 rounded-0 w-100" style="border-top:2px solid #f28780; border-bottom:2px dotted #f28780; border-width:2px 0; opacity:0.5"></div>
<!--======== END DECOR ========-->
<!--======== NAVIGATION ========-->
<ul class="nav nav-justified p-0 my-1 flex-lg-column flex-row no-gutters justify-content-center align-items-center w-100">
<li class="nav-item card rounded-0 align-items-center p-1 py-2 my-1 mx-lg-0 mx-1 text-white" style="background:#f28780; overflow:hidden">
<i class="fa-duotone fa-user fa-fw"></i>
<a href="#about" class="nav-link btn btn-outline-secondary rounded-0 border-0" style="position:absolute; top:0; left:0;right:0;bottom:0; mix-blend-mode:screen; opacity:0.7"></a>
</li>
<li class="nav-item card rounded-0 align-items-center p-1 py-2 my-1 mx-lg-0 mx-1 text-white" style="background:#f28780; overflow:hidden">
<i class="fa-duotone fa-pen-line fa-fw"></i>
<a href="#design" class="nav-link btn btn-outline-secondary rounded-0 border-0" style="position:absolute; top:0; left:0;right:0;bottom:0; mix-blend-mode:screen; opacity:0.7"></a>
</li>
<li class="nav-item card rounded-0 align-items-center p-1 py-2 my-1 mx-lg-0 mx-1 text-white" style="background:#f28780; overflow:hidden">
<i class="fa-duotone fa-box-open fa-fw"></i>
<a href="#trivia" class="nav-link btn btn-outline-secondary rounded-0 border-0" style="position:absolute; top:0; left:0;right:0;bottom:0; mix-blend-mode:screen; opacity:0.7"></a>
</li>
<li class="nav-item card rounded-0 align-items-center p-1 py-2 my-1 mx-lg-0 mx-1 text-white" style="background:#f28780; overflow:hidden">
<i class="fa-duotone fa-people fa-fw"></i>
<a href="#relation" class="nav-link btn btn-outline-secondary rounded-0 border-0" style="position:absolute; top:0; left:0;right:0;bottom:0; mix-blend-mode:screen; opacity:0.7"></a>
</li>
</ul>
<!--======== END NAVIGATION ========-->
<!--======== DECOR ========-->
<div class="card rounded-0 flex-fill w-100" style="background:#f28780; opacity:0.2"></div>
<!--======== END DECOR ========-->
</div>
<!--===== END NAVIGATION ====== -->
<!--=========================
> BEGIN MAIN CONTENT <
> includes:
- about section
- design section
- trivia/misc info section
- relationships section
=========================== -->
<div class="col-lg p-2 d-lg-flex d-block flex-column">
<div class="card rounded-0 p-3" style="flex:0 0 340px; overflow-y:auto; scroll-behavior:smooth" id="cntnt">
<!--=========================
> ABOUT SECTION <
> includes:
- basic info
- short blurb
=========================== -->
<div class="mb-4" id="about">
<!--======= HEADER =======-->
<div class="justify-content-between align-items-center mb-2">
<i class="fa-light fa-pen-nib"></i>
<h4 class="text-uppercase font-italic mb-0 mx-2" style="font-family:georgia; letter-spacing:1px">about</h4>
<div class="flex-fill" style="border-bottom:2px dotted; opacity:0.5"></div>
</div>
<!--======= END HEADER =======-->
<div class="row no-gutters mx-n2">
<!--======= BASIC INFO =======
> this will stick to the top of the container when the blurb gets too long!
=======================-->
<div class="col-lg-5 p-2 d-lg-flex d-block flex-column">
<div class="flex-column" style="flex:0 0 305px; position:sticky; top:0px">
<!--======= DECOR =======-->
<div class="card mb-1 py-1 rounded-0 border-0 w-100" style="background:#f28780"></div>
<div class="card pt-1 rounded-0 w-100" style="border-top:2px solid #f28780; border-bottom:2px dotted #f28780; border-width:2px 0; opacity:0.5"></div>
<!--======= END DECOR =======-->
<div class="my-2">
<!--======= FULL NAME =======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-user mr-2" style="color:#f28780"></i>
name lastname
</div>
<!--======= PRONOUNS =======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-signature mr-2" style="color:#f28780"></i>
pro/noun/s
</div>
<!--======= BIRTHDAY =======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-calendar mr-2" style="color:#f28780"></i>
mon. 00th
</div>
<!--======= AGE =======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-cake mr-2" style="color:#f28780"></i>
000 yrs
</div>
<!--======= SPECIES/RACE =======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-dna mr-2" style="color:#f28780"></i>
species/race
</div>
<!--======= ETHNICITY =======-->
<div class="card rounded-0 p-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-globe-asia mr-2" style="color:#f28780"></i>
ethnicity
</div>
</div>
<!--======= DECOR =======-->
<div class="card pt-1 rounded-0 w-100" style="border-top:2px solid #f28780; border-bottom:2px dotted #f28780; border-width:2px 0; opacity:0.5"></div>
<!--======= END DECOR =======-->
</div>
</div>
<!--======= END BASIC INFO =======-->
<!--======= INFO BLURB =======-->
<div class="col-lg-7 p-2 text-justify">
<p>
<!--======= ACCENT LETTER =======-->
<span class="float-left card rounded-0 p-1 px-2 mt-1 mr-2 font-weight-bold text-white" style="font-family:georgia; background:#f28780">
W
</span>
<!--===== REST OF SENTENCE =====-->
rite the rest of the sentence here!
</p>
<p>
Second paragraph!
</p>
<!--===== ADD MORE PARAGRAPHS ABOVE THIS COMMENT =====-->
</div>
<!--======= END INFO BLURB =======-->
</div>
</div>
<!--======= END ABOUT SECTION =======-->
<!--=========================
> DESIGN SECTION <
> includes:
- palette
- basic design info
- design notes
=========================== -->
<div class="mb-4 text-justify" id="design">
<!--======= HEADER =======-->
<div class="justify-content-between align-items-center mb-2">
<i class="fa-light fa-palette"></i>
<h4 class="text-uppercase font-italic mb-0 mx-2" style="font-family:georgia; letter-spacing:1px">design notes</h4>
<div class="flex-fill" style="border-bottom:2px dotted; opacity:0.5"></div>
</div>
<!--======= END HEADER =======-->
<!--====== PALETTE ======
> replace [ HEXCODE ] with the hexcode of your colors!
======================-->
<div class="flex-row flex-wrap no-gutters mx-n2 mb-2">
<div class="col m-1 p-1 card rounded-0 text-center font-italic text-white" style="background:#HEXCODE"> skin </div>
<div class="col m-1 p-1 card rounded-0 text-center font-italic text-white" style="background:#HEXCODE"> undertone </div>
<div class="col m-1 p-1 card rounded-0 text-center font-italic text-white" style="background:#HEXCODE"> hair </div>
<div class="col m-1 p-1 card rounded-0 text-center font-italic text-white" style="background:#HEXCODE"> eyes </div>
<div class="col m-1 p-1 card rounded-0 text-center font-italic text-white" style="background:#HEXCODE"> color </div>
<!-- ADD MORE COLORS ABOVE THIS COMMENT! -->
</div>
<!--====== END PALETTE ======-->
<!--====== DESIGN CONTENT ======-->
<div class="flex-lg-row flex-row-reverse no-gutters mx-n2">
<!--====== DESIGN NOTES ======-->
<div class="col-lg-7 p-2">
<ul class="pl-3 mb-0">
<li> design note goes here! </li>
<li> another note! this one is longer than the others and might need some clarification. </li>
<ul>
<li> subnote! </li>
</ul>
<!--====== ADD MORE NOTES ABOVE THIS COMMENT! ======-->
</ul>
</div>
<!--====== END DESIGN NOTES ======-->
<!--======= DESIGN INFO =======
> this will stick to the top of the container when the design info gets too long!
=======================-->
<div class="col-lg-5 p-2">
<div class="flex-column" style="position:sticky; top:50px">
<!--====== HEIGHT ======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-ruler mr-2" style="color:#f28780"></i>
00'00" (000 cm)
</div>
<!--====== WEIGHT ======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-weight-scale mr-2" style="color:#f28780"></i>
000 lbs (000 kg)
</div>
<!--====== BUILD ======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-person mr-2" style="color:#f28780"></i>
body type
</div>
<!--====== DEMEANOR ======-->
<div class="card rounded-0 p-2 mb-2 flex-row align-items-center justify-content-between">
<i class="fa-light fa-masks-theater mr-2" style="color:#f28780"></i>
demeanor
</div>
<div class="card pt-1 rounded-0 w-100" style="border-bottom:2px solid #f28780; border-top:2px dotted #f28780; border-width:2px 0; opacity:0.5"></div>
<div class="card mt-1 py-1 rounded-0 border-0 w-100" style="background:#f28780"></div>
</div>
</div>
<!--====== END DESIGN INFO ======-->
</div>
<!--====== END DESIGN CONTENT ======-->
</div>
<!--======= END DESIGN SECTION =======-->
<!--=========================
> TRIVIA SECTION <
> includes:
- likes + dislikes
- bulleted trivia info
=========================== -->
<div class="mb-4 text-justify" id="trivia">
<!--======= HEADER =======-->
<div class="justify-content-between align-items-center mb-2">
<i class="fa-light fa-list-ul"></i>
<h4 class="text-uppercase font-italic mb-0 mx-2" style="font-family:georgia; letter-spacing:1px">trivia</h4>
<div class="flex-fill" style="border-bottom:2px dotted; opacity:0.5"></div>
</div>
<!--======= END HEADER =======-->
<!--====== LIKES + DISLIKES ======-->
<div class="row no-gutters mx-n2 mb-2">
<!--====== LIKES ======-->
<div class="col-6 p-2"><p>
<span class="float-left mr-2"><span class="card rounded-0 p-2 text-white" style="background:#f28780"><i class="fa-light fa-heart fa-fw"></i>
</span></span>
write down some likes here. item one, item two, item three, four five, the list goes on!
</p></div>
<!--====== DISLIKES ======-->
<div class="col-6 p-2"><p>
<span class="float-left mr-2"><span class="card rounded-0 p-2 text-white" style="background:#f28780"><i class="fa-light fa-heart-broken fa-fw"></i>
</span></span>
write down some dislikes here. item one, item two, item three, four five, the list goes on!
</p></div>
</div>
<!--====== END LIKES + DISLIKES ======-->
<!--====== TRIVIA CONTENT ======-->
<ul class="pl-3">
<li> this is a trivia note! </li>
<li> this is a trivia note that's longer than the one above. it might get its own subnote. </li>
<ul>
<li>
subnote here!
</li>
</ul>
<!--====== ADD MORE NOTES ABOVE THIS COMMENT! ======-->
</ul>
<!--====== END TRIVIA CONTENT ======-->
</div>
<!--======= END TRIVIA SECTION =======-->
<!--=========================
> RELATIONSHIPS SECTION <
> includes:
- relationship cards
=========================== -->
<div class="text-justify" id="relation">
<!--======= HEADER =======-->
<div class="justify-content-between align-items-center mb-2">
<i class="fa-light fa-head-side-heart"></i>
<h4 class="text-uppercase font-italic mb-0 mx-2" style="font-family:georgia; letter-spacing:1px">relationships</h4>
<div class="flex-fill" style="border-bottom:2px dotted; opacity:0.5"></div>
</div>
<!--======= END HEADER =======-->
<div class="flex-row flex-wrap no-gutters mx-n2">
<!--====== RELATIONSHIP CARD ONE ======-->
<div class="m-2 col flex-column justify-content-center align-items-center">
<!--=========================
CHARACTER IMAGE
> replace [ IMG_LINK ] with the link to the image you want!
> this image div is manually set to a fixed height of 90px.
=========================== -->
<img class="img-thumbnail rounded-0 p-1" style="height:90px; object-fit:cover"
src="IMG_LINK">
<!--====== CHARACTER INFO ======
> replace [ CHARACTER_LINK ] with the link to your character!
========================-->
<a class="text-center mt-2 text-body text-uppercase"
href="CHARACTER_LINK">
name lastname
</a><p class="text-muted font-italic small">
relationship
</p>
</div>
<!--====== END RELATIONSHIP CARD ONE ======-->
<!--====== RELATIONSHIP CARD TWO ======-->
<div class="m-2 col flex-column justify-content-center align-items-center">
<!--=========================
CHARACTER IMAGE
> replace [ IMG_LINK ] with the link to the image you want!
> this image div is manually set to a fixed height of 90px.
=========================== -->
<img class="img-thumbnail rounded-0 p-1" style="height:90px; object-fit:cover"
src="IMG_LINK">
<!--====== CHARACTER INFO ======
> replace [ CHARACTER_LINK ] with the link to your character!
========================-->
<a class="text-center mt-2 text-body text-uppercase"
href="CHARACTER_LINK">
name lastname
</a><p class="text-muted font-italic small">
relationship
</p>
</div>
<!--====== END RELATIONSHIP CARD TWO ======-->
<!--====== RELATIONSHIP CARD THREE ======-->
<div class="m-2 col flex-column justify-content-center align-items-center">
<!--=========================
CHARACTER IMAGE
> replace [ IMG_LINK ] with the link to the image you want!
> this image div is manually set to a fixed height of 90px.
=========================== -->
<img class="img-thumbnail rounded-0 p-1" style="height:90px; object-fit:cover"
src="IMG_LINK">
<!--====== CHARACTER INFO ======
> replace [ CHARACTER_LINK ] with the link to your character!
========================-->
<a class="text-center mt-2 text-body text-uppercase"
href="CHARACTER_LINK">
name lastname
</a><p class="text-muted font-italic small">
relationship
</p>
</div>
<!--====== END RELATIONSHIP CARD THREE ======-->
<!-- ADD MORE CARDS ABOVE THIS COMMENT! -->
</div>
</div>
<!--======= END RELATIONSHIPS SECTION =======-->
</div>
</div>
<!--===== END MAIN CONTENT ====== -->
<!--=======================
> RIGHT SIDEBAR <
> includes:
- embedded music player
- quote + image carousel
- filler image
=========================-->
<div class="col-lg-3 d-lg-flex d-block flex-column p-2">
<!--===== EMBEDDED PLAYER =====-->
<div class="card flex-row no-gutters rounded-0 p-2 my-2 mr-2" style="flex:0 0 20%; min-height:70px; position:relative; overflow:hidden; box-shadow:8px -8px #f28780, 0px -8px #f28780, 8px 0px #f28780">
<div class="col-2 ml-n2" style="position:relative; overflow:hidden;">
<a>
<!--================
MUSIC PLAYER
> replace [ ID_HERE ] with the youtube video ID, found after [ watch?v= ]
===================-->
<iframe class="m-0" style="position:absolute;height:245px;width:145px;left:-50px;top:-70px;z-index:1000;opacity:0.00001" frameborder="0" allowfullscreen
src="https://www.youtube.com/embed/ID_HERE"></iframe>
<i class="fa-duotone fa-compact-disc fa-spin" style="font-size:4em; color:#f28780; margin-left:-27px"></i>
</a>
</div>
<!--==== TRACK INFO ====-->
<div class="col-10 flex-column justify-content-center align-items-center text-center">
<p class="text-uppercase mb-0 text-truncate w-100">
song title
</p>
<p class="font-italic text-truncate small w-100" style="font-variant:small-caps">
artist
</p>
</div>
</div>
<!--===== END EMBEDDED PLAYER =====-->
<!--===== QUOTE + IMAGE CAROUSEL =====-->
<div class="row no-gutters flex-fill mb-2" style="min-height:170px">
<div class="col-lg card rounded-0 p-2">
<div class="carousel carousel-fade slide rounded-0 h-100" style="overflow:visible" data-ride="carousel">
<div class="carousel-inner h-100" style="overflow:visible">
<!--====== CAROUSEL IMAGE ========
> replace [ IMG_URL ] with the link to the image you want!
> images are set to crop to the *top center* portion of the image, adjust as needed.
> uses [ background-blend-mode ] to manipulate the image; a full list of valid blend mode effects can be found here: [ https://toyhou.se/6825162.f2u-snippets-resources/7232142.blend-modes ]
=========================== -->
<div class="carousel-item active h-100" style="
background:#f28780 url('IMG_URL') center top;
background-size:cover;
background-blend-mode:screen;"></div>
<!--====== CAROUSEL QUOTE ========-->
<div class="carousel-item h-100">
<div class="card rounded-0 h-100 justify-content-center align-items-center text-center font-italic p-2 overflow-hidden" style="position:relative">
<i class="fa-thin fa-quote-left" style="opacity:0.25; position:absolute; top:5px; left:5px; font-size:2.5em; color:#f28780"></i>
<i class="fa-thin fa-quote-right" style="opacity:0.25; position:absolute; bottom:5px; right:5px; font-size:2.5em; color:#f28780"></i>
<p style="position:relative; z-index:2">
quote here! this can fit around 6-7 lines of text, try not to go over that limit!
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto d-lg-flex d-none flex-row ml-lg-2"><div class="h-100 mr-1" style="border-left:2px dotted #f28780"></div> <div class="h-100" style="border-left:2px solid #f28780; opacity:0.5"></div></div>
</div>
<!--===== END QUOTE + IMAGE CAROUSEL =====-->
<!--====== FILLER IMAGE ========
> replace [ IMG_URL ] with the link to the image you want!
> uses [ background-blend-mode ] to manipulate the image; a full list of valid blend mode effects can be found here: [ https://toyhou.se/6825162.f2u-snippets-resources/7232142.blend-modes ]
=========================== -->
<div class="card rounded-0" style="min-height:70px; flex:0 0 20%;
background:#f28780 url('IMG_URL') center;
background-size:cover;
background-blend-mode:screen"></div>
</div>
<!--===== END RIGHT SIDEBAR ====== -->
</div>
<!--======== CREDITS ========
> DO NOT REMOVE <
=========================-->
<div class="text-center small mt-2"><a class="text-body" href="/sharkadelic/characters">code by sharkadelic</a> | <a class="text-body" href="/Togo">layout by togo</a></div>
</div>
<!--======== CODE END ========-->