Profile
<!--==========================================
[26] BLENDED by TOGO,
8BYTE & SPARKLYCODES
-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - i've also
added comments for light code edits you
may want to do. feel free to change
any elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments.
thank you!
===========================================-->
<!-- MAIN CONTAINER =======================-->
<div class="my-2 my-lg-5 pr-lg-5 pl-lg-3 mx-auto" style="max-width: 1050px;">
<div class="bg-faded py-3 py-lg-5 px-3 px-lg-0" style="position: relative; border-radius: 25px;">
<!-- BACKGROUND IMAGE =====================-->
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 25px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
<div class="d-none d-lg-block" style="position: absolute; top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; border: 4px solid #fff; border-radius: 20px; opacity: .3;"></div>
<div class="row no-gutters mr-lg-n5 ml-lg-n3">
<div class="col-lg-auto pr-lg-3">
<div class="row d-lg-block mx-n1 mb-n2 py-lg-3" style="min-width: 4rem;">
<!-- PALETTE (RIGHT) =========================
> you can delete or copy + paste until you
get the amount of palette blocks you need.
> replace 'background-color' with your own
hexcode to change the colour.
===========================================-->
<div class="col col-lg-auto mb-3 px-1">
<div class="w-100 shadow" style="padding-bottom: 100%;
background-color: #cccccc;
border-radius: 10px;"></div>
</div>
<!------------------------------------------->
<div class="col col-lg-auto mb-3 px-1">
<div class="w-100 shadow" style="padding-bottom: 100%;
background-color: #aaaaaa;
border-radius: 10px;"></div>
</div>
<!------------------------------------------->
<div class="col col-lg-auto mb-3 px-1">
<div class="w-100 shadow" style="padding-bottom: 100%;
background-color: #999999;
border-radius: 10px;"></div>
</div>
<!------------------------------------------->
<div class="col col-lg-auto mb-3 px-1">
<div class="w-100 shadow" style="padding-bottom: 100%;
background-color: #777777;
border-radius: 10px;"></div>
</div>
<!------------------------------------------->
<div class="col col-lg-auto mb-3 px-1">
<div class="w-100 shadow" style="padding-bottom: 100%;
background-color: #555555;
border-radius: 10px;"></div>
</div>
<!------------------------------------------->
<div class="col col-lg-auto mb-3 px-1">
<div class="w-100 shadow" style="padding-bottom: 100%;
background-color: #333333;
border-radius: 10px;"></div>
</div>
<!-- more palette blocks above this line. --->
</div>
</div>
<div class="col-lg">
<div class="card p-3 shadow" style="border-radius: 15px;">
<div class="row mx-n2">
<!-- SIDEBAR (RIGHT) ======================-->
<div class="order-lg-2 col-lg-3 flex-column px-2">
<!-- ICON =================================-->
<img class="mt-3 mx-auto mb-4 bg-faded"
src="IMAGE URL" style="width: 200px; max-width: 100%; border-radius: 10px;">
<!-- 200px x 200px looks best. -->
<!-- FIELDS ===============================-->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-signature"></i>
</div>
<div style="letter-spacing: 1px;">
Name
</div>
</div>
<!------------------------------------------->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-birthday-cake"></i>
</div>
<div style="letter-spacing: 1px;">
Age
</div>
</div>
<!------------------------------------------->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-venus-mars"></i>
</div>
<div style="letter-spacing: 1px;">
Gender
</div>
</div>
<!------------------------------------------->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-dna"></i>
</div>
<div style="letter-spacing: 1px;">
Race (or species)
</div>
</div>
<!------------------------------------------->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-heart"></i>
</div>
<div style="letter-spacing: 1px;">
Orientation
</div>
</div>
<!------------------------------------------->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-briefcase"></i>
</div>
<div style="letter-spacing: 1px;">
Occupation
</div>
</div>
<!------------------------------------------->
<div class="flex-row align-items-center mb-2">
<div class="d-flex justify-content-center align-items-center mr-2 text-muted bg-faded rounded" style="height: 35px; width: 35px;">
<i class="fal fa-tag"></i>
</div>
<div style="letter-spacing: 1px;">
Status (or value)
</div>
</div>
<!-- CREDIT - DO NOT REMOVE ===============-->
<div class="flex-row align-items-center mt-auto mb-3 mb-lg-0 pr-2 bg-faded" style="height: 35px; border-radius: 5px 5px 10px 5px;">
<div class="mr-auto text-center" style="width: 35px;">
<a href="https://toyhou.se/18679190.-26-blended"><i class="fal fa-code"></i></a>
</div>
<a href="/8byte" class="text-muted"><i class="fal fa-crow fa-fw ml-1"></i></a>
<a href="/SparklyCodes" class="text-muted"><i class="fal fa-sparkles fa-fw ml-1"></i></a>
<a href="/Togo" class="text-muted"><i class="fal fa-coffee-togo fa-fw ml-1"></i></a>
</div>
</div>
<!-- MAIN CONTENT =========================-->
<div class="col-lg-9 order-lg-1 px-2">
<div class="pr-2" style="max-height: 600px; overflow-y: auto;">
<div style="overflow-x: hidden;">
<div class="row no-gutters mx-n1 mb-2">
<div class="col-auto px-1">
<!-- ABOUT ================================-->
<div class="d-flex justify-content-center align-items-center text-white bg-secondary" style="height: 60px; width: 60px; font-size: 36px; border-radius: 10px 5px 5px 5px;">
<i class="fat fa-feather-alt" style="opacity: .8;"></i>
<!-- swap this out with an icon that fits your character! -->
</div>
</div>
<div class="col px-1">
<div class="d-flex align-items-center h-100 px-3 font-italic bg-faded" style="font-size: 24px; font-weight: 300; letter-spacing: 1px; border-radius: 5px; opacity: .7;">
<span style="margin-bottom: 2px;">ABOUT</span>
</div>
</div>
</div>
<div class="d-flex d-lg-block flex-column">
<!-- PAGEDOLL (RIGHT) =====================-->
<div class="mt-lg-n3 mx-auto float-right" style="width: 250px; position: relative; z-index: 1;">
<img class="mt-lg-n5"
src="IMAGE URL">
</div>
<!-- TEXT BLOCK ===========================-->
<p>
Some text about your character goes here. This section will grow with content. <b>Bold</b> <i>italic</i> <u>underline</u> <s>strikethrough</s> <a href="#">link</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel ex lacinia neque mollis euismod.
</p>
<div class="mt-2 mb-3 pl-3" style="position: relative;">
<div class="card d-block" style="position: absolute; top: .75rem; right: 2rem; bottom: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; opacity: .4;"></div>
<div style="position: relative; z-index: 1;">
<!-- QUOTE BLOCK ==========================-->
<p class="mb-2 text-uppercase font-italic text-muted" style="font-size: 16px; letter-spacing: 1px;">
"A quote. Lorem ipsum dolor sit amet."
</p>
<p>
Nam sit amet bibendum mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec non scelerisque sem, id tempor lorem. Curabitur dictum arcu et est egestas, id rhoncus leo mollis. Suspendisse potenti. Integer eget sodales tortor. Proin nunc metus, fermentum eu lacinia vel, accumsan sit amet purus. Donec ullamcorper, nunc vitae convallis viverra, purus odio gravida orci, et semper ipsum lectus ac sem. Duis interdum laoreet justo quis gravida. Fusce fringilla tristique felis, at consectetur felis feugiat nec.
</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
<div class="row no-gutters mx-n1 mb-2">
<div class="col px-1">
<!-- PERSONALITY ==========================-->
<div class="d-flex align-items-center h-100 px-3 font-italic bg-faded" style="font-size: 24px; font-weight: 300; letter-spacing: 1px; border-radius: 5px; opacity: .7;">
<span style="margin-bottom: 2px;">PERSONALITY</span>
</div>
</div>
<div class="col-auto px-1">
<div class="d-flex justify-content-center align-items-center text-white bg-secondary" style="height: 60px; width: 60px; font-size: 36px; border-radius: 5px;">
<i class="fat fa-head-side-brain" style="opacity: .8;"></i>
</div>
</div>
</div>
<div class="row mx-n2">
<div class="col-lg-4 flex-column px-2">
<!-- STATS ================================-->
<div class="mb-2 text-uppercase font-italic text-muted bg-faded" style="font-size: 16px; letter-spacing: 1px; border-radius: 5px;">
<div class="d-flex align-items-center py-2 px-3">
<span>
Charisma
<!-- stat name. -->
</span>
<span class="ml-auto" style="font-size: 12px;">
50%
<!-- percentage on the right. -->
</span>
</div>
<div class="progress" style="height: 5px; border-radius: 0 0 5px 5px;">
<div class="progress-bar bg-secondary"
style="width: 50%;">
<!-- progress bar width - should match the percentage on the right. -->
</div>
</div>
</div>
<!------------------------------------------->
<div class="mb-2 text-uppercase font-italic text-muted bg-faded" style="font-size: 16px; letter-spacing: 1px; border-radius: 5px;">
<div class="d-flex align-items-center py-2 px-3">
<span>
Intelligence
</span>
<span class="ml-auto" style="font-size: 12px;">
50%
</span>
</div>
<div class="progress" style="height: 5px; border-radius: 0 0 5px 5px;">
<div class="progress-bar bg-secondary"
style="width: 50%;">
</div>
</div>
</div>
<!------------------------------------------->
<div class="mb-2 text-uppercase font-italic text-muted bg-faded" style="font-size: 16px; letter-spacing: 1px; border-radius: 5px;">
<div class="d-flex align-items-center py-2 px-3">
<span>
Creativity
</span>
<span class="ml-auto" style="font-size: 12px;">
50%
</span>
</div>
<div class="progress" style="height: 5px; border-radius: 0 0 5px 5px;">
<div class="progress-bar bg-secondary"
style="width: 50%;">
</div>
</div>
</div>
<!------------------------------------------->
<div class="mb-2 text-uppercase font-italic text-muted bg-faded" style="font-size: 16px; letter-spacing: 1px; border-radius: 5px;">
<div class="d-flex align-items-center py-2 px-3">
<span>
Patience
</span>
<span class="ml-auto" style="font-size: 12px;">
50%
</span>
</div>
<div class="progress" style="height: 5px; border-radius: 0 0 5px 5px;">
<div class="progress-bar bg-secondary"
style="width: 50%;">
</div>
</div>
</div>
<!-- VIBE ====================================
> a mini character blurb - summarize their
character in just a couple words.
===========================================-->
<div class="flex-grow-1 flex-column justify-content-center align-items-center py-4 px-2 text-center bg-faded" style="position: relative; letter-spacing: 1px; border-radius: 5px;">
<i class="fal fa-search text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Vibe
</p>
<p>
just a little guy.
</p>
</div>
</div>
<div class="col-lg-8 px-2">
<div class="mt-2 mr-2 mb-n4 pb-2" style="position: relative;">
<div class="card d-block" style="position: absolute; top: 0; right: 0; bottom: .6rem; left: 0; border-width: 0 2px 2px 0; border-radius: 0 0 10px 0; opacity: .4;"></div>
<div class="pr-3 pb-4" style="position: relative; z-index: 1;">
<!-- TEXT BLOCK ===========================-->
<p>
Fusce non enim est. Mauris vestibulum, neque ac pretium interdum, tortor magna finibus turpis, vitae maximus lacus nisl quis turpis. Praesent vel sem sit amet tellus scelerisque pretium. Donec congue metus ut neque ultrices pretium. Morbi vulputate eleifend sem, a lobortis massa elementum quis. Duis pretium porttitor ex, eu tempor dolor euismod id. Morbi commodo erat risus, a mattis mauris accumsan in. Morbi condimentum augue non odio volutpat tempus. Donec ante augue, dapibus ac mi at, aliquet egestas ipsum.
</p>
</div>
</div>
<div class="row mx-n2">
<div class="col-lg-4 px-2">
<p class="mb-2 font-italic text-uppercase text-muted" style="font-size: 16px; letter-spacing: 1px;">
Likes
</p>
<ul class="fa-ul ml-4 mb-3">
<!-- LIKES ================================-->
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-check"></i></span>
like
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-check"></i></span>
like
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-check"></i></span>
like
</li>
<!-- more likes above this line. ------------>
</ul>
</div>
<div class="col-lg-4 px-2">
<p class="mb-2 font-italic text-uppercase text-muted" style="font-size: 16px; letter-spacing: 1px;">
Dislikes
</p>
<ul class="fa-ul ml-4 mb-3">
<!-- DISLIKES =============================-->
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-times"></i></span>
dislike
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-times"></i></span>
dislike
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-times"></i></span>
dislike
</li>
<!-- more dislikes above this line. --------->
</ul>
</div>
<div class="col-lg-4 px-2">
<p class="mb-2 font-italic text-uppercase text-muted" style="font-size: 16px; letter-spacing: 1px;">
Hobbies
</p>
<ul class="fa-ul ml-4 mb-3">
<!-- HOBBIES ==============================-->
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-plus"></i></span>
hobby
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-plus"></i></span>
hobby
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-plus"></i></span>
hobby
</li>
<!-- more hobbies above this line. ---------->
</ul>
</div>
</div>
</div>
</div>
<div class="row mt-2 mx-n1">
<!-- AESTHETIC ============================-->
<div class="col-6 col-lg-3 px-1 mb-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 5px;"></div>
</div>
<!------------------------------------------->
<div class="col-6 col-lg-3 px-1 mb-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: bottom; border-radius: 5px;"></div>
</div>
<!------------------------------------------->
<div class="col-6 col-lg-3 px-1 mb-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 5px;"></div>
</div>
<!------------------------------------------->
<div class="col-6 col-lg-3 px-1 mb-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 5px;"></div>
</div>
<!------------------------------------------->
</div>
<div class="row no-gutters mx-n1 mb-2">
<div class="col-auto px-1">
<div class="d-flex justify-content-center align-items-center text-white bg-secondary" style="height: 60px; width: 60px; font-size: 36px; border-radius: 5px;">
<i class="fat fa-paperclip" style="opacity: .8;"></i>
</div>
</div>
<div class="col px-1">
<div class="d-flex align-items-center h-100 px-3 font-italic bg-faded" style="font-size: 24px; font-weight: 300; letter-spacing: 1px; border-radius: 5px; opacity: .7;">
<span style="margin-bottom: 2px;">TRIVIA</span>
</div>
</div>
</div>
<div class="row mx-n2">
<div class="col-lg-7 px-2">
<div class="mt-2 ml-2" style="position: relative;">
<div class="card d-block" style="position: absolute; top: 0; right: 0; bottom: .6rem; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 10px; opacity: .4;"></div>
<div style="position: relative; z-index: 1;">
<ul class="fa-ul ml-3 mb-3">
<!-- TRIVIA ===============================-->
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-angle-right"></i></span>
lorem ipsum dolor sit amet, consectetur adipiscing elit - sed elementum nec augue eget cursus, etiam massa mi, vehicula in diam a, semper viverra nibh
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-angle-right"></i></span>
in pellentesque, ex at congue euismod, metus ante finibus metus, at tempus enim dolor id risus - aenean eleifend arcu non semper scelerisque
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-angle-right"></i></span>
aenean dapibus egestas rhoncus, phasellus ligula erat, auctor varius risus
</li>
<!-- more trivia above this line. ----------->
</ul>
<p class="mt-n2 ml-2 mb-2 text-uppercase font-italic text-muted" style="font-size: 16px; letter-spacing: 1px;">
Design Notes
</p>
</div>
</div>
<ul class="fa-ul ml-4 mb-3">
<!-- DESIGN NOTES =========================-->
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-plus"></i></span>
quisque eget eros finibus, feugiat ante in
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-plus"></i></span>
vivamus posuere, elit eu varius vulputate, eros nisi porta urna
</li>
<li class="mb-2"><span class="fa-li text-muted"><i class="far fa-plus"></i></span>
euismod turpis nisi a nisi - vivamus semper non erat et pellentesque
</li>
<!-- more design notes above this line. ----->
</ul>
</div>
<div class="col-lg-5 px-2">
<div class="row mx-n1 text-center" style="letter-spacing: 1px;">
<!-- FAVORITES ============================-->
<div class="col-6 mb-2 px-1">
<div class="flex-column justify-content-center align-items-center py-4 px-2 bg-faded" style="position: relative; border-radius: 5px;">
<i class="fal fa-palette text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Color
</p>
<p>
content
</p>
</div>
</div>
<!------------------------------------------->
<div class="col-6 mb-2 px-1">
<div class="flex-column justify-content-center align-items-center py-4 px-2 bg-faded" style="position: relative; border-radius: 5px;">
<i class="fal fa-clothes-hanger text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Style
</p>
<p>
content
</p>
</div>
</div>
<!------------------------------------------->
<div class="col-6 mb-2 px-1">
<div class="flex-column justify-content-center align-items-center py-4 px-2 bg-faded" style="position: relative; border-radius: 5px;">
<i class="fal fa-bowl-hot text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Food
</p>
<p>
content
</p>
</div>
</div>
<!------------------------------------------->
<div class="col-6 mb-2 px-1">
<div class="flex-column justify-content-center align-items-center py-4 px-2 bg-faded" style="position: relative; border-radius: 5px;">
<i class="fal fa-glass-citrus text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Drink
</p>
<p>
content
</p>
</div>
</div>
<!------------------------------------------->
<div class="col-6 mb-2 px-1">
<div class="flex-column justify-content-center align-items-center py-4 px-2 bg-faded" style="position: relative; border-radius: 5px;">
<i class="fal fa-sun-cloud text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Season
</p>
<p>
content
</p>
</div>
</div>
<!------------------------------------------->
<div class="col-6 mb-2 px-1">
<div class="flex-column justify-content-center align-items-center py-4 px-2 bg-faded" style="position: relative; border-radius: 5px;">
<i class="fal fa-clock text-muted" style="position: absolute; font-size: 56px; opacity: .1;"></i>
<p class="mb-0 font-italic text-uppercase text-muted">
Time of Day
</p>
<p>
content
</p>
</div>
</div>
<!------------------------------------------->
</div>
</div>
</div>
<div class="row no-gutters mx-n1 mb-2">
<div class="col px-1">
<div class="d-flex align-items-center h-100 px-3 font-italic bg-faded" style="font-size: 24px; font-weight: 300; letter-spacing: 1px; border-radius: 5px; opacity: .7;">
<span style="margin-bottom: 2px;">RELATIONSHIPS</span>
</div>
</div>
<div class="col-auto px-1">
<div class="d-flex justify-content-center align-items-center text-white bg-secondary" style="height: 60px; width: 60px; font-size: 36px; border-radius: 5px;">
<i class="fat fa-hand-holding-heart" style="opacity: .8;"></i>
</div>
</div>
</div>
<div class="row mx-n2">
<!-- RELATIONSHIPS ========================-->
<!-- relationship template. copy+paste as many as you need! -->
<div class="col-lg-6 mb-3 px-2">
<div class="card d-block" style="position: absolute; top: 0; right: 0; bottom: 0; left: 1rem; border-width: 0 0 0 2px; border-radius: 0; opacity: .4;"></div>
<div style="position: relative; z-index: 1;">
<div class="row no-gutters mb-2">
<div class="col-auto mr-3">
<div class="bg-faded" style="height: 100px; width: 100px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 5px;"></div>
</div>
<div class="col align-self-center">
<p class="mb-0 font-italic text-uppercase" style="font-size: 18px; letter-spacing: 1px;">
<a href="CHARACTER URL" class="text-muted">
Name
</a>
</p>
<p class="mb-0 text-muted" style="font-size: 28px; letter-spacing: -2px; opacity: .2;">
<!-- affection level. use fas for filled heart / fal for empty. -->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
<p class="pl-2" style="margin-top: -44px; letter-spacing: 1px;">
relationship
</p>
</div>
</div>
<p class="mb-2 pl-4">
Relationship blurb. Vivamus aliquet tincidunt massa porttitor posuere. Sed finibus lectus augue, vitae interdum diam vehicula a. Praesent sit amet lacus sit amet dolor posuere posuere.
</p>
</div>
</div>
<!-- more relationships above this line. ---->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.