<!-------------------------------------------------
Unity 2 — 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
→ 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 [-dark] and [-primary]
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto text-justify" style="font-size:95%; letter-spacing:0.1px; max-width:1000px">
<!-------------------------------------------------
NAME // HEADER
------------------------------------------------->
<div class="p-4 bg-dark text-light">
<div class="pl-3 display-4 text-md-left text-uppercase">
<span class="text-primary font-weight-bold" style="letter-spacing:5px;">Name</span>
<span class="font-italic">!!</span>
</div>
<div class="pl-2 mt-2">describe . themselves . here</div>
</div>
<div class="bg-primary" style="padding:3px"></div>
<!-------------------------------------------------
IMAGE + PROFILE
------------------------------------------------->
<div class="row no-gutters bg-faded">
<!--------------------------------------
FOCAL IMAGE
--------------------------------------->
<div class="col-lg-5">
<div class="h-100 w-100" style="min-height:500px;
/* IMAGE
---------------------------------------- */;
background-image:url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
/* BASIC SETTINGS
---------------------------------------- */;
background-size:cover;
background-position:center;
background-repeat:no-repeat"></div>
</div>
<!--------------------------------------
PROFILE CONTENT
--------------------------------------->
<div class="col-lg-7">
<div class="p-5 table-responsive" style="height:500px">
<!-------- BASIC INFO -------------------------------->
<div class="info">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span class="text-primary">Q</span>uick Stats
</h3><br>
<!--------- CONTENT --------->
<div class="row no-gutters text-muted">
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">name</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Age</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Gender</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Pronouns</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Race</span>
<span>or species</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Orient.</span>
<span>
content
( <a href=""><i class="fas fa-heart fa-fw"></i></a> )
</span>
</div>
<!-- add/delete more above THIS line -->
</div>
</div><hr class="w-100 my-5">
<!-------- SUMMARY -------------------------------->
<div class="summary">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span class="text-primary">S</span>ummary
</h3><br>
<!--------- CONTENT --------->
<div class="text-muted">
<p>Write a snippet of your character!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><hr class="w-100 my-5">
<!-------- TRVIA -------------------------------->
<div class="trivia">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span class="text-primary">T</span>rivia
</h3><br>
<!--------- CONTENT --------->
<ul class="pl-4 text-muted">
<li>Cras ullamcorper tellus dui, sodales porttitor dui facilisis sit amet.</li>
<li>In hendrerit velit sed mauris dignissim mollis.</li>
<li>Maecenas dui eros, cursus vel nulla a, finibus iaculis metus</li>
<li>Mauris congue, tortor quis pretium pretium, sapien justo pulvinar nibh, et commodo tellus magna nec nisl.</li>
<li>Ut et velit viverra turpis gravida porta. Donec quis volutpat velit. Integer sagittis sed velit ornare rutrum.</li>
</ul>
</div><hr class="w-100 my-5">
<!-------- DESIGN NOTES -------------------------------->
<div class="notes">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span class="text-primary">D</span>esign Notes
</h3><br>
<!--------- CONTENT --------->
<div class="row no-gutters mb-3 text-muted">
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Designer</span>
<span>@ user</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Obtained</span>
<!-- trade, sale, initial creation, etc. -->
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Worth</span>
<span>$$$</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase text-primary pr-3 font-weight-bold" style="letter-spacing:1px;">Status</span>
<span>content</span>
</div>
<!-- add/delete more above THIS line -->
</div>
<ul class="pl-4 text-muted">
<li>note</li>
<li>note</li>
<li>note</li>
<li>note</li>
</ul>
</div>
<!-- add/delete more above THIS line -->
</div>
</div>
</div>
<!-------------------------------------------------
CREDIT // FOOTER
------------------------------------------------->
<div class="px-4 py-3 bg-dark">
<div class="text-right small" style="letter-spacing:0.5em">
<a href="https://toyhou.se/jiko" class="text-light tooltipster"
title="code by jiko" style="text-decoration:none">
<i class="far fa-code"></i>
</a>
.
<a href="LINK_TO_ARTIST" class="text-light tooltipster"
title="image by ARTIST" style="text-decoration:none">
<i class="far fa-image"></i>
</a>
</div>
</div>
</div>
