<div class="mx-2 my-5">
<div class="row">
<div class="col-sm-12">
<div class="mx-auto m-2 row no-gutters" style="max-width:600px;">
<div class="col-sm-6 text-center">
<!-- header image -->
<div class="card border-0 rounded-0 mx-auto my-auto" style="height:250px;width:250px;background-image:url(img url here);background-position:center;background-size:cover;"></div>
</div>
<!-- end header image -->
<div class="col-sm-6 p-1 my-auto">
<p class="display-3 text-lowercase" style="letter-spacing:8px;font-weight:400">
name here
<!--
icon here, you can change the icon to suit whatever you feel using the fontawesome website, and to change the colour change the colour hex after color: to whatever you feel you want
-->
<i class="fal fa-crow float-right" style="color:#4670B8;"></i>
</p>
<!-- icons here, use the website fontawesome.io/icons/ to look for icons that match your character -->
<p class="justify-content-between text-muted">
<i class="fad fa-feather-alt"></i>
<i class="fad fa-band-aid"></i>
<i class="fad fa-claw-marks"></i>
<i class="fad fa-crown"></i>
</p>
<hr>
<!-- basic info -->
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
name
</span>
<span class="float-right" style="font-weight:200">
info
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
age
</span>
<span class="float-right" style="font-weight:200">
info
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
gender
</span>
<span class="float-right" style="font-weight:200">
info
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
pronouns
</span>
<span class="float-right" style="font-weight:200">
info
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
height
</span>
<span class="float-right" style="font-weight:200">
info
</span>
</p>
<!-- end basic info -->
</div>
</div>
<!--
music box
at the end of the youtube link there should be a combination of letters and numbers, copy and paste this and replace the 'Z6iCQ6NJ5yA' code after https://www.youtube.com/embed/
-->
<div class="row no-gutters mx-auto m-2" style="height:auto;max-width:600px;">
<div class="col-10 p-1">
<div class="card bg-transparent rounded-0 border-0 p-4" style="height:115px;">
<div class="row">
<div class="col-3" style="text-align: center;">
<br>
<span class="align-middle" style="text-align:center;">
<div class="btn btn-sm rounded-0 m-auto" style="font-size:17px;position:relative;
border-color:transparent;background-color:transparent;">
<iframe style="position:absolute;top:0;left:0;height:25px;width:28px;opacity:0.01"
src="https://www.youtube.com/embed/Z6iCQ6NJ5yA" frameborder="0"></iframe>
<a class=""><i class="fas fa-play"></i></a>
</div>
</span>
</div>
<div class="col-9 p-0">
<div class="display-5 text-right text-lowercase text-muted" style="font-weight: 500; font-size: 9px;">
music player
</div>
<div class="display-5 text-right" style="letter-spacing:1px; font-weight: 400; font-size: 15px;">
song title
</div>
<div class="display-5 text-right" style="letter-spacing:1px; font-weight: 100; font-size: 15px">
artist — album name
</div>
</div>
</div>
</div>
</div>
<!-- end music box -->
<!-- album cover -->
<div class="col-2">
<div class="card bg-transparent rounded-0 border-0 p-4" style="height:115px;">
<span class="align-middle" style="text-align:center;">
<img src="album image url here" style="max-height: 65px; max-width: 65px;" class="rounded-0">
</span>
</div>
</div>
<!-- end album cover -->
</div>
<br>
<!-- extra info -->
<div class="mx-auto m-4 collapse" style="max-width:350px;" id="collapse">
<span class="display-5 text-muted text-lowercase" style="font-size:15px;font-weight:300;">
summary
</span>
<p class="display-5" style="font-size:10px;font-weight:200;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr>
<div class="row no-gutters">
<div class="col-6 p-0">
<span class="display-5 text-muted text-lowercase" style="font-size:15px;font-weight:300;">
likes
</span>
<ul>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
</ul>
</div>
<div class="col-6 p-0">
<span class="display-5 text-muted text-lowercase" style="font-size:15px;font-weight:300;">
dislikes
</span>
<ul>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
</ul>
</div>
</div>
<hr>
<span class="display-5 text-muted text-lowercase" style="font-size:15px;font-weight:300;">
trivia
</span>
<ul>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
<li class="display-5" style="font-size:10px;font-weight:200;">
lorem ipsum
</li>
</ul>
<hr>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
designer
</span>
<span class="float-right" style="font-weight:200">
username
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
creator
</span>
<span class="float-right" style="font-weight:200">
username
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
worth
</span>
<span class="float-right" style="font-weight:200">
$$
</span>
</p>
<p class="display-5" style="font-size:10px;">
<span class="text-muted text-lowercase" style="font-weight:400">
code
</span>
<span class="float-right" style="font-weight:200">
<a href="https://toyhou.se/9262480">ziico</a>
</span>
</p>
<!-- end extra info -->
<hr>
<!--
colour palette
you can change the colours (by changing the hex after color:#) and add more if you need (copy and paste <i class="fas fa-square-full" style="color:#0000000"></i> )
-->
<div class="justify-content-between" style="font-size:20px;">
<i class="fas fa-square-full" style="color:#F2F5F7"></i>
<i class="fas fa-square-full" style="color:#23385C"></i>
<i class="fas fa-square-full" style="color:#F7D0AB"></i>
<i class="fas fa-square-full" style="color:#525252"></i>
<i class="fas fa-square-full" style="color:#303030"></i>
<!-- add more colours above this line -->
</div>
</div>
<!-- end colour palette -->
<div class="text-center">
<a class="text-muted" data-toggle="collapse" href="#collapse">
<i class="fal fa-angle-down" style="font-size:20px;"></i>
</a>
</div>
</div>
</div>
</div>
</div>