Profile
<!--==========================================
[22] FIGHTER 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 :
#c98740
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> 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="p-4 bg-faded" style="margin: 50px -15px;">
<div class="mx-auto" style="max-width: 1200px;">
<div class="row">
<!-- SIDEBAR IMAGE (LEFT) =================-->
<div class="col-lg-5 mb-5 mb-lg-0">
<img class="w-100" style="height: 700px; margin: -50px 0; border-radius: 15px; box-shadow: 0 0 15px rgba(0,0,0,.2); object-fit: cover; object-position: center;"
src="IMAGE URL">
<!-- will auto-crop. a portrait looks best! -->
</div>
<!-- PROFILE CONTENT (RIGHT) ==============-->
<div class="col-lg-7 mt-4 mt-lg-0">
<div class="d-block d-lg-flex flex-column" style="overflow-x: hidden;">
<div style="position: relative; flex: 0 0 600px; min-height: 600px; margin-right: -17px; padding-right: 17px; overflow-y: auto; scroll-behavior: smooth;">
<div style="overflow-x: hidden;">
<!-- HEADER ===============================-->
<div class="card flex-row align-items-center mb-3 p-4" style="border-radius: 40px 40px 0 0;">
<div class="flex-grow-1 mr-4">
<h1 class="mb-0 text-uppercase" style="font-size: 24px; font-weight: 300; letter-spacing: 2px;">
<span style="color: #c98740;">N</span>ame <span style="color: #c98740;">S</span>urname
<!-- name - make sure to separate the first letters like above. -->
</h1>
<hr class="my-3">
<div class="d-flex text-monospace text-uppercase" style="letter-spacing: 2px;">
<span class="mr-1 text-muted" style="opacity: .6;">[</span>
LVL. 1
<span class="ml-1 mr-2 text-muted" style="opacity: .6;">]</span>
CLASS
</div>
</div>
<i class="fa-thin fa-crown mx-lg-2" style="font-size: 60px; color: #c98740; opacity: .3;"></i>
<!-- icon - change fa-crown to another fontawesome icon. -->
</div>
</div>
<!-- NAVIGATION ===========================-->
<div class="d-none d-lg-flex card flex-row justify-content-center mb-3 p-3 text-monospace text-uppercase text-muted rounded-0" style="position: sticky; top: 0; letter-spacing: 2px; z-index: 1;">
[<a href="#about" class="mx-2" style="color: #c98740;">About</a>|
<a href="#combat" class="mx-2" style="color: #c98740;">Combat</a>|
<a href="#personality" class="mx-2" style="color: #c98740;">Personality</a>|
<a href="#design" class="mx-2" style="color: #c98740;">Design</a>|
<a href="#trivia" class="mx-2" style="color: #c98740;">Trivia</a>]
</div>
<div style="overflow-x: hidden;">
<!-- ABOUT SECTION ========================-->
<div id="about" style="position: relative; top: -70px;"></div>
<div class="row mx-n2">
<div class="col-lg-5 px-2">
<div class="card mb-3 pt-3 pr-4 pb-2 rounded-0" style="letter-spacing: 1px;">
<!-- FIELDS ===============================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-pen-line"></i>
</div>
</div>
</div>
<div class="col">
Full name (or nickname)
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-birthday-cake"></i>
</div>
</div>
</div>
<div class="col">
Age
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-venus-mars"></i>
</div>
</div>
</div>
<div class="col">
Pronouns
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-heart"></i>
</div>
</div>
</div>
<div class="col">
Orientation
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-user"></i>
</div>
</div>
</div>
<div class="col">
Species (or race)
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-thumbtack"></i>
</div>
</div>
</div>
<div class="col">
Role
</div>
</div>
<!--=======================================-->
</div>
</div>
<div class="col-lg-7 d-block d-lg-flex flex-column px-2">
<!-- ABOUT ================================-->
<div class="card mb-3 rounded-0" style="flex: 0 0 362px; border-top: 5px solid #c98740;">
<div class="pt-3 px-4 pb-4" style="flex: 1 1 0; min-height: 250px; overflow-y: auto;">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; color: #c98740;">
About
</p>
<p>
This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin feugiat efficitur quam nec feugiat. In non bibendum neque.
</p>
<p>
Cras lacus eros, laoreet quis tristique eu, facilisis et ligula. Morbi et nulla efficitur, iaculis ex ut, dignissim purus. Donec semper neque ac enim rutrum pretium. Nunc vehicula, ligula sit amet accumsan.
</p>
</div>
<hr class="w-100 mt-0 mb-3">
<div class="row mt-auto">
<div class="col-auto align-self-end">
<div class="card bg-faded border-left-0 border-bottom-0 rounded-0" style="margin: 0 0 -1px -1px; padding: 12px 12px 1px 1px; border-radius: 0 45px 0 0;">
<!-- MUSIC PLAYER =========================-->
<div class="d-flex justify-content-center align-items-center text-white" style="position: relative; height: 50px; width: 50px; background-color: #c98740; border-radius: 0 30px 0 0; overflow: hidden;">
<i class="fa-light fa-play" style="font-size: 24px;"></i>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
<iframe width="700" height="500"
src="https://www.youtube.com/embed/IWmsJ5vu7Fg?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;"></iframe>
<!-- youtube embed - replace 'IWmsJ5vu7Fg' with your yt id, keep ?controls=0 at the end. -->
</div>
</div>
</div>
</div>
<div class="col">
<!-- QUOTE ================================-->
<p class="mb-3 pr-4 text-right font-italic text-uppercase" style="font-size: 16px; letter-spacing: 2px; color: #c98740;">
"A quote or tagline. Lorem ipsum dolor sit amet."
</p>
</div>
</div>
</div>
</div>
</div>
<!-- COMBAT SECTION =======================-->
<div id="combat" style="position: relative; top: -70px;"></div>
<div class="row mx-n2">
<div class="col-lg-4 flex-column px-2">
<!-- FIGHTING STYLE =======================-->
<div class="card flex-grow-1 mb-3 pt-3 px-4 pb-4 rounded-0" style="border-top: 5px solid #c98740;">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; color: #c98740;">
Combat
</p>
<p>
A little blurb about their combat style. Sed id libero quis dui sodales maximus quis porttitor lectus. Nam sollicitudin tincidunt nisl.
</p>
<!-- STATS ================================-->
<div class="mt-auto pt-2 text-uppercase">
<div class="d-flex mt-2">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
ATK
</span>
<span style="color: #c98740;">
<!-- stat points. use fas for filled / fal for empty circle. -->
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mt-2">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
DEF
</span>
<span style="color: #c98740;">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mt-2">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
SPD
</span>
<span style="color: #c98740;">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mt-2">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
MAG
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
</div>
</div>
</div>
<div class="col-lg-8 flex-column px-2">
<!-- ABILITIES / SKILLS ======================
> you can copy + paste as many
abilities as you need.
> meant to hold very little text. they
won't scroll.
> at an even number, they'll be 50% width
by default. if you'd like full width
blocks, change flex: 50% 1 0; to
flex: 100% 1 0;
> items work the same way.
===========================================-->
<div class="card flex-grow-1 flex-row flex-wrap mb-3 rounded-0" style="border-width: 0 0 1px 1px;">
<!-- ABILITY TEMPLATE =====================-->
<div class="card d-block p-4 rounded-0" style="flex: 50% 1 0; min-width: 50%; border-width: 1px 1px 0 0;">
<div class="row no-gutters align-items-center mb-2 pb-1">
<div class="col-auto">
<i class="fa-light fa-swords fa-fw" style="margin-right: 10px; font-size: 22px; color: #c98740;"></i>
</div>
<div class="col">
<p class="text-monospace text-uppercase" style="margin-top: -3px; font-size: 16px; letter-spacing: 1px; opacity: .6;">
Ability name
</p>
</div>
</div>
<p>
Ability description - these should be pretty short.
</p>
</div>
<!------------------------------------------->
<!-- MORE ABILITIES ABOVE THIS LINE =======-->
</div>
<!-- ITEMS ================================-->
<div class="card flex-grow-1 flex-row flex-wrap mb-3 rounded-0" style="border-width: 0 0 1px 1px;">
<!-- ITEM TEMPLATE ========================-->
<div class="card d-block p-4 rounded-0" style="flex: 50% 1 0; min-width: 50%; border-width: 1px 1px 0 0;">
<div class="row no-gutters align-items-center mb-2 pb-1">
<div class="col-auto">
<i class="fa-light fa-axe-battle fa-fw" style="margin-right: 10px; font-size: 22px; color: #c98740;"></i>
</div>
<div class="col">
<p class="text-monospace text-uppercase" style="margin-top: -3px; font-size: 16px; letter-spacing: 1px; opacity: .6;">
Item name
</p>
</div>
</div>
<p>
Item description.
</p>
</div>
<!------------------------------------------->
<!-- MORE ITEMS ABOVE THIS LINE ===========-->
</div>
</div>
</div>
<!-- PERSONALITY SECTION ==================-->
<div id="personality" style="position: relative; top: -70px;"></div>
<div class="row mx-n2">
<div class="col-lg-5 flex-column px-2">
<div class="card mb-3 pt-4 px-4 pb-2 text-uppercase rounded-0">
<!-- STATS ================================-->
<div class="d-flex mb-3">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
Intelligence
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mb-3">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
Confidence
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mb-3">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
Charisma
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mb-3">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
Creativity
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mb-3">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
Empathy
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
<div class="d-flex mb-3">
<span class="mr-auto text-monospace" style="letter-spacing: 1px;">
Humour
</span>
<span style="color: #c98740">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<!------------------------------------------->
</div>
</div>
<div class="col-lg-7 flex-column px-2">
<!-- PERSONALITY ==========================-->
<div class="card flex-grow-1 mb-3 pt-3 px-4 pb-4 rounded-0" style="max-height: 260px; border-top: 5px solid #c98740; overflow-y: auto;">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; color: #c98740;">
Personality
</p>
<p>
This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros neque.
</p>
<hr class="w-100 mt-0 mb-3">
<p class="text-monospace text-center text-uppercase" style="letter-spacing: 1px;">
TRAIT | TRAIT | TRAIT
</p>
<hr class="w-100 mt-0 mb-3">
<p>
Maecenas volutpat elit orci, eu luctus odio hendrerit a. Phasellus orci enim, suscipit et mauris hendrerit.
</p>
</div>
</div>
</div>
<!-- DESIGN SECTION =======================-->
<div id="design" style="position: relative; top: -70px;"></div>
<div class="row mx-n2">
<div class="col-lg-auto mb-3 px-2">
<!-- PALETTE ==============================-->
<div class="card h-100 flex-row flex-lg-column p-2 rounded-0">
<!-- palette blocks - you can copy + paste as many as you need. -->
<div class="flex-grow-1 p-2" style="background-color: #ccc;"></div>
<div class="flex-grow-1 p-2" style="background-color: #aaa;"></div>
<div class="flex-grow-1 p-2" style="background-color: #999;"></div>
<div class="flex-grow-1 p-2" style="background-color: #777;"></div>
<div class="flex-grow-1 p-2" style="background-color: #555;"></div>
</div>
</div>
<div class="col-lg-6 mb-3 px-2">
<!-- IMAGE ================================-->
<div class="card h-100 p-2 rounded-0">
<div class="h-100" style="min-height: 300px;
background-image: url(IMAGE URL);
background-size: cover; background-position: top;"></div>
</div>
</div>
<div class="col-lg px-2">
<div class="card mb-3 pt-3 pr-4 pb-2 rounded-0" style="letter-spacing: 1px;">
<!-- DESIGN FIELDS ========================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-ruler-vertical"></i>
</div>
</div>
</div>
<div class="col">
Height
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-weight-scale"></i>
</div>
</div>
</div>
<div class="col">
Weight
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto mr-3">
<div class="card bg-faded border-left-0" style="margin-left: -1px; padding: 8px 8px 8px 1px; border-radius: 0 25px 25px 0;">
<div class="d-flex justify-content-center align-items-center text-white" style="height: 30px; width: 30px; background-color: #c98740; border-radius: 0 15px 15px 0;">
<i class="fa-light fa-person"></i>
</div>
</div>
</div>
<div class="col">
Build
</div>
</div>
<!------------------------------------------->
</div>
<!-- DESIGN NOTES =========================-->
<div class="card mb-3 pt-3 px-4 pb-4 rounded-0" style="max-height: 300px; border-top: 5px solid #c98740; overflow-y: auto;">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; color: #c98740;">
Design Notes
</p>
<ul class="mb-n2 ml-3 pl-1">
<li class="mb-2">
Content
</li>
<li class="mb-2">
Content
</li>
<li class="mb-2">
Content
</li>
</ul>
</div>
</div>
</div>
<!-- TRIVIA SECTION =======================-->
<div id="trivia" style="position: relative; top: -70px;"></div>
<div class="row mx-n2">
<div class="col-lg-4 flex-column px-2">
<!-- LIKES ================================-->
<div class="card flex-grow-1 mb-3 pt-3 px-4 pb-4 rounded-0">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; opacity: .6;">
Likes
</p>
<ul class="fa-ul mb-n2 ml-4">
<li class="mb-2">
<span class="fa-li pr-1" style="color: #c98740;"><i class="fa-regular fa-check"></i></span>
Content
</li>
<li class="mb-2">
<span class="fa-li pr-1" style="color: #c98740;"><i class="fa-regular fa-check"></i></span>
Content
</li>
<li class="mb-2">
<span class="fa-li pr-1" style="color: #c98740;"><i class="fa-regular fa-check"></i></span>
Content
</li>
</ul>
</div>
<!-- DISLIKES =============================-->
<div class="card flex-grow-1 mb-3 pt-3 px-4 pb-4 rounded-0">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; opacity: .6;">
Dislikes
</p>
<ul class="fa-ul mb-n2 ml-4">
<li class="mb-2">
<span class="fa-li pr-1" style="color: #c98740;"><i class="fa-regular fa-times"></i></span>
Content
</li>
<li class="mb-2">
<span class="fa-li pr-1" style="color: #c98740;"><i class="fa-regular fa-times"></i></span>
Content
</li>
<li class="mb-2">
<span class="fa-li pr-1" style="color: #c98740;"><i class="fa-regular fa-times"></i></span>
Content
</li>
</ul>
</div>
</div>
<div class="col-lg-8 flex-column px-2">
<!-- TRIVIA ===============================-->
<div class="card flex-grow-1 mb-3 pt-3 px-4 pb-4 rounded-0" style="border-top: 5px solid #c98740;">
<p class="mb-2 text-monospace text-uppercase" style="font-size: 18px; letter-spacing: 2px; color: #c98740;">
Trivia
</p>
<ul class="mb-n2 ml-3 pl-1">
<li class="mb-2">
Content
</li>
<li class="mb-2">
Content
</li>
<li class="mb-2">
Content
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT ===============================-->
<div class="d-flex justify-content-end align-items-end pr-3 text-monospace text-right text-uppercase text-muted" style="height: 60px; margin-bottom: -60px; letter-spacing: 1px;">
<div class="d-flex align-items-center">
[
<!-- sidebar image credit - remove this part if you'd like. -->
<a class="mx-2" style="margin-bottom: -2px; color: #c98740;" href="CREDIT URL"><i class="fa-light fa-image fa-fw"></i></a>
|
<!-- code credit - do not remove this. -->
<span class="mx-2">code by <a style="color: #c98740;" href="https://toyhou.se/Togo">togo</a></span>
]
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.