<!--
:: CLOUDY SKIES (SIMPLE) ver2
- Coded by miynn (https://toyhou.se/miynn)
- Custom Colors only
:: BASIC RULES ::
| 01. Please follow my rules that are listed here: https://miynncommissions.carrd.co/#codetos
| 02. This code is for the Closed Species: Yumenari ONLY. Please only use it for characters that
| belong to the CS!
:: TIPS ::
| 01. Coding knowledge is /not/ required, but heavily recommended.
| 02. WYSIWYG is to be disabled and Code Editor is to be turned on for the code to work!
| 03. Use CTRL+F to quickly change stuff below!
| 04. I use https://th.circlejourney.net/ to easily edit codes!!
| 05. The text and background color should automatically change depending on the TH theme
| you're using. I reccomend not changing them.
:: COLOR GUIDE ::
| #A3A6C7 << ACCENT COLOR & LINKS
| USE <a href="url here" style="color:#A3A6C7"> TO KEEP CONSISTENT IF YOU ADD MORE!
:: OTHER REFERENCES ::
| https://fontawesome.com/ << FONT-AWSOME DECORATIONS
-->
<div class="m-2 col-lg-0 mx-auto row no-gutters" style="font-size:82%;letter-spacing:0.25px;max-width:650px;">
<!-- TOP BAR -->
<div class="col-lg-12 rounded-top">
<div class="row no-gutters">
<div class="col m-1 p-2 rounded order-lg-1">
<!-- CHARACTER NAME -->
<h2 align="left" class="text-capitalize font-weight-light d-flex justify-content-between text-md-left" style="font-size:2rem;letter-spacing:4px;">
<span><i class="fas fa-clouds fa-fw" style="color:#A3A6C7;"></i>
Character Name</span>
</h2>
<!-- CHARACTER QUOTE -->
<hr class="my-2" style="border-top:#A3A6C7 2px solid;" />
<p class="text-lowercase font-weight-light text-right pr-1" style="font-size:1rem;">
<i class="fad fa-quote-left fa-fw pr-1" style="color:#A3A6C7;"></i>
<small>quote here...</small>
<i class="fad fa-quote-right fa-fw pl-1" style="color:#A3A6C7;"></i>
</p>
</div>
<!-- CHARACTER ICON -->
<div class="col-auto order-lg-2">
<img class="justify-content-center rounded-circle img-thumbnail" style="height:100px;width:100px;border:2px solid #A3A6C7;"
src="https://via.placeholder.com/100">
</div>
</div>
</div>
<!-- SECTION END -->
<!-- MAIN BODY -->
<div class="col-lg-12 order-lg-2">
<!-- BASIC INFO -->
<div class="p-2 mb-0" style="height:auto;overflow:auto;">
<!-- ATTRIBUTES
Just a heads up!!
You're welcome to add/remove attributes! It looks best when both columns are equal, however.
-->
<!-- NAME -->
<div class="row no-gutters mb-3">
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-pen-alt font-weight-bold" style="color:#A3A6C7;"></i> Name</b></span>
<span>content</span>
</div>
<!-- GENDER & PRONOUNS -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-venus-mars font-weight-bold" style="color:#A3A6C7;"></i> Gender</b></span>
<span>content (they/them)</span>
</div>
<!-- ORIENTATION -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-comment font-weight-bold" style="color:#A3A6C7;"></i> Orientation</b></span>
<span>content</span>
</div>
<!-- AGE -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-birthday-cake font-weight-bold" style="color:#A3A6C7;"></i> Age</b></span>
<span>content</span>
</div>
<!-- BIRTHDAY -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-calendar font-weight-bold" style="color:#A3A6C7;"></i> Birthday</b></span>
<span>content</span>
</div>
<!-- SPECIES -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-paw font-weight-bold" style="color:#A3A6C7;"></i> Species</b></span>
<span>Yumenari</span>
</div>
<!-- YUMENARI TYPE -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fad fa-clouds font-weight-bold" style="color:#A3A6C7;"></i> Type</b></span>
<span>Dream/Nightmare</span>
</div>
<!-- TYPE OF DREAMS -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-comment font-weight-bold" style="color:#A3A6C7;"></i> Type of Dreams</b></span>
<span class="small">content</span>
</div>
<!-- MASTERLIST ENTRY
Link to your character's ML entry!
-->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-th font-weight-bold" style="color:#A3A6C7;"></i> Masterlist</b></span>
<span><a href="URL HERE" style="color:#A3A6C7;opacity:0.8">O-000/MYO-000</a></span>
</div>
<!-- DESIGNER -->
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%"><b><i class="fa-fw fal fa-pencil font-weight-bold" style="color:#A3A6C7;"></i> Designer</b></span>
<span><a href="URL HERE" style="color:#A3A6C7;opacity:0.8"><i class="fa fa-user"></i> username</a></span>
</div>
<!-- IF YOU'D LIKE TO ADD MORE ATTRIBUTES, ADD ABOVE THIS LINE! -->
</div></div>
<!-- END ATTRIBUTES SECTION -->
<div class="p-0" style="height:auto;overflow:hidden;margin-top:-20px">
<!-- CHARACTER INFORMATION SECTION -->
<div class="row no-gutters">
<!-- SPECIES INFO -->
<div class="p-1 col-lg-3 order-lg-3">
<!-- SECTION TITLE, NO NEED TO EDIT THIS -->
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%">
<b><i class="fa-fw fal fa-stars font-weight-bold" style="color:#A3A6C7;"></i> Traits</b>
</span>
<!-- TRAITS LIST
[C]= Common / [UC] = Uncommon / [R] = Rare / [B] = Blessed
A reminder that generally, all traits are listed from top to bottom like this!:
- Weather trait
- Cloud Type (if applicable, plain clouds do not need to be listed)
- Number of Tails
- Any Misc Traits (Particles, Decomimi, Specters, Ect)
-->
<ul class="pt-1" style="list-style-type:square;font-size:90%;margin-left:-18px;max-height:90px;height:auto;overflow:auto;">
<li><b>[C]</b> List</li>
<li><b>[UC]</b> Your</li>
<li><b>[R]</b> Traits</li>
<li><b>[B]</b> Here!</li>
<li><b>[B]</b> It scrolls!</li>
<li><b>[C/UC/R/B]</b> :)</li>
</ul>
<!-- SECTION TITLE, NO NEED TO EDIT THIS -->
<span style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;line-height:10%">
<b><i class="fa-fw fal fa-shopping-bag font-weight-bold" style="color:#A3A6C7;"></i> Items Used</b>
</span>
<!-- TRAITS LIST
If you've used any items on this Yumenari, don't forget to list them here!
If there are not, you're welcome to just remove or put in N/A!
-->
<ul class="pt-2" style="list-style-type:square;font-size:90%;margin-left:-18px;max-height:60px;height:auto;overflow:auto;">
<li>Item Name <small>(dd/mm/yy)</small></li>
<li>Item Name <small>(dd/mm/yy)</small></li>
<li>Item Name <small>(dd/mm/yy)</small></li>
<li>Item Name <small>(dd/mm/yy)</small></li>
</ul>
<!-- SPECIES LOGO, DO NOT REMOVE -->
<div align="center" class="order-lg-6 align-text-bottom">
<a href="https://toyhou.se/~world/76231.yumenari-cove-"><img src="https://cdn.discordapp.com/attachments/889601380610891797/891192046059147264/yumi_logo_2222.png" style="opacity:.6;height:30px;transform:rotate(0deg);" /></a>
</div>
</div>
<!-- END SPECIES INFO SECTION-->
<!-- CHARACTER INFO-->
<div class="col-lg-7 d-flex flex-column p-0 m-0 pr-2 order-lg-3">
<!-- BLURB
For every new paragraph, use <p class="m-1">content here</p> instead of default <p> tags or <br>!
It looks neater that way & it won't break the code TT_TT
-->
<div class="overflow-auto" style="text-align:justify;height:145px;max-height:145px;font-size:93%">
<p class="m-1">Write a quick blurb of your character here!</p>
<p class="m-1">Don't worry: this section scrolls, so you have more than enough space located here if you don't have much to write. The default text alignment is "justify" but if you don't like that, you can always change it to "text-align:right" in the code. Otherwise go crazy!</p>
<p class="m-1">You can also have new paragraphs! If you'd like to have a section to write more info, check the extended versions!</p>
<p class="m-1">This paragraph is here to demonstrate the scroll!</p>
</div>
<!-- BLURB END -->
<!-- LIKES & DISLIKES-->
<div class="row no-gutters mt-2">
<div class="col mr-1">
<div class="justify-content-between" style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;"><b>Likes</b><span><b><i class="fa-fw fal fa-heart font-weight-bold pr-4" style="color:#A3A6C7;"></i></b></span></div>
<div class="border-0">
<div style="overflow-y:auto;height:auto;">
<ul style="list-style-type:square;font-size:90%;margin-left:-16px;">
<!-- LIKES -->
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four!</li>
<!-- IF YOU'D LIKE TO ADD MORE, ADD ABOVE THIS LINE -->
</ul>
</div>
</div>
</div>
<div class="col mr-2">
<div class="justify-content-between" style="letter-spacing:1px;font-variant:small-caps;font-size:1.2em;"><b>Dislikes</b><span><b><i class="fa-fw fal fa-heart-broken font-weight-bold pr-4" style="color:#A3A6C7;"></i></b></span></div>
<div class="border-0">
<div style="overflow-y:auto;height:auto;">
<ul style="list-style-type:square;font-size:90%;margin-left:-16px;">
<!-- DISLIKES -->
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four!</li>
<!-- IF YOU'D LIKE TO ADD MORE, ADD ABOVE THIS LINE -->
</ul>
</div>
</div>
</div>
</div>
<!-- LIKES & DISLIKES END-->
</div>
<!-- END CHARACTER INFO SECTION-->
<!-- AESTHETIC IMAGES-->
<div class="col-md-0 col p-0 order-lg-5 pr-2">
<div class="d-flex flex-column" style="height:250px;">
<!-- IMAGE ONE-->
<div class="img-thumbnail w-100 h-100 my-1" style="border:2px solid #A3A6C7;">
<div class="w-100 h-100" style="background:url('https://i.pinimg.com/474x/f4/68/1b/f4681ba2e6f7b1da292d7c2b6debf9f3.jpg');background-size:cover;background-position:top;"></div>
</div>
<!-- IMAGE TWO-->
<div class="img-thumbnail w-100 h-100 my-1" style="border:2px solid #A3A6C7;">
<div class="w-100 h-100" style="background:url('https://i.pinimg.com/474x/f4/68/1b/f4681ba2e6f7b1da292d7c2b6debf9f3.jpg');background-size:cover;background-position:center;"></div>
</div>
<!-- IMAGE THREE-->
<div class="img-thumbnail w-100 h-100 my-1" style="border:2px solid #A3A6C7;height:100px">
<div class="w-100 h-100" style="background:url('https://i.pinimg.com/474x/f4/68/1b/f4681ba2e6f7b1da292d7c2b6debf9f3.jpg');background-size:cover;background-position:bottom;"></div>
</div>
</div>
</div>
<!-- END AESTHETIC IMAGES SECTION -->
</div>
</div>
<!-- CREDITS, DO NOT REMOVE -->
<div class="d-block text-right pt-0 pr-2">
<a data-toggle="tooltip" data-placement="bottom" href="https://toyhou.se/12888800.-f2u-cloudy-skies" style="color:#A3A6C7;font-size:80%;" title="Code by miynn"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
