Profile
<div class="container p-0" style="max-width: 350px; font-size: 12px;">
<div class="card bg-faded rounded-0 p-1">
<div class="row no-gutters bg-faded">
<div class="col-12 p-1">
<div class="card rounded-0 p-1">
<!----- top text ----->
<span style="letter-spacing: 1px;">
<span class="pull-left text-primary" style="font-size: 12px;">
"PUT A QUOTE HERE"
</span>
<span class="pull-right text-muted">
age . pronouns . other
</span>
</span>
<!---------->
</div>
</div>
<div class="col-4 p-1">
<div class="card rounded-0 p-1" style="height:150px;">
<!----- avatar -- image can be any size, just make sure the subject is in the middle ----->
<div class="card h-100 w-100 rounded-0 border-0" style="
background: url(
URL HERE
);
background-size: cover;
background-position: center;">
<!---------->
</div>
</div>
</div>
<div class="col-8 p-1">
<div class="card rounded-0 p-1 px-2" style="height: 150px; overflow: scroll;">
<!----- first header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps">
<i class="fas fa-stars"></i> . Name
</div>
<!---------->
<p>
<!----- paragraph -- if you need another line do <br> ----->
Write about yourself here! Just a few sentences works best, but feel free to write more! This whole section will scroll.
<!---------->
</p>
<b></b><b></b>
<!----- second header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps">
<i class="fas fa-stars"></i> . "quote or header"
</div>
<!---------->
<!----- list friends by tagging them or link characters with two @'s followed by their id!
add more rows with <li>content</li> ----->
<ul>
<li>@ friend</li>
<li>@ friend</li>
<li>@ friend</li>
</ul>
<!---------->
<!----- second header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps">
<i class="fas fa-stars"></i> . "quote or header"
</div>
<!---------->
<!----- notes here ----->
<ul>
<li>write some trivia</li>
<li>keep it short</li>
</ul>
<!---------->
<!----- second header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps">
<i class="fas fa-stars"></i> . "quote or header"
</div>
<!---------->
<!----- notes here ----->
<ul>
<li>put more facts here!</li>
<li>aesthetics, interests,</li>
<li>design perefences-</li>
<li>whatever you want!</li>
</ul>
<!---------->
</div>
</div>
<!----- divider image ----->
<div class="col-12 p-1">
<div class="card rounded-0" style="
background: url(
URL HERE
);
background-size: cover;
background-position: center;
background-attatchment: fixed;
height: 40px;"></div>
</div>
<!---------->
<div class="col-6 p-1">
<div class="card rounded-0 p-2" style="height: 150px; overflow: scroll;">
<!----- interests header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps"> <i class="fas fa-tv-retro"></i>
. fandoms
</div>
<!---------->
<ul class="fa-ul">
<!----- interests ----->
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
book, movie, or franchise
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
book, movie, or franchise
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
book, movie, or franchise
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
book, movie, or franchise
</li>
<!----- interests header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps"> <i class="fas fa-music"></i>
. music
</div>
<!---------->
<ul class="fa-ul">
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
band or musician
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
band or musician
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
band or musician
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
band or musician
</li>
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
band or musician
</li>
<!---------->
</ul>
</div>
</div>
<div class="col-6 p-1">
<div class="card rounded-0 p-2" style="height: 150px; overflow: scroll;">
<!----- art status header ----->
<div class="text-primary" style="letter-spacing: 1px; font-size: 14px; font-variant: small-caps">
<i class="fas fa-pencil"></i> . Art Status
</div>
<!---------->
<div class="justify-content-between">
<span class="text-muted text-truncate" style="letter-spacing: 1px;">
trades
</span>
<span class="text-right">
STATUS
</span>
</div>
<div class="justify-content-between">
<span class="text-muted text-truncate" style="letter-spacing: 1px;">
collabs
</span>
<span class="text-right">
STATUS
</span>
</div>
<div class="justify-content-between">
<span class="text-muted text-truncate" style="letter-spacing: 1px;">
requests
</span>
<span class="text-right">
STATUS
</span>
</div>
</div>
</div>
<!----- divider image ----->
<div class="col-12 p-1">
<div class="card rounded-0" style="
background: url(
URL HERE
);
background-size: cover;
background-position: center;
background-attatchment: fixed;
height: 40px;"></div>
</div>
<!---------->
<div class="col-12 p-1">
<div class="card rounded-0 p-1">
<span style="letter-spacing: 10px;">
<span class="justify-content-between text-muted ml-1">
<!---
character links
use font awesome icons
(https://fontawesome.com/icons?d=gallery)
and search for icons
replace "star" in "fal fa-star tooltipster" with the code after "fa-" in the icons name
(or below the icon in the gallery
--->
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="character name"
href="URL HERE">
</a>
<!---------->
</span>
</span>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 p-1">
<span style="letter-spacing: 10px;">
<span class="justify-content-between text-muted ml-1">
<!---
folder links
use font awesome icons
(https://fontawesome.com/icons?d=gallery)
and search for icons
replace "star" in "fal fa-star tooltipster" with the code after "fa-" in the icons name
(or below the icon in the gallery
--->
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<a class="fal fa-star tooltipster" title="folder name"
href="URL HERE">
</a>
<!---------->
</span>
</span>
</div>
</div>
<!----- divider image ----->
<div class="col-12 p-1">
<div class="card rounded-0" style="
background: url(
URL HERE
);
background-size: cover;
background-position: center;
background-attatchment: fixed;
height: 40px;"></div>
</div>
<!---------->
<div class="col-12 p-1">
<div class="card rounded-0 p-1">
<span style="letter-spacing: 1px;">
<span class="pull-left text-muted ml-1">
<!-----
social media
for brand logos "fal" must be changed to "fab" and vice versa
----->
<a class="fab fa-tumblr tooltipster" title="tumblr"
href="URL HERE">
</a>
<span class="mx-1">/</span>
<a class="fab fa-instagram tooltipster" title="instagram"
href="URL HERE">
</a>
<span class="mx-1">/</span>
<a class="fab fa-deviantart tooltipster" title="DA"
href="URL HERE">
</a>
<!---------->
</span>
<!----- credit -- please dont remove ----->
<span class="pull-right text-primary">
<a class="fal fa-code tooltipster" title="layout by ronnie" href="https://toyhou.se/6662994.-user-howdy"></a>
<span class="mx-1"> </span>
<a class="fal fa-code tooltipster" title="edits by leaf" href="https://toyhou.se/9384466.code-meadow"></a>
<span class="mx-1"> </span>
<a class="fal fa-paint-brush-alt tooltipster" title="art by ARIST" href="URL HERE"></a>
<span class="mx-1"> </span>
<a class="fal fa-image tooltipster" title="images from SITE" href="URL HERE"></a>
</span>
<!---------->
</span>
</div>
</div>
</div>
</div>
</div>