<!---
04. HARUNO [ F2U ]
Named after the artist who sang all the songs in the preview code. <3
COLOURS:
Main BG: #bbb
Container BG: #fff
Text: #000
Accent 1: #222
Accent 2: #444
Accent 3: #ccc
--->
<div class="container">
<div class="card border-0 justify-content-center mx-auto p-2 m-2" style="width:600px; background-color:#bbb;">
<!-- FIRST ROW -->
<div class="row no-gutters mx-auto">
<!-- ABOUT -->
<div class="card border-0 p-2 mr-1" style="height:200px; width:380px; background-color:#fff; color:#000">
<!-- DETAILS -->
<p class="text-right text-uppercase" style="font-size:20px; color:#444"><i class="fas fa-heart pull-left" style="font-size:20px; margin-top:3px; color:#222"></i><b><i>NAME. AGE. PRO/NOUNS.</i></b></p>
<!-- DESCRIPTION -->
<div class="card rounded-0 border-0 text-justify" style="background-color:#fff; height:155px; font-size:14px; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec quam nec velit ultricies placerat in ac dolor. Sed sit amet urna venenatis, pulvinar velit et, bibendum tortor. Morbi et metus vel sapien elementum ultrices. Cras ornare leo arcu, at sollicitudin neque pulvinar eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a mattis lectus. Morbi ut felis consequat, maximus justo ac, facilisis urna. Duis sollicitudin quis elit id eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- IMAGE -->
<div class="card border-0" style="height:200px; width:200px; background-image:url(https://via.placeholder.com/200.png); background-position:center; background-size:cover; background-color:rgba(0,0,0,0)"></div>
</div>
<!-- SECOND ROW -->
<div class="row no-gutters mx-auto mt-1">
<!-- IMAGE -->
<div class="card border-0 mr-1" style="height:200px; width:250px; background-image:url(https://via.placeholder.com/250.png); background-position:center; background-size:cover; background-color:rgba(0,0,0,0)"></div>
<!-- ETC. -->
<div class="card border-0 p-2" style="height:200px; width:330px; background-color:#fff;">
<!-- STATUSES -->
<div class="card rounded-0 border-0 p-2 justify-content-center" style="height:150px; background-color:#fff;">
<span class="m-1">
<i class="fas fa-signature fa-lg"></i>
<span class="btn-secondary active text-center ml-2 p-1" style="background-color:#ccc; color:#000; border-radius:50px;">Art Commissions</span>
<span class="pull-right">Closed</span>
</span>
<span class="m-1">
<i class="fas fa-signature fa-lg"></i>
<span class="btn-secondary active text-center ml-2 p-1" style="background-color:#ccc; color:#000; border-radius:50px;">Art Trades</span>
<span class="pull-right">Closed</span>
</span>
<span class="m-1">
<i class="fas fa-signature fa-lg"></i>
<span class="btn-secondary active text-center ml-2 p-1" style="background-color:#ccc; color:#000; border-radius:50px;">Art Requests</span>
<span class="pull-right">Closed</span>
</span>
<span class="m-1">
<i class="fas fa-signature fa-lg"></i>
<span class="btn-secondary active text-center ml-2 p-1" style="background-color:#ccc; color:#000; border-radius:50px;">Character Trade/Sale</span>
<span class="pull-right">Closed</span>
</span>
</div>
<!-- CONTACTS -->
<div class="card rounded-0 border-0 p-2" style="background-color:#fff;">
<div class="row no-gutters justify-content-center">
<a href="/LINK_HERE" style="color:#ccc"><i class="fas fa-id-card fa-lg m-2"></i></a>
<a href="/LINK_HERE" style="color:#ccc"><i class="fab fa-deviantart fa-lg m-2"></i></a>
<a href="/LINK_HERE" style="color:#ccc"><i class="fab fa-twitter fa-lg m-2"></i></a>
<a href="/LINK_HERE" style="color:#ccc"><i class="fab fa-tumblr fa-lg m-2"></i></a>
<a href="/LINK_HERE" style="color:#ccc"><i class="fab fa-spotify fa-lg m-2"></i></a>
<a style="color:#ccc"><i class="fab fa-discord fa-lg m-2 tooltipster" data-placement="bottom" title="name#0000"></i></a>
</div>
</div>
</div>
</div>
<!-- MUSIC -->
<!-- TOP SONG -->
<div class="row no-gutters" style="position:absolute; left:565px; top:-13px;">
<div class="card justify-content-center m-1" style="border:1px solid #bbb; border-radius:50px; height:50px; width:50px; background-color:#bbb">
<i class="fas fa-compact-disc fa-2x fa-spin" style="position:absolute; left:9px; color:#222;"></i>
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_HERE"
style="height:45px; width:45px; opacity:0.001; position:absolute; left:2px;">
</iframe>
</div>
</div>
<!-- BOTTOM SONGS -->
<div class="col" style="position:absolute; left:-40px; bottom:25px; width:1px;">
<!-- FIRST SONG -->
<div class="card justify-content-center m-1" style="border:1px solid #bbb; border-radius:50px; height:50px; width:50px; background-color:#bbb">
<i class="fas fa-compact-disc fa-2x" style="position:absolute; left:9px; color:#222;"></i>
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_HERE"
style="height:45px; width:45px; opacity:0.001; position:absolute; left:2px;">
</iframe>
</div>
<!-- SECOND SONG -->
<div class="card justify-content-center m-1" style="border:1px solid #bbb; border-radius:50px; height:50px; width:50px; background-color:#bbb">
<i class="fas fa-compact-disc fa-2x" style="position:absolute; left:9px; color:#222;"></i>
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_HERE"
style="height:45px; width:45px; opacity:0.001; position:absolute; left:2px;">
</iframe>
</div>
<!-- THIRD SONG -->
<div class="card justify-content-center m-1" style="border:1px solid #bbb; border-radius:50px; height:50px; width:50px; background-color:#bbb">
<i class="fas fa-compact-disc fa-2x" style="position:absolute; left:9px; color:#222;"></i>
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_HERE"
style="height:45px; width:45px; opacity:0.001; position:absolute; left:2px;">
</iframe>
</div>
</div>
</div>
<!-- CREDIT; DO NOT REMOVE OR TAMPER. -->
<div class="card justify-content-center m-1" style="position:absolute; right:230px; top:390px; border:1px solid #bbb; border-radius:50px; height:35px; width:35px; background-color:#bbb">
<a href="/itemlabel" style="position:absolute; left:7px; color:#222;"><i class="fas fa-code fa-md"></i></a>
</div>
</div>
