<!--
Reference Sheet
A F2U Code by EeveePotter
Rules
~ Don't claim as your own
~ No reselling
~ Feel free to edit or Frankenstein as much as you want!
Other:
~ Mobile Friendly
~ Bootstrap Colors
~ WYSIWYG for Profiles off please
~ Let me know if you have any questions, I'll be happy to answer!
~ If you want me to fill it out for you, or edit it in any way feel free to message me and we can work something out
Resources:
~ Code Editor: https://th.circlejourney.net/
~ Second Code Editor: https://cheeriko.github.io/playhouse/character.html
~ Free to use Icons: https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
Colors:
This uses Bootstrap colors, feel free to message me if you'd like custom colors and we can work something out
-->
<!-- Code -->
<!-- Top Row -->
<div class="card p-2 bg-faded border-0">
<div class="row no-gutters">
<div class="col-md-3">
<center>
<!-- Main Image, Replace IMGURL with the image url -->
<div style="background-image:url(IMGURL);background-position:center;background-size:cover;height:200px;width:263px;border-radius:20px;margin:5px;"></div>
<!-- /Main Image -->
</center>
</div>
<!-- Basic Info -->
<div class="card col-md-5 border-0 p-3 justify-content-center" style="margin:5px;border-radius:10px;height:200px;">
<div class="justify-content-between">
<!-- Name -->
<span><font size="+1"><b><i class="fas fa-signature"></i></b></font></span>
<span><font size="+1">Name</font></span>
<!-- /Name -->
</div>
<div class="justify-content-between">
<!-- Gender -->
<span><font size="+1"><b><i class="fas fa-transgender-alt"></i></b></font></span>
<span><font size="+1">Gender</font></span>
<!-- /Gender -->
</div>
<div class="justify-content-between">
<!-- Pronouns -->
<span><font size="+1"><b><i class="fas fa-transgender-alt"></i>/<i class="fas fa-transgender-alt"></i></b></font></span>
<span><font size="+1">Prn/Prn</font></span>
<!-- /Pronouns -->
</div>
<div class="justify-content-between">
<!-- Oriantation -->
<span><font size="+1"><b><i class="fas fa-heart"></i></b></font></span>
<span><font size="+1">Sexuality</font></span>
<!-- /Oriantation -->
</div>
<div class="justify-content-between">
<!-- Bday -->
<span><font size="+1"><b><i class="fas fa-birthday-cake"></i></b></font></span>
<span><font size="+1">Jan. 00</font></span>
<!-- /Bday -->
</div>
<div class="justify-content-between">
<!-- Species -->
<span><font size="+1"><b><i class="fas fa-paw"></i></b></font></span>
<span><font size="+1">Species</font></span>
<!-- /Species -->
</div>
</div>
<!-- /Basic Info -->
<div class="card col border-0 p-3" style="margin:5px;border-radius:10px;overflow:auto;height:200px;">
<center>
<!-- Overview -->
<p>A brief overview of your character here. This box will scroll, but try not to make it too long. Use this maybe for Appearance? Personality? Backstory? However you wish! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- /Overview -->
</center>
</div>
</div>
<br>
</div>
<!-- /Top Row -->
<hr class="bg-faded" style="height:2px;margin:0px;">
<!-- Ref Image, Colors, and Notes row -->
<div class="card p-2 bg-faded border-0">
<br>
<div class="row no-gutters">
<div class="card col-md-3 border-0 p-3 justify-content-center" style="border-radius:0px;overflow:none;height:500px;">
<!-- Color Palette (Stars),
Change all 000000 to a color present on your character
Example:
My Character has the hex code #ff0000
Original: <span data-toggle="tooltip" title="#000000" style="color:#000000;">
My Character's: <span data-toggle="tooltip" title="#ff0000" style="color:#ff0000;">
-->
<center>
<div class="row no-gutters">
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
</div>
<hr>
<div class="row no-gutters">
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
</div>
<hr>
<div class="row no-gutters">
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
</div>
<hr>
<div class="row no-gutters">
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
</div>
<hr>
<div class="row no-gutters">
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
<div class="card border-0 col-6">
<font size="+3">
<!-- Star -->
<span data-toggle="tooltip" title="#000000" style="color:#000000;">
<i class="fas fa-star"></i><br>
</span>
<!-- /Star -->
</font>
</div>
</div>
</center>
<!-- /Color Palette (Stars) -->
</div>
<div class="card col-md-6 border-0 justify-content-center bg-faded p-4" style="height:500px;border-radius:0px;">
<!-- Central Image, replace IMGURL with the image url -->
<div style="background-image:url(IMGURL);background-position:center;background-size:cover;height:490px;border-radius:20px;"></div>
<!-- /Central Image -->
</div>
<div class="card col-md-3 border-0" style="border-radius:0px;height:500px;">
<div class="card border-0 p-2 col" style="height:250px;overflow:auto;">
<!-- Items -->
<p style="font-size:32px;">Items</p>
<ul>
<!-- Points -->
<li>Looks best short but box will scroll. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<!-- /Points, Add more above this divider to add more -->
</ul>
<!-- /Items -->
</div>
<div class="card border-0 p-2 col" style="height:250px;overflow:auto;">
<!-- Design Notes -->
<p style="font-size:32px;">Design Notes</p>
<ul>
<!-- Points -->
<li>Looks best short but box will scroll. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<!-- /Points, Add more above this divider to add more -->
</ul>
<!-- /Design Notes -->
</div>
</div>
</div>
<br>
</div>
<!-- /Ref Image, Colors, and Notes row -->
<hr class="bg-faded" style="height:2px;margin:0px;">
<!-- Outfit Row -->
<div class="card p-2 bg-faded border-0">
<br>
<div class="card border-0 p-2">
<!-- Title, You can also change to 'Aesthetic' -->
<p style="text-align:center;font-size:30px;font-weight:300;">Outfits</p>
<!-- /Title -->
<div class="row no-gutters">
<div class="col-md-3">
<!-- Image, Replace IMGURL with the image url -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40784159_eoLtBYGSI2F4fYe.jpg?1641581243" class="col-md-3">
<!-- /Image -->
</div>
<div class="col-md-3">
<!-- Image, Replace IMGURL with the image url -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40784159_eoLtBYGSI2F4fYe.jpg?1641581243" class="col-md-3">
<!-- /Image -->
</div>
<div class="col-md-3">
<!-- Image, Replace IMGURL with the image url -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40784159_eoLtBYGSI2F4fYe.jpg?1641581243" class="col-md-3">
<!-- /Image -->
</div>
<div class="col-md-3">
<!-- Image, Replace IMGURL with the image url -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40784159_eoLtBYGSI2F4fYe.jpg?1641581243" class="col-md-3">
<!-- /Image -->
</div>
</div>
</div>
<br>
</div>
<!-- /Outfit Row -->
<hr class="bg-faded" style="height:2px;margin:0px;">
<!-- Extra info and Marks -->
<div class="card p-2 bg-faded border-0">
<br>
<div class="row no-gutters">
<!-- Misc Info -->
<div class="card p-2 col-md-6 border-0" style="height:250px;">
<br>
<div class="row no-gutters">
<div class="card border-0 col-4" style="margin:auto;">
<!-- Age -->
<p style="font-size:20px;font-weight:400;text-align:center;margin-bottom:-4px;"><b>Age</b></p>
<p style="font-size:18px;font-weight:400;text-align:center;margin-top:-4px;">00</p>
<!-- /Age -->
</div>
<div class="card border-0 col-4" style="margin:auto;">
<!-- Blood Type -->
<p style="font-size:20px;font-weight:400;text-align:center;margin-bottom:-4px;"><b>Body Type</b></p>
<p style="font-size:18px;font-weight:400;text-align:center;margin-top:-4px;">Type</p>
<!-- /Blood Type -->
</div>
</div>
<br>
<div class="row no-gutters">
<div class="card border-0 col-4" style="margin:auto;">
<!-- Weight -->
<p style="font-size:20px;font-weight:400;text-align:center;margin-bottom:-4px;"><b>Weight</b></p>
<p style="font-size:18px;font-weight:400;text-align:center;margin-top:-4px;">000 lbs.</p>
<!-- /Weight -->
</div>
<div class="card border-0 col-4" style="margin:auto;">
<!-- Height -->
<p style="font-size:20px;font-weight:400;text-align:center;margin-bottom:-4px;"><b>Height</b></p>
<p style="font-size:18px;font-weight:400;text-align:center;margin-top:-4px;">0' 0"</p>
<!-- /Height -->
</div>
</div>
<br>
<div class="row no-gutters">
<div class="card border-0 col-4" style="margin:auto;">
<!-- Theme, Replace LINK with the song link -->
<p style="font-size:20px;font-weight:400;text-align:center;margin-bottom:-4px;"><b>Theme</b></p>
<p style="font-size:18px;font-weight:400;text-align:center;margin-top:-4px;"><a href="LINK">Song Name - Artist</a></p>
<!-- /Theme -->
</div>
<div class="card border-0 col-4" style="margin:auto;">
<!-- Voice Claim, Replace LINK with the video or wiki link -->
<p style="font-size:20px;font-weight:400;text-align:center;margin-bottom:-4px;"><b>Voice Claim</b></p>
<p style="font-size:18px;font-weight:400;text-align:center;margin-top:-4px;"><a href="LINK">Name</a></p>
<!-- /Voice Claim -->
</div>
</div>
<br>
</div>
<!-- /Misc Info -->
<!-- Scars and Marks -->
<div class="card p-2 col-md-6 border-0 text-right justify-content-center" style="height:250px;">
<div>
<!-- Scars -->
<p style="font-size:20px;font-weight:500;text-align:center;">Scars/Injuries</p>
<div class="justify-content-between">
<!-- Items -->
<p style="font-size:18px;font-weight:400;text-align:left;">Item1</p>
<p style="font-size:18px;font-weight:400;text-align:center;">Item2</p>
<p style="font-size:18px;font-weight:400;text-align:right;">Item3</p>
<!-- /Items, Add more above this line to add more -->
</div>
<!-- /Scars -->
</div>
<br>
<div>
<!-- Marks -->
<p style="font-size:20px;font-weight:500;text-align:center;">Distinguishing Marks</p>
<div class="justify-content-between">
<!-- Items -->
<p style="font-size:18px;font-weight:400;text-align:left;">Item1</p>
<p style="font-size:18px;font-weight:400;text-align:center;">Item2</p>
<p style="font-size:18px;font-weight:400;text-align:right;">Item3</p>
<!-- /Items, Add more above this line to add more -->
</div>
<!-- /Marks -->
</div>
</div>
<!-- /Scars and Marks -->
</div>
<br>
</div>
<!-- /Extra info and Marks -->
<hr class="bg-faded" style="height:2px;margin:0px;">
<!-- Backstory -->
<div class="card p-2 bg-faded border-0">
<br>
<!-- Title -->
<a href="#backstory" data-toggle="collapse" class="btn p-2 col-12 bg-primary text-light" style="border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;font-size:25px;">Backstory</a>
<!-- /Title -->
<!-- Collapse -->
<div id="backstory" class="collapse">
<div class="card border-0 p-2" style="border-top-right-radius:0px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<!-- Quote -->
<p style="font-size:30px;text-align:center;">"Short Quote Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>
<!-- /Quote -->
<div class="row no-gutters">
<div class="col-md-4 float-md-left mb-2">
<!-- Story Image, Replace IMGURL with the image url -->
<div style="background:url(IMGURL) center no-repeat; background-size:cover; height:300px;"></div>
<!-- /Story Image -->
</div>
<div class="card col-md-8 float-md-right p-2 border-0 justify-content-center">
<!-- Overview -->
<p style="font-size:20px;text-align:center;">Short backstory over view here. Try not to go too long though. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
<!-- /Overview -->
</div>
</div>
<br>
<!-- Header1 Title -->
<a href="#header1" data-toggle="collapse" class="btn p-1 col-12 bg-primary text-light" style="border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;font-size:20px;">Header</a>
<!-- /Header1 Title -->
<!-- Story Collapse1 -->
<div id="header1" class="collapse">
<div class="card p-2" style="border-top-right-radius:0px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<!-- Header -->
<p style="font-size:24px;text-align:left;margin-bottom:-2px;">Header</p>
<!-- /Header -->
<!-- Text -->
<p style="font-size:16px;text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size:16px;text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- /Text -->
</div>
</div>
<!-- /Story Collapse1 -->
<hr>
<!-- /Story Collapse2 -->
<div id="header2" class="collapse">
<div class="card p-2" style="border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;">
<!-- Header -->
<p style="font-size:24px;text-align:right;margin-bottom:-2px;">Header</p>
<!-- /Header -->
<!-- Text -->
<p style="font-size:16px;text-align:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size:16px;text-align:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- /Text -->
</div>
</div>
<!-- /Story Collapse2 -->
<!-- Header2 Title -->
<a href="#header2" data-toggle="collapse" class="btn p-1 col-12 bg-primary text-light" style="border-top-right-radius:0px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;font-size:20px;">Header</a>
<!-- /Header2 Title -->
<br>
<!-- End Quote -->
<p style="font-size:26px;text-align:center;">"Longer Quote Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus."</p>
<!-- /End Quote -->
</div>
</div>
<!-- /Collapse -->
</div>
<!-- /Backstory -->
<!-- Credit, delete below to delete -->
<p style="text-align:center;" class="p-1">
<a href="https://toyhou.se/14784785.f2u-reference-sheet">
<i class="fas fa-code" data-toggle="tooltip" title="Code by EeveePotter"></i>
</a>
</p>
<!-- /Credit, delete above to delete -->
<!-- /Code -->
