<!-------------------------------------------------
Lustrous — Bootstrap version.
(code by jiko)
------------------------------
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG (in display settings)
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
ACCENTS
→ set to [-primary]
use control/command + f to quickly change the colours!
------------------------------------------------->
<!--
→ don't like the lowercase aesthetic? delete [text-lowercase]!
-->
<div class="mx-auto text-lowercase" style="font-size:90%; letter-spacing:0.3px; max-width:768px;">
<div class="row no-gutters" style="margin:-4px;">
<!------------------------------------------------
NAME HEADER
------------------------------------------------->
<div class="col-lg-12 p-1 order-lg-0">
<div class="card bg-primary border-0 rounded-0 p-3 h-100">
<div class="text-uppercase font-weight-bold" style="font-size:15px; letter-spacing:0.5em;">
<div class="justify-content-between text-white">
<!-- better if short! -->
<span>Name</span>
<span><i class="fas fa-heart"></i></span>
</div>
</div>
</div>
</div>
<!------------------------------------------------
RIGHT PROFILE CONTENT
------------------------------------------------->
<div class="col-lg-5 p-1 order-lg-2">
<div class="card-block bg-faded text-muted h-100">
<!--------------------------------------------
CHARACTER AVATAR
--------------------------------------------->
<!--
→ best if squared or 200x200!
-->
<div class="text-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="rounded-circle img-thumbnail p-2 mb-2" style="max-width:190px;">
</div>
<hr class="my-3">
<!--------------------------------------------
BASIC INFO
--------------------------------------------->
<div class="mx-0">
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">name</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">alias</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">age</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">gender</span>
<span>content (prn/prn)</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">height</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">orientation</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">species</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">role</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">theme</span>
<span>(<span class="text-primary">
<!--
→ **NOTE: YouTube video must be public and must NOT be from a playlist.**
→ to change the music, get the string of characters after "https://www.youtube.com/watch?v="
( for example: https://www.youtube.com/watch?v= → yUcIaHh4HEA ← )
→ then below, copy and paste that into where it says, "STRING_HERE"!
-->
<iframe src="https://www.youtube.com/embed/STRING_HERE"
frameborder="0"
style="height:1rem; width:1em; top:475px; right:40px; position:absolute; opacity:0.0001;"></iframe>
<i class="fas fa-music fa-fw"></i>
</span>)</span>
</div>
<hr class="my-3">
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">status</span>
<span>content</span>
</div>
<div class="p-1 justify-content-between">
<span class="font-weight-bold text-primary">worth</span>
<span>$$$</span>
</div>
<!-- add/delete more above THIS line! -->
</div>
</div>
</div>
<!------------------------------------------------
LEFT PROFILE CONTENT
------------------------------------------------->
<div class="col-lg-7 p-1 order-lg-1">
<div class="card-block bg-faded text-muted h-100">
<!---------------------------------------------
SUMMARY
--------------------------------------------->
<div class="p-1">
<p>Praesent vehicula, dolor eget tempus semper, urna est malesuada eros, a placerat risus magna a erat</p>
<p>Donec quam metus, rutrum et ex eget, tincidunt feugiat neque. Curabitur id leo congue, fringilla nisi eu, cursus eros. Cras venenatis magna tellus, nec pharetra lectus luctus accumsan. Etiam cursus congue rhoncus.</p>
</div>
<hr class="my-3">
<!---------------------------------------------
PREFERENCES
--------------------------------------------->
<div class="row no-gutters py-1">
<div class="col-6">
<span class="font-weight-bold text-primary">Likes</span>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-6">
<span class="font-weight-bold text-primary">Dislikes</span>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<hr class="my-3">
<!---------------------------------------------
STATS
--------------------------------------------->
<!--
– to change the progress bar, change [width:#%]
– to make it go left, use a low number
– to make it go right, use a high number
-->
<div class="p-1 px-3">
<div class="mb-3">
<div class="justify-content-between">
<span>educated</span>
<span>ignorant</span>
</div>
<div class="progress my-1" style="height:6px">
<div class="progress-bar text-primary"
style="width:20%; background:none; border-right-width:4px; border-right-style:solid;">
</div>
</div>
</div>
<div class="mb-3">
<div class="justify-content-between">
<span>empathetic</span>
<span>logical</span>
</div>
<div class="progress my-1" style="height:6px">
<div class="progress-bar text-primary"
style="width:40%; background:none; border-right-width: 4px; border-right-style:solid;">
</div>
</div>
</div>
<div class="mb-3">
<div class="justify-content-between">
<span>organised</span>
<span>messy</span>
</div>
<div class="progress my-1" style="height:6px">
<div class="progress-bar text-primary"
style="width:60%; background:none; border-right-width: 4px; border-right-style:solid;">
</div>
</div>
</div>
<div class="mb-3">
<div class="justify-content-between">
<span>honest</span>
<span>insincere</span>
</div>
<div class="progress my-1" style="height:6px">
<div class="progress-bar text-primary"
style="width:80%; background:none; border-right-width: 4px; border-right-style:solid;">
</div>
</div>
</div>
</div>
<hr class="my-3">
<!---------------------------------------------
DESIGN NOTES
--------------------------------------------->
<div class="p-1">
<span class="font-weight-bold text-primary">Design Notes</span>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
<li>Integer fermentum est vitae dui pretium fermentum.</li>
</ul>
</div>
<!-- add/delete more above THIS line! -->
</div>
</div>
<!------------------------------------------------
CREDITS
------------------------------------------------->
<div class="col-lg-12 p-1 order-lg-4">
<div class="card bg-primary border-0 rounded-0 py-2 px-3 h-100">
<div class="text-right text-white small" style="letter-spacing:0.3em;">
<a href="https://toyhou.se/8318450.-f2u-lustrous" class="text-white tooltipster"
title="code by jiko" style="text-decoration:none;">
<i class="far fa-code fa-fw"></i>
</a>
</div>
</div>
</div>
</div>
</div>
