Profile
<!-- [ F2U ] shibuya by macroura
- this is an entry for the nov 2022 coders' quarters challenge! we were tasked with making a single-hue code so :]
- yatora themed but the real babygirl here is haruka at the very end. he's gf material <3
notes:
- fully custom colored! i went a little overboard making each section look unique, so they're all commented out individually!
- generally:
> text & borders: [ #1E4C57 ]
> section header text backgrounds: [ #DDEFF3 ]
> accent color: [ #C2E2EA ]
> the accent colors from lightest to darkest:
[ #DDEFF3 ]
[ #C2E2EA ]
[ #A7D5E1 ]
[ #8DC9D8 ]
[ #72BBCE ]
- uses col ordering to overlap the image and nav over the main content! this is why the nav and image are at the very end of the code :]
- tabbed code!
- 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 py-4" style="max-width:670px; font-size:12px; color:#1E4C57; letter-spacing:0.6px; line-height:1.3">
<!--===== I. name header =====-->
<div class="px-sm-5 text-right">
<p class="px-sm-5 px-3 mb-sm-2 mb-4 font-italic" style="font-size:2em; font-weight:500; letter-spacing:1.5px">
name lastname
</p>
</div>
<!--===== END NAME HEADER =====-->
<div class="row no-gutters">
<!--===== II. main content; =====
> includes:
- basic info tab
- personality tab
- history tab
- misc tab
- relationships tab
-->
<div class="col-sm-8 order-2">
<div class="card d-sm-flex d-block py-3 pb-sm-3 pb-4 pl-sm-3" style="min-height:100%; border:1px solid #1E4C57; background:#fff;">
<div class="px-4" style="flex:1 1 0; overflow-y:auto">
<div class="tab-content text-justify h-100">
<!--==== II.a; basic info tab ====
> includes:
- basic info
- short text blurb
> this section uses:
[ #C2E2EA ] for the basic info text,
[ #DDEFF3 ] for the accent block
-->
<div class="tab-pane fade active show" id="oil" style="transition-duration:0.3s">
<!-- header -->
<div class="justify-content-between px-1 mb-2">
<span class="px-1 font-italic" style="background:#DDEFF3; font-size:1.5em"> basics </span>
<hr class="mx-1 flex-fill my-1 align-self-end" style="border-top:#1E4C57 solid 1px">
</div>
<!-- end header -->
<!--=== basic info ; ===
> [ kanji ] and [ ethnicity ] inputs can be changed as needed!
-->
<div class="row no-gutters">
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> name: </span>
<span class="pull-right text-right">
full name
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> nickname(s): </span>
<span class="pull-right text-right">
name
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> kanji: </span>
<span class="pull-right text-right">
opt.
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> ethnicity: </span>
<span class="pull-right text-right">
or race
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> pronouns: </span>
<span class="pull-right text-right">
pro/nouns
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> gender: </span>
<span class="pull-right text-right">
identity
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> age: </span>
<span class="pull-right text-right">
000 years
</span>
</div>
<div class="col-6 px-2 my-1 justify-content-between">
<span class="px-1" style="background:#C2E2EA"> birthday: </span>
<span class="pull-right text-right">
mon. 00th
</span>
</div>
</div>
<!--== end basic info ==-->
<!--=== short blurb; section will scroll ===-->
<div class="row no-gutters my-3">
<div class="col-auto">
<div class="card p-2 py-3 h-100 border-0" style="background:#DDEFF3">
<!-- fontawesome icon -->
<i class="fa-regular fa-cloud-fog fa-lg fa-fw"></i>
</div>
</div>
<div class="col pl-2">
<p class="mb-0">
short oc blurb goes here! you can change the icon in the accent block to the left, which grows with content :]
</p>
</div>
</div>
<!--== end short blurb ==-->
</div>
<!--==== END BASIC INFO TAB ====-->
<!--==== II.b; personality tab ====
> includes:
- adjectives
- trait progress bars
- likes/dislikes
- personality blurb
> this section uses:
[ #8DC9D8 ] for the progress bars,
[ #C2E2EA ] for the likes/dislikes accent block
[ #DDEFF3 ] for the text accent block
-->
<div class="tab-pane fade" id="acrylic" style="transition-duration:0.3s">
<!-- header -->
<div class="justify-content-between px-1 mb-3">
<span class="px-1 font-italic" style="background:#DDEFF3; font-size:1.5em"> personality </span>
<hr class="mx-1 flex-fill my-1 align-self-end" style="border-top:#1E4C57 solid 1px">
</div>
<!-- end header -->
<!--=== adjectives; ===
> uses [ #DDEFF3 ], [ #DDEFF3 ], and [ #DDEFF3 ] (lightest to darkest)
-->
<p class="text-center font-italic" style="letter-spacing:1px">
<span class="mx-1" style="border-bottom:solid 3px #DDEFF3"> adjective </span>
•
<span class="mx-1" style="border-bottom:solid 3px #C2E2EA"> adjective </span>
•
<span class="mx-1" style="border-bottom:solid 3px #A7D5E1"> adjective </span>
</p>
<!--=== end adjectives ===-->
<!--=== progress bars; ===
> change the [ width:50% ] to change how far the bar is filled!
-->
<div class="row no-gutters my-3">
<!--== extravert to introvert ==-->
<div class="col-6 px-2 my-1">
<div class="justify-content-between">
<span>extravert</span>
<span class="pull-right">introvert</span>
</div>
<div class="progress bg-transparent" style="height:6px; border:1px solid #8DC9D8">
<div class="progress-bar" style="background:#8DC9D8;
width:50%"></div>
</div>
</div>
<!--== sensing to intuition ==-->
<div class="col-6 px-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:6px; border:1px solid #8DC9D8">
<div class="progress-bar" style="background:#8DC9D8;
width:50%"></div>
</div>
</div>
<!--== thinking to feeling ==-->
<div class="col-6 px-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:6px; border:1px solid #8DC9D8">
<div class="progress-bar" style="background:#8DC9D8;
width:50%"></div>
</div>
</div>
<!--== judging to perceiving ==-->
<div class="col-6 px-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:6px; border:1px solid #8DC9D8">
<div class="progress-bar" style="background:#8DC9D8;
width:50%"></div>
</div>
</div>
<!--=== add more progress bars above this comment! ===-->
</div>
<!--=== end progress bars ===-->
<!--=== likes/dislikes ===-->
<div class="flex-row flex-wrap no-gutters">
<!--== likes section ==-->
<div class="col-sm-6 col-12 py-2 row no-gutters">
<div class="col-2">
<div class="card p-1 h-100 border-0" style="background:#C2E2EA">
<i class="fa-regular fa-heart m-auto"></i>
</div>
</div>
<div class="col px-2 text-left">
<p class="font-italic" style="font-size:1.1em; font-weight:500">likes</p>
thing, another thing, third thing, fourth thing.
</div>
</div>
<!--== dislikes section ==-->
<div class="col-sm-6 col-12 py-2 row no-gutters">
<div class="col-2">
<div class="card p-1 h-100 border-0" style="background:#C2E2EA">
<i class="fa-regular fa-heart-broken m-auto"></i>
</div>
</div>
<div class="col px-2 text-left">
<p class="font-italic" style="font-size:1.1em; font-weight:500">dislikes</p>
thing, another thing, third thing, fourth thing.
</div>
</div>
</div>
<!--=== end likes/dislikes ===-->
<hr style="border-top:1px solid #A7D5E1">
<!--=== personality blurb ===-->
<div class="row no-gutters my-3">
<div class="col pr-2">
<p> quick blurb on your character's personality! the accent block to the right will grow with content. </p>
<p> second paragraph. 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>
</div>
<div class="col-auto">
<div class="card p-2 h-100 border-0" style="background:#DDEFF3">
<!-- fontawesome icon -->
<i class="fa-regular fa-cloud-rain fa-lg my-3 fa-fw"></i>
</div>
</div>
</div>
<!--=== end personality blurb ===-->
</div>
<!--==== END PERSONALITY TAB ====-->
<!--==== II.c; history tab ====
> includes:
- subheaders
- text blocks
> this section uses:
[ #C2E2EA ] for the subheaders
-->
<div class="tab-pane fade" id="gouache" style="transition-duration:0.3s">
<div class="justify-content-between px-1 mb-3">
<span class="px-1 font-italic" style="background:#DDEFF3; font-size:1.5em"> history </span>
<hr class="mx-1 flex-fill my-1 align-self-end" style="border-top:#1E4C57 solid 1px">
</div>
<!--== subheader one ==-->
<div style="position:sticky; -webkit-position:sticky; top:-3px">
<div class="justify-content-between align-items-center mb-2" style="font-size:1.2em; background:#fff;">
<span class="px-1 font-italic" style="background:#C2E2EA">
I. subheader name
</span>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<div class="card p-1" style="border:solid 2px #C2E2EA; font-family:georgia; background:#fff">
<!-- fontawesome icon -->
<i class="fa-light fa-star-christmas fa-sm m-1 my-2"></i>
</div>
</div>
</div>
<!--== end subheader one ==-->
<div class="pl-3 mb-2" style="border-left:solid 2px #C2E2EA">
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 class="pl-3 mb-2" style="border-left:solid 2px #C2E2EA">
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>
<!--== end section one ==-->
<!-- subheader two -->
<div style="position:sticky; -webkit-position:sticky; top:-3px">
<div class="justify-content-between align-items-center mb-2" style="font-size:1.2em; background:#fff;">
<span class="px-1 font-italic" style="background:#C2E2EA">
II. subheader name
</span>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<div class="card p-1" style="border:solid 2px #C2E2EA; font-family:georgia; background:#fff">
<!-- fontawesome icon -->
<i class="fa-light fa-star-christmas fa-sm m-1 my-2"></i>
</div>
</div>
</div>
<!--== end subheader two ==-->
<div class="pl-3 mb-2" style="border-left:solid 2px #C2E2EA">
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>
<!--== end section two ==-->
<!-- subheader three -->
<div style="position:sticky; -webkit-position:sticky; top:-3px">
<div class="justify-content-between align-items-center mb-2" style="font-size:1.2em; background:#fff;">
<span class="px-1 font-italic" style="background:#C2E2EA">
III. subheader name
</span>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<div class="card p-1" style="border:solid 2px #C2E2EA; font-family:georgia; background:#fff">
<!-- fontawesome icon -->
<i class="fa-light fa-star-christmas fa-sm m-1 my-2"></i>
</div>
</div>
</div>
<div class="pl-3 mb-2" style="border-left:solid 2px #C2E2EA">
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.
</div>
<!--== end section three ==-->
<!-- add more sections above this comment! -->
</div>
<!--==== END HISTORY TAB ====-->
<!--==== II.d; miscellaneous tab ====
> includes:
- trivia
- design notes
> this section uses:
[ #C2E2EA ] for the subheaders and design info,
[ #8DC9D8 ] for the list bullets
-->
<div class="tab-pane fade" id="pastel" style="transition-duration:0.3s">
<!--== header ==-->
<div class="justify-content-between px-1 mb-2">
<span class="px-1 font-italic" style="background:#DDEFF3; font-size:1.5em"> miscellaneous </span>
<hr class="mx-1 flex-fill my-1 align-self-end" style="border-top:#1E4C57 solid 1px">
</div>
<!--== end header ==-->
<!--=== trivia section; ===-->
<div class="justify-content-between align-items-center mb-2" style="font-size:1.2em; background:#fff">
<hr class="px-2 border-0" style="background:#C2E2EA; height:2px">
<span class="px-1 font-italic" style="background:#C2E2EA"> trivia </span>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
</div>
<!--=== trivia notes; ===
> this list uses fa icons as bullet points!
- chevron-right: note
- chevron-double-right: subnote
-->
<ul class="my-2 mb-3 pl-0 fa-ul" style="line-height:1.5">
<li><span class="fa-li"> <i class="fa-solid fa-chevron-right fa-xs" style="color:#8DC9D8"></i> </span>
trivia note.
</li>
<li><span class="fa-li"> <i class="fa-solid fa-chevron-right fa-xs" style="color:#8DC9D8"></i> </span>
trivia note.
</li>
<ul class="fa-ul">
<li><span class="fa-li"> <i class="fa-solid fa-chevron-double-right fa-xs" style="color:#8DC9D8"></i> </span>
subnote, elaborate on note above.
</li>
</ul>
<li><span class="fa-li"> <i class="fa-solid fa-chevron-right fa-xs" style="color:#8DC9D8"></i> </span>
another note
</li>
<!-- add more trivia notes above this comment! -->
</ul>
<!--=== end trivia section ===-->
<!--=== design section; ===-->
<div class="justify-content-between align-items-center mb-2" style="font-size:1.2em; background:#fff">
<hr class="px-2 border-0" style="background:#C2E2EA; height:2px">
<span class="px-1 font-italic" style="background:#C2E2EA">design notes</span>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
</div>
<!--=== design info ===-->
<div class="row no-gutters">
<div class="col-6">
<!--== height ==-->
<div class="justify-content-between align-items-center mb-1">
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic p-1 mb-0" style="border:solid 1px #C2E2EA"> height </p>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic mx-1 mb-0">
000 cm
</p>
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
</div>
<!--== weight ==-->
<div class="justify-content-between align-items-center mb-1">
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic p-1 mb-0" style="border:solid 1px #C2E2EA"> weight </p>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic mx-1 mb-0">
000 kg
</p>
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
</div>
</div>
<div class="col-6">
<!--== build/body type ==-->
<div class="justify-content-between align-items-center mb-1">
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic p-1 mb-0" style="border:solid 1px #C2E2EA"> build </p>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic mx-1 mb-0">
body type
</p>
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
</div>
<!--== designer ==-->
<div class="justify-content-between align-items-center mb-1">
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic p-1 mb-0" style="border:solid 1px #C2E2EA"> designer </p>
<hr class="flex-fill border-0" style="background:#C2E2EA; height:2px">
<p class="font-italic mx-1 mb-0">
user
</p>
<hr class="px-1 border-0" style="background:#C2E2EA; height:2px">
</div>
</div>
</div>
<div class="row no-gutters">
<!--=== design notes; ===
> this list uses fa icons as bullet points!
- chevron-right: note
- chevron-double-right: subnote
-->
<div class="col-12">
<ul class="my-2 fa-ul" style="line-height:1.5">
<li><span class="fa-li"><i class="fa-solid fa-chevron-right fa-xs" style="color:#8DC9D8"></i></span>
design note.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right fa-xs" style="color:#8DC9D8"></i></span>
design note.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right fa-xs" style="color:#8DC9D8"></i></span>
design note.
</li>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-chevron-double-right fa-xs" style="color:#8DC9D8"></i></span>
subnote, elaborate on design aspect above.
</li>
</ul>
<!-- add more design notes above! -->
</ul>
</div>
<!--=== color palette; ===
> you can alter the color of the hexcode label by changing the color to either [ #fff ] or [ #000 ] to keep the label visible!
> the label opacity is set to [ 0.7 ] to lower the contrast.
-->
<div class="col-12 my-2 px-1">
<div class="flex-row flex-wrap w-100 align-items-center justify-content-center">
<div class="col mr-1 mb-1 rounded" style="border:1px solid #1E4C57; padding:2px">
<div class="rounded w-100 text-center text-uppercase font-italic p-1 px-3" style="font-size:0.8em; background:
#HEXCODE">
<p style="color:#000; opacity:0.7"> #HEXCODE </p>
</div>
</div>
<div class="col mr-1 mb-1 rounded" style="border:1px solid #1E4C57; padding:2px">
<div class="rounded w-100 text-center text-uppercase font-italic p-1 px-3" style="font-size:0.8em; background:
#HEXCODE">
<p style="color:#000; opacity:0.7"> #HEXCODE </p>
</div>
</div>
<div class="col mr-1 mb-1 rounded" style="border:1px solid #1E4C57; padding:2px">
<div class="rounded w-100 text-center text-uppercase font-italic p-1 px-3" style="font-size:0.8em; background:
#HEXCODE">
<p style="color:#fff; opacity:0.7"> #HEXCODE </p>
</div>
</div>
<div class="col mr-1 mb-1 rounded" style="border:1px solid #1E4C57; padding:2px">
<div class="rounded w-100 text-center text-uppercase font-italic p-1 px-3" style="font-size:0.8em; background:
#HEXCODE">
<p style="color:#fff; opacity:0.7"> #HEXCODE </p>
</div>
</div>
<div class="col mr-1 mb-1 rounded" style="border:1px solid #1E4C57; padding:2px">
<div class="rounded w-100 text-center text-uppercase font-italic p-1 px-3" style="font-size:0.8em; background:
#HEXCODE">
<p style="color:#000; opacity:0.7"> #HEXCODE </p>
</div>
</div>
<div class="col mr-1 mb-1 rounded" style="border:1px solid #1E4C57; padding:2px">
<div class="rounded w-100 text-center text-uppercase font-italic p-1 px-3" style="font-size:0.8em; background:
#HEXCODE">
<p style="color:#fff; opacity:0.7"> #HEXCODE </p>
</div>
</div>
<!-- add more colors above this comment! -->
</div>
</div>
</div>
<!--=== end design section ===-->
</div>
<!--==== END MISCELLANEOUS TAB ====-->
<!--==== II.e; relationships tab ====
> includes:
- relationship cards (duh)
> this section uses:
[ #8DC9D8 ] for the subheaders, accent block, and info blurb border,
[ #72BBCE ] for the heart bars
-->
<div class="tab-pane fade" id="charcoal" style="transition-duration:0.3s">
<div class="justify-content-between px-1 mb-3">
<span class="px-1 font-italic" style="background:#DDEFF3; font-size:1.5em"> relationships </span>
<hr class="mx-1 flex-fill my-1 align-self-end" style="border-top:#1E4C57 solid 1px">
</div>
<!--=== relationship card one ===-->
<div class="row no-gutters mb-3">
<div class="col-12">
<!--=== character name subheader ===-->
<div class="justify-content-between align-items-end pl-3 mb-2 font-italic" style="border-bottom:2px solid #8DC9D8">
<a href="CHARACTER_LINK" style="font-size:1.2em; color:inherit; font-weight:500;">
name lastname
</a>
<p class="px-1" style="font-weight:500; background:#8DC9D8; color:#fff">
relationship status
</p>
</div>
</div>
<div class="col-sm-1 pr-1 hidden-sm-down">
<div class="card h-100 border-0" style="background:#8DC9D8">
<!--=== fontawesome icon; ===
> use this to indicate the characters' relationship with each other!
-->
<i class="fa-solid fa-people fa-lg mx-auto mt-3"></i>
</div>
</div>
<div class="col-sm-4 px-1">
<div class="rounded" style="height:110px; border:1px solid #1E4C57;
background:url(IMG_URL) center;
background-size:cover;"></div>
<!--=== heart bars; ===
> fa-solid fa-heart: full heart
> fa-regular fa-heart-half-stroke: half heart
> fa-regular fa-heart: empty heart
-->
<div class="text-center my-2">
<span>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-regular fa-heart-half-stroke fa-fw" style="color:#72BBCE"></i>
<i class="fa-regular fa-heart fa-fw" style="color:#72BBCE"></i>
</span>
</div>
</div>
<!--=== info block; ===
> the content in this block will scroll on desktop and grow on mobile!
-->
<div class="col-sm-7 px-1">
<div class="card d-sm-flex d-block" style="min-height:100%; background:#fff; border:1px solid #8DC9D8">
<div class="p-2" style="flex:1 1 0; overflow-y:auto">
This content will scroll on desktop and grow on mobile. 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.
</div>
</div>
</div>
</div>
<!--=== end relationship card one ===-->
<!--=== relationship card two ===-->
<div class="row no-gutters mb-3">
<div class="col-12">
<!--=== character name subheader ===-->
<div class="justify-content-between align-items-end pl-3 mb-2 font-italic" style="border-bottom:2px solid #8DC9D8">
<a href="CHARACTER_LINK" style="font-size:1.2em; color:inherit; font-weight:500;">
name lastname
</a>
<p class="px-1" style="font-weight:500; background:#8DC9D8; color:#fff">
relationship status
</p>
</div>
</div>
<div class="col-sm-1 pr-1 hidden-sm-down">
<div class="card h-100 border-0" style="background:#8DC9D8">
<!--=== fontawesome icon; ===
> use this to indicate the characters' relationship with each other!
-->
<i class="fa-solid fa-people fa-lg mx-auto mt-3"></i>
</div>
</div>
<div class="col-sm-4 px-1">
<div class="rounded" style="height:110px; border:1px solid #1E4C57;
background:url(IMG_URL) center;
background-size:cover;"></div>
<!--=== heart bars; ===
> fa-solid fa-heart: full heart
> fa-regular fa-heart-half-stroke: half heart
> fa-regular fa-heart: empty heart
-->
<div class="text-center my-2">
<span>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-regular fa-heart-half-stroke fa-fw" style="color:#72BBCE"></i>
<i class="fa-regular fa-heart fa-fw" style="color:#72BBCE"></i>
</span>
</div>
</div>
<!--=== info block; ===
> the content in this block will scroll on desktop and grow on mobile!
-->
<div class="col-sm-7 px-1">
<div class="card d-sm-flex d-block" style="min-height:100%; background:#fff; border:1px solid #8DC9D8">
<div class="p-2" style="flex:1 1 0; overflow-y:auto">
This content will scroll on desktop and grow on mobile. 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.
</div>
</div>
</div>
</div>
<!--=== end relationship card two ===-->
<!--=== relationship card three ===-->
<div class="row no-gutters mb-3">
<div class="col-12">
<!--=== character name subheader ===-->
<div class="justify-content-between align-items-end pl-3 mb-2 font-italic" style="border-bottom:2px solid #8DC9D8">
<a href="CHARACTER_LINK" style="font-size:1.2em; color:inherit; font-weight:500;">
name lastname
</a>
<p class="px-1" style="font-weight:500; background:#8DC9D8; color:#fff">
relationship status
</p>
</div>
</div>
<div class="col-sm-1 pr-1 hidden-sm-down">
<div class="card h-100 border-0" style="background:#8DC9D8">
<!--=== fontawesome icon; ===
> use this to indicate the characters' relationship with each other!
-->
<i class="fa-solid fa-people fa-lg mx-auto mt-3"></i>
</div>
</div>
<div class="col-sm-4 px-1">
<div class="rounded" style="height:110px; border:1px solid #1E4C57;
background:url(IMG_URL) center;
background-size:cover;"></div>
<!--=== heart bars; ===
> fa-solid fa-heart: full heart
> fa-regular fa-heart-half-stroke: half heart
> fa-regular fa-heart: empty heart
-->
<div class="text-center my-2">
<span>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-solid fa-heart fa-fw" style="color:#72BBCE"></i>
<i class="fa-regular fa-heart-half-stroke fa-fw" style="color:#72BBCE"></i>
<i class="fa-regular fa-heart fa-fw" style="color:#72BBCE"></i>
</span>
</div>
</div>
<!--=== info block; ===
> the content in this block will scroll on desktop and grow on mobile!
-->
<div class="col-sm-7 px-1">
<div class="card d-sm-flex d-block" style="min-height:100%; background:#fff; border:1px solid #8DC9D8">
<div class="p-2" style="flex:1 1 0; overflow-y:auto">
This content will scroll on desktop and grow on mobile. 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.
</div>
</div>
</div>
</div>
<!--=== end relationship card three ===-->
</div>
<!--==== END RELATIONSHIP TAB ====-->
</div>
</div>
</div>
</div>
<!--===== END MAIN CONTENT =====-->
<!--===== III. tab navigation; =====
> change the navigation icons as you wish!
> this section uses:
- all five accent colors, in order from lightest to darkest:
[ #DDEFF3 ]
[ #C2E2EA ]
[ #A7D5E1 ]
[ #8DC9D8 ]
[ #72BBCE ]
-->
<div class="col-sm-1 order-3 ml-sm-n3 mt-sm-0 mt-n4" style="position:relative; z-index:1">
<div class="align-items-center justify-content-center h-100">
<ul class="nav nav-justified w-75 p-1 flex-sm-column flex-row justify-content-around align-items-center">
<li class="nav-item rounded pr-1 pb-1 m-2" style="border:1px solid #1E4C57; background:#fff">
<a href="#oil" class="nav-link mt-n2 ml-n2 rounded p-2" style="border:1px solid #1E4C57; background:#DDEFF3; color:#1E4C57" data-toggle="tab">
<i class="fa-light fa-pen-nib fa-lg fa-fw" style="opacity:0.8"></i>
</a>
</li>
<li class="nav-item rounded pr-1 pb-1 m-2" style="border:1px solid #1E4C57; background:#fff">
<a href="#acrylic" class="nav-link mt-n2 ml-n2 rounded p-2" style="border:1px solid #1E4C57; background:#C2E2EA; color:#1E4C57" data-toggle="tab">
<i class="fa-light fa-lightbulb fa-lg fa-fw" style="opacity:0.8"></i>
</a>
</li>
<li class="nav-item rounded pr-1 pb-1 m-2" style="border:1px solid #1E4C57; background:#fff">
<a href="#gouache" class="nav-link mt-n2 ml-n2 rounded p-2" style="border:1px solid #1E4C57; background:#A7D5E1; color:#1E4C57" data-toggle="tab">
<i class="fa-light fa-droplet fa-lg fa-fw" style="opacity:0.8"></i>
</a>
</li>
<li class="nav-item rounded pr-1 pb-1 m-2" style="border:1px solid #1E4C57; background:#fff">
<a href="#pastel" class="nav-link mt-n2 ml-n2 rounded p-2" style="border:1px solid #1E4C57; background:#8DC9D8; color:#1E4C57" data-toggle="tab">
<i class="fa-light fa-palette fa-lg fa-fw" style="opacity:0.8"></i>
</a>
</li>
<li class="nav-item rounded pr-1 pb-1 m-2" style="border:1px solid #1E4C57; background:#fff">
<a href="#charcoal" class="nav-link mt-n2 ml-n2 rounded p-2" style="border:1px solid #1E4C57; background:#72BBCE; color:#1E4C57" data-toggle="tab">
<i class="fa-light fa-cloud fa-lg fa-fw" style="opacity:0.8"></i>
</a>
</li>
</ul>
</div>
</div>
<!--===== END TAB NAVIGATION =====-->
<!--===== IV. side content; =====
> includes:
- character image
- one-liner quote
- decorative tags
this section uses:
[ #A7D5E1 ] for the image background color,
all accent colors for the tags, in order from lightest to darkest:
[ #DDEFF3 ]
[ #C2E2EA ]
[ #A7D5E1 ]
[ #8DC9D8 ]
[ #72BBCE ]
-->
<div class="col-sm-3 py-sm-4 pt-sm-5 mr-sm-n4 mb-sm-0 mb-3 order-1" style="position:relative; z-index:1">
<div class="flex-column h-100 align-items-sm-end align-items-center justify-content-center">
<div class="rounded pb-0 pr-2 w-100" style="border:1px solid; background:#fff">
<!--=== character image; ===
> the image utilizes [ background-blend-mode ] to color the b&w image. you can remove this or use a different blend mode: [ https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode ]
-->
<div class="rounded mt-n3 ml-n2" style="height:150px; border:1px solid #1E4C57;
background:#A7D5E1 url(IMG_URL) top center;
background-size:cover;
background-blend-mode:darken">
</div>
<!--=== END CHARACTER IMAGE ===-->
<p class="m-1 mr-n1 text-right font-italic text-truncate" style="font-size:0.85em">
short one-liner quote. will truncate if it gets too long.
</p>
</div>
<!--=== decorative tags ===-->
<div class="flex-row flex-wrap justify-content-center">
<div class="p-1 font-italic rounded" style="background:#DDEFF3; font-size:0.9em; margin:3px">
#tag
</div>
<div class="p-1 font-italic rounded" style="background:#C2E2EA; font-size:0.9em; margin:3px">
#longer tag
</div>
<div class="p-1 font-italic rounded" style="background:#A7D5E1; font-size:0.9em; margin:3px">
#tag
</div>
<div class="p-1 font-italic rounded" style="background:#8DC9D8; font-size:0.9em; margin:3px">
#tag
</div>
<div class="p-1 font-italic rounded" style="background:#72BBCE; font-size:0.9em; margin:3px">
#tag
</div>
</div>
<!--=== END DECORATIVE TAGS ===-->
</div>
</div>
<!--===== END SIDE CONTENT =====-->
</div>
<!--===== CREDITS; DO NOT REMOVE =====-->
<div class="px-sm-5 text-sm-right text-center">
<span class="px-sm-4 px-3 mr-1" style="font-size:0.75em; letter-spacing:1px">
<a href="https://toyhou.se/sharkadelic" class="text-reset"><i class="fa-duotone fa-fish mr-1"></i>by sharkadelic</a>
</span>
</div>
</div>