Profile
<!--==========================================
[08] POCKET-SIZED 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!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> 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!
===========================================-->
<div class="p-lg-3 my-5 mx-auto" style="max-width: 1000px;">
<div class="row no-gutters">
<div class="col-lg-3 flex-column mr-lg-3">
<!-- ICON =================================-->
<div class="card mb-3 bg-faded border-0" style="padding-bottom: 100%; border-radius: 70px 0 0 0; background-image:
url(IMAGE URL);
background-size: cover; background-position: center top;">
</div>
<!-- FIELDS (LEFT CARD) ======================
> you can edit the names and values of
fields - you can also copy + paste
more if you'd like to add some !
the right card will grow, so the
layout won't be skewed ovo) b
===========================================-->
<div class="card mb-5 mb-lg-3 p-3 bg-faded border-0" style="border-radius: 0 0 0 70px;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
NICKNAME
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
AGE
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
GENDER
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
PRONOUNS
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
ORIENT.
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
STATUS
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<div class="row no-gutters">
<div class="col-auto text-monospace text-primary">
WORTH
</div>
<div class="col text-right text-truncate">
Content
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 2px; border-top-style: dashed;">
<!--====================================-->
<p class="mt-1 text-right text-primary" style="font-size: 20px;">
<i class="fal fa-seedling"></i>
<!-- icon at the bottom of the card - you can edit to fit your chara better -->
</p>
</div>
</div>
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card mb-3 bg-faded border-0" style="flex: 1 1 0; border-radius: 0 70px 0 0;">
<div class="row no-gutters flex-lg-row-reverse h-100">
<div class="col-lg-5">
<!-- PAGEDOLL ================================
> looks best as a tall transparent image,
it will crop off the bottom automatically!
> the image will be quite small on mobile,
so keep this in mind ! it's more for
decoration over information ~
===========================================-->
<div style="height: calc(100% + 50px); min-height: 300px; margin-top: -50px; background-image:
url(IMAGE URL);
background-size: 100%;"></div>
</div>
<div class="col-lg d-block d-lg-flex flex-column p-3">
<!-- TEXT BLOCK ===========================-->
<h3 class="mb-0 text-monospace font-italic" style="letter-spacing: 2px;">
<span class="text-primary">N</span>AME <span class="text-primary">S</span>URNAME
<!-- make sure to separate out the first letters like above ! -->
<i class="fal fa-hand-holding-seedling text-primary float-right"></i>
<!-- icon next to the name - you can edit to fit your chara better -->
</h3>
<hr class="w-100" style="margin: 12px 0; border-style: dashed; border-top-width: 2px;">
<div class="pr-3" style="flex: 1 1 0; overflow-y: auto;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec enim eleifend, porta mauris sed, finibus justo. Fusce accumsan sollicitudin nulla. Sed in varius diam. Vestibulum vitae felis a mauris viverra luctus at eleifend ex.
</p>
<p>
Etiam sodales hendrerit ultricies. Donec quis massa ut sem auctor mattis in eget nisl. Vivamus aliquam sapien nec risus fermentum, vitae vulputate odio lacinia.
</p>
<p>
Sed auctor in ex eu pretium. Nam dictum dolor at tellus tempus, id hendrerit nibh dapibus. Nulla placerat nisl elit, maximus luctus lectus pharetra quis. In hac habitasse platea dictumst. Integer id tincidunt neque. Aenean bibendum pharetra augue non egestas. Ut bibendum dignissim ipsum. Ut lobortis risus quis magna laoreet, vitae egestas tortor sodales. Cras mollis sit amet tortor eu varius. Praesent maximus neque at eros accumsan, vitae tincidunt metus pellentesque. Donec turpis leo, tempus egestas euismod nec, tristique a risus. Ut ultrices nisi sit amet ante maximus, at vulputate dui fermentum. Integer laoreet turpis erat, a facilisis enim commodo at. Ut finibus massa ligula, et tincidunt mauris ornare vel.
</p>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<!-- TABS =================================-->
<div class="col-lg flex-column mb-3">
<div id="tabs" class="tab-content h-100">
<!-- PERSONALITY TAB ======================-->
<div id="persona" class="tab-pane fade show active h-100">
<div class="card justify-content-between h-100 p-3 bg-faded border-0 rounded-0">
<p class="mb-2 text-monospace text-center text-uppercase">
adjective
<span class="mx-1 text-primary">•</span>
adjective
<span class="mx-1 text-primary">•</span>
adjective
</p>
<div class="text-muted">
<!-- PERSONALITY BARS =====================-->
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate">
RESERVED
</div>
<div class="col-6 mx-2">
<div class="progress card flex-row rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 0; background-color: transparent;"></div>
<i class="fad fa-dot-circle text-primary" style="margin-top: -8px; font-size: 16px;"></i>
</div>
</div>
<div class="col text-right text-truncate">
FRIENDLY
</div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate">
IMMATURE
</div>
<div class="col-6 mx-2">
<div class="progress card flex-row rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 0; background-color: transparent;"></div>
<i class="fad fa-dot-circle text-primary" style="margin-top: -8px; font-size: 16px;"></i>
</div>
</div>
<div class="col text-right text-truncate">
SERIOUS
</div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate">
SINCERE
</div>
<div class="col-6 mx-2">
<div class="progress card flex-row rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 0; background-color: transparent;"></div>
<i class="fad fa-dot-circle text-primary" style="margin-top: -8px; font-size: 16px;"></i>
</div>
</div>
<div class="col text-right text-truncate">
DECEPTIVE
</div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center mb-1">
<div class="col text-truncate">
SENSITIVE
</div>
<div class="col-6 mx-2">
<div class="progress card flex-row rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 0; background-color: transparent;"></div>
<i class="fad fa-dot-circle text-primary" style="margin-top: -8px; font-size: 16px;"></i>
</div>
</div>
<div class="col text-right text-truncate">
TOUGH
</div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-truncate">
LAZY
</div>
<div class="col-6 mx-2">
<div class="progress card flex-row rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="
width: 50%;
height: 0; background-color: transparent;"></div>
<i class="fad fa-dot-circle text-primary" style="margin-top: -8px; font-size: 16px;"></i>
</div>
</div>
<div class="col text-right text-truncate">
DILIGENT
</div>
</div>
<!--====================================-->
</div>
<p class="text-monospace text-center text-uppercase">
MBTI
<span class="mx-1 text-primary">•</span>
Alignment
<span class="mx-1 text-primary">•</span>
Zodiac
</p>
</div>
</div>
<!-- LIKES & DISLIKES TAB =================-->
<div id="likes" class="tab-pane fade h-100">
<div class="row no-gutters h-100">
<div class="col-lg d-block d-lg-flex flex-column mr-lg-3 mb-3 mb-lg-0">
<div class="card p-3 bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p class="mb-2 text-monospace font-italic" style="letter-spacing: 1px;">
<span class="text-primary">L</span>IKES
</p>
<ul class="list-unstyled mb-0 pl-1">
<!-- you can copy + paste more li's and write
as much as you like, these boxes will scroll !
-->
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
</ul>
</div>
</div>
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card p-3 bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p class="mb-2 text-monospace font-italic" style="letter-spacing: 1px;">
<span class="text-primary">D</span>ISLIKES
</p>
<ul class="list-unstyled mb-0 pl-1">
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
<li>
<i class="fal fa-heart text-primary mr-1"></i>
Content
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- MOODBOARD TAB ========================-->
<div id="mood" class="tab-pane fade h-100">
<div class="h-100 d-block d-lg-flex flex-column">
<div class="row no-gutters mb-2" style="flex: 1 1 0; min-height: 150px;">
<div class="col" style="background-image:
url(IMAGE URL);
background-size: cover; background-position: center;">
</div>
<div class="col mx-2" style="background-image:
url(IMAGE URL);
background-size: cover; background-position: center;">
</div>
<div class="col" style="background-image:
url(IMAGE URL);
background-size: cover; background-position: center;">
</div>
</div>
<div class="card text-monospace text-center font-italic bg-faded border-0 rounded-0 p-3">
"a quote. lorem ipsum dolor sit amet, consectetur adipiscing elit."
</div>
</div>
</div>
<!-- TRIVIA TAB ===========================-->
<div id="trivia" class="tab-pane fade h-100">
<div class="row no-gutters h-100">
<div class="col-lg d-block d-lg-flex flex-column mr-lg-3 mb-3 mb-lg-0">
<div class="card p-3 bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p class="mb-2 text-monospace font-italic" style="letter-spacing: 1px;">
<span class="text-primary">D</span>ESIGN NOTES
</p>
<ul class="mb-0 pl-4">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
</div>
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card p-3 bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p class="mb-2 text-monospace font-italic" style="letter-spacing: 1px;">
<span class="text-primary">T</span>RIVIA
</p>
<ul class="mb-0 pl-4">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS TAB ====================-->
<div id="links" class="tab-pane fade h-100">
<div class="d-block d-lg-flex flex-column h-100">
<div class="row no-gutters mx-n1 text-center" style="flex: 1 1 0; overflow-y: auto;">
<!-- you can add or remove as many relationship
blocks as you like, this box will scroll ! -->
<!--====================================-->
<div class="col-6 col-lg-4">
<div class="card mx-1 mb-2 p-2 bg-faded border-0 rounded-0">
<img class="card mb-2 rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<p class="mb-n1 text-monospace font-italic" style="letter-spacing: 2px;">
<a
href="CHARACTER URL"
class="text-body">
<span class="text-primary">N</span>AME
</a>
</p>
<p class="mb-1 text-lowercase text-muted" style="font-variant: small-caps; opacity: .7;">
relationship
</p>
</div>
</div>
<!--====================================-->
<div class="col-6 col-lg-4">
<div class="card mx-1 mb-2 p-2 bg-faded border-0 rounded-0">
<img class="card mb-2 rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<p class="mb-n1 text-monospace font-italic" style="letter-spacing: 2px;">
<a
href="CHARACTER URL"
class="text-body">
<span class="text-primary">N</span>AME
</a>
</p>
<p class="mb-1 text-lowercase text-muted" style="font-variant: small-caps; opacity: .7;">
relationship
</p>
</div>
</div>
<!--====================================-->
<div class="col-6 col-lg-4">
<div class="card mx-1 mb-2 p-2 bg-faded border-0 rounded-0">
<img class="card mb-2 rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<p class="mb-n1 text-monospace font-italic" style="letter-spacing: 2px;">
<a
href="CHARACTER URL"
class="text-body">
<span class="text-primary">N</span>AME
</a>
</p>
<p class="mb-1 text-lowercase text-muted" style="font-variant: small-caps; opacity: .7;">
relationship
</p>
</div>
</div>
<!--====================================-->
<div class="col-6 col-lg-4">
<div class="card mx-1 mb-2 p-2 bg-faded border-0 rounded-0">
<img class="card mb-2 rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<p class="mb-n1 text-monospace font-italic" style="letter-spacing: 2px;">
<a
href="CHARACTER URL"
class="text-body">
<span class="text-primary">N</span>AME
</a>
</p>
<p class="mb-1 text-lowercase text-muted" style="font-variant: small-caps; opacity: .7;">
relationship
</p>
</div>
</div>
<!--====================================-->
<div class="col-6 col-lg-4">
<div class="card mx-1 mb-2 p-2 bg-faded border-0 rounded-0">
<img class="card mb-2 rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<p class="mb-n1 text-monospace font-italic" style="letter-spacing: 2px;">
<a
href="CHARACTER URL"
class="text-body">
<span class="text-primary">N</span>AME
</a>
</p>
<p class="mb-1 text-lowercase text-muted" style="font-variant: small-caps; opacity: .7;">
relationship
</p>
</div>
</div>
<!--====================================-->
<div class="col-6 col-lg-4">
<div class="card mx-1 mb-2 p-2 bg-faded border-0 rounded-0">
<img class="card mb-2 rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<p class="mb-n1 text-monospace font-italic" style="letter-spacing: 2px;">
<a
href="CHARACTER URL"
class="text-body">
<span class="text-primary">N</span>AME
</a>
</p>
<p class="mb-1 text-lowercase text-muted" style="font-variant: small-caps; opacity: .7;">
relationship
</p>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE ==========-->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-auto mx-lg-3 mb-3">
<!-- TAB BUTTONS ==========================-->
<ul class="nav flex-lg-column h-100 bg-primary" style="min-height: 55px; width: 47px; min-width: 100%;">
<li class="nav-item" style="flex: 1 1 0;">
<a href="#persona" class="nav-link active btn btn-outline-warning d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 18px; box-shadow: none; mix-blend-mode: luminosity; opacity: .4;" data-toggle="tab">
<i class="fal fa-id-card-alt"></i>
</a>
</li>
<li class="nav-item" style="flex: 1 1 0;">
<a href="#likes" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 18px; box-shadow: none; mix-blend-mode: luminosity; opacity: .55;" data-toggle="tab">
<i class="fal fa-box-heart"></i>
</a>
</li>
<li class="nav-item" style="flex: 1 1 0;">
<a href="#mood" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 18px; box-shadow: none; mix-blend-mode: luminosity; opacity: .7;" data-toggle="tab">
<i class="fal fa-camera-retro"></i>
</a>
</li>
<li class="nav-item" style="flex: 1 1 0;">
<a href="#trivia" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 18px; box-shadow: none; mix-blend-mode: luminosity; opacity: .85;" data-toggle="tab">
<i class="fal fa-backpack"></i>
</a>
</li>
<li class="nav-item" style="flex: 1 1 0;">
<a href="#links" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 18px; box-shadow: none; mix-blend-mode: luminosity; opacity: 1;" data-toggle="tab">
<i class="fal fa-address-book"></i>
</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<!-- (BOTTOM RIGHT) IMAGE =================-->
<div class="card mb-3 bg-faded border-0" style="padding-bottom: 100%; border-radius: 0 0 70px 0; background-image:
url(IMAGE URL);
background-size: cover; background-position: center;">
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT ===============================-->
<p class="text-right">
<a href="https://toyhou.se/Togo" style="text-decoration: none;">
<i class="fal fa-code"></i>
</a>
</p>
</div>
Recent Images
No images.