Profile
<!--==========================================
[14] DEITY by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
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!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
this code has a custom accent colour;
the easiest way to change it is to
mark the colour code below, and
then use ctrl+f to find and replace
all instances of it in the code.
accent :
#da314e
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!
===========================================-->
<!-- MAIN CONTAINER =======================-->
<div class="my-lg-5 mx-auto pt-5" style="max-width: 1000px;">
<!-- HEADER ===============================-->
<div class="mb-4 p-2" style="border: 3px solid #da314e;">
<div class="d-flex justify-content-center" style="position: relative; height: 150px;
background-image: url(IMAGE URL);
background-color: #da314e;
background-blend-mode: multiply;
/* header image - will blend with your accent colour. */;
background-size: cover; background-position: center; z-index: 1;">
<div class="p-2 card border-0 rounded-circle" style="margin: -33px 0;">
<img class="rounded-circle" style="height: 200px; width: 200px; background-color: #da314e; object-fit: cover; object-position: center;"
src="IMAGE URL">
<!-- icon. -->
</div>
</div>
</div>
<div class="row flex-lg-row-reverse">
<!-- FOCAL IMAGE (RIGHT) ==================-->
<div class="col-lg-5 flex-column">
<div class="flex-grow-1 flex-column mb-3" style="position: sticky; top: 25px; max-height: calc(100vh - 50px);">
<div class="flex-grow-1 mb-3 bg-faded" style="height: 500px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
<!-- MUSIC PLAYER =========================-->
<div class="row no-gutters align-items-center py-3 text-center" style="position: relative; color: #ffffff; background-color: #da314e;">
<div class="col-auto">
<hr class="m-0" style="width: 10px; border-top: 4px double #ffffff; opacity: .3;">
</div>
<div class="col-auto mx-3" style="font-family: 'Times New Roman', serif; font-size: 18px; letter-spacing: 1px;">
Song Title - Artist.
</div>
<div class="col">
<hr class="m-0" style="border-top: 4px double #ffffff; opacity: .3;">
</div>
<div class="col-auto mx-3" style="font-size: 12px;">
<i class="fas fa-music"></i>
</div>
<div style="position: absolute; height: 100%; width: 100%; overflow: hidden;">
<div style="position: absolute; top: -75px; left: -25%; height: 300px; width: 150%; opacity: .001;">
<iframe src="https://www.youtube.com/embed/vCXsRoyFRQE?controls=0" frameborder="0" style="height: 100%; width: 100%;"></iframe>
<!-- youtube embed - replace 'vCXsRoyFRQE' with your yt id, keep controls=0 at the end -->
</div>
</div>
</div>
</div>
</div>
<!-- MAIN PROFILE (LEFT) ==================-->
<div class="col-lg-7 flex-column">
<h1 class="mb-4 pb-3 px-2 text-uppercase font-italic" style="font-family: 'Times New Roman', serif; font-size: 28px; font-weight: 800; letter-spacing: 2px; color: #da314e; border-bottom: 3px solid #da314e;">
Name.
</h1>
<div class="card mb-4 p-1 pr-3 text-right font-italic rounded-0" style="font-size: 16px; border-width: 0 3px 0 0;">
a short character blurb. lorem ipsum dolor sit amet, consectetur adipiscing elit. praesent elementum pellentesque velit, quis sodales massa aliquam sed.
</div>
<!-- ABOUT SECTION ========================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
About.
</div>
<div class="col-auto ml-3">
I
</div>
</div>
<div class="mb-3" style="color: #da314e;">
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-hourglass-half mr-1"></i>
Age
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-venus-mars mr-1"></i>
Gender
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-paw mr-1"></i>
Species
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-hand-holding-magic mr-1"></i>
Dominion
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-balance-scale-left mr-1"></i>
Alignment
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-theater-masks mr-1"></i>
Role
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
</div>
<!-- BACKGROUND SECTION ===================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
Background.
</div>
<div class="col-auto ml-3">
II
</div>
</div>
<div class="mb-4 text-justify">
<p>
Aliquam vitae nunc lacus. Vivamus sagittis volutpat velit, sed porta arcu pretium et. Curabitur ut risus quis tellus fermentum dignissim in et justo. Integer vitae ex a libero viverra tincidunt quis non velit.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam id ex in arcu cursus pellentesque eget nec mi. Quisque a orci vel lectus congue blandit. Morbi cursus enim id massa tempor, eu blandit enim posuere.
</p>
</div>
<!-- APPEARANCE SECTION ===================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
Appearance.
</div>
<div class="col-auto ml-3">
III
</div>
</div>
<div class="row">
<div class="col-lg-6" style="color: #da314e;">
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-cut mr-1"></i>
Hair
</div>
<div class="col-auto text-right text-body">
color
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-head-side mr-1"></i>
Skin
</div>
<div class="col-auto text-right text-body">
color
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-eye mr-1"></i>
Eyes
</div>
<div class="col-auto text-right text-body">
color
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-ruler mr-1"></i>
Height
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-dumbbell mr-1"></i>
Build
</div>
<div class="col-auto text-right text-body">
content
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-end mb-3">
<div class="col font-italic" style="font-size: 16px; letter-spacing: 1px;">
<i class="fal fa-fw fa-pen-alt mr-1"></i>
Designer
</div>
<div class="col-auto text-right text-body">
<a href="DESIGNER URL" style="color: #da314e;">
content
</a>
</div>
</div>
<!--=======================================-->
</div>
<div class="col-lg-6 mb-2">
<!-- DESIGN NOTES =========================-->
<ul class="mb-0 pl-4">
<li class="mb-2">
Content
</li>
<li class="mb-2">
Content
</li>
<li class="mb-2">
Content
</li>
</ul>
</div>
</div>
<!-- PALETTE ==============================-->
<div class="row no-gutters mx-n1 mb-2" style="height: 20px;">
<div class="col mx-1" style="background-color: #ccc;"></div>
<div class="col mx-1" style="background-color: #aaa;"></div>
<div class="col mx-1" style="background-color: #999;"></div>
<div class="col mx-1" style="background-color: #777;"></div>
<div class="col mx-1" style="background-color: #555;"></div>
</div>
<!-- TEXT BLOCK ===========================-->
<div class="mb-4 text-justify">
<p>
Nullam nibh quam, eleifend sed gravida at, rutrum vitae est. Nunc consectetur, enim sed aliquam convallis, risus urna dapibus felis, quis egestas nisl nulla sed metus. Sed sit amet pretium nibh. Praesent maximus diam ut enim elementum, eget porta quam dignissim. Sed arcu arcu, hendrerit quis ligula vitae, mollis blandit sem. Curabitur maximus dui vulputate dolor gravida, a condimentum purus consectetur.
</p>
</div>
<!-- THEME SECTION ========================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
Theme.
</div>
<div class="col-auto ml-3">
IV
</div>
</div>
<div class="row no-gutters mx-n1 mb-2">
<!-- MOODBOARD ============================-->
<div class="col-6 px-1 mb-2">
<div style="height: 150px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
<div class="col-6 px-1 mb-2">
<div style="height: 150px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
<div class="col-6 px-1 mb-2">
<div style="height: 150px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
<div class="col-6 px-1 mb-2">
<div style="height: 150px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
</div>
<div class="card mb-4 p-1 pl-3 font-italic rounded-0" style="font-size: 16px; border-width: 0 0 0 3px;">
<p>
a list of themes, inspirations and aesthetics. content. content. content.
</p>
</div>
<!-- POWERS SECTION ==========================
> you can copy + paste more sections
here, but the left- and right-aligned
sections use different code. if you
want to add more, copy + paste in an
alternating pattern !
===========================================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
Powers.
</div>
<div class="col-auto ml-3">
V
</div>
</div>
<div class="mb-3">
<!--=======================================-->
<div class="row no-gutters align-items-center mb-3">
<div class="col">
<div class="card p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px;">
<p class="mb-2 font-italic" style="font-size: 18px; letter-spacing: 1px; color: #da314e;">
Title
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra cursus neque, id finibus leo maximus ut. Maecenas odio massa, sagittis vel urna non, varius dictum tortor. Suspendisse sodales fermentum justo, vel tempor mi vulputate vitae. Etiam ultrices justo eget tristique convallis. Sed sed dolor et massa ultricies aliquet.
</p>
</div>
</div>
<div class="col-auto ml-n5">
<i class="fal fa-shield-cross" style="font-size: 120px; transform: rotate(10deg); opacity: .15;"></i>
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-3 text-right">
<div class="col-auto mr-n5" style="position: relative; z-index: 1;">
<i class="fal fa-hand-holding-seedling" style="font-size: 120px; transform: rotate(-10deg); opacity: .15;"></i>
</div>
<div class="col">
<div class="card p-1 pr-3 rounded-0" style="border-width: 0 3px 0 0;">
<p class="mb-2 font-italic" style="font-size: 18px; letter-spacing: 1px; color: #da314e;">
Title
</p>
<p>
Quisque dolor ex, hendrerit sit amet sapien id, venenatis pellentesque odio. Etiam scelerisque massa leo, a auctor mauris rhoncus a. Suspendisse volutpat varius nulla, sit amet congue sem vehicula vitae. Nunc lobortis nec tortor sed tristique.
</p>
</div>
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-3">
<div class="col">
<div class="card p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px;">
<p class="mb-2 font-italic" style="font-size: 18px; letter-spacing: 1px; color: #da314e;">
Title
</p>
<p>
Etiam mollis lectus et aliquam dapibus. Mauris neque nisl, tempus non turpis non, pulvinar semper urna. Duis sit amet lectus non risus mattis vulputate et nec odio. Nam sollicitudin consequat nulla congue finibus. Duis commodo sem non augue efficitur, sit amet sagittis mauris luctus.
</p>
</div>
</div>
<div class="col-auto ml-n5">
<i class="fal fa-praying-hands" style="font-size: 120px; transform: rotate(10deg); opacity: .15;"></i>
</div>
</div>
<!-- MORE POWERS ABOVE HERE ! =============-->
</div>
<!-- DEMEANOR SECTION =====================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
Demeanor.
</div>
<div class="col-auto ml-3">
VI
</div>
</div>
<div class="mb-2 font-italic text-uppercase" style="font-size: 16px; letter-spacing: 1px; color: #da314e;">
<!-- PERSONALITY SLIDERS ==================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Instinctive
</div>
<div class="col-4 col-lg-6 mx-3">
<div class="progress rounded-0" style="height: 3px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 100%; background-color: transparent;"></div>
<div style="height: 9px; width: 9px; margin: -3px 0; border: 2px solid #da314e;"></div>
</div>
</div>
<div class="col text-truncate">
Calculated
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Cruel
</div>
<div class="col-4 col-lg-6 mx-3">
<div class="progress rounded-0" style="height: 3px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 100%; background-color: transparent;"></div>
<div style="height: 9px; width: 9px; margin: -3px 0; border: 2px solid #da314e;"></div>
</div>
</div>
<div class="col text-truncate">
Kind
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Deceptive
</div>
<div class="col-4 col-lg-6 mx-3">
<div class="progress rounded-0" style="height: 3px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 100%; background-color: transparent;"></div>
<div style="height: 9px; width: 9px; margin: -3px 0; border: 2px solid #da314e;"></div>
</div>
</div>
<div class="col text-truncate">
Sincere
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Unjust
</div>
<div class="col-4 col-lg-6 mx-3">
<div class="progress rounded-0" style="height: 3px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 100%; background-color: transparent;"></div>
<div style="height: 9px; width: 9px; margin: -3px 0; border: 2px solid #da314e;"></div>
</div>
</div>
<div class="col text-truncate">
Fair
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Indifferent
</div>
<div class="col-4 col-lg-6 mx-3">
<div class="progress rounded-0" style="height: 3px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 100%; background-color: transparent;"></div>
<div style="height: 9px; width: 9px; margin: -3px 0; border: 2px solid #da314e;"></div>
</div>
</div>
<div class="col text-truncate">
Emotional
</div>
</div>
<!--=======================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Reserved
</div>
<div class="col-4 col-lg-6 mx-3">
<div class="progress rounded-0" style="height: 3px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 100%; background-color: transparent;"></div>
<div style="height: 9px; width: 9px; margin: -3px 0; border: 2px solid #da314e;"></div>
</div>
</div>
<div class="col text-truncate">
Affectionate
</div>
</div>
<!--=======================================-->
</div>
<!-- TEXT BLOCK ===========================-->
<div class="mb-4 text-justify">
<p>
Fusce at lectus in sapien pellentesque vulputate. Vestibulum ullamcorper, leo sed faucibus elementum, leo justo semper lorem, in condimentum arcu nunc non dolor. Sed nec vulputate risus. Vivamus porttitor rutrum tortor nec iaculis. Etiam iaculis posuere leo fringilla volutpat. Etiam rhoncus auctor mi id euismod. Vestibulum orci sem, maximus vel facilisis a, scelerisque et lectus.
</p>
</div>
<!-- RELATIONSHIPS SECTION ===================
> you can copy + paste more
relationship blocks if you need !
===========================================-->
<div class="row no-gutters justify-content-between align-items-center mb-2 px-1" style="position: relative; font-family: 'Times New Roman', serif; font-size: 24px; font-weight: 800; letter-spacing: 2px;">
<hr class="m-0" style="position: absolute; top: 19px; left: 0; width: 100%; border-top: 4px double #da314e; opacity: .15;">
<div class="col-auto">
Relationships.
</div>
<div class="col-auto ml-3">
VII
</div>
</div>
<div class="text-justify">
<!--=======================================-->
<div class="card d-block mb-3 p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px;">
<div class="card mr-3 mb-1 p-1 rounded-0 float-left" style="border-width: 3px;">
<img src="IMAGE URL"
style="height: 100px; width: 100px; object-fit: cover; object-position: center;">
</div>
<p class="mb-2 font-italic" style="font-size: 18px; letter-spacing: 1px; ">
<a href="CHARACTER URL" style="color: #da314e;">
Name
</a>
(Relationship)
</p>
<p>
Morbi aliquam risus rhoncus augue posuere iaculis. Donec tellus sapien, vulputate at consectetur et, tincidunt ut diam. Donec ante felis, aliquam at ipsum vitae, faucibus placerat massa. Sed a porttitor erat. Cras malesuada mauris urna, ornare sodales ligula facilisis nec. Sed bibendum faucibus lorem, in ullamcorper libero pharetra at. Phasellus scelerisque ultricies tellus sed fermentum.
</p>
</div>
<!--=======================================-->
<div class="card d-block mb-3 p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px;">
<div class="card mr-3 mb-1 p-1 rounded-0 float-left" style="border-width: 3px;">
<img src="IMAGE URL"
style="height: 100px; width: 100px; object-fit: cover; object-position: center;">
</div>
<p class="mb-2 font-italic" style="font-size: 18px; letter-spacing: 1px; ">
<a href="CHARACTER URL" style="color: #da314e;">
Name
</a>
(Relationship)
</p>
<p>
Morbi efficitur eleifend porta. Cras nec nulla fringilla, fermentum odio eget, luctus libero. Aliquam condimentum ex viverra arcu sollicitudin eleifend. Sed pellentesque, erat ac blandit faucibus, nunc nisi molestie quam, a tempor nisl est a purus.
</p>
</div>
<!--=======================================-->
<div class="card d-block mb-3 p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px;">
<div class="card mr-3 mb-1 p-1 rounded-0 float-left" style="border-width: 3px;">
<img src="IMAGE URL"
style="height: 100px; width: 100px; object-fit: cover; object-position: center;">
</div>
<p class="mb-2 font-italic" style="font-size: 18px; letter-spacing: 1px; ">
<a href="CHARACTER URL" style="color: #da314e;">
Name
</a>
(Relationship)
</p>
<p>
Curabitur felis eros, semper vel dolor in, pharetra faucibus lorem. Mauris blandit sapien vitae turpis dapibus pellentesque. Ut et ex elit. Proin non sodales lorem, at accumsan quam. Aenean vitae enim ac sem iaculis maximus. Ut suscipit mi nulla, vel dictum erat feugiat quis. Mauris non feugiat nulla. Pellentesque elit orci, dignissim id risus eget, eleifend mollis sem.
</p>
</div>
<!-- MORE RELATIONSHIPS ABOVE HERE ! ======-->
</div>
<!-- CREDIT ===============================-->
<p class="mt-auto mb-3 px-2 pb-3 text-right" style="border-bottom: 3px solid #da314e;">
<a href="https://toyhou.se/Togo" style="color: #da314e;">
<i class="far fa-code"></i>
</a>
</p>
</div>
</div>
</div>
Recent Images
No images.