<!--
!MAKE SURE YOU'VE READ THE RULES!
Comments have been created to both keep track of everything and show edits!
Mostly I'm relying that you know how to edit toyhouse codes already
Here are all the accent colors:
Main Container: #0C0D0E
Text: #FFFFFF
Icon + Upper Block: #80CC91
Name + Content Block: #6E9C85
Other Blocks: #1E2D30
CTRL + F to edit them quickly!
-->
<!--Container-->
<div class="container mt-5 mb-1 p-3" style="max-width: 1100px; background-image:url(https://i.pinimg.com/564x/75/96/61/759661a0c2eb97d6784c12fbdb8b0924.jpg); background-size: contain; background-color: #D4D5D9;">
<div class="container mt-5 mb-1" style="max-width: 1000px; color: #FFFFFF">
<div class="bg-faded px-3 py-3" style="border-radius: 250px 250px 10px 10px; background-color: #0C0D0E">
<!--Icon-->
<div class="rounded-circle bg-faded" style="background-image:url(https://i.pinimg.com/564x/15/48/3c/15483c9681b7ca0a1092849b1419c27e.jpg); height: 200px; width: 200px; position: relative; background-size: cover; background-position: center; top: 15px; left: 368px; border:10px solid #80CC91; background-color: #80CC91"></div>
<!--Upper block-->
<div class="row">
<div class="card border-0 mx-5 mx-4" style="width: 1000px; height: 15px; background-color: #80CC91"></div>
<!--Left Block-->
<div class="row no-gutters">
<div class="card border-0 mx-3 my-3 p-3" style="width: 200px; height: 648px; background-color: #1E2D30; line-height: 1.6rem">
<!--Likes-->
<h3 class="text-center">Likes</h3>
<hr class="my-1 faded">
<div class="justify-content-between">
• word
<span> • word </span>
</div>
<div class="justify-content-between">
• word
<span> • word </span>
</div>
<!--Dislikes-->
<hr class="my-1 faded">
<hr class="my-1 faded">
<h3 class="text-center">Dislikes</h3>
<hr class="my-1 faded">
<div class="justify-content-between">
• word
<span> • word </span>
</div>
<div class="justify-content-between">
• word
<span> • word </span>
</div>
<!--Traits-->
<hr class="my-1 faded">
<hr class="my-1 faded">
<h3 class="text-center">Traits</h3>
<hr class="my-1 faded">
<div class="justify-content-between">
• word
<span> • word </span>
</div>
<div class="justify-content-between">
• word
<span> • word </span>
</div>
<!--Trivia-->
<hr class="my-1 faded">
<hr class="my-1 faded">
<h3 class="text-center">Trivia</h3>
• Lorem ipsum dolor sit amet.
<span> • Lorem ipsum dolor sit amet. </span>
<!--Music Player, change the embed code's randomized letters to play your own music-->
<div class="p-4" style="position: absolute; bottom: 0;">
<i class="fal fa-compact-disc fa-spin" style="font-size: 120px; color: #80CC91; animation-duration: 10s;"></i>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
<iframe width="700" height="250"
src="https://www.youtube.com/embed/sxC3Fg98AKE?controls=0" frameborder="0" style="position: absolute; bottom: 0px; left: -250px;"></iframe>
</div>
</div>
</div>
<!--Top Middle Block-->
<div class="row">
<div class="col">
<div class="card border-0 my-3 text-center" style="width: 500px; height: 60px; background-color: #6E9C85; font-size: 25px;">
Name
<span style="font-size: 15px">content • content • content • content</span>
</div>
<!--2nd Middle Block-->
<div class="row">
<div class="col">
<div class="card border-0 p-3" style="width: 500px; height: 180px; background-color: #1E2D30">
<div class="justify-content-between">
<div class="card border-0 mr-3" style="min-height: 145px; min-width: 145px; max-height: 145px; max-width: 145px; border-radius: 100px; background-position: center; background-size: contain; background-image: url(https://i.pinimg.com/564x/15/48/3c/15483c9681b7ca0a1092849b1419c27e.jpg)"></div>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium illum facilis assumenda, corrupti nostrum similique quidem nesciunt ullam nisi id ab ex cum consequuntur magnam dolores quam debitis error, recusandae voluptates voluptatibus sed minima. Qui aut iure culpa architecto!</span>
</div>
</div>
<!--3rd Middle Block-->
<div class="row">
<div class="col">
<div class="card border-0 my-3 p-3" style="width: 500px; height: 180px; background-color: #1E2D30">
<div class="justify-content-between">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium illum facilis assumenda, corrupti nostrum similique quidem nesciunt ullam nisi id ab ex cum consequuntur magnam dolores quam debitis error, recusandae voluptates voluptatibus sed minima. Qui aut iure culpa architecto!</span>
<div class="card border-0 ml-3" style="min-height: 145px; min-width: 145px; max-height: 145px; max-width: 145px; border-radius: 100px; background-position: center; background-size: contain; background-image: url(https://i.pinimg.com/564x/58/87/cb/5887cbc7628bccb3ba38bcd45bb86e6e.jpg)"></div>
</div>
</div>
<!--Bottom Middle Block-->
<div class="row">
<div class="col">
<div class="card border-0 p-3" style="width: 500px; height: 180px; background-color: #1E2D30">
<div class="justify-content-between">
<div class="card border-0 mr-3" style="min-height: 145px; min-width: 145px; max-height: 145px; max-width: 145px; border-radius: 100px; background-position: center; background-size: contain; background-image: url(https://i.pinimg.com/564x/db/77/1d/db771db204222cb11365a9c2a492dfb4.jpg);"></div>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium illum facilis assumenda, corrupti nostrum similique quidem nesciunt ullam nisi id ab ex cum consequuntur magnam dolores quam debitis error, recusandae voluptates voluptatibus sed minima. Qui aut iure culpa architecto!</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Right Block-->
<div class="row">
<div class="col">
<div class="card border-0 my-3 p-3" style="width: 200px; height: 648px; background-color: #1E2D30; overflow-y:auto; ">
<p>This box scrolls!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium illum facilis assumenda, corrupti nostrum similique quidem nesciunt ullam nisi id ab ex cum consequuntur magnam dolores quam debitis error, recusandae voluptates voluptatibus sed minima. Qui aut iure culpa architecto!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium illum facilis assumenda, corrupti nostrum similique quidem nesciunt ullam nisi id ab ex cum consequuntur magnam dolores quam debitis error, recusandae voluptates voluptatibus sed minima. Qui aut iure culpa architecto!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Credit (Please don't remove!)-->
<p class="small font-weight-bold text-center text-muted">Code created by Evoidless ♡</p>
