Profile
<!----------
CODE START!
use ctrl-F to change the accents !
accent : #A9C9CA
----------->
<div class="mx-auto" style="max-width:600px;">
<div class="row no-gutters">
<!------ LEFT COLUMN ----->
<div class="col-md-4 p-2">
<div class="sticky-top p-2">
<!----- card start ---->
<div class="card" style="border:none; background: #A9C9CA; height: calc(100vh - 20px);">
<div class="h-100 align-items-center justify-content-end">
<div class="card p-2 mr-md-n4 mr-3" style="border:none;">
<!----- character image (change IMGURL to your character's image)---->
<div class = "card p-0 mx-auto" style ="height: 120px; width: 120px;
background:url(IMG URL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;">
</div>
</div>
</div>
<!---- CREDITS : DO NOT REMOVE!!! ---->
<span class="m-2" style="letter-spacing:1px;">
<a class="tooltipster text-white" title="Code by Wren_Song" href="https://toyhou.se/Wren_Song"><i class="fa-light fa-code"></i></a>
<a class="tooltipster text-white" title="Style inspo from Coders Quarters" href="https://toyhou.se/~world/82691.coders-quarters/page/99574.september-challenge"><i class="fa-light fa-paint-brush"></i></a>
</span>
</div>
</div>
</div>
<!----- RIGHT COLUMN ----->
<div class="col-md-8">
<!----- start of BASICS SECTION ----->
<div class="p-2">
<div class="card card-outline-secondary bg-none p-2" style="border-width: 1.5px;">
<div class="card mx-auto p-2 mt-n4 text-muted text-center" style="border:none;">
<!---- main icon, you can change from any from FontAwesome ----->
<i class="fa-regular fa-bolt-lightning" style="font-size: 20px;"></i>
</div>
<div class="row no-gutters" style="margin-top:-8px;">
<div class="col-6">
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-signature" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
name
</div></div>
</div>
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-light fa-envelope" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
nickname
</div></div>
</div>
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-clock" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
age
</div></div>
</div>
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-venus-mars" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
gender
</div></div>
</div>
</div>
<div class="col-6">
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-heart" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
sexuality
</div></div>
</div>
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-dna" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
species
</div></div>
</div>
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-cake" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
dd/mm/yy <!---- birthdate ----->
</div></div>
</div>
<div class="row no-gutters m-2">
<div class="col-3 text-center"><div class="card p-2 text-white" style="border:none; background-color: #A9C9CA;"><i class="fa-regular fa-crown" style="font-size: 14px;"></i></div></div>
<div class="col align-items-center pl-2"><div class="text-monospace text-muted" style="font-size: 14px; letter-spacing: 1px;">
role
</div></div>
</div>
</div>
</div>
</div>
<!----- QUOTE DIVIDER (best to use one-liners) ------>
<div class="row no-gutters">
<div class="col mt-4 mr-2"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
<div class="col-auto">
<div class="text-center w-100 text-muted text-monospace my-3" style="letter-spacing: 1px; font-size: 13px;">
<i><span style="color: #A9C9CA">"</span>
quote here !
<span style="color: #A9C9CA">"</span></i>
</div>
</div>
<div class="col mt-4 ml-2"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
</div>
<!------ small character description ------>
<div class="card bg-faded p-0" style="border:none">
<div class="card p-1" style="background: #A9C9CA; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"></div>
<div class="px-3 mt-3" style="border-style: solid; border-width: 0 0 0 2px; border-color: #A9C9CA;">
<div class="text-monospace text-muted" style="font-size: 15px; letter-spacing: 1px;">
character title -
</div>
</div>
<div class="text-justify m-3" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Character description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel.
</div>
</div>
<!---- another divider ----->
<div class="row no-gutters">
<div class="col mt-4"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
<div class="col mt-4"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
</div>
<!----- start of PERSONALITY SECTION ----->
<div class="card card-outline-secondary bg-none p-2 mt-4" style="border-width: 1.5px;">
<!----- character traits ----->
<div class="card mx-auto p-2 text-monospace text-muted text-center" style="border:none; margin-top: -28px; font-size: 14px;">
<span>
trait
<span style="color: #A9C9CA">+</span>
trait
<span style="color: #A9C9CA">+</span>
trait
</span>
</div>
<!------ description ------>
<div class="text-justify m-2" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel.
<br><br>
In eu leo urna. Curabitur faucibus porttitor ipsum, eu fermentum tellus elementum eu. Vestibulum lacinia, odio sit amet egestas egestas, massa nulla viverra eros, quis convallis magna felis condimentum sapien. Duis faucibus nulla ex, id facilisis turpis gravida non. Fusce ornare massa et sem lobortis pharetra.
</div>
</div>
<!------ another divider ----->
<div class="row no-gutters">
<div class="col mt-4"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
<div class="col mt-4"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
</div>
<!------- for progress bars : change width to desired percentage of progress bar ----->
<div class="row no-gutters w-100 mt-3">
<div class="col-6 p-1">
<div class="text-muted text-center text-monospace" style="font-size: 14px; letter-spacing: 1px;"> - charisma - </div>
<div class="progress card bg-faded" style="border:none;"><div class="progress-bar justify-content-end" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="
width:50%;
height:10px; background-color: #A9C9CA ;"><div class="card" style="height: 15px; border:none; width: 4px; border-radius:0px; margin-right:-4px;"></div></div></div>
<div class="text-muted text-center text-monospace mt-3" style="font-size: 14px; letter-spacing: 1px;"> - intelligence - </div>
<div class="progress card bg-faded" style="border:none;"><div class="progress-bar justify-content-end" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="
width:50%;
height:10px; background-color: #A9C9CA ;"><div class="card" style="height: 15px; border:none; width: 4px; border-radius:0px; margin-right:-4px;"></div></div></div>
<div class="text-muted text-center text-monospace mt-3" style="font-size: 14px; letter-spacing: 1px;"> - empathy - </div>
<div class="progress card bg-faded" style="border:none;"><div class="progress-bar justify-content-end" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="
width:50%;
height:10px; background-color: #A9C9CA ;"><div class="card" style="height: 15px; border:none; width: 4px; border-radius:0px; margin-right:-4px;"></div></div></div>
</div>
<div class="col-6 p-1">
<div class="text-muted text-center text-monospace" style="font-size: 14px; letter-spacing: 1px;"> - honesty - </div>
<div class="progress card bg-faded" style="border:none;"><div class="progress-bar justify-content-end" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="
width:50%;
height:10px; background-color: #A9C9CA ;"><div class="card" style="height: 15px; border:none; width: 4px; border-radius:0px; margin-right:-4px;"></div></div></div>
<div class="text-muted text-center text-monospace mt-3" style="font-size: 14px; letter-spacing: 1px;"> - wisdom - </div>
<div class="progress card bg-faded" style="border:none;"><div class="progress-bar justify-content-end" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="
width:50%;
height:10px; background-color: #A9C9CA ;"><div class="card" style="height: 15px; border:none; width: 4px; border-radius:0px; margin-right:-4px;"></div></div></div>
<div class="text-muted text-center text-monospace mt-3" style="font-size: 14px; letter-spacing: 1px;">- curiousity -</div>
<div class="progress card bg-faded" style="border:none;"><div class="progress-bar justify-content-end" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="
width:50%;
height:10px; background-color: #A9C9CA ;"><div class="card" style="height: 15px; border:none; width: 4px; border-radius:0px; margin-right:-4px;"></div></div></div>
</div>
</div>
<!----- another divider ----->
<div class="row no-gutters">
<div class="col mt-4"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
<div class="col mt-4"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
</div>
<!----- start of STORY SECTION ----->
<div class="row no-gutters mt-3">
<div class="col-md col-12 order-md-1 order-2 mt-md-0 mt-3">
<div class="card bg-faded p-0" style="border:none">
<div class="card p-1" style="background: #A9C9CA; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"></div>
<div class="tab-content">
<!---- start of FIRST STORY TAB ----->
<div class="tab-pane fade active show" id="story1">
<div class="px-3 mt-3" style="border-style: solid; border-width: 0 0 0 2px; border-color: #A9C9CA;">
<div class="text-monospace text-muted" style="font-size: 15px; letter-spacing: 1px;">
story subtitle 1 -
</div>
</div>
<div class="text-justify m-3" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel. Pellentesque ac nibh fermentum, porttitor nulla eu, molestie augue. Nulla varius dictum leo, et lobortis purus bibendum sagittis. Vivamus vitae nisl eu felis venenatis aliquam ac et ipsum. Sed luctus blandit justo, vel tempus est consequat luctus. Integer dui elit, rhoncus ut finibus in, suscipit et justo.
<br><br>
In eu leo urna. Curabitur faucibus porttitor ipsum, eu fermentum tellus elementum eu. Vestibulum lacinia, odio sit amet egestas egestas, massa nulla viverra eros, quis convallis magna felis condimentum sapien. Duis faucibus nulla ex, id facilisis turpis gravida non.
</div>
</div>
<!---- start of SECOND STORY TAB ----->
<div class="tab-pane fade" id="story2">
<div class="px-3 mt-3" style="border-style: solid; border-width: 0 0 0 2px; border-color: #A9C9CA;">
<div class="text-monospace text-muted" style="font-size: 15px; letter-spacing: 1px;">
story subtitle 2 -
</div>
</div>
<div class="text-justify m-3" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel. Pellentesque ac nibh fermentum, porttitor nulla eu, molestie augue. Nulla varius dictum leo, et lobortis purus bibendum sagittis. Vivamus vitae nisl eu felis venenatis aliquam ac et ipsum.
</div>
</div>
<!---- start of THIRD STORY TAB ----->
<div class="tab-pane fade" id="story3">
<div class="px-3 mt-3" style="border-style: solid; border-width: 0 0 0 2px; border-color: #A9C9CA;">
<div class="text-monospace text-muted" style="font-size: 15px; letter-spacing: 1px;">
story subtitle 3 -
</div>
</div>
<div class="text-justify m-3" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel. Pellentesque ac nibh fermentum, porttitor nulla eu, molestie augue. Nulla varius dictum leo, et lobortis purus bibendum sagittis. Vivamus vitae nisl eu felis venenatis aliquam ac et ipsum. Sed luctus blandit justo, vel tempus est consequat luctus. Integer dui elit, rhoncus ut finibus in, suscipit et justo.
<br><br>
In eu leo urna. Curabitur faucibus porttitor ipsum, eu fermentum tellus elementum eu. Vestibulum lacinia, odio sit amet egestas egestas, massa nulla viverra eros, quis convallis magna felis condimentum sapien. Duis faucibus nulla ex, id facilisis turpis gravida non. Fusce ornare massa et sem lobortis pharetra. Quisque id neque eget nunc congue fringilla. Duis tempus neque a commodo volutpat. Integer blandit, libero nec congue iaculis, ante nunc semper est, at finibus orci ligula ac nunc. Ut sit amet suscipit arcu, ac congue nunc.
</div>
</div>
</div>
</div>
</div>
<!----- story tab buttons ----->
<div class="col-md-1 col-12 ml-md-n2 mt-md-4 order-md-2 order-1 text-monospace">
<ul class="nav nav-tabs row card-header-tabs">
<li class="col-md-12 col-4 mb-2 text-center"><a class="btn bg-faded btn-block btn-outline-secondary active p-1" data-toggle="tab" style="background-color: #A9C9CA" href="#story1">I</a></li>
<li class="col-md-12 col-4 mb-2"><a class="btn bg-faded btn-block btn-outline-secondary p-1" style="background-color: #A9C9CA" data-toggle="tab" href="#story2">II</a></li>
<li class="col-md-12 col-4 mb-2"><a class="btn bg-faded btn-block btn-outline-secondary p-1 text-center" style="background-color: #A9C9CA" data-toggle="tab" href="#story3">III</a></li>
</ul>
</div>
</div>
<!----- QUOTE DIVIDER (best to use one-liners) ------>
<div class="row no-gutters">
<div class="col mt-4 mr-2"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
<div class="col-auto">
<div class="text-center w-100 text-muted text-monospace my-3" style="letter-spacing: 1px; font-size: 13px;">
<i><span style="color: #A9C9CA">"</span>
quote here !
<span style="color: #A9C9CA">"</span></i>
</div>
</div>
<div class="col mt-4 ml-2"><div class="card" style="border-style:dashed; border-width: 2px 0 0 0;"></div></div>
</div>
<!---- start of 1st character relation, you can copy paste this section below it to add more! ------->
<div class="row no-gutters">
<div class="col-md-10 order-md-1 order-2">
<div class="card card-outline-secondary bg-none p-2 mt-4" style="border-width: 1.5px;">
<!---- character link and name! you can put the character's link in the href ----->
<div class="p-2 text-monospace card mr-auto" style="border:none; margin-top: -28px; margin-left: 30px; font-size: 14px; color: #A9C9CA;">
<a style="color: #A9C9CA;" href=" CHARACTERLINK ">character name.</a>
</div>
<!---- relationship desc. ---->
<div class="text-justify mx-2 mb-2" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel.
</div>
</div>
</div>
<div class="col-md-2 order-md-2 order-1 h-100 ml-md-n3 mt-md-4">
<div class="card p-2" style="border:none;">
<!----- character image (change IMGURL to your character's image)---->
<div class = "card card-outline-secondary p-0 mx-auto" style ="height: 80px; width: 80px; border-width: 1.5px;
background:url(IMG URL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
</div>
</div>
</div>
</div>
<!---- start of 2nd character relation, you can copy paste this section below it to add more! ------->
<div class="row no-gutters mt-md-0 mt-3">
<div class="col-md-10 order-md-1 order-2">
<div class="card card-outline-secondary bg-none p-2 mt-4" style="border-width: 1.5px;">
<!---- character link and name! you can put the character's link in the href ----->
<div class="p-2 text-monospace card mr-auto" style="border:none; margin-top: -28px; margin-left: 30px; font-size: 14px; color: #A9C9CA;">
<a style="color: #A9C9CA;" href=" CHARACTERLINK ">character name.</a>
</div>
<!---- relationship desc. ---->
<div class="text-justify mx-2 mb-2" style="font-family: ms gothic; letter-spacing: 0.5px; font-size: 11px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a tellus interdum, finibus nisi sit amet, vehicula lorem. Vestibulum finibus ligula eros, ac maximus diam accumsan vel.
</div>
</div>
</div>
<div class="col-md-2 order-md-2 order-1 h-100 ml-md-n3 mt-md-4">
<div class="card p-2" style="border:none;">
<!----- character image (change IMGURL to your character's image)---->
<div class = "card card-outline-secondary p-0 mx-auto" style ="height: 80px; width: 80px; border-width: 1.5px;
background:url(IMG URL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.