F2U HTML party! (CODE)

<div class="container" style="margin:auto;display:flex;justify-content:center;">

<div class="box" style="width:300px;height:487px;background-color:#fffffff;background-image:url('https://i.gifer.com/6SSp.gif');background-size:cover;opacity:0.90;border:1px solid #808080;">

<div class="header progress-bar progress-bar-striped progress-bar-animated" style="background-color:#adadad;width:300px;height:25px;font-family:franklin gothic;color:#FFFFFF;"><span style="margin:10px;font-family:franklin gothic">

<!---Here you can insert a quote or leave it as LET'S PARTY by deleting the part that says insert short quote here-->

LET'S PARTY!!!! (or insert short quote)

</span></div>

<span class="box" style="width:300px;">

<div style="margin:10px;width:300px;height:95px;display:flex;opacity:100;">

<!---AFTER IMAGE SRC, REPLACE THE IMAGE LINK WITH THE LINK TO YOUR OWN DESIRED THUMBNAIL TO CHANGE THE IMAGE TO ONE OF YOUR CHARACTER-->

<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/46265489_hDw_15044410.png?1652310853">

<!---Insert name, age, gender, and pronouns here-->

<div style="width:150px;margin:10px;width:200px;font-family:franklin gothic;color:#808080;float:left;">

<span>name: text</span>

<p>age: text</p>

<span>gender: text</span>

<div></div>

<span>pronouns: text</span>

<span></span>

</div>

</div>

<!---Info Box-->

<div style="margin:20px;height:45px;overflow-y:auto;font-family: franklin gothic;">Write something about yourself (or your character) here! This box will scroll, so write as much as you like! </div>

<b style="margin:3px;color:#adadad;font-family:franklin gothic">Relationships:</b>

<table style="width:300px;height:160px;font-family:franklin gothic;">

<tr>

<th>Character/Person</th>

<th>Relationship</th>

</tr>

<!---This section is for putting the type of relationship your character/you has with another character/person! Example: "friend, rival, enemy, mentor" etc-->

<!---->

<!---Relationship 1-->

<tr>

<td><a href=" URL HERE ">name</a></td>

<td>relationship</td>

<!---Relationship 2-->  

</tr>

<tr>

<td><a href=" URL HERE ">name</a></td>

<td>relationship</td>

<!---Relationship 3-->

</tr>

<tr>

<td><a href=" URL HERE ">name</a></td>

<td style="overflow-y:auto;">relationship</td>

</tr>

</table>

<b style="font-family:franklin gothic">

theme songs:</b>

<!---THIS SECTION IS FOR PUTTING LINKS TO SONGS YOU THINK FIT THE CHARACTER/YOU-->

<!---->

<!---SONG 1-->

<div style="background-color:#c2c2c2;"><a href=" LINK HERE ">song name here</a></div>

<!---SONG 2-->

<div style="background-color:#ededed"><a href=" LINK HERE ">song name here</a></div>

<!---SONG 3-->

<div style="background-color:#c2c2c2;"><a href=" LINK HERE ">song name here</a></div>

<!---DON'T REMOVE CREDIT-->

</span>

<a href="https://toyhou.se/couragedraws" style="font-size:10px;">code credit: couragedraws</a>  

<a href=" LINK HERE " style="font-size:10px;">art credit: NAME</a>

</div>

</div>