Profile
<!--------------------------------
| code by togo / eithorne
contact either account if you have questions!
| feel free to move/style the credit. just keep it visible and easy to find.
| bootstrap theme colours
| layout works both on mobile and desktop :)
| additional comments are added below other customizable elements.
--------------------------------->
<div class="container-fluid text-monospace my-5" style="max-width: 850px;">
<div class="row no-gutters flex-lg-row-reverse">
<div class="col-lg-3 p-1">
<!--------------------------------
USER - RIGHT COLUMN
-------------------------------->
<h3 class="text-right">>> PLAYER 1</h3>
<p class="mb-2 text-right font-italic text-muted">
Playing as <i>
USERNAME
</i>.
</p>
<img class="w-100 rounded"
src="IMAGE LINK"
>
<h4 class="mb-1">
LVL. 20
</h4>
<p class=" mb-1 text-muted">
EXP: 0 / 24,000
</p>
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 70%;
"></div>
</div>
</div>
<div class="col-lg-auto py-lg-1 py-3">
<div class="card h-100 mx-lg-3 mx-1 border-bottom-0 border-right-0"></div>
</div>
<!--------------------------------
USER - MIDDLE COLUMN
-------------------------------->
<div class="col-lg p-1">
<h4 class="mb-2">
NAME . PRN/PRN . ADJECTIVE
</h4>
<hr class="mt-0 mb-2">
<div class="row no-gutters mb-2">
<div class="col-lg">
<div class="row no-gutters align-items-center">
<div class="col-6 text-truncate">
HP
</div>
<div class="col-6">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
/* | HP Progress */;
"></div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-6 text-truncate">
Energy
</div>
<div class="col-6">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
/* | Energy Progress */;
"></div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-6 text-truncate">
Skill
</div>
<div class="col-6">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
/* | Skill Progress */;
"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="card h-100 mx-lg-3 border-bottom-0 border-right-0 border-top-0"></div>
</div>
<div class="col-lg">
<div class="row no-gutters align-items-center">
<div class="col-6 text-truncate">
Motivation
</div>
<div class="col-6">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
/* | Motivation Progress */;
"></div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-6 text-truncate">
Creativity
</div>
<div class="col-6">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
/* | Creativity Progress */;
"></div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-6 text-truncate">
Focus
</div>
<div class="col-6">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
/* | Focus Progress */;
"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-2">
<p>
Write a paragraph about yourself here!
</p>
</div>
<div class="col-lg-auto py-lg-1 py-3">
<div class="card h-100 mx-lg-3 mx-1 border-bottom-0 border-right-0"></div>
</div>
<!--------------------------------
USER - LEFT COLUMN
-------------------------------->
<div class="col-lg-2">
<h4 class="m-1 mb-2">INVENTORY</h4>
<div class="row no-gutters mb-2" style="font-size: 18px;">
<div class="col-4 col-lg-6">
<div class="card m-1 p-1">
<a class="btn btn-primary py-3" style="font-size: inherit;"
href="SOCIAL LINK"><i class="fab fa-deviantart">
</i></a>
</div>
</div>
<div class="col-4 col-lg-6">
<div class="card m-1 p-1">
<a class="btn btn-primary py-3" style="font-size: inherit;"
href="SOCIAL LINK"><i class="fab fa-twitter">
</i></a>
</div>
</div>
<div class="col-4 col-lg-6">
<div class="card m-1 p-1">
<a class="btn btn-primary py-3" style="font-size: inherit;"
href="SOCIAL LINK"><i class="fab fa-instagram">
</i></a>
</div>
</div>
<div class="col-4 col-lg-6">
<div class="card m-1 p-1">
<a class="btn btn-primary py-3" style="font-size: inherit;"
href="SOCIAL LINK"><i class="fas fa-paw">
</i></a>
</div>
</div>
<div class="col-4 col-lg-6">
<div class="card m-1 p-1">
<a class="btn btn-primary py-3" style="font-size: inherit;"
href="SOCIAL LINK"><i class="fab fa-tumblr">
</i></a>
</div>
</div>
<div class="col-4 col-lg-6">
<div class="card m-1 p-1">
<a class="btn btn-primary py-3" style="font-size: inherit;"
href="SOCIAL LINK"><i class="fab fa-pinterest">
</i></a>
</div>
</div>
</div>
<ul class="p-0 m-1 mb-2" style="list-style-type: none;">
<li>
> <a href="CUSTOM LINK">Link 1</a>
</li>
<li>
> <a href="CUSTOM LINK">Link 2</a>
</li>
<li>
> <a href="CUSTOM LINK">Link 3</a>
</li>
<li>
> <a href="https://toyhou.se/Togo"><i class="fal fa-code"></i></a>
</li>
</ul>
</div>
</div>
<hr class="mx-1 my-4">
<div class="row no-gutters">
<div class="col-lg order-lg-2">
<!--------------------------------
CHAR FEATURE - CONTENT
-------------------------------->
<div id="chars" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item p-1 active">
<!--------------------------------
CHARACTER 1
-------------------------------->
<div class="row">
<div class="col">
<div class="row no-gutters">
<div class="col-auto">
<h4 class="text-uppercase" style="letter-spacing: 1px;">
Name
</h4>
</div>
<div class="col"></div>
<div class="col-auto">
<a
href="CHARACTER LINK"
style="text-decoration: none;">
Full Profile >
</a>
</div>
</div>
<hr class="mt-0 mb-2">
<div class="row no-gutters mb-2">
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="card h-100 mx-lg-3 border-bottom-0 border-right-0 border-top-0"></div>
</div>
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-2">
<p class="mb-2">
Write an introductory paragraph about your character here!
</p>
</div>
<div class="col-lg-4">
<img class="w-100 rounded"
src="IMAGE LINK"
>
</div>
</div>
</div>
<div class="carousel-item p-1">
<!--------------------------------
CHARACTER 2
-------------------------------->
<div class="row">
<div class="col">
<div class="row no-gutters">
<div class="col-auto">
<h4 class="text-uppercase" style="letter-spacing: 1px;">
Name
</h4>
</div>
<div class="col"></div>
<div class="col-auto">
<a
href="CHARACTER LINK"
style="text-decoration: none;">
Full Profile >
</a>
</div>
</div>
<hr class="mt-0 mb-2">
<div class="row no-gutters mb-2">
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="card h-100 mx-lg-3 border-bottom-0 border-right-0 border-top-0"></div>
</div>
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-2">
<p class="mb-2">
Write an introductory paragraph about your character here!
</p>
</div>
<div class="col-lg-4">
<img class="w-100 rounded"
src="IMAGE LINK"
>
</div>
</div>
</div>
<div class="carousel-item p-1">
<!--------------------------------
CHARACTER 3
-------------------------------->
<div class="row">
<div class="col">
<div class="row no-gutters">
<div class="col-auto">
<h4 class="text-uppercase" style="letter-spacing: 1px;">
Name
</h4>
</div>
<div class="col"></div>
<div class="col-auto">
<a
href="CHARACTER LINK"
style="text-decoration: none;">
Full Profile >
</a>
</div>
</div>
<hr class="mt-0 mb-2">
<div class="row no-gutters mb-2">
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="card h-100 mx-lg-3 border-bottom-0 border-right-0 border-top-0"></div>
</div>
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-2">
<p class="mb-2">
Write an introductory paragraph about your character here!
</p>
</div>
<div class="col-lg-4">
<img class="w-100 rounded"
src="IMAGE LINK"
>
</div>
</div>
</div>
<div class="carousel-item p-1">
<!--------------------------------
CHARACTER 4
-------------------------------->
<div class="row">
<div class="col">
<div class="row no-gutters">
<div class="col-auto">
<h4 class="text-uppercase" style="letter-spacing: 1px;">
Name
</h4>
</div>
<div class="col"></div>
<div class="col-auto">
<a
href="CHARACTER LINK"
style="text-decoration: none;">
Full Profile >
</a>
</div>
</div>
<hr class="mt-0 mb-2">
<div class="row no-gutters mb-2">
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="card h-100 mx-lg-3 border-bottom-0 border-right-0 border-top-0"></div>
</div>
<div class="col-lg">
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-truncate">
Stat
</div>
<div class="col-8">
<div class="progress" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="
width: 40%;
"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-2">
<p class="mb-2">
Write an introductory paragraph about your character here!
</p>
</div>
<div class="col-lg-4">
<img class="w-100 rounded"
src="IMAGE LINK"
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto order-lg-1 py-lg-1 py-3">
<div class="card h-100 mx-lg-3 mx-1 border-bottom-0 border-right-0"></div>
</div>
<!--------------------------------
CHAR FEATURE - BUTTONS
-------------------------------->
<div class="col-lg-3">
<div class="row no-gutters">
<div class="col-12 p-1">
<h3>>> PLAYER 2</h3>
<p class="font-italic text-muted">
Choose your character...
</p>
</div>
<div class="col-6">
<div class="card m-1 p-1">
<a class="nav-link p-0 active" data-target="#chars" data-slide-to="0" href="#">
<img class="w-100 bg-faded rounded"
src="IMAGE LINK">
<!-- | Character 1 - Icon -->
</a>
</div>
</div>
<div class="col-6">
<div class="card m-1 p-1">
<a class="nav-link p-0" data-target="#chars" data-slide-to="1" href="#">
<img class="w-100 bg-faded rounded"
src="IMAGE LINK">
<!-- | Character 2 - Icon -->
</a>
</div>
</div>
<div class="col-6">
<div class="card m-1 p-1">
<a class="nav-link p-0" data-target="#chars" data-slide-to="2" href="#">
<img class="w-100 bg-faded rounded"
src="IMAGE LINK">
<!-- | Character 3 - Icon -->
</a>
</div>
</div>
<div class="col-6">
<div class="card m-1 p-1">
<a class="nav-link p-0" data-target="#chars" data-slide-to="3" href="#">
<img class="w-100 bg-faded rounded"
src="IMAGE LINK">
<!-- | Character 4 - Icon -->
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.