<!-------------------------------------------------------------------------
HARUNO 2.0 [F2U]
COLOURS:
> (Most) names provided by [ https://www.color-name.com/ ].
- Platinum: #d9e4e6
- Blue Green: #95d6c9
- Pastel Pink: #e8afa4
- Black: #000
- White: #fff
- Bright Gray: #eee
RGBA:
- White: 255,255,255,0.3
---------------------------------------------------------------------------->
<div class="container p-0" style="max-width:500px; font-size:13px; ">
<!-- TOP DECOR -->
<div class="row no-gutters">
<div class="col-4 pl-2">
<div class="card p-1 text-center justify-content-center border-0" style="background-color:#d9e4e6; border-radius:30px 30px 0px 0px; height:35px;">
<i class="fas fa-clouds fa-xl fa-beat-fade" style="--fa-animation-duration: 3s; color:#fff; text-shadow:#eee 1px 3px;"></i>
</div>
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<!-- MAIN -->
<div class="card border-0 p-1" style="background-color:#d9e4e6;">
<div class="row no-gutters" style="color:#000;">
<!-- ICON -->
<div class="col-4 p-1">
<div class="card border-0 p-2 h-100" style="background-color:#fff;">
<div class="card border-0 h-100 p-3" style="
background-image:url(https://i.scdn.co/image/ab6761610000e5ebfeccd4eb4df0605055ee3d8c);
background-size:cover;
background-position:center;">
<!-- MAIN SONG EMBED -->
<div class="card h-100 border-0 justify-content-center text-center" style="background-color:rgba(255,255,255,0.3);">
<i class="fa-light fa-play-circle fa-2x" style="color:#fff;"></i>
<!-- Replace [ qF-KAGk6F2g ] with the string after "watch?v=". Keep the "?controls=0" for ease. -->
<iframe allowfullscreen class="h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/qF-KAGk6F2g?controls=0"
style="opacity:0.0001; position:absolute;">
</iframe>
</div>
</div>
</div>
</div>
<!-- QUOTE / ANNOUNCEMENT -->
<div class="col-8 pl-3 p-1">
<!-- DECOR -->
<i class="fas fa-triangle fa-rotate-270 fa-lg" style="color:#fff; position:absolute; left:3px; top:50px;"></i>
<!-- QUOTE / ANNOUNCEMENT BOX -->
<div class="card border-0 p-3 justify-content-center text-center" style="min-height:100px; background-color:#fff; overflow:hidden;">
<!-- DECOR -->
<i class="fa-duotone fa-quote-left fa-lg" style="position:absolute; top:50px; left:20px; opacity:0.1;"></i>
<i class="fa-duotone fa-quote-right fa-lg" style="position:absolute; bottom:50px; right:20px; opacity:0.1;"></i>
<!-- TEXT -->
<p><i>I really love you. I'll see you soon...</i></p>
</div>
</div>
<!-- SOCIALS -->
<div class="col-12 p-0">
<div class="row no-gutters">
<!-- BUTTON -->
<div class="col m-1" style="background-color:#95d6c9; border-radius:5px;">
<a href="#" class="btn btn-outline-secondary border-0 w-100" style="color:#fff; font-size:13px;">
<i class="fa-brands fa-deviantart"></i>
</a>
</div>
<!-- BUTTON -->
<div class="col m-1" style="background-color:#95d6c9; border-radius:5px;">
<a href="#" class="btn btn-outline-secondary border-0 w-100" style="color:#fff; font-size:13px;">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
<!-- BUTTON -->
<div class="col m-1" style="background-color:#95d6c9; border-radius:5px;">
<a href="#" class="btn btn-outline-secondary border-0 w-100" style="color:#fff; font-size:13px;">
<i class="fa-brands fa-tumblr"></i>
</a>
</div>
<!-- BUTTON -->
<div class="col m-1" style="background-color:#95d6c9; border-radius:5px;">
<a href="#" class="btn btn-outline-secondary border-0 w-100" style="color:#fff; font-size:13px;">
<i class="fa-solid fa-id-card"></i>
</a>
</div>
<!-- BUTTON; TOOLTIPSTER. -->
<div class="col m-1" style="background-color:#95d6c9; border-radius:5px;">
<div class="btn btn-outline-secondary border-0 w-100 tooltipster" title="username" data-placement="top" style="color:#fff; font-size:13px;">
<i class="fa-brands fa-discord"></i>
</div>
</div>
<!-- YOU CAN ADD MORE ABOVE HERE. -->
</div>
</div>
<!-- BASIC INFO -->
<div class="col-md-4 col-5 p-1">
<div class="card border-0 p-2 justify-content-center" style="height:200px; background-color:#fff;">
<span>
<i class="fa-regular fa-pen tooltipster" title="name"></i>
<span class="pull-right">name</span>
</span>
<span>
<i class="fa-regular fa-cake tooltipster" title="age"></i>
<span class="pull-right">age</span>
</span>
<span>
<i class="fa-regular fa-signature tooltipster" title="pronouns"></i>
<span class="pull-right">pro/noun</span>
</span>
<span>
<i class="fa-regular fa-clock tooltipster" title="timezone"></i>
<span class="pull-right">timezone</span>
</span>
<hr class="w-50 mt-3 mb-2" style="background-color:#000">
<span>
<i class="fa-regular fa-hand-holding-dollar tooltipster" title="commissions"></i>
<span class="pull-right">open/close</span>
</span>
<span>
<i class="fa-regular fa-repeat tooltipster" title="trades"></i>
<span class="pull-right">open/close</span>
</span>
<span>
<i class="fa-regular fa-hand-holding-hand tooltipster" title="collabs"></i>
<span class="pull-right">open/close</span>
</span>
<span>
<i class="fa-regular fa-hand-holding-box tooltipster" title="requests"></i>
<span class="pull-right">open/close</span>
</span>
</div>
</div>
<!-- CONTENT BOX -->
<div class="col-md-7 col-7 p-1">
<div class="card border-0 p-2" style="height:200px; overflow:auto; background-color:#fff;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare sapien ut mi condimentum convallis. Integer iaculis magna sed massa laoreet commodo. Nullam elit purus, aliquam a luctus eu, convallis a massa. Nulla quis pellentesque metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas eu metus pretium, euismod libero ut, imperdiet turpis. Maecenas et dapibus arcu, sit amet tristique turpis. Sed a nibh nunc. Nam consequat dui ac massa aliquet eleifend. Suspendisse rhoncus et tortor in scelerisque.</p>
</div>
</div>
<!-- PICTURE DECOR -->
<div class="col-md-1 p-1">
<div class="card border-0 h-100" style="min-height:20px;
background-image:url(https://images.unsplash.com/photo-1532939198640-a7f0da02b62f?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;"></div>
</div>
<!-- OTHER SONGS -->
<div class="col-12 p-0">
<div class="row no-gutters">
<!-- [1] -->
<div class="col p-1">
<div class="card border-0 text-center justify-content-center" style="height:50px; background-color:#fff;">
<i class="fa-light fa-play-circle fa-2x" style="color:#e8afa4"></i>
<!-- Replace [ K3EW6UfmHiA ] with the string after "watch?v=". Keep the "?controls=0" for ease. -->
<iframe allowfullscreen class="h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/K3EW6UfmHiA?controls=0"
style="opacity:0.0001; position:absolute;">
</iframe>
</div>
</div>
<!-- [2] -->
<div class="col p-1">
<div class="card border-0 text-center justify-content-center" style="height:50px; background-color:#fff;">
<i class="fa-light fa-play-circle fa-2x" style="color:#e8afa4"></i>
<!-- Replace [ P-SgEFh-SY ] with the string after "watch?v=". Keep the "?controls=0" for ease. -->
<iframe allowfullscreen class="h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/P-SgEFh-SY?controls=0"
style="opacity:0.0001; position:absolute;">
</iframe>
</div>
</div>
<!-- [3] -->
<div class="col p-1">
<div class="card border-0 text-center justify-content-center" style="height:50px; background-color:#fff">
<i class="fa-light fa-play-circle fa-2x" style="color:#e8afa4"></i>
<!-- Replace [ A6YGvdSr06k ] with the string after "watch?v=". Keep the "?controls=0" for ease. -->
<iframe allowfullscreen class="h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/A6YGvdSr06k?controls=0"
style="opacity:0.0001; position:absolute;">
</iframe>
</div>
</div>
<!-- Add more above this line.
Maximum of 8 before it starts looking strange! -->
</div>
</div>
</div>
</div>
<!-- CREDIT; DO NOT REMOVE OR TAMPER WITH. -->
<div class="row no-gutters">
<div class="col-md-11 col-10"></div>
<div class="col-md-1 col-2 pr-2">
<div class="card p-1 text-center justify-content-center border-0" style="background-color:#d9e4e6; border-radius:0px 0px 30px 30px; height:25px;">
<a href="/itemlabel" class="text-secondary"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>