<!--Hey there! Welcome to WILD HEARTS! Like stated in the code's page, I highly reccomend having a basic amount of HTML knowledge to use this code, to moderate amount of HTML knowledge if you're attempting to edit it. However, hopefully the given instructions will help, and if all fails, try using the Safehouse version of this code.-->
<!--Start of top bar.-->
<div class="card card border-0 rounded-0 p-3" style="background: #03040E;">
<div class="row">
<!--Start of basics section.-->
<div class="col-md-3">
<center>
<div style="font-size: 25px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;">
NAME
</div>
<div style="font-size: 15px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;">
<em>PRO/NOUNS <i class="fas fa-angle-double-right fa-xs"></i> AGE</em>
</div>
</center>
</div>
<!--End of basics section.-->
<!--Start of bio section.-->
<div class="col-md-6">
<div style="font-weight:lighter; color: #F0EAE2; overflow-x: hidden; height:65px;">
<div class="mt-2"></div>
Write something quick and snappy. Or not. It'll start scrolling if you write a ton, but if you're like me and prefer to keep it short, keep it short!
</div>
</div>
<!--End of bio section.-->
<!--Start of social media/icons section.-->
<div class="col-md-3">
<center>
<div style="letter-spacing:1mm;">
<div class="mt-3"></div>
<!--Social medias/misc icons. Feel free to add more, change them, or remove them, they should fit regardless.-->
<a href="URL HERE">
<i class="fab fa-tumblr tooltipster fa-lg" title="Tumblr" style="color: #F0EAE2;">
</i></a>
<a href="URL HERE">
<i class="fab fa-twitter tooltipster fa-lg" title="Twitter" style="color: #F0EAE2;">
</i></a>
<a href="URL HERE">
<i class="fas fa-id-card tooltipster fa-lg" title="Carrd" style="color: #F0EAE2;">
</i></a>
<a href="URL HERE">
<i class="fab fa-instagram tooltipster fa-lg" title="Instagram" style="color: #F0EAE2;">
</i></a>
<i class="fab fa-discord tooltipster fa-lg" title="DISCORD #0000" style="color: #F0EAE2;">
</i>
</div>
<!--End of social media/icons section.-->
</center>
</div>
</div>
</div>
<!--End of top bar.-->
<!--Start of middle section.-->
<!--Background image for the center portion. I HIGHLY reccomend using a static image OR a slower gif due to the animated elements of this code ESPECIALLY if you're using GIFs for the individual icons, or IF you're using a faster/flashing GIF please place a warning on your page for flashing images. Any non-transparent image should fit in here!-->
<div class="card border-0 rounded-0 p-2" style="background: url(https://via.placeholder.com/2000); background-size: cover; background-position: center;">
<!--Start of icons. You can remove as many characters as you need- I do NOT suggest adding any, though, it'll make the code start to look funky. I reccomend placing featured characters here! Any image should fit for the icons.-->
<div class="mt-3"></div>
<div class="mx-auto;" style="z-index: 100;">
<div class="row no-gutters justify-content-center">
<div class="col-md-4; my-auto">
<div class="row">
<!--Start of icons to the left.-->
<!--Character One.-->
<a href="LINK TO CHARACTER">
<img src="https://via.placeholder.com/500"
style="clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;"
title="NAME"
class="tooltipster"></a>
<!--End of character One.-->
<!--Character Two.-->
<a href="LINK TO CHARACTER">
<img src="https://via.placeholder.com/500"
style="clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;"
title="NAME"
class="tooltipster"></a>
<!--End of character Two.-->
<!--Character Three.-->
<a href="LINK TO CHARACTER">
<img src="https://via.placeholder.com/500"
style="clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;"
title="NAME"
class="tooltipster"></a>
</div>
<!--End of character Three.-->
</div>
<!--End of character icons (left).-->
<div class="col-md-3; mx-auto;">
<!--Beating heart icon. Any image should also work here.
If you want another shape than a heart, replace
clip-path: polygon(31.12% 5.81%, 50% 19.87%, 68.88% 5.81%, 98.58% 45.7%, 50% 94.27%, 1.42% 45.7%);
with one of the following:
Circle: clip-path: circle(50% at 50% 50%);
Star: clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
Diamond/rhombus: clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Octagon: clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
Pentagon: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Be absolutely sure that you're not removing the quotation marks (") around this section, nor the rest of the icon's code.-->
<div class="card border-0 rounded-0; mt-3; fa-beat" style="clip-path: polygon(31.12% 5.81%, 50% 19.87%, 68.88% 5.81%, 98.58% 45.7%, 50% 94.27%, 1.42% 45.7%); background: url(https://via.placeholder.com/650); --fa-beat-scale: 1.1; --fa-animation-duration: 1.2s;
background-color: #000000; height:250px; width:250px; background-size: cover; background-position: center; z-index: 102;">
</div>
</div>
<!--End of heart icon.-->
<!--Start of icons to the right.-->
<div class="col-md-4; my-auto">
<div class="row">
<!--Character Four.-->
<a href="LINK TO CHARACTER">
<img src="https://via.placeholder.com/500"
style="clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;"
title="NAME"
class="tooltipster"></a>
<!--End of character Four.-->
<!--Character Five.-->
<a href="LINK TO CHARACTER">
<img src="https://via.placeholder.com/500"
style="clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;"
title="NAME"
class="tooltipster"></a>
<!--End of character Five.-->
<!--Character Six.-->
<a href="LINK TO CHARACTER">
<img src="https://via.placeholder.com/500"
style="clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;"
title="NAME"
class="tooltipster"></a>
<!--End of character Six.-->
</div>
</div>
</div>
</div>
</div>
<!--End of middle section.-->
<!--Start of lower bar.-->
<div class="card card border-0 rounded-0 p-4" style="background: #03040E;">
<div class="row">
<!--Start of music section.-->
<div class="col-md-4">
<div class="row">
<div class="col-md-2; p-1">
<!--Music player. Plays from youtube, place the end of the youtube's url (it's the final thing in the url after the last /, usually looks like a keysmash) in the specified area. Credits to @strabi for the original music player code snippet.-->
<span><iframe class="flex-fill" style="width:100%;height:30px;width:30px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/END OF YOUTUBE URL HERE"></iframe><i class="fas fa-play fa-2x" style="margin-left:-25px; color: #827E7A;"></i></span>
</div>
<div class="col-md-4; my-auto mx-auto">
<div style="font-size: 15px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;">
ARTIST
</div>
<div style="font-size: 10px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;">
<em>SONG NAME</em>
</div>
</div>
</div>
</div>
<!--End of music section.-->
<!--Start of quote section. You can remove this one if you want, just be sure to get only the quote section itself and nothing else.-->
<div class="col-md-4">
<div class="mt-2"></div>
<center>
<span style="letter-spacing:.4mm; color: #F0EAE2; font-size:16px; font-weight:lighter;">I'm a quote, a tagline, something very short.</span>
</center>
<div class="mt-2"></div>
</div>
<!--End of quote section.-->
<!--Start of status section.-->
<div class="col-md-4">
<div style="color: #F0EAE2; letter-spacing:1.8mm; font-size: 14px; font-weight:lighter; font-family:georgia;">
<!--To add a little link button to the end of one of these, just copy and paste this directly after the </em> of each section (before the <br> section:
<a href="LINK HERE"><i class="fas fa-external-link-square-alt tooltipster" title="Link" style="color:#693fef"></i></a>
By default, the colour is the purple shown on the code demo. Feel free to change it! -->
Commissions <i class="fas fa-angle-double-right fa-xs"></i> <em>Status</em> <br>
Trades <i class="fas fa-angle-double-right fa-xs"></i><em> Status</em> <br>
Requests <i class="fas fa-angle-double-right fa-xs"></i><em> Status</em> <br>
</div>
<!--End of status section.-->
</div>
</div>
</div>
<!--End of lower bar.-->
<div class="mt-1"></div>
<!--Credit section, please credit both the person who created the background you use and the artist of your icon (even if it's you!)-->
<a href="BACKGROUND CREDIT URL HERE"><i class="fas fa-image fa-lg tooltipster" title="Background by NAME"></i></a>
<i class="fas fa-heart fa-xs"></i>
<a href="ICON CREDIT URL HERE"><i class="fas fa-icons fa-lg tooltipster" title="Main icon by NAME"></i></a>
<!--My credits. You may MOVE them, but do not REMOVE them.-->
<span class="pull-right">
<a href="https://toyhou.se/Coturnix"><i class="fas fa-moon-stars fa-xl tooltipster" style="color: #ffd633;" title="Code cooked up by Quail"></i></a>
</span>
<!--End of WILD HEARTS. Thanks so much for using it!-->