<!-- ------------------------------
ROYAL — 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!!
→ the examplar version has [font-family:avenir;] in it. if you like it, feel free to add it in the style tag of the first line of the code!
→ if you do NOT want the <hr> to be in primary colour, simply delete [card-outline-primary]!
use ctrl + f in the editor to easily replace all!
------------------------------- -->
<div class="mx-auto py-2 text-justify" style="font-size:95%; letter-spacing:0.3px; line-height:17px; max-width:900px">
<!-- ------------------------------
FIRST SECTION
→ focal image
→ basic info
------------------------------- -->
<div class="row no-gutters">
<!-- ------------------------------------
FOCAL IMAGE
------------------------------------- -->
<div class="col-lg-5 order-1 order-lg-2 p-2">
<div class="card rounded-0 bg-faded p-3 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ SHORT PHRASE ------------------------------ -->
<!--
could be a quote, lyric, or pronounication! or icon using fontawesome.com!
just make it short!
-->
<div class="text-uppercase text-center mb-2">
<hr class="mt-0 mb-2 card-outline-primary">
<span class="text-primary" style="font-family:times; font-weight:600; letter-spacing:0.5px">
Some words here
</span>
<hr class="mt-2 mb-0 card-outline-primary">
</div>
<!-- ------ IMAGE ------------------------------ -->
<!--
better if the image is landscape than portrait!
-->
<div class="h-100 w-100" style="min-height:150px;
background:url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-repeat: no-repeat;
background-position: center;"></div>
</div>
</div>
<!-- ------------------------------------
BASIC INFO
------------------------------------- -->
<div class="col-lg-7 order-2 order-lg-1 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ HEADER ------------------------------ -->
<!--
are the headers too big?
play around with the display-# and letter-spacing:#px!
-->
<div class="text-primary display-2 text-md-left text-center text-uppercase font-italic pl-2"
style="font-family:times; font-weight:600; letter-spacing:0.2em;">
Name
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- ------ CONTENT ------------------------------ -->
<div class="row no-gutters">
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Name</span>
<span>content</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Age</span>
<span>content</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Alias</span>
<span>content</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span>
<span>content</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Sexuality</span>
<span>content</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Pronouns</span>
<span>prn / prn</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Role</span>
<span>content</span>
</div>
<div class="col-lg-6 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Race</span>
<span>or species</span>
</div>
<!-- add / delete above THIS line! -->
<!-- if you do, be sure it's even amounts! -->
</div>
</div>
</div>
</div>
<!-- ------------------------------
SECOND SECTION
→ design notes
→ summary / personality
------------------------------- -->
<div class="row no-gutters">
<!-- ------------------------------------
COOL DIVIDER WITH ICON
------------------------------------- -->
<!--
add [text-white] in the class tag (anywhere) to make it stand out!
-->
<div class="col-lg-auto col order-3 order-lg-3 p-2">
<div class="p-2 h-100 text-center bg-primary">
<i class="far fa-seedling"></i>
</div>
</div>
<!-- ------------------------------------
DESIGN NOTES
------------------------------------- -->
<div class="col-lg order-4 order-lg-4 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px;">
<!-- ------ SHORT PHRASE ------------------------------ -->
<div class="text-uppercase text-center mb-2">
<hr class="mt-0 mb-2 card-outline-primary">
<span class="text-primary" style="font-family:times; font-weight:600; letter-spacing:0.5px">
Some words here
</span>
<hr class="mt-2 mb-0 card-outline-primary">
</div>
<!-- ------ DESIGN NOTES ------------------------------ -->
<!--
→ don't like the square plots?
delete [list-style:square;] to get it back to the circles!
-->
<ul class="text-muted pl-4" style="list-style:square; height:200px; overflow:auto">
<li class="py-1">Write design notes for your character here!</li>
<li class="py-1">Or maybe general warnings such as "No NFSW" or "Do not draw them in revealing clothing."</li>
<li class="py-1">This box scrolls.</li>
<li class="py-1">Morbi vel turpis at magna lobortis dapibus at vitae ante.</li>
<li class="py-1">Integer interdum pharetra ligula, non dignissim dui fermentum varius.</li>
<!-- add / delete above THIS line! -->
</ul>
<!-- ------ REFERENCE ------------------------------ -->
<a href="LINK TO IMAGE" class="p-2 d-block bg-primary text-center text-white" style="letter-spacing:1px;">
Reference Here
</a>
</div>
</div>
<!-- ------------------------------------
PROFILE
------------------------------------- -->
<div class="col-lg-7 order-5 order-lg-5 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ HEADER ------------------------------ -->
<div class="text-primary display-2 text-md-right text-center text-uppercase font-italic pl-2"
style="font-family:times; font-weight:600; letter-spacing:0.2em;">
Profile
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- ------ CONTENT ------------------------------ -->
<div class="text-muted" style="height:240px; overflow:auto">
<p>This box scrolls! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit.</p>
<p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.</p>
<p>Maecenas at felis non justo egestas convallis. Fusce ornare lacus convallis ex laoreet, nec varius libero laoreet. Donec eget mauris ac justo accumsan fermentum. Vestibulum fermentum interdum libero id tempus. Donec auctor ipsum sed lacus blandit ornare.</p>
</div>
</div>
</div>
</div>
<!-- ------------------------------
THIRD SECTION
→ stats
→ skills / abilities
------------------------------- -->
<div class="row no-gutters">
<!-- ------------------------------------
COOL DIVIDER WITH ICON
------------------------------------- -->
<!--
→ add [text-white] in the class tag (anywhere) to make it stand out!
-->
<div class="col-lg-auto col order-8 order-lg-8 p-2">
<div class="p-2 h-100 text-center bg-primary">
<i class="far fa-seedling"></i>
</div>
</div>
<!-- ------------------------------------
STATS
------------------------------------- -->
<div class="col-lg-4 order-6 order-lg-6 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ HEADER ------------------------------ -->
<div class="text-primary display-2 text-md-left text-center text-uppercase font-italic pl-2"
style="font-family:times; font-weight:600; letter-spacing:0.2em;">
STATS
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- ------ CONTENT ------------------------------ -->
<!--
→ for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
→ based of the MBTI traits but could be repurposed for battle stats (e.g. slow vs. quick)!
→ optional but add [class="text-muted"] to the span element for the losing trait/what your character isn't!
-->
<div class="stats my-auto" style="letter-spacing:0.5px">
<div class="mb-4">
<div class="justify-content-between">
<span>solitary</span>
<span>social</span>
</div>
<div class="progress my-2 rounded-0" style="height:5px">
<div class="progress-bar text-primary"
style="width:50%; background:none; border-right-width:5px; border-right-style:solid">
</div>
</div>
</div>
<div class="my-4">
<div class="justify-content-between">
<span>observant</span>
<span>dense</span>
</div>
<div class="progress my-2 rounded-0" style="height:5px">
<div class="progress-bar text-primary"
style="width:50%; background:none; border-right-width:5px; border-right-style:solid">
</div>
</div>
</div>
<div class="my-4">
<div class="justify-content-between">
<span>logical</span>
<span>emotional</span>
</div>
<div class="progress my-2 rounded-0" style="height:5px">
<div class="progress-bar text-primary"
style="width:50%; background:none; border-right-width:5px; border-right-style:solid">
</div>
</div>
</div>
<div class="mt-4">
<div class="justify-content-between">
<span>organised</span>
<span>messy</span>
</div>
<div class="progress my-2 rounded-0" style="height:5px">
<div class="progress-bar text-primary"
style="width:50%; background:none; border-right-width:5px; border-right-style:solid">
</div>
</div>
</div>
<div class="mt-4">
<div class="justify-content-between">
<span>assertive</span>
<span>turbulent</span>
</div>
<div class="progress my-2 rounded-0" style="height:5px">
<div class="progress-bar text-primary"
style="width:50%; background:none; border-right-width:5px; border-right-style:solid">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------------
SKILLS
------------------------------------- -->
<div class="col-lg order-7 order-lg-7 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ SHORT PHRASE ------------------------------ -->
<div class="text-uppercase text-center mb-2">
<hr class="mt-0 mb-2 card-outline-primary">
<span class="text-primary" style="font-family:times; font-weight:600; letter-spacing:0.5px">
Some words here
</span>
<hr class="mt-2 mb-0 card-outline-primary">
</div>
<!-- ------ CONTENT ------------------------------ -->
<div class="mt-3" style="height:300px; overflow:auto">
<!-- SKILL ONE -->
<blockquote class="border-top-0 border-right--0 border-bottom-0 rounded-0" style="font-size:100%">
<div class="mb-1 text-uppercase" style="letter-spacing:2px;">Title</div>
<div class="text-muted">
<p>Maecenas ac pretium quam. Mauris ullamcorper, sapien ac pellentesque egestas, sem urna blandit felis, et scelerisque metus lacus ac diam.</p>
<p>Phasellus tincidunt neque elit, quis facilisis odio molestie in. Nulla neque lectus, malesuada vel congue sit amet, tempor quis est. Quisque sit amet nisi nisi.</p>
</div>
</blockquote>
<!-- SKILL TWO -->
<blockquote class="border-top-0 border-right--0 border-bottom-0 rounded-0" style="font-size:100%">
<div class="mb-1 text-uppercase" style="letter-spacing:2px;">Title</div>
<div class="text-muted">
<p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Donec placerat arcu a turpis commodo eleifend.</p>
<p>Aenean at odio velit. Morbi accumsan condimentum nunc, vitae semper justo luctus vitae.</p>
</div>
</blockquote>
<!-- add / delete above THIS line! -->
</div>
</div>
</div>
</div>
<!-- ------------------------------
FORTH SECTION
→ history
------------------------------- -->
<div class="row no-gutters">
<!-- ------------------------------------
HISTORY
------------------------------------- -->
<div class="col-lg-12 order-9 order-lg-9 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ HEADER ------------------------------ -->
<div class="text-primary display-2 text-md-left text-center text-uppercase font-italic pl-2"
style="font-family:times; font-weight:600; letter-spacing:0.2em;">
History
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- ------ CONTENT ------------------------------ -->
<!--
→ do you want the scrolling feature here?
add [ style="height:250px; overflow:auto" ] below, next to the div!
-->
<div class="text-muted">
<p>This is a section that will NOT scroll by default, but there are instructions on how to add them in!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nunc faucibus a pellentesque sit. Non blandit massa enim nec dui</p>
<p>Arcu cursus vitae congue mauris rhoncus aenean vel elit. Tristique nulla aliquet enim tortor. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque vitae tempus quam pellentesque nec nam aliquam sem. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.</p>
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. At augue eget arcu dictum varius duis at. Aliquet bibendum enim facilisis gravida neque convallis a. Consectetur libero id faucibus nisl tincidunt eget nullam non. Elit at imperdiet dui accumsan sit amet nulla facilisi. Eget mauris pharetra et ultrices neque. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Pharetra diam sit amet nisl suscipit adipiscing. Urna neque viverra justo nec ultrices dui sapien eget mi.</p>
</div>
</div>
</div>
</div>
<!-- ------------------------------
FIFTH SECTION
→ trivia
→ misc. info
------------------------------- -->
<div class="row no-gutters">
<!-- ------------------------------------
COOL DIVIDER WITH ICON
------------------------------------- -->
<!--
→ add [text-white] in the class tag (anywhere) to make it stand out!
-->
<div class="col-lg-auto col order-12 order-lg-10 p-2">
<div class="p-2 h-100 text-center bg-primary">
<i class="far fa-seedling"></i>
</div>
</div>
<!-- ------------------------------------
TRIVIA
------------------------------------- -->
<div class="col-lg-7 order-10 order-lg-11 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ HEADER ------------------------------ -->
<div class="text-primary display-2 text-md-left text-center text-uppercase font-italic pl-2"
style="font-family:times; font-weight:600; letter-spacing:0.2em;">
Trivia
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- ------ TRIVIA ------------------------------ -->
<!--
→ don't like the square plots?
delete [list-style:square;] to get it back to the circles!
-->
<ul class="text-muted pl-4 mb-0" style="list-style:square;">
<li class="py-1">The Trivia Box does NOT scroll but rather, grows with content.</li>
<li class="py-1">In cursus nisi ac eros convallis, at fringilla purus laoreet.</li>
<li class="py-1">Morbi pretium gravida lacus, vel tempor libero interdum et.</li>
<li class="py-1">Integer pellentesque pretium dolor vel eleifend.</li>
<li class="py-1">Vestibulum ornare id eros id rutrum.</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
</div>
<!-- ------------------------------------
MISC. INFO
------------------------------------- -->
<div class="col-lg order-11 order-lg-12 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ SHORT PHRASE ------------------------------ -->
<div class="text-uppercase text-center mb-2">
<hr class="mt-0 mb-2 card-outline-primary">
<span class="text-primary" style="font-family:times; font-weight:600; letter-spacing:0.5px">
Some words here
</span>
<hr class="mt-2 mb-0 card-outline-primary">
</div>
<!-- ------ CONTENT ------------------------------ -->
<div class="row no-gutters">
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Aesthetic</span>
<span>content</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Alignment</span>
<span>content</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">MBTI</span>
<span>content</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Sin</span>
<span>content</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Virtue</span>
<span>content</span>
</div>
<!-- tiny divider -->
<hr class="w-100">
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Designer</span>
<span>user here</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Obtained</span>
<span>content</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Status</span>
<span>content</span>
</div>
<div class="col-12 p-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Value</span>
<span>$$$</span>
</div>
<!-- add / delete above THIS line! -->
</div>
</div>
</div>
</div>
<!-- ------------------------------
SIXTH SECTION
→ relationships
------------------------------- -->
<div class="row no-gutters">
<!-- ------------------------------------
HISTORY
------------------------------------- -->
<div class="col-lg-12 order-13 order-lg-13 p-2">
<div class="card rounded-0 bg-faded p-3 px-4 h-100" style="border-style:double solid double; border-width:4px 1px 4px">
<!-- ------ CONTENT ------------------------------ -->
<!--
→ do you want the scrolling feature here?
add [ style="height:300px; overflow:auto" ] below, next to the div!
-->
<div class="row no-gutters">
<!-- --- CHARACTER ONE --- -->
<div class="col-lg-6 p-3">
<!-- NAME -->
<div class="display-4 text-md-left text-center text-uppercase font-italic pl-2"
style="letter-spacing:0.2em;">
<a href="CHARA LINK" style="font-family:times; font-weight:600;">Name</a>
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- RELATIONSHIP -->
<div class="mb-1 text-uppercase justify-content-between px-3">
<span style="font-family:times; font-weight:600; letter-spacing:1.5px">relationship</span>
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart text-muted"></i>
<i class="far fa-heart text-muted"></i>
</span>
</div>
<!-- IMAGE -->
<!-- squared images are recommanded! -->
<div class="mr-2 float-sm-left justify-content-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">
</div>
<div class="pt-2 text-muted">
<p>One paragraph would look best but you can go wild!</p>
<p>The relationship box/section does NOT scroll but like before, there's instructions if you want it. The content itself doesn't scroll by default but I think it's better this way, especially if you plan to write a lot!</p>
</div>
</div>
<!-- --- CHARACTER TWO --- -->
<div class="col-lg-6 p-3">
<!-- NAME -->
<div class="display-4 text-md-right text-center text-uppercase font-italic pl-2"
style="letter-spacing:0.2em;">
<a href="CHARA LINK" style="font-family:times; font-weight:600;">Name</a>
</div>
<hr class="mt-0 mb-3 w-100 card-outline-primary">
<!-- RELATIONSHIP -->
<div class="mb-1 text-uppercase justify-content-between px-3">
<span style="font-family:times; font-weight:600; letter-spacing:1.5px">relationship</span>
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart text-muted"></i>
<i class="far fa-heart text-muted"></i>
</span>
</div>
<!-- IMAGE -->
<!-- squared images are recommanded! -->
<div class="mr-2 float-sm-left justify-content-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">
</div>
<div class="pt-2 text-muted">
<p>Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Ut venenatis tellus in metus vulputate. Elit at imperdiet dui accumsan sit amet nulla facilisi. Dignissim suspendisse in est ante in nibh.</p>
<p>Varius sit amet mattis vulputate enim nulla aliquet. Tellus molestie nunc non blandit massa enim nec dui. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Felis eget nunc lobortis mattis aliquam faucibus!</p>
</div>
</div>
<!-- add / delete above THIS line! -->
</div>
</div>
</div>
</div>
<!-- ------------------------------
CREDITS
→ please keep credits on the profile
if you decide to move it!
------------------------------- -->
<div class="small px-2">
<div class="text-right" style="letter-spacing:0.3em;">
<a href="https://toyhou.se/10484081.-f2u-royal" class="text-muted tooltipster"
title="code by jiko" style="text-decoration: none">
<i class="far fa-code"></i>
</a>
</div>
</div>
</div>
