<!--
code by hiilumaru!
borders: #fe78b2
Boxes:#fefcf8
Accent 1: #fdd6e4
Accent 2: #edb9a3
-->
<div class="card p-4 mx-auto" style="
max-width:600px;
background-image:url(https://i.imgur.com/88ayJUvl.png);
background-size:cover;
color:#9c1a39;
border:3px double #fe78b2;">
<div>
<!-- icon -->
<div class="card" style="
position:absolute;
top: 15px;
height:150px;
width:150px;
border-radius:50%;
border: 2px solid #fe78b2;
Background: #fe78b2;
background-image:url(ICON URL);
background-size: cover;
z-index: 500;">
<div style="transform:rotate(-15deg)"><i class="fa-solid fa-beat fa-3x" style="animation-duration: 7s;">🌸</i></div>
</div>
<!-- music box -->
<div style="
position:absolute;
top:170px;
height:40px;
border:3px double #fe78b2;
border-radius:20px;
Background: #fefcf8;
overflow:hidden;">
<audio controls="" style="
width:150px;
height:35px;
opacity: 0.3;
">
<source src="MP3 URL"></audio>
</div>
</div>
<!-- name bar -->
<div class="card text-right p-2" style="
max-width:100%;
border-radius: 20px;
border:3px double #fe78b2;
Background: #fefcf8;
margin-left:75px;">
<div>
<span style="color:#fdd6e4"><b>n a m e</b></span>
<span style="color:#edb9a3"><i>!!!</i></span></div>
</div>
<!-- Top box -->
<div class="card mt-3 p-1" style="
margin-left:160px;
height:130px;
border:3px double #fe78b2;
Background: #fefcf8;
overflow-y:scroll;
scrollbar-width:none;
font-size:10pt;">
<div class="display-inline justify-content-end">
<div class="text-center w-100">
<span style="Background:#fdd6e4"> name </span> 🌸
<span style="Background:#fdd6e4"> age </span>🌸
<span style="Background:#fdd6e4"> species </span>🌸
<span style="Background:#fdd6e4"> etc </span>
<div class="w-75 mx-auto m-1" style="border-bottom:1px solid #edb9a3"></div>
<p>Write some stuff yippee! this is only as tall as that image over there so don't make it too long</p>
<div class="w-75 mx-auto m-1" style="border-bottom:1px solid #edb9a3"></div>
</div>
<div class="d-none d-sm-block" style="height:100px; max-width:150px; overflow:hidden;">
<img src="SIDE IMG URL">
</div>
</div>
<p>This is the part that can get long! this box has an invisible scrollbar so you can put as much as you want and it'll still look good! you can also leave it empty and adjust the image height so it doens't need to scroll at all</p>
</div>
<!-- quote bar -->
<div class="card my-3 p-2 " style="
max-width:100%;
border-radius: 20px;
border:3px double #fe78b2;
Background: #fefcf8;
Display:inline;">
<span style="color:#fdd6e4"><b>"</b></span> <span style="Background:#edb9a3; color:#fff;"><i>quote here or whatever</i></span> <span style="color:#fdd6e4"><b>"</b></span>
</div>
<div class="row no-gutters">
<!-- Danglies left -->
<div class="col-2 justify-content-around">
<div class="text-center">
<i class="fa fa-flip fa-2x" style="animation-duration: 7s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 8s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 12s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 9s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 6s;">🌸</i><br>
</div>
<div class="text-center">
<i class="fa fa-flip fa-sm" style="animation-duration: 9s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 12s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 7s;">🌸</i><br>
</div>
<div class="d-none d-sm-block text-center">
<i class="fa fa-flip fa-2x" style="animation-duration: 8s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 11s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 14s;">🌸</i><br>
</div>
</div>
<!-- bottom box -->
<div class="col mx-3">
<div class="tab-content card p-1" style="
height: 150px;
overflow-x:auto;
border:3px double #fe78b2;
Background: #fefcf8;
scrollbar-width:none;
">
<!-- Interests -->
<div class="tab-pane text-center" id="A" style="font-size:8pt;">
🌸 <span style="color:#edb9a3;"> Interests </span> 🌸
<div class="display-inline justify-content-around mt-2" >
<div style="color:#fdd6e4;"></div>
<span style="Background:#fdd6e4">like
<br> like
<br> like
<br> like</span>
<span style="Background:#ccc2c3">dislike
<br> dislike
<br> dislike
<br> dislike</span>
<div style="color:#ccc2c3;">x</div>
</div>
<div class="text-left mt-2">
<span style="color:#fdd6e4;"><b>hobbies</b></span> -<br> list, list, list, list, list
</div>
<div class="text-right mt-2">
<span style="color:#edb9a3;"><b>Quirks</b></span> -<br> list, list, list, list, list
</div>
</div>
<!-- Design -->
<div class="tab-pane text-center" id="B" style="font-size:8pt;">
🌸 <span style="color:#edb9a3;"> Traits </span> 🌸
<div class="row no-gutters text-left">
<div class="col-12 col-sm-7 order-2 order-sm-1">
<span style="color:#edb9a3;"> Species:</span> Info <br>
<span style="color:#edb9a3;"> Breed:</span> Info <br>
<span style="color:#edb9a3;"> Height:</span> Info <br>
<span style="color:#edb9a3;"> Weight:</span> Info <br>
<span style="color:#edb9a3;"> Build:</span> Info <br>
</div>
<div class="col-12 col-sm-5 order-1 order-sm-2">
<div class="m-1" style="
overflow:hidden;
border:3px double #fe78b2;
Background: #fefcf8;
">
<a href="REF URL" style="
position:absolute;
left:10px;
top:5px;
color: #fe78b2;
text-shadow: 1px 1px 0px #fff,-1px 1px 0px #fff,1px -1px 0px #fff,-1px -1px 0px #fff;
z-index:300;">
<i class="fa fa-magnifying-glass-plus"></i>
</a>
<img src="https://i.imgur.com/BzPYuZZ.gif" style="width:100%;">
</div>
</div>
</div>
<div class="text-right">
<span style="Background:#fdd6e4"> Required traits: </span><br>
- trait <br>
- trait <br>
- trait <br>
- trait <br>
</div>
<div class="w-75 ml-auto m-1" style="border-bottom:1px solid #edb9a3"></div>
<div class="text-left">
<span style="Background:#fdd6e4"> Optional traits: </span><br>
- trait <br>
- trait <br>
- trait <br>
- trait <br>
</div>
<div class="w-75 m-1" style="border-bottom:1px solid #edb9a3"></div>
</div>
<!-- Moodboard -->
<div class="tab-pane show active text-center" id="C" style="font-size:8pt;">
🌸 <span style="color:#edb9a3;"> moodboard </span> 🌸
<div class="row no-gutters mt-1">
<div class="col-6">
<Div class="card" style="
Height:55px;
width:100%;
border:none;
border-left:3px double #fe78b2;
border-top:3px double #fe78b2;
border-radius:0px;
background-image:url(MOOD 1);
background-size:cover;
background-position:center;"></Div>
<Div class="card" style="
Height:55px;
width:100%;
border:none;
border-left:3px double #fe78b2;
border-bottom:3px double #fe78b2;
border-radius:0px;
background-image:url(MOOD 2);
background-size:cover;
background-position:center;"></Div>
</div>
<div class="col-6">
<Div class="card" style="
Height:55px;
width:100%;
border:none;
border-right:3px double #fe78b2;
border-top:3px double #fe78b2;
border-radius:0px;
background-image:url(MOOD 3);
background-size:cover;
background-position:center;"></Div>
<Div class="card" style="
Height:55px;
width:100%;
border:none;
border-right:3px double #fe78b2;
border-bottom:3px double #fe78b2;
border-radius:0px;
background-image:url(MOOD 4);
background-size:cover;
background-position:center;"></Div>
</div>
</div>
</div>
</div>
</div>
<!-- dango navigation -->
<div class="col-1 mr-3">
<div style="position:absolute; left: 18px; width: 5px; height:170px; background-color: #cea260; border:1px solid #993a00;"></div>
<ul class="nav flex-column" style="color:#fff;">
<li class="p-2 mt-2 nav-item" style="
background-color:#fccada;
box-shadow: inset 0px 0px 9px #fff5f9;
border-radius:50%;
margin-right: 0px;
width: 40px;
border: 1px solid #e48ba7;
background-image: url(https://i.imgur.com/oQsyRwO.png);
background-size: 400px;
background-position:30%, 30%; z-index: 300;">
<a data-toggle="tab" href="#A" class="active btn p-0" style="color:#ffffff">
<i class="fa-solid fa-heart ml-1" style="text-shadow: 1px 1px 1px #f1a8c1;"></i></a></li>
<li class="p-2 pr-3 nav-item" style="background-color:#fdfcf5;
box-shadow: inset 0px 0px 9px #f4f2eb;
border-radius:50%;
margin-right: 0px;
width: 40px;
border: 1px solid #bcb696;
background-image: url(https://i.imgur.com/oQsyRwO.png);
background-size: 400px;
background-position:30%, 30%; z-index: 300;"><a data-toggle="tab" href="#B" class="btn p-0" style="color:#ede9d4"><i class="fa-solid fa-palette ml-1" style="text-shadow: 0.5px 0.5px 1px #ffffff;"></i></a></li>
<li class="p-2 pr-3 nav-item " style="
background-color:#c0f98f;box-shadow: inset 0px 0px 9px #f9fcef;
border-radius:50%;
margin-right: 0px;
width: 40px;
border: 1px solid #81bd4f;
background-image: url(https://i.imgur.com/oQsyRwO.png);
background-size: 400px;
background-position:30%, 30%; z-index: 300;"><a data-toggle="tab" href="#C" class="btn p-0" style="color:#ffffff"><i class="fa-solid fa-backpack ml-1" style="text-shadow: 0.5px 0.5px 1px #b0df88;"></i></a></li>
</ul>
</div>
<!-- danglies right -->
<div class="col-2 justify-content-around">
<div class="text-center">
<i class="fa fa-flip fa-2x" style="animation-duration: 7s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 4s;">🌸</i><br>
</div>
<div class="text-center">
<i class="fa fa-flip fa-sm" style="animation-duration: 5s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 7s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 6s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 9s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 3s;">🌸</i><br>
</div>
<div class="d-none d-sm-block text-center">
<i class="fa fa-flip fa-2x" style="animation-duration: 11s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 13s;">🌸</i><br>
<i class="fa fa-flip fa-2x" style="animation-duration: 8s;">🌸</i><br>
<i class="fa fa-flip fa-sm" style="animation-duration: 4s;">🌸</i>
</div>
</div>
</div>
<div style="position:absolute; bottom:0px; right:0px;">
<a href="SONG CREDIT" style="
position:absolute;
right:25px;
bottom:0px;
color: #fe78b2;
text-shadow: 1px 1px 0px #fff,-1px 1px 0px #fff,1px -1px 0px #fff,-1px -1px 0px #fff;
z-index:300;">
<i class="fa fa-music-note"></i>
</a>
<a href="https://toyhou.se/Hiilumaru/characters/folder:2492566" style="
color: #fe78b2;
text-shadow: 1px 1px 0px #fff,-1px 1px 0px #fff,1px -1px 0px #fff,-1px -1px 0px #fff;
z-index:300;">
<i class="fa fa-code"></i>
</a>
</div>
</div>
