<!--container holding everything-->
<div style="position:relative; margin: auto; width: 650px; height:425px; border: 2px solid transparent;">
<!--main container-<!--for the background colour, change the hex code after the 'background-colour' command- <div class="bg-primary" style="position: absolute; right: 5px; bottom: 22px; height: 360px; width: 550px; border: 2px solid transparent; color: white; border-radius: 20px;">
<!--basic info-<div class="text-dark" style="position: absolute; top: 25px; right: 20px; border: 2px solid white; height: 25px; width: 500px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--edit here!-
<p style="text-align: center; line-height: 25px;">
he/it ⋆ silly goose ⋆ 17
</p>
</div>
<!--end of basic info-->
<!--about paragraph-->
<div class="text-dark" style="position: absolute; top: 60px; right: 20px; border: 2px solid white; height: 100px; width: 500px; background-color: white; border-radius: 10px; font-family:'Courier New'; overflow: auto; text-align: center;">
<div style="margin: 10px;">
<!--end of about paragraph-->
<!--columns-->
<!--left column-<!--left column title-
<div class="text-dark" style="position: absolute; bottom: 160px; right: 360px; border: 2px solid white; height: 20px; width: 150px; background-color: white; border-radius: 7px; font-family:'Courier New'">
<p style="text-align: center; line-height: 20px;"><b>FRIENDS</b></p>
</div>
<!--end of left column title-->
<!--friends list-->
<div class="text-dark" style="position: absolute; bottom: 60px; right: 360px; border: 2px solid white; height: 90px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'; overflow: auto;">
<!--end of friends list-->
<!--end of left column-->
<!--middle column-->
<!--
under the "edit here" sections, you can change the icon to a checkmark,
a question mark, or an x-mark to signify if theyre open or not!
to change it to a green check, after class change it to 'fas fa-check text-success'
to change it to a yellow q-mark, after class change it to 'fas fa-question text-warning'
to change it to a red x-mark, after class change it to 'fas fa-times text-danger'
-->
<!--comm section-->
<div class="text-dark" style="position: absolute; bottom: 148px; right: 190px; border: 2px solid white; height: 35px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--art trades section-->
<div class="text-dark" style="position: absolute; bottom: 104px; right: 190px; border: 2px solid white; height: 35px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--requests section-->
<div class="text-dark" style="position: absolute; bottom: 60px; right: 190px; border: 2px solid white; height: 35px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--end of middle column-->
<!--right column-->
<div class="text-dark" style="position: absolute; bottom: 60px; right: 15px; border: 2px solid white; height: 125px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--replace the link after the 'href' to an image of your choice!-->
<img style="border-radius: 10px; height: 122px; width: 150px;" src="https://64.media.tumblr.com/5d9d82dda5e6c95dde2df4bb80052d8b/e7faa8626ce80539-81/s400x600/9cb18274921a49019ce4533da89eabd6ea2421a0.gifv">
<!--end of right column-->
<!--end of columns-->
<!--links
to change where the link goes to, put your web-link after the 'href' brackets,
right where it says "link here"
finally, to change what the link text says, just change the word "link"
to whatever you would like to say
-->
<!--left link-->
<div style="position: absolute; bottom: 10px; right: 360px; border: 2px solid white; height: 40px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--middle link-->
<div style="position: absolute; bottom: 10px; right: 190px; border: 2px solid white; height: 40px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--right link-->
<div style="position: absolute; bottom: 10px; right: 15px; border: 2px solid white; height: 40px; width: 150px; background-color: white; border-radius: 10px; font-family:'Courier New'">
<!--end of links-->
</div>
<!--end of main container-->
<!--title at top-->
<div class="text-dark" style="position: absolute; top: 15px; right: 35px; width: 490px; height: 50px; border: 2px solid transparent; font-family:'Courier New'; letter-spacing: 3px;">
<!--change "title" to what youd like, and the hex code after the 'color:' command to the colour you'd like-<p style="line-height: 50px; text-align: center; font-size: 40px;"><b>JINBEI</b></p>
</div>
<!--end of title at top-
<!--left-side doll image-->
<div style="position: absolute; left: -10px; bottom: 0px; width: 170px; height: 375px;">
<!--replace the word "link" after the src command with the image of your choice!-<img style="width: 100%; height: 100%" src="https://th.bing.com/th/id/R.a725663a107b4ed95a14a6cea018e3d2?rik=kWQbHqgridUwNA&riu=http%3a%2f%2fyakuza.sega.com%2fyakuza0%2fimg%2fcast%2fkiryu8.png&ehk=iq4wyt0BRhufb6ZTyKzZjo6EVSjifHofDCs3T8m0k8A%3d&risl=&pid=ImgRaw&r=0">
</div>
<!--end of doll image-
<!--credit-<div style="text-align: center; position: absolute; bottom: 0px; right: 5px;">
<a href="https://toyhou.se/rivericals"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></a>
</div>
<!--end-
</div>