Profile
<!-- ===================================
[ F2U ] cafe au lait
by sharkadelic
notes:
- a medium character code with simple history, personality, trivia, and relationship sections.
- this code uses mainly bootstrap colors with a few custom color accents.
> text shadows & borders (primary accent): [ #9E7676 ] or [ rgba(129, 91, 91, 0.7) ]
> icon block & accent block background : [ #815B5B ]
> icon box shadow : [ #594545 ]
- press [ ctrl/cmd + h ] and select the colors above for easier replacement.
- parts of this code utilize padding and negative margins to hide the scrollbar on chrome. instructions to remove this are written out when applicable.
- 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 ]
=================================== -->
<div class="container my-4 flex-column" style="min-height:520px; max-width:1000px; font-size:13px; font-family:calibri; line-height:1.3; letter-spacing:0.6px">
<div class="row no-gutters flex-fill">
<!--=======================
> MAIN CONTENT <
> includes:
- icon block
- basic info
- tabbed content
- quote block
- history
- embedded music player
=========================-->
<div class="col-lg order-lg-2 order-1 pl-lg-3 mb-lg-0 mb-3">
<div class="row no-gutters h-100">
<!--=========================
ICON IMAGE BLOCK
> replace [ IMG_LINK ] with the link to the image you want!
- make sure to use images with seamless repetition for best results!
> adjust the [ background-size ] so that the pattern is clearly visible.
=========================== -->
<div class="col-lg-4 order-lg-3 order-1 pl-lg-3 mb-lg-0 mb-4">
<div class="h-100 rounded flex-column align-items-center justify-content-center" style="min-height:350px;
background-color:#815B5B;
background-image: url('IMG_LINK');
background-size:25%;
background-attachment:fixed;
background-blend-mode:multiply">
<!--=========================
CHARACTER ICON
> replace [ IMG_LINK ] with the link to the image you want!
> this image div is manually set to a height and width of 120px.
> looks best with square images.
=========================== -->
<img class="img-thumbnail border-0 p-0" style="height:120px; width:120px; object-fit:cover; box-shadow:-15px -15px #9E7676, 15px 15px #594545"
src="IMG_LINK">
</div>
</div>
<!--===== END ICON IMAGE BLOCK ====== -->
<!--=========================
CENTER CONTENT
=========================== -->
<div class="col-lg-5 flex-column order-2 mb-lg-0 mb-4">
<!--==== BASIC INFO ====-->
<div class="d-lg-flex d-block card p-2 order-1" style="min-height:calc(45% - 10px)%; border:2px solid #9E7676">
<div class="row no-gutters h-100">
<div class="col-6 p-2">
<!--=== FULL NAME ===-->
<div class="mb-1 pb-1">
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">full name</p>
name lastname
</div>
<!--=== ALIASES ===-->
<div class="mb-1 pb-1">
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">alias(es)</p>
name, name, name
</div>
<!--=== PRONOUNS ===-->
<div class="mb-1 pb-1">
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">pronouns</p>
pro/noun/s
</div>
<!--=== GENDER ===-->
<div>
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">gender</p>
identity
</div>
</div>
<div class="col-6 p-2">
<!--=== ORIENTATION ===-->
<div class="mb-1 pb-1">
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">orientation</p>
identity
</div>
<!--=== AGE ===-->
<div class="mb-1 pb-1">
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">age</p>
000 years
</div>
<!--=== BIRTHDAY ===-->
<div class="mb-1 pb-1">
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">birthday</p>
mon. 00th XXXX
</div>
<!--=== OCCUPATION ===-->
<div>
<p class="small font-weight-bold" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7)">occupation</p>
job, or not
</div>
</div>
</div>
</div>
<!--==== END BASIC INFO ====-->
<!--==== TABBED CONTENT ====-->
<div class="card d-lg-flex d-block border-0 bg-transparent flex-fill order-lg-2 order-3 my-lg-3">
<div class="row no-gutters h-100">
<div class="col-lg-10 mb-lg-0 mb-3">
<!-- ===== NOTE =====
> here i used a little html trickery to hide the scrollbar on chrome's desktop browser.
- if you do not use windows chrome and/or the information is partially cut out, remove [ overflow-hidden ] from this first card's class.
- in the second div, change [ overflow-y:scroll ] to [ overflow-y:auto ] in the card's style tag, and remove [ mr-md-n4 pr-md-4 ] from the class.
============================= -->
<div class="d-lg-flex d-block card py-3 mr-lg-n4
overflow-hidden"
style="min-height:100%; border:2px solid #9E7676">
<div class="px-3
pr-md-4 mr-md-n4"
style="flex:1 1 0; overflow-y:scroll">
<div class="tab-content h-100 pr-lg-2">
<!--==== TRIVIA / LIKES / DISLIKES TAB ====-->
<div class="tab-pane fade active show" id="latte">
<!--=== TRIVIA SECTION ===-->
<p style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.1em">trivia . . .</p>
<ul class="mb-0 pl-3">
<li class="mb-1">trivia note goes here. this box will scroll, so this entire section can be as long as you want.</li>
<ul class="pl-4">
<li class="mb-1">trivia subnote. elaborate on note above</li>
</ul>
</ul>
<!--=== LIKES / DISLIKES SECTION ===-->
<div class="row no-gutters mt-2">
<!--=== LIKES ===-->
<div class="col-sm-6">
<p style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.1em">likes . . .</p>
<ul class="mb-0 pl-3">
<li class="mb-1">something</li>
<li class="mb-1">another something</li>
<li class="mb-1">something else</li>
</ul>
</div>
<!--=== DISLIKES ===-->
<div class="col-sm-6">
<p style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.1em">dislikes . . .</p>
<ul class="mb-0 pl-3">
<li class="mb-1">something</li>
<li class="mb-1">another something</li>
<li class="mb-1">something else</li>
</ul>
</div>
</div>
</div>
<!--==== END TRIVIA / LIKES / DISLIKES TAB ====-->
<!--==== PERSONALITY TAB ====-->
<div class="tab-pane fade" id="macchiato">
<!--=== STAT SLIDERS ===-->
<div class="row no-gutters mb-3">
<!--== extrovert to introvert ==-->
<div class="col-sm-6 pr-sm-2 my-1">
<div class="justify-content-between">
<span>extrovert</span>
<span class="pull-right">introvert</span>
</div>
<div class="progress bg-transparent" style="height:0px; overflow:visible; border-width:2px 0 0 0; border-top:solid #9E7676">
<div class="progress-bar bg-transparent" style="height:7px; margin-top:-5.5px;
width:50%">
<span class="pull-right p-1" style="background:#9E7676"></span></div>
</div>
</div>
<!--== sensing to intuition ==-->
<div class="col-sm-6 pl-sm-2 my-1">
<div class="justify-content-between">
<span>sensing</span>
<span class="pull-right">intuition</span>
</div>
<div class="progress bg-transparent" style="height:0px; overflow:visible; border-width:2px 0 0 0; border-top:solid #9E7676">
<div class="progress-bar bg-transparent" style="height:7px; margin-top:-5.5px;
width:50%">
<span class="pull-right p-1" style="background:#9E7676"></span></div>
</div>
</div>
<!--== thinking to feeling ==-->
<div class="col-sm-6 pr-sm-2 my-1">
<div class="justify-content-between">
<span>thinking</span>
<span class="pull-right">feeling</span>
</div>
<div class="progress bg-transparent" style="height:0px; overflow:visible; border-width:2px 0 0 0; border-top:solid #9E7676">
<div class="progress-bar bg-transparent" style="height:7px; margin-top:-5.5px;
width:50%">
<span class="pull-right p-1" style="background:#9E7676"></span></div>
</div>
</div>
<!--== judging to perceiving ==-->
<div class="col-sm-6 pl-sm-2 my-1">
<div class="justify-content-between">
<span>judging</span>
<span class="pull-right">perceiving</span>
</div>
<div class="progress bg-transparent" style="height:0px; overflow:visible; border-width:2px 0 0 0; border-top:solid #9E7676">
<div class="progress-bar bg-transparent" style="height:7px; margin-top:-5.5px;
width:50%">
<span class="pull-right p-1" style="background:#9E7676"></span></div>
</div>
</div>
<!--=== ADD MORE STAT BARS ABOVE THIS COMMENT ===-->
</div>
<p class="text-justify">
<span style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.05em">
accent text.
</span>
content content content.
</p>
</div>
<!--==== END PERSONALITY TAB ====-->
<!--==== RELATIONSHIPS TAB ====-->
<div class="tab-pane fade" id="americano">
<!--=== RELATIONSHIP CARD ONE ====-->
<div class="row no-gutters py-2">
<div class="col-sm-4">
<!--=========================
CHARACTER ICON
> replace [ IMG_LINK ] with the link to the image you want!
> this image div is manually set to a height and width of 100px.
> looks best with square images.
=========================== -->
<div class="justify-content-center" style="position:sticky; top:10px">
<img class="img-thumbnail p-0 border-0" style="height:100px; width:100px; object-fit:cover; box-shadow:-7px -7px #9E7676, 2px 2px #9E7676"
src="IMG_LINK">
</div>
</div>
<!--==== RELATIONSHIP INFO ====-->
<div class="col-sm-8 text-sm-left text-center pl-sm-3 mt-sm-0 mt-2">
<p class="mb-0" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.05em">
CHARACTER NAME
</p>
<p class="align-items-center justify-content-sm-start justify-content-center">
relationship -
<span class="ml-1" style="color:#9E7676">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<!-- add more hearts above this comment -->
</span>
</p>
<p class="text-justify">
info about relationship. icon to the left will stick.
</p>
</div>
</div>
<!--=== END RELATIONSHIP CARD ONE ====-->
<!--=== RELATIONSHIP CARD TWO ====-->
<div class="row no-gutters py-2">
<div class="col-sm-4">
<!--=========================
CHARACTER ICON
> replace [ IMG_LINK ] with the link to the image you want!
> this image div is manually set to a height and width of 100px.
> looks best with square images.
=========================== -->
<div class="justify-content-center" style="position:sticky; top:10px">
<img class="img-thumbnail p-0 border-0" style="height:100px; width:100px; object-fit:cover; box-shadow:-7px -7px #9E7676, 2px 2px #9E7676"
src="IMG_LINK">
</div>
</div>
<!--==== RELATIONSHIP INFO ====-->
<div class="col-sm-8 text-sm-left text-center pl-sm-3 mt-sm-0 mt-2">
<p class="mb-0" style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.05em">
CHARACTER NAME
</p>
<p class="align-items-center justify-content-sm-start justify-content-center">
relationship -
<span class="ml-1" style="color:#9E7676">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<!-- add more hearts above this comment -->
</span>
</p>
<p class="text-justify">
info about relationship. icon to the left will stick.
</p>
</div>
</div>
<!--=== END RELATIONSHIP CARD TWO ====-->
<!--==== ADD MORE RELATIONSHIP CARD ABOVE THIS COMMENT ====-->
</div>
<!--==== END RELATIONSHIPS TAB ====-->
</div>
</div>
</div>
</div>
<!--==== TAB NAVS ====-->
<div class="col-lg-2">
<ul class="nav h-100 w-100 flex-lg-column flex-row align-items-center justify-content-around">
<!--=== BUTTON ONE ===-->
<li class="nav-item card rounded-circle p-1 justify-content-center" style="background:#9E7676">
<a href="#latte" data-toggle="tab" class="nav-link active btn btn-outline-secondary align-items-center justify-content-center rounded-circle p-2" style="mix-blend-mode:luminosity; height:45px; width:45px; border:2px solid #fff; box-shadow:none">
<!--=== FONTAWESOME ICON ===-->
<i class="fa-light fa-mug-hot fa-fw" style="font-size:1.3em; color:#fff"></i></a>
</li>
<!--=== BUTTON TWO ===-->
<li class="nav-item card rounded-circle p-1 justify-content-center" style="background:#9E7676">
<a href="#macchiato" data-toggle="tab" class="nav-link btn btn-outline-secondary align-items-center justify-content-center rounded-circle p-2" style="mix-blend-mode:luminosity; height:45px; width:45px; border:2px solid #fff; box-shadow:none">
<!--=== FONTAWESOME ICON ===-->
<i class="fa-light fa-coffee-beans fa-fw" style="font-size:1.3em; color:#fff"></i></a>
</li>
<!--=== BUTTON THREE ===-->
<li class="nav-item card rounded-circle p-1 justify-content-center" style="background:#9E7676">
<a href="#americano" data-toggle="tab" class="nav-link btn btn-outline-secondary align-items-center justify-content-center rounded-circle p-2" style="mix-blend-mode:luminosity; height:45px; width:45px; border:2px solid #fff; box-shadow:none">
<!--=== FONTAWESOME ICON ===-->
<i class="fa-light fa-coffee-pot fa-fw" style="font-size:1.3em; color:#fff"></i></a>
</li>
</ul>
</div>
<!--==== END TAB NAVS ====-->
</div>
</div>
<!--==== END TABBED CONTENT ====-->
<!--==== QUOTE BLOCK ====-->
<div class="d-lg-flex d-block card p-3 order-lg-3 order-2 my-lg-0 my-3 align-items-center justify-content-center" style="min-height:calc(20% - 5px)%; border:2px solid #9E7676">
<i class="fa-duotone fa-quotes fa-3x" style="position:absolute; transform:rotate(-15deg); color:#815B5B; opacity:0.2; top:5px; left:5px"></i>
<p class="text-center" style="position:relative">
quote here. the box is pretty big, so you can write around 2-3 lines comfortably. this box doesn't scroll though, so be careful
</p>
</div>
</div>
<!--===== END CENTER CONTENT ====== -->
<!--=========================
SIDE CONTENT
=========================== -->
<div class="col-lg-3 flex-column order-lg-1 order-3 pr-lg-3 mb-lg-0 mb-4">
<!--===== HISTORY SECTION =====-->
<!-- ===== NOTE =====
> here i used a little html trickery to hide the scrollbar on chrome's desktop browser.
- if you do not use windows chrome and/or the information is partially cut out, remove [ overflow-hidden ] from this first card's class.
- in the second div, change [ overflow-y:scroll ] to [ overflow-y:auto ] in the card's style tag, and remove [ mr-lg-n4 pr-lg-4 ] from the class.
============================= -->
<div class="d-lg-flex d-block card mb-3
overflow-hidden"
style="min-height:65%; border:2px solid #9E7676">
<div class="p-3 pb-5 text-justify
pr-lg-4 mr-lg-n4"
style="flex:1 1 0; overflow-y:scroll">
<span style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bold">
accent text
</span>
content content content.
</div>
</div>
<!--===== END HISTORY SECTION =====-->
<!--===== EMBEDDED MUSIC PLAYER =====-->
<div class="d-lg-flex d-block card px-2 pb-2 flex-fill" style="border:2px solid #9E7676">
<div class="mt-n5 justify-content-center align-items-start" style="position:relative">
<!--=== ROUNDED BUTTON ===-->
<div class="d-flex card btn btn-outline-secondary rounded-circle p-1 align-items-center justify-content-center" style="border:2px solid #9E7676; cursor:pointer">
<div class="rounded-circle p-3" style="background:#9E7676; overflow:hidden; position:relative">
<!--================
MUSIC PLAYER
> replace [ ID_HERE ] with the youtube video ID, found after [ watch?v= ]
===================-->
<iframe class="m-0" style="position:absolute;height:145px;width:145px;left:-35px;top:-30px;z-index:1000;opacity:0.00001" frameborder="0" allowfullscreen
src="https://www.youtube.com/embed/ID_HERE"></iframe>
<!--==== FONTAWESOME ICON ====-->
<i class="fa-thin fa-music" style="font-size:2em; color:#fff"></i>
</div>
</div>
</div>
<!--=== END ROUNDED BUTTON ===-->
<div class="flex-column align-items-center mt-lg-2 mt-3 flex-fill" style="position:relative">
<div class="card p-3" style="position:absolute; transform:rotate(45deg); border:solid #9E7676; border-width:2px 0 0 2px; border-radius:.25em 0 0 0; z-index:1"></div>
<div class="card w-100 flex-fill mt-3 p-2" style="border:2px solid #9E7676">
<div class="flex-column h-100 align-items-center justify-content-center" style="position:relative; z-index:1">
<!--==== SONG INFO; DOESN'T SCROLL ====-->
<span style="font-family:georgia; text-shadow:-1px 1px rgba(129, 91, 91, 0.7); font-weight:bolder; font-size:1.3em">
song title
</span>
<p class="mb-0">by <b>artist</b></p>
<p>on <b>album</b></p>
</div>
</div>
</div>
</div>
<!--===== END EMBEDDED MUSIC PLAYER =====-->
</div>
<!--===== END SIDE CONTENT ====== -->
</div>
</div>
<!--===== END MAIN CONTENT ====== -->
<!--=========================
ACCENT IMAGE BLOCK
> replace [ IMG_LINK ] with the link to the image you want!
- make sure to use images with seamless repetition for best results!
> adjust the [ background-size ] so that the pattern is clearly visible.
=========================== -->
<div class="col-lg-auto order-lg-1 order-2">
<div class="h-100 rounded p-4" style="min-height:50px;
background-color:#815B5B;
background-image:url('IMG_LINK');
background-size:25%;
background-blend-mode:multiply;
background-attachment:fixed"></div>
</div>
<!--===== END ACCENT IMAGE BLOCK ====== -->
</div>
<!--=======================
> CREDITS <
DO NOT REMOVE
=========================-->
<div class="text-center mt-2"><a href="/sharkadelic/characters" class="text-muted small mx-2">code by sharkadelic</a>|<a href="/Togo" class="text-muted small mx-2">layout by togo</a></div>
</div>