Profile
<!---------------------------------------------
PIXEL RPG by Donut-Toast
VARIOUS INSTRUCTIONS:
- To insert a new background/character, open the image you want to use on a new tab and copy the URL in the bar above. Then replace the already present URL with the URL you copied ^o^
- Background format: 640 x 480 | Sprite format: 36 x 45 | Profile format: 125 x 125 | having a file size bigger or smaller than these formats will make the image come out blurry
- Known issue: trying to return to the same tab you just left doesn't work. Like going back to the menu after clicking out. I don't know how to fix it, but all functionality returns when the page is refreshed.
- All assets are free to use on Toyhouse without credit. On other websites credit is required though.
ASSETS AND CODE SOURCE:
https://toyhou.se/17175501.rpg-code-test
--------------------------------------------->
<div class="mx-auto" style="max-width:640px; min-height:480px;">
<!----------------------- background image --------------------->
<div class="text-center mx-auto tab-content" style="background-size:fill; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/52704975_rsMXm0HSPduoq2H.png'); background-position:center; max-height:480px; min-height:480px;">
<div class="tab-pane p-3 show active" id="character">
<div style="margin-top:200px;">
<!----------------------- character sprite --------------------->
<a class="fr-fic fr-dii" data-toggle="tab" height="45" href="#menu" width="36"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/52737070_sXtFWb3qHVr1Dtk.png" class="fr-fic fr-dii" width="36" height="45"></a>
</div>
</div>
<!----------------------- selection menu --------------------->
<div class="tab-pane show" id="menu">
<div class="block border-0 p-4" style="background: rgba( 0, 0, 0, 0.5); height:480px;">
<div style="margin-top:90px;">
<div class="container mt-5" style=" border:2px solid #cccccc; height:220px; width:180px; background:#000000; margin-top:150px;">
<ul class="nav row no-gutters text-center pt-2">
<li class="nav-item mx-auto pt-2 mt-md-2 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:180px;"><a class="show" data-toggle="tab" href="#inventory" style="color:#ffffff; opacity:100%;"><span style='font-size: 18px; font-family: "courier new", courier;'>Inventory</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-2 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:180px;"><a class="show" data-toggle="tab" href="#stats" style="color:#ffffff; opacity:100%;"><span style='font-size: 18px; font-family: "courier new", courier;'>Status</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-2 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:180px;"><a class="show" data-toggle="tab" href="#settings" style="color:#ffffff; opacity:100%;"><span style='font-size: 18px; font-family: "courier new", courier;'>Settings</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-2 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:180px;"><a class="show active" data-toggle="tab" href="#character" style="color:#ffffff; opacity:100%;"><span style='font-size: 18px; font-family: "courier new", courier;'>Exit</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!----------------------- inventory --------------------->
<div class="tab-pane show" id="inventory">
<div class="block border-0 p-4" style="background: rgba( 0, 0, 0, 0.5); height:480px;">
<div style="margin-top:60px;">
<div class="container mt-5" style=" border:2px solid #cccccc; height:300px; width:400px; background:#000000; margin-top:150px;">
<h1 class="px-1 justify-content-between pt-2" style="letter-spacing: -2px; font-weight: 200; color:#cccccc;"><span style="font-family: courier new,courier;">Inventory</span><span style='color: #cccccc; font-family: "courier new", courier;'> 5/5</span></h1>
<div class="pull-left col-md-2 p-3">
<!----------------------- maximum item number is 5 bc after 5 it starts looking weird. --------------------->
<!----------------------- remove the tabs below to lessen the amount of items listed --------------------->
<ul class="nav nav-tabs row no-gutters text-center pt-2 border-0">
<li class="nav-item mx-auto pt-2 mt-md-1 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:120px;"><a class="active show" data-toggle="tab" href="#item1" style="color:#ffffff; opacity:100%;"><span style='font-size: 14px; font-family: "courier new", courier;'>Item 1</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-1 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:120px;"><a data-toggle="tab" href="#item2" style="color:#ffffff; opacity:100%;"><span style='font-size: 14px; font-family: "courier new", courier;'>Item 2</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-1 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:120px;"><a data-toggle="tab" href="#item3" style="color:#ffffff; opacity:100%;"><span style='font-size: 14px; font-family: "courier new", courier;'>Item 3</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-1 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:120px;"><a data-toggle="tab" href="#item4" style="color:#ffffff; opacity:100%;"><span style='font-size: 14px; font-family: "courier new", courier;'>Item 4</span></a></li>
<li class="nav-item mx-auto pt-2 mt-md-1 btn-outline-danger btn border-0" style="filter:hue-rotate(220deg) saturate(300%); opacity:80%; width:120px;"><a data-toggle="tab" href="#item5" style="color:#ffffff; opacity:100%;"><span style='font-size: 14px; font-family: "courier new", courier;'>Item 5</span></a></li>
</ul>
</div>
<div class="tab-content p-1">
<!----------------------- item 1 --------------------->
<div class="tab-pane show active" id="item1">
<div class="pull-right col-md-8 py-4 px-3 mt-1 d-flex" style=" color: rgb(204, 204, 204); text-align: left;">
<div class="p-1" style="border:1px solid #808080; background:#000000; max-height: 200px; min-height: 70px; overflow: auto;"><span style="font-family: courier new,courier; letter-spacing: -1px;">Insert item description 1 here! This box will eventually start scrolling so don't worry about keeping it short. Might appear broken on mobile if long tho.</span></div>
</div>
</div>
<!----------------------- item 2 --------------------->
<div class="tab-pane show" id="item2">
<div class="pull-right col-md-8 py-4 px-3 mt-1 d-flex" style=" color: rgb(204, 204, 204); text-align: left;">
<div class="p-1" style="border:1px solid #808080; background:#000000; max-height: 200px; min-height: 70px; overflow: auto;"><span style="font-family: courier new,courier; letter-spacing: -1px;">Insert item description 2 here! This box will eventually start scrolling so don't worry about keeping it short. Might appear broken on mobile if long tho.</span></div>
</div>
</div>
<!----------------------- item 3 --------------------->
<div class="tab-pane show" id="item3">
<div class="pull-right col-md-8 py-4 px-3 mt-1 d-flex" style=" color: rgb(204, 204, 204); text-align: left;">
<div class="p-1" style="border:1px solid #808080; background:#000000; max-height: 200px; min-height: 70px; overflow: auto;"><span style="font-family: courier new,courier; letter-spacing: -1px;">Insert item description 3 here! This box will eventually start scrolling so don't worry about keeping it short. Might appear broken on mobile if long tho.</span></div>
</div>
</div>
<!----------------------- item 4 --------------------->
<div class="tab-pane show" id="item4">
<div class="pull-right col-md-8 py-4 px-3 mt-1 d-flex" style=" color: rgb(204, 204, 204); text-align: left;">
<div class="p-1" style="border:1px solid #808080; background:#000000; max-height: 200px; min-height: 70px; overflow: auto;"><span style="font-family: courier new,courier; letter-spacing: -1px;">Insert item description 4 here! This box will eventually start scrolling so don't worry about keeping it short. Might appear broken on mobile if long tho.</span></div>
</div>
</div>
<!----------------------- item 5 --------------------->
<div class="tab-pane show" id="item5">
<div class="pull-right col-md-8 py-4 px-3 mt-1 d-flex" style=" color: rgb(204, 204, 204); text-align: left;">
<div class="p-1" style="border:1px solid #808080; background:#000000; max-height: 200px; min-height: 70px; overflow: auto;"><span style="font-family: courier new,courier; letter-spacing: -1px;">Insert item description 5 here! This box will eventually start scrolling so don't worry about keeping it short. Might appear broken on mobile if long tho.</span></div>
</div>
</div>
</div>
</div>
<div class="nav-item mx-auto text-center"><a data-toggle="tab" href="#menu" style="color:#cccccc;"><i class="fas fa-arrow-left"></i></a></div>
</div>
</div>
</div>
<!----------------------- stats --------------------->
<div class="tab-pane show" id="stats">
<div class="block border-0 p-4" style="background: rgba( 0, 0, 0, 0.5); height:480px;">
<div style="margin-top:20px;">
<div class="container mt-5" style=" border:2px solid #cccccc; height:350px; width:450px; background:#000000; margin-top:150px;">
<div class=" no-gutters">
<div class="col-lg-4 mt-2">
<div class="pull-left">
<!----------------------- profile picture --------------------->
<div class="my-2" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/52756835_PZXd0V514yDErJZ.png); background-position:center; height:125px; width:125px; margin:auto;">
<br>
</div>
<!----------------------- character stats --------------------->
<div class=" row no-gutters justify-content-between">
<div class="col-auto" style="text-transform:uppercase; color:#cccccc;"><span style='color: rgb(204, 204, 204); font-family: "courier new", courier; font-size: 18px;'>ATK</span></div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 18px;'>7</span></div>
</div>
<div class=" row no-gutters justify-content-between">
<div class="col-auto" style="text-transform:uppercase; color:#cccccc;"><span style='font-family: "courier new", courier; font-size: 18px;'>DEF</span></div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 18px;'>10</span></div>
</div>
<div class=" row no-gutters justify-content-between">
<div class="col-auto" style="text-transform:uppercase; color:#cccccc;"><span style='font-family: "courier new", courier; font-size: 18px;'>INT</span></div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 18px;'>9</span></div>
</div>
<div class=" row no-gutters justify-content-between">
<div class="col-auto" style="text-transform:uppercase; color:#cccccc;"><span style='font-family: "courier new", courier; font-size: 18px;'>AGI</span></div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 18px;'>11</span></div>
</div>
<div class=" row no-gutters justify-content-between">
<div class="col-auto" style="text-transform:uppercase; color:#cccccc;"><span style='font-family: "courier new", courier; font-size: 18px;'>LUK</span></div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 18px;'>13</span></div>
</div>
</div>
</div>
<div class=" pull-left" style="width:290px;">
<div class="mb-1 col" style="background-color:#000000;">
<div style="border-color: #cccccc; border-style: none none solid none; border-width: 1px;">
<h1 class=" justify-content-between pt-1" style="letter-spacing: -2px; font-weight: 200; color: rgb(204, 204, 204); text-align: left;"><span style="font-family: courier new,courier; margin-bottom:-10px;">Name</span></h1>
</div>
<div class="row">
<!----------------------- HP. --------------------->
<div class=" col row no-gutters justify-content-between" style="margin-top:-20px;">
<div class="col row no-gutters justify-content-between">
<div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153;"><span style='color: #cccccc; font-family: "courier new", courier;'>HP.</span></div>
<div class="col-auto" style="color:#cccccc;"><span style="font-family: courier new,courier;">70/200</span></div>
</div>
<div class=" card progress m-auto " style="height: 8px; width: 290px; border-radius:0em; border-color: #cccccc; background-color: #000000;">
<div class="progress-bar" style="background-color: #1eb300;
width: 25%;">
<br>
</div>
</div>
</div>
<!----------------------- EXP. --------------------->
<div class=" col row no-gutters justify-content-between" style="margin-top:-20px;">
<div class="col row no-gutters justify-content-between">
<div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153;"><span style='color: #cccccc; font-family: "courier new", courier;'>EXP.</span></div>
<div class="col-auto" style="color:#cccccc;"><span style="font-family: courier new,courier;">2436/3000</span></div>
</div>
<div class=" card progress m-auto " style="height: 8px; width: 290px; border-radius:0em; border-color: #cccccc; background-color: #000000;">
<div class="progress-bar" style="background-color: #60befc;
width: 80%;">
<br>
</div>
</div>
</div>
</div>
<div style="border-color: #cccccc; border-style: none none solid none; border-width: 1px;">
<!----------------------- objective --------------------->
<h1 class=" justify-content-between pt-3" style="letter-spacing: -2px; font-weight: 200; color: rgb(204, 204, 204); text-align: left;"><span style="font-family: courier new,courier; margin-bottom:-10px;">Objective</span></h1>
</div>
<div class="mt-3 border" style="color:#cccccc; border-color:#cccccc; border:1px solid; min-height: 70px; max-height: 170px; overflow: auto;">
<p><span style="font-family: courier new,courier;">Put your character's current objective here! Or maybe write a description of your character here instead. Anything goes! This box will eventually start scrolling so go wild!</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="nav-item mx-auto text-center"><a data-toggle="tab" href="#menu" style="color:#cccccc;"><i class="fas fa-arrow-left"></i></a></div>
</div>
</div>
</div>
<!----------------------- settings --------------------->
<div class="tab-pane show" id="settings">
<div class="block border-0 p-4" style="background: rgba( 0, 0, 0, 0.5); height:480px;">
<div style="margin-top:60px;">
<div class="container mt-5" style=" border:2px solid #cccccc; height:300px; width:400px; background:#000000; margin-top:150px;">
<h1 class="px-1 justify-content-between pt-2" style="letter-spacing: -2px; font-weight: 200; color:#cccccc;"><span style="font-family: courier new,courier;">Settings</span></h1>
<div class=" mt-3 mx-auto">
<div>
<!----------------------- insert your character permissions here --------------------->
<!----------------------- fas fa-times-square is the X / fas fa-check-square is the check mark / fas fa-question-square is the ? / fas fa-square is the neutral one--------------------->
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-check-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>OK to draw fanart of?</span></div>
</div>
<div class="row no-gutters justify-content-between pt-1">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-times-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>OK to draw gore of?</span></div>
</div>
<div class="row no-gutters justify-content-between pt-1">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-times-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>OK to offer on?</span></div>
</div>
<div class="row no-gutters justify-content-between pt-1">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>OK to add to dreamie folder?</span></div>
</div>
<div class="row no-gutters justify-content-between pt-1">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-question-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>OK to kin?</span></div>
</div>
<div class="row no-gutters justify-content-between pt-1">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>Add whatever you want to this</span></div>
</div>
<div class="row no-gutters justify-content-between pt-1">
<div class="col-auto" style="color:#cccccc; margin-top:2px;"><i class="fas fa-square"></i></div>
<div class="col mx-2 my-auto">
<hr class="my-0" style="border-top:1px dotted #cccccc;">
</div>
<div class="col-auto" style="color:#8c8c8c;"><span style='font-family: "courier new", courier; font-size: 14px;'>I'm not good with character permissions</span></div>
</div>
<!----------------------- add more above this line if you'd like --------------------->
</div>
</div>
</div>
<div class="nav-item mx-auto text-center"><a data-toggle="tab" href="#menu" style="color:#cccccc;"><i class="fas fa-arrow-left"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mx-1" style="font-size:14px;"><a href="https://toyhou.se/17175501.rpg-code-test" id=""><i class="far fa-bagel tooltipster" title="Code by Donut-Toast"></i></a></div>
