<!-------------------------------------------------
Unity 2 — Custom Coloured 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
→ header + footer ----------- #222222
→ main-bg ------------------- #f5f0ea
→ main-text ----------------- #404040
→ accent -------------------- #aca494
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto text-justify" style="color:#404040; font-size:95%; letter-spacing:0.1px; max-width:1000px">
<!-------------------------------------------------
NAME // HEADER
------------------------------------------------->
<div class="p-4" style="background-color:#222222; color:#fefefe">
<div class="pl-3 display-4 text-md-left text-uppercase">
<span class="font-weight-bold" style="letter-spacing:5px; color:#aca494">Name</span>
<span class="font-italic">!!</span>
</div>
<div class="pl-2 mt-2">describe . themselves . here</div>
</div>
<div style="background-color:#aca494; padding:3px"></div>
<!-------------------------------------------------
IMAGE + PROFILE
------------------------------------------------->
<div class="row no-gutters" style="background-color:#f5f0ea">
<!--------------------------------------
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 style="color:#aca494">Q</span>uick Stats
</h3><br>
<!--------- CONTENT --------->
<div class="row no-gutters">
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">name</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Age</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Gender</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Pronouns</span>
<span>content</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Race</span>
<span>or species</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Orient.</span>
<span>
content
( <a href="LINK_TO_CHARACTER" style="color:#aca494;"><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" style="border-color:#404040; opacity:0.2">
<!-------- SUMMARY -------------------------------->
<div class="summary">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span style="color:#aca494">S</span>ummary
</h3><br>
<!--------- CONTENT --------->
<div class="content">
<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" style="border-color:#404040; opacity:0.2">
<!-------- TRVIA -------------------------------->
<div class="trivia">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span style="color:#aca494">T</span>rivia
</h3><br>
<!--------- CONTENT --------->
<ul class="pl-4">
<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" style="border-color:#404040; opacity:0.2">
<!-------- DESIGN NOTES -------------------------------->
<div class="notes">
<!--------- HEADER --------->
<h3 class="text-uppercase font-weight-bold" style="letter-spacing:3px;">
<span style="color:#aca494">D</span>esign Notes
</h3><br>
<!--------- CONTENT --------->
<div class="row no-gutters mb-3">
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Designer</span>
<span>@ user</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; 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 pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Worth</span>
<span>$$$</span>
</div>
<div class="col-md-6 py-1">
<span class="text-uppercase pr-3 font-weight-bold" style="color:#aca494; letter-spacing:1px;">Status</span>
<span>content</span>
</div>
</div>
<ul class="pl-4">
<li>note</li>
<li>note</li>
<li>note</li>
<li>note</li>
<!-- add/delete more above THIS line -->
</ul>
</div>
<!-- add/delete more sections above THIS line -->
</div>
</div>
</div>
<!-------------------------------------------------
CREDIT // FOOTER
------------------------------------------------->
<div class="px-4 py-3" style="background-color:#222222; color:#aca494">
<div class="text-right small" style="letter-spacing:0.5em">
<a href="https://toyhou.se/jiko" class="text-reset tooltipster"
title="code by jiko" style="text-decoration:none">
<i class="far fa-code"></i>
</a>
.
<a href="LINK_TO_ARTIST" class="text-reset tooltipster"
title="image by ARTIST" style="text-decoration:none">
<i class="far fa-image"></i>
</a>
</div>
</div>
</div>
