<!-------------------------------------------------
F2U Wings of Fire Basics — Accented 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/# ] !
------------------------------
PALETTE
> main accent ----------------- #7c708f
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto my-5" style="max-width:900px; font-family:times;">
<div class="row no-gutters flex-row-reverse text-muted">
<!-------------------------------------------------
RIGHT SIDE
------------------------------------------------->
<div class="col-lg-4 col-md-5 col-sm-8 mx-auto p-1">
<div class="card rounded-0 p-3 bg-faded h-100 flex-column" style="border-width:10px 0; border-color:#7c708f">
<!-- ICON
---------------------------------------------->
<!--
> any tall image is best!
-->
<div class="flex-grow-1 mt-n5">
<div class="card rounded-0 border-0 p-2 h-100" style="background:#7c708f">
<img src="IMG_URL_HERE"
class="h-100 w-100" style="object-fit:cover;">
</div>
</div>
<!-- QUOTE
---------------------------------------------->
<!--
> should be okay with any length
> if you want to highlight a word or two, place them inside the <span> tag!
-->
<div class="flex-grow-1 my-3">
<div class="card rounded-0 border-0 p-2 text-center h-100">
<p class="my-auto font-italic text-uppercase" style="font-weight:900">
"This is a quote with a highlighted
<span class="mt-n1 lead" style="color:#7c708f; letter-spacing:1px; font-weight:900">word</span>
right there."
</p>
</div>
</div>
<!-- FONTAWESOME ICON DECOR
---------------------------------------------->
<!--
> find more icons at [fontawesome.com]!
-->
<div class="flex-grow-2">
<div class="h-100">
<div class="row no-gutters justify-content-center h-100">
<!-- LEFT ICON -->
<div class="col-auto">
<div class="card rounded-0 mx-auto" style="min-height:100px; width:1px; border-width:0 1px 0 0"></div>
<i class="mt-2 fa-thin fa-dragon fa-2x"></i>
</div>
<!-- RIGHT ICON -->
<div class="col-auto pl-1">
<div class="card rounded-0 mx-auto" style="width:1px; min-height:50px; border-width:0 1px 0 0"></div>
<i class="mt-3 fa-light fa-heart fa-lg"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
LEFT SIDE
------------------------------------------------->
<div class="col-lg-8 mt-lg-0 mt-5">
<div class="row no-gutters">
<!-------------------------------------------------
MAIN INFO
------------------------------------------------->
<div class="col-12 p-1 order-1">
<div class="card rounded-0 p-2 bg-faded h-100" style="border-width:10px 0 0 0; border-color:#7c708f">
<div class="row no-gutters m-n1">
<!-- BASIC INFO
---------------------------------------------->
<div class="col-sm-6 p-1 mt-n5">
<!-- NAME -------------------------------->
<div class="card rounded-0 border-0 p-3 mb-2" style="background:#7c708f">
<div class="text-white font-italic text-uppercase lead text-center" style="letter-spacing:1px; font-weight:900">
Name
</div>
</div>
<!-- EVERYTHING ELSE --------------------->
<div class="card border-0 rounded-0 p-3">
<div>
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f">
Alias
</div>
<div>
content
</div><hr class="my-2">
</div>
<!----------------------------------->
<div>
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f">
Gender
</div>
<div>
content (pro/nouns)
</div><hr class="my-2">
</div>
<!----------------------------------->
<div>
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f">
Orientation
</div>
<div>
content
</div><hr class="my-2">
</div>
<!----------------------------------->
<div>
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f">
Occupation
</div>
<div>
content
</div><hr class="my-2">
</div>
<!----------------------------------->
<div>
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f">
Tribe
</div>
<div>
content
</div><hr class="my-2">
</div>
<!----------------------------------->
<div>
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f">
Residence
</div>
<div>
content
</div>
</div>
<!-- add more above this line! -->
</div>
</div>
<!-- SUMMARY
---------------------------------------------->
<div class="col-sm-6 p-1 d-block d-sm-flex flex-column">
<div class="card border-0 rounded-0 p-3" style="flex: 1 1 200px; min-height: 200px; overflow-y: auto;">
<!-- CONTENT ---------------------------->
<div class="text-justify">
<p>This scrolls on desktops, flat on mobile!</p>
<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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<hr class="w-100 my-2">
<!-- PREFERENCES ------------------------>
<div class="text-left">
<!-- LIKES -->
<div class="mt-0">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f;">
Likes
</div>
<div class="font-italic">
content, content, content, content
</div>
</div>
<!-- DISLIKES -->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f;">
Dislikes
</div>
<div class="font-italic">
content, content, content, content
</div>
</div>
<!-- add more above this line? -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
STATS
------------------------------------------------->
<div class="col-sm-4 p-1 order-2">
<!-- TAB BUTTONS
---------------------------------------------->
<ul class="nav row no-gutters">
<li class="col-6">
<a href="#basic_personality" data-toggle="tab" class="active border-0 rounded-0 btn btn-default w-100" style="color:#7c708f; box-shadow:none;">
<i class="fa-solid fa-heart"></i>
</a>
</li>
<li class="col-6">
<a href="#basic_stats" data-toggle="tab" class="border-0 rounded-0 btn btn-default w-100" style="color:#7c708f; box-shadow:none;">
<i class="fa-solid fa-sword"></i>
</a>
</li>
</ul>
<div class="card border-0 rounded-0 bg-faded p-2">
<div class="card border-0 rounded-0 tab-content p-3" style="height:200px; overflow:auto;">
<!-- PERSONALITY STATS
---------------------------------------------->
<!--
> adjust the [width:50%] to any percentage from 0–100%
-->
<div class="tab-pane fade active show" id="basic_personality">
<div class="mt-0">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Charisma
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Kindess
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Patience
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Intellect
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Honesty
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!-- add more above this line! -->
</div>
<!-- BATTLE STATS
---------------------------------------------->
<!--
> adjust the [width:50%] to any percentage from 0–100%
-->
<div class="tab-pane fade" id="basic_stats">
<div class="mt-0">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Attack
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Defence
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Speed
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Magic
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!--------------------------------------->
<div class="mt-3">
<div class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px;">
Healing
</div>
<div class="progress rounded-0">
<div class="progress-bar" style="height:5px;
width:50%;
background:#7c708f;"></div>
</div>
</div>
<!-- add more above this line! -->
</div>
</div>
</div>
</div>
<!-------------------------------------------------
SECONDARY INFO
------------------------------------------------->
<div class="col-sm p-1 order-3">
<!-- TAB BUTTONS
---------------------------------------------->
<ul class="nav row no-gutters">
<li class="col">
<a href="#basic_trivia" data-toggle="tab" class="active border-0 rounded-0 btn btn-default w-100" style="color:#7c708f; box-shadow:none;">
<i class="fa-solid fa-book-open-cover"></i>
</a>
</li>
<li class="col">
<a href="#basic_history" data-toggle="tab" class="border-0 rounded-0 btn btn-default w-100" style="color:#7c708f; box-shadow:none;">
<i class="fa-solid fa-books"></i>
</a>
</li>
<li class="col">
<a href="#basic_links" data-toggle="tab" class="border-0 rounded-0 btn btn-default w-100" style="color:#7c708f; box-shadow:none;">
<i class="fa-solid fa-link"></i>
</a>
</li>
</ul>
<div class="card border-0 rounded-0 bg-faded p-2">
<div class="card border-0 rounded-0 tab-content p-3" style="height:200px; overflow:auto;">
<!-- TRIVIA
---------------------------------------------->
<div class="tab-pane fade active show" id="basic_trivia">
<ul class="mb-0 pl-3">
<li>trivia content here</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- HISTORY
---------------------------------------------->
<div class="tab-pane fade" id="basic_history">
<div class="text-justify">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- RELATIONSHIPS
---------------------------------------------->
<div class="tab-pane fade" id="basic_links">
<!-- ONE --------------------------------->
<div class="mt-0">
<div class="justify-content-between align-items-center mb-2">
<a href="LINK_TO_CHARACTER" class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f;">
Character Name
</a>
<!--
> full -------- <i class="fa-solid fa-heart" style="color:#7c708f"></i>
> empty ------- <i class="fa-regular fa-heart"></i>
-->
<div>
<i class="fa-solid fa-heart" style="color:#7c708f"></i>
<i class="fa-solid fa-heart" style="color:#7c708f"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
<div class="text-justify">
<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>
</div>
</div>
<!-- TWO --------------------------------->
<div class="mt-0"><hr>
<div class="justify-content-between align-items-center mb-2">
<a href="LINK_TO_CHARACTER" class="font-italic text-uppercase" style="font-weight:900; letter-spacing:1px; color:#7c708f;">
Character Name
</a>
<!--
> full -------- <i class="fa-solid fa-heart" style="color:#7c708f"></i>
> empty ------- <i class="fa-regular fa-heart"></i>
-->
<div>
<i class="fa-solid fa-heart" style="color:#7c708f"></i>
<i class="fa-solid fa-heart" style="color:#7c708f"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
<div class="text-justify">
<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>
<!-- add more relations above this line! -->
</div>
</div>
</div>
</div>
<!-------------------------------------------------
MOODBOARD
------------------------------------------------->
<div class="col-12 p-1 order-4">
<div class="card rounded-0 p-2 bg-faded" style="border-width:0 0 10px 0; border-color:#7c708f">
<div class="row no-gutters m-n1">
<!-- ONE
---------------------------------------------->
<div class="col p-1">
<div class="w-100" style="min-height:50px;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;"></div>
</div>
<!-- TWO
---------------------------------------------->
<div class="col p-1">
<div class="w-100" style="min-height:50px;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;"></div>
</div>
<!-- THREE
---------------------------------------------->
<div class="col p-1">
<div class="w-100" style="min-height:50px;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;"></div>
</div>
<!-- add more if u like -->
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
JIKO CREDITS
------------------------------------------------->
<div class="col-12 p-2">
<div class="text-right">
<a href="https://toyhou.se/19561919." class="font-italic text-uppercase" style="color:#7c708f; font-weight:900">
code by jiko
</a>
</div>
</div>
</div></div>
<!-- CODE ENDS -->