<!-------------------------------------------------
Trace — 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 (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/# ] !
------------------------------
COLOUR
→ accent ----------- #aaaaaa
use control/command + f to quickly change the colours!
------------------------------------------------->
<!--
→ don't like the lowercase aesthetic? delete [text-lowercase]!
→ feel free to change the [max-width:800px] too!
-->
<div class="mx-auto text-lowercase" style="font-size:13px; letter-spacing:0.3px; max-width:800px;">
<div class="row no-gutters" style="margin:-4px;">
<!------------------------------------------------
FAKE TAGS
------------------------------------------------->
<!--
→ you can add more but check how it may look on mobile view
-->
<div class="col-lg-12 col-sm-8 mx-auto p-1">
<div class="row no-gutters font-italic font-weight-bold justify-content-end mx-n1" style="color:#aaaaaa; font-size: 110%">
<div class="col-auto mx-1">
<div class="bg-faded rounded-0 px-3 py-2"> #some </div>
</div>
<div class="col-auto mx-1">
<div class="bg-faded rounded-0 px-3 py-2"> #words </div>
</div>
<div class="col-auto mx-1">
<div class="bg-faded rounded-0 px-3 py-2"> #here </div>
</div>
</div>
</div>
<!------------------------------------------------
NAME HEADER
------------------------------------------------->
<div class="col-lg-12 col-sm-8 mx-auto p-1">
<div class="row no-gutters mx-n1">
<div class="col-auto mx-1">
<div class="card border-0 rounded-0 p-1 h-100" style="opacity:0.3; background:#aaaaaa;"></div>
</div>
<div class="col-auto mx-1">
<div class="card border-0 rounded-0 p-2 h-100" style="opacity:0.5; background:#aaaaaa;"></div>
</div>
<div class="col-auto mx-1">
<div class="card border-0 rounded-0 p-4 h-100" style="opacity:0.7; background:#aaaaaa;"></div>
</div>
<!-- CHARACTER NAME
--------------------------------------------->
<div class="col mx-1">
<div class="card border-0 rounded-0 px-3 text-right h-100" style="background:#aaaaaa;">
<div class="text-uppercase font-weight-bold text-white my-auto" style="z-index:2; font-size:20px; letter-spacing:0.2em;">
Name
</div>
</div>
</div>
</div>
</div>
<!-- BOX SHADOW / SHINE (deletable) ------------->
<div class="col-lg-12 col-sm-8 mx-auto"><div class="card border-0 rounded-0 h-100 mx-1" style="opacity:0.1; padding-bottom:25px; margin-top:-30px"></div></div>
<!------------------------------------------------
LEFT PROFILE CONTENT
------------------------------------------------->
<div class="col-lg-4 col-sm-8 mx-auto p-1">
<div class="card-block bg-faded text-muted py-0 h-100">
<!--
→ don't want the left to scroll? delete [sticky-top]
-->
<div class="sticky-top py-5">
<!-- CHARACTER AVATAR
--------------------------------------------->
<!--
→ best if squared or 200x200!
-->
<div class="text-center mb-4">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="rounded-0 border-0 img-thumbnail p-2 mb-2"
style="object-fit:cover; object-position:center; height:190px; width:190px; box-shadow:5px 5px #aaaaaa">
</div>
<!-- MUSIC
--------------------------------------------->
<div class="mx-lg-1 mx-5">
<!-- SONG NAME AND ARTIST --------------->
<div class="font-italic font-weight-bold" style="color:#aaaaaa;">
song title
</div>
<p>
artist
</p>
<!-- PROGRESS BAR AND TIME STAMP --------------->
<div class="progress mt-2 mb-1" style="height:3px">
<div class="progress-bar bg-secondary faded"
style="width:50%">
</div>
<div class="card bg-secondary border-0 rounded-0" style="width:5px;"></div>
</div>
<div class="small justify-content-between my-1">
<span>0:00</span>
<span>0:00</span>
</div>
<!-- FAKE BUTTONS ----------------------->
<div class="row no-gutters text-center mt-3">
<div class="col">
<i class="far fa-backward fa-lg fa-fw"></i>
</div>
<div class="col">
<i class="fas fa-play fa-lg fa-fw"></i>
</div>
<div class="col">
<i class="far fa-forward fa-lg fa-fw"></i>
</div>
</div>
<!-- MUSIC ------------------------------>
<!--
NOTE: YouTube video url must be PUBLIC and must NOT be from any 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= → fZ1Jxef2hiE ←
→ keep [?controls=0] at the end too! >:)
-->
<iframe src="https://www.youtube.com/embed/STRING_HERE?controls=0"
class="w-100" frameborder="0"
style="height:140px; position:absolute; bottom:-15px; left:0; opacity:0.001">
</iframe>
</div>
</div>
</div>
</div>
<!------------------------------------------------
RIGHT PROFILE CONTENT
------------------------------------------------->
<div class="col-lg-8 col-sm-8 mx-auto p-1">
<!--
→ TIP: if you're not ready to fill out a section but don't want to delete it (and lowkey want to save it for later), add [hide] next to the section name for it to disappear!
EXAMPLE: <div class="basic hide">
-->
<!-- BASIC INFO
--------------------------------------------->
<div class="basic ">
<div class="card-block bg-faded text-muted mb-2">
<div class="row no-gutters">
<div class="col-4 py-1 font-italic font-weight-bold" style="color:#aaaaaa;">Name</div>
<div class="col-8 py-1">content</div>
<div class="col-4 py-1 font-italic font-weight-bold" style="color:#aaaaaa;">Age</div>
<div class="col-8 py-1">content</div>
<div class="col-4 py-1 font-italic font-weight-bold" style="color:#aaaaaa;">Gender</div>
<div class="col-8 py-1">content</div>
<div class="col-4 py-1 font-italic font-weight-bold" style="color:#aaaaaa;">Pronouns</div>
<div class="col-8 py-1">con / tent</div>
<div class="col-4 py-1 font-italic font-weight-bold" style="color:#aaaaaa;">Race</div>
<div class="col-8 py-1">or species</div>
<div class="col-4 py-1 font-italic font-weight-bold" style="color:#aaaaaa;">Designer</div>
<div class="col-8 py-1">
<a href="LINK_TO_ARTIST" class="text-reset">artist</a>
</div>
<!-- add / delete more above THIS line!
these are just the basics after all -->
</div>
</div>
</div>
<!-- SUMMARY
--------------------------------------------->
<div class="summary">
<!-- DIVIDER ---------------------------->
<!--
→ change [crown] to whatever icon that fits your character
from [https://fontawesome.com/]!
-->
<div class="row no-gutters mb-2 mx-3">
<div class="col">
<hr>
</div>
<div class="col-auto mx-3 align-items-center">
<i class="far fa-crown fa-lg fa-fw"></i>
</div>
<div class="col">
<hr>
</div>
</div>
<!-- CONTENT ---------------------------->
<div class="card-block bg-faded text-muted mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- PREFERENCES
--------------------------------------------->
<div class="pref">
<div class="row no-gutters mb-2">
<!-- LIKES ------------------------>
<div class="col-6 pr-1">
<div class="card-block bg-faded text-muted h-100">
<span class="font-italic font-weight-bold" style="color:#aaaaaa;">Likes</span>
<ul class="ml-n4 mb-0" style="list-style:square">
<li class="my-1">content</li>
<li class="my-1">content</li>
<li class="my-1">content</li>
</ul>
</div>
</div>
<!-- DISLIKES ------------------------>
<div class="col-6 pl-1">
<div class="card-block bg-faded text-muted h-100">
<span class="font-italic font-weight-bold" style="color:#aaaaaa;">Dislikes</span>
<ul class="ml-n4 mb-0" style="list-style:square">
<li class="my-1">content</li>
<li class="my-1">content</li>
<li class="my-1">content</li>
</ul>
</div>
</div>
</div>
</div>
<!-- STORY / FAQ
--------------------------------------------->
<div class="misc">
<!-- DIVIDER ---------------------------->
<!--
→ change [crown] to whatever icon that fits your character
from [https://fontawesome.com/]!
-->
<div class="row no-gutters mb-2 mx-3">
<div class="col">
<hr>
</div>
<div class="col-auto mx-3 align-items-center">
<i class="far fa-lightbulb fa-lg fa-fw"></i>
</div>
<div class="col">
<hr>
</div>
</div>
<!-- ONE -------------------------------->
<div class="card-block bg-faded text-muted mb-2">
<div class="font-italic font-weight-bold" style="color:#aaaaaa;">
heading one
</div>
<div class="blockquote mb-0 mt-2 py-0" style="font-size:100%; border-width:2px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
</div>
</div>
<!-- TWO -------------------------------->
<div class="card-block bg-faded text-muted mb-2">
<div class="font-italic font-weight-bold" style="color:#aaaaaa;">
heading two
</div>
<div class="blockquote mb-0 mt-2 py-0" style="font-size:100%; border-width:2px">
<p>Libero id faucibus nisl tincidunt eget nullam. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Sit amet tellus cras adipiscing.</p>
</div>
</div>
<!-- THREE ------------------------------>
<div class="card-block bg-faded text-muted mb-2">
<div class="font-italic font-weight-bold" style="color:#aaaaaa;">
heading three
</div>
<div class="blockquote mb-0 mt-2 py-0" style="font-size:100%; border-width:2px">
<p>Amet porttitor eget dolor morbi. Donec ultrices tincidunt arcu non sodales neque sodales ut. At tempor commodo ullamcorper a lacus vestibulum sed.</p>
</div>
</div>
<!-- FOUR ------------------------------->
<div class="card-block bg-faded text-muted mb-2">
<div class="font-italic font-weight-bold" style="color:#aaaaaa;">
heading four
</div>
<div class="blockquote mb-0 mt-2 py-0" style="font-size:100%; border-width:2px">
<p>Diam vel quam elementum pulvinar etiam non. Erat nam at lectus urna duis. Sed vulputate mi sit amet mauris. Ultrices gravida dictum fusce ut placerat orci nulla. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
</div>
</div>
<!-- add / delete more above THIS line! -->
</div>
<!-- GALLERY / MOODBOARD
--------------------------------------------->
<div class="gallery">
<!-- DIVIDER ---------------------------->
<!--
→ change [crown] to whatever icon that fits your character
from [https://fontawesome.com/]!
-->
<div class="row no-gutters mb-2 mx-3">
<div class="col">
<hr>
</div>
<div class="col-auto mx-3 align-items-center">
<i class="far fa-camera-polaroid fa-lg fa-fw"></i>
</div>
<div class="col">
<hr>
</div>
</div>
<!-- IMAGES ----------------------------->
<div class="row no-gutters mx-n1">
<div class="col-6 p-1">
<div class="card p-2 bg-faded border-0 rounded-0">
<div style="height:140px;
background-image:url(IMG_URL_HERE);
background-size:cover; background-position:center">
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card p-2 bg-faded border-0 rounded-0">
<div style="height:140px;
background-image:url(IMG_URL_HERE);
background-size:cover; background-position:center">
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card p-2 bg-faded border-0 rounded-0">
<div style="height:140px;
background-image:url(IMG_URL_HERE);
background-size:cover; background-position:center">
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card p-2 bg-faded border-0 rounded-0">
<div style="height:140px;
background-image:url(IMG_URL_HERE);
background-size:cover; background-position:center">
</div>
</div>
</div>
</div>
</div>
<!-- DESIGN NOTES
--------------------------------------------->
<div class="notes">
<!-- DIVIDER ---------------------------->
<!--
→ change [crown] to whatever icon that fits your character
from [https://fontawesome.com/]!
-->
<div class="row no-gutters mb-2 mx-3">
<div class="col">
<hr>
</div>
<div class="col-auto mx-3 align-items-center">
<i class="far fa-pen-alt fa-lg fa-fw"></i>
</div>
<div class="col">
<hr>
</div>
</div>
<!-- DIVIDER ---------------------------->
<div class="card-block bg-faded text-muted">
<span class="font-italic font-weight-bold" style="color:#aaaaaa;">Design Notes</span>
<ul class="ml-n4 mb-0" style="list-style:square">
<li class="my-1">content</li>
<li class="my-1">content</li>
<li class="my-1">content</li>
</ul>
</div>
</div>
<!-- add / delete more sections above THIS line! -->
</div>
<!------------------------------------------------
CREDITS
------------------------------------------------->
<div class="col-lg-12 col-sm-8 mx-auto p-1">
<div class="row no-gutters flex-row-reverse mx-n1">
<div class="col-auto mx-1">
<div class="card border-0 rounded-0 p-1 h-100" style="opacity:0.3; background:#aaaaaa;"></div>
</div>
<div class="col-auto mx-1">
<div class="card border-0 rounded-0 p-2 h-100" style="opacity:0.5; background:#aaaaaa;"></div>
</div>
<div class="col-auto mx-1">
<div class="card border-0 rounded-0 p-4 h-100" style="opacity:0.7; background:#aaaaaa;"></div>
</div>
<!-- CREDITS / DO NOT REMOVE
--------------------------------------------->
<div class="col mx-1">
<div class="card border-0 rounded-0 px-3 h-100" style="background:#aaaaaa;">
<div class="text-uppercase text-white my-auto" style="font-size:20px; z-index:2">
<a href="https://toyhou.se/13400919.-f2u-trace" class="text-reset tooltipster" title="code by jiko">
<i class="far fa-code fa-fw"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- BOX SHADOW / SHINE (deletable) ------------->
<div class="col-lg-12 col-sm-8 mx-auto"><div class="card border-0 rounded-0 h-100 mx-1" style="opacity:0.1; padding-bottom:25px; margin-top:-52px"></div></div>
<!------------------------------------------------
FAKE TAGS
------------------------------------------------->
<!--
→ you can add more but check how it may look on mobile view
-->
<div class="col-lg-12 col-sm-8 mx-auto p-1">
<div class="row no-gutters font-italic font-weight-bold mx-n1" style="color:#aaaaaa; font-size:110%">
<div class="col-aut mx-1">
<div class="bg-faded rounded-0 px-3 py-2"> #words </div>
</div>
<div class="col-auto mx-1">
<div class="bg-faded rounded-0 px-3 py-2"> #again </div>
</div>
</div>
</div>
</div>
</div><!-- CODE ENDS -->
