<!--
Html by Hiilumaru!
Cloud - #708090, #46496F , #B8BAD2
rain - #85C0DB
sky - #DADEDC
bushes - #579D80
text - #fff
-->
<div class="mx-auto text-center" style="max-width:400px; Color: #fff; font-family: ms gothic;">
<!-- CLOUD -->
<div class="ml-0" style="">
<i class="fas fa-cloud d-none d-sm-block" style="font-size:400px; z-index:100;
color:#708090;
text-shadow: 2px 2px 0px #46496F, -2px 2px 0px #46496F, 2px -2px 0px #46496F, -2px -2px 0px #46496F;"></i>
<i class="fas fa-cloud d-block d-sm-none" style="font-size:300px; z-index:100;
color:#708090;
text-shadow: 2px 2px 0px #46496F, -2px 2px 0px #46496F, 2px -2px 0px #46496F, -2px -2px 0px #46496F;"></i>
<!-- cloud content -->
<div class="container text-left" style="width:300px; height:220px; top:-250px; left: 35px;">
<!-- Title -->
<span style="color:#46496F; Font-weight:bold; font-size:20px;">T i t l e </span>
<!-- Info box -->
<div class="card text-center p-2" style="width:100%; height:180px; overflow-y:auto; scrollbar-width:none; background:#B8BAD2; border:2px solid #46496F; line-height:1; font-size:13px;">
<span style="Font-size:16px;">Name</span>
<span class="w-75 mx-auto m-1" style="border:none; border-bottom: 4px dotted #708090"></span>
<div class="row no-gutters text-left">
<div class="col">
<span class="text-left">
Name: info
<br> Species: info
<br> Age: info
<br> Gender: info
</span>
</div>
<div class="col">
<span class="text-left">
Orientation: info
<br> Birthday: info
<br> Location: info
<br> Something: info
</span>
</div>
</div>
<span class="w-75 mx-auto m-1" style="border:none; border-bottom: 4px dotted #708090"></span>
<span class=" ">Write about your character here! This box scrolls, but this looks best at a length where it won't have to. This profile works best for characters without much lore, but this box scrolls!
</span>
</div>
<!-- Music player -->
<div class="card text-center p-1" style="left:-85px; bottom:130px; width:75px; background:#B8BAD2; border:2px solid #46496F; line-height:1; font-size:10px;">
Song
<span class="w-75 mx-auto m-1" style="border:none; border-bottom: 4px dotted #708090"></span>
<br> artist
</div>
<div class="card" style="left:-60px; bottom:120px; height:50px; width:50px; border-radius:50%; background:#B8BAD2; border:2px solid #46496F;">
<i class="fas fa-play fa-2x" style="color: #fff;position: absolute;top:10px; left:15px;"></i>
<!-- replace URL with a youtube video code! -->
<iframe style="position:absolute; left:13px; top:8px;height:30px;width:30px; filter:opacity(0);"
src="https://www.youtube.com/embed/URL"></iframe>
</div>
<div style="position:absolute;bottom:-15%; right:15%; z-index:200;"><a href="https://toyhou.se/Hiilumaru/characters/folder:2492566" style="color:#46496F"><i class="fad fa-code"></i></a></div>
</div>
</div>
<!-- Under cloud - replace the url with a background link! auto = tiled bg, cover = full-size background -->
<div class="card ml-0 ml-sm-5 w-sm-100 " style="bottom:300px; max-width:400px; height:400px; border-radius:0px; z-index:-500;
background:url(URL);
background-size:auto;
background-color:#DADEDC">
<!-- Pagedoll! Make sure it's transparent or has the same color background or it'll look weird -->
<div style="position:absolute;bottom:0px;left:50px; z-index:0; height:300px; Width:300px;
Background-image:url(URL);
Background-size:cover;"></div>
<!-- Decorations -->
<div style="color: #85C0DB;position:absolute;bottom:200px;left:30px; z-index:0;"><i class="fad fa-raindrops fa-6x"></i> </div>
<div style="color: #85C0DB;position:absolute;bottom:150px;right:40px; z-index:0;"><i class="fad fa-raindrops fa-4x"></i> </div>
<div style="color: #579D80;position:absolute;bottom:0px;left:-30px; z-index:0;"><i class="fad fa-broccoli fa-7x"></i> </div>
<div style="color: #579D80;position:absolute;bottom:0px; right:-30px; z-index:0;"><i class="fad fa-broccoli fa-7x"></i> </div>
</div>
</div>