Profile
<!--HELLO! This is my first ever attempt at HTML coding!!-->
<!--This code is completely free to use, feel free to frankenstein it with other codes (as long as the other creators allow it) or to adjust it as you please.-->
<!--Please just do not remove the credit :,)-->
<!--If you know nothing about code I made this notes version just for you!! Follow the steps provided to fill out the code to your liking!-->
<!--I reccommend not messing with parts of the code I do not tell you to (unless you know what you're doing) or else the code might break.-->
<!DOCTYPE html>
<html>
<!--Backgound Image + Icon-->
<!--Change the 'BACKGROUND IMG' at background: url(BACKGROUND IMG) to your background image-->
<!--Change the 'PROFILE IMG' at 'src="PROFILE IMG"' to your profile image-->
<!--Feel free to change the hex color (#f599af) to any desired color!-->
<div class="rounded container" style="background: url(BACKGROUND IMG) center; background-size: cover">
<br>
<center><img class="rounded-circle" src="PROFILE IMG" style="width:150px;height:150px;cover; border:5px solid #f599af"></center>
<br>
</div>
<br>
<!--Character Name-->
<!--Change "CHARACTER NAME" to your character's name-->
<!--Feel free to change the hex color (#f599af) to any desired color!-->
<div style="font-family:Garamond; font-size:50px; color:#f599af;"><center>CHARACTER NAME</center>
</div>
<!--Border Break Symbol-->
<!--If you are adjusting the code's theme entirely and are planning to change the symbol icons, please continue reading. If not, and you wish to keep the heart symbols the same you can ignore this bit and move on to the next part of the code!-->
<!--To switch the symbol, switch the 'heart' part of 'fa-heart' to the name of your desired symbol. Symbol list is available here: https://fontawesome.com/v4/icons/ -->
<!--Colors can also be adjusted here!-->
<div class="container justify-content-between align-items-center">
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af"><i class="fa-regular fa-heart px-2" style="color:#f599af"></i>
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af">
</div>
<!--Basic Information Section-->
<!--Once again, if you would like to change the symbols used, simply change the 'heart' in 'fa-heart' to your desired symbol from here: https://fontawesome.com/v4/icons/-->
<!--Feel free to adjust the text as necessary-->
<div class="rounded container" style="border:10px solid #f599af; background-color:#fac1d9; font-family:Garamond; color:#aa1c3e">
<header>
<br>
<span><u><h1><center><i class="fa-regular fa-heart px-2"></i>BASIC INFORMATION<i class="fa-regular fa-heart px-2"></i></center></h1></u></span>
<br>
</header>
<div class="row">
<div class="col" style="background-color:#fac1d9">
<h2><p>Name:</p>
<p>Affiliation:</p>
<p>Gender:</p>
</h2>
</div>
<div class="col" style="background-color:#fac1d9">
<h2><p>Age:</p>
<p>Pronouns:</p>
<p>Sexuality:</p>
<br>
</h2>
</div>
</div>
</div>
<!--Border Break Symbol-->
<!--If you are adjusting the code's theme entirely and are planning to change the symbol icons, please continue reading. If not, and you wish to keep the heart symbols the same you can ignore this bit and move on to the next part of the code!-->
<!--To switch the symbol, switch the 'heart' part of 'fa-heart' to the name of your desired symbol. Symbol list is available here: https://fontawesome.com/v4/icons/ -->
<!--Colors can also be adjusted here!-->
<div class="container justify-content-between align-items-center">
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af"><i class="fa-regular fa-heart px-2" style="color:#f599af"></i>
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af">
</div>
<!--Story Section-->
<!--Once again, if you would like to change the symbols used, simply change the 'heart' in 'fa-heart' to your desired symbol from here: https://fontawesome.com/v4/icons/-->
<!--Replace the text with whatever you desire.-->
<div class="rounded container" style="border:10px solid #f599af; background-color:#fac1d9; font-family:Garamond; color: #aa1c3e">
<header>
<br>
<span><u><h1><center><i class="fa-regular fa-heart px-2"></i>STORY<i class="fa-regular fa-heart px-2"></i></center></h1></u></span>
</header>
<div class="row">
<div class="col">
<br>
<p><center>Type your information here! This box will grow to fit your text! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></center>
<br>
</div>
<!--Side Images-->
<!--Feel free to delete, replace, or adjust the images however you deem fit. Replace the "IMG LINK" in src="IMG LINK" with your desired image.-->
<div class="col">
<!--IMAGE 1-->
<center>
<img class="rounded-circle" src="IMG LINK" style="width:100px; height:100px"></center>
<br>
<!--IMAGE 2-->
<center>
<img class="rounded-circle" src="IMG LINK" style="width:100px;height:100px"></center>
<br>
<!--IMAGE 3-->
<center>
<img class="rounded-circle" src="IMG LINK" style="width:100px;height:100px"></center>
<br>
</div>
</div>
</div>
<!--Border Break Symbol-->
<!--If you are adjusting the code's theme entirely and are planning to change the symbol icons, please continue reading. If not, and you wish to keep the heart symbols the same you can ignore this bit and move on to the next part of the code!-->
<!--To switch the symbol, switch the 'heart' part of 'fa-heart' to the name of your desired symbol. Symbol list is available here: https://fontawesome.com/v4/icons/ -->
<!--Colors can also be adjusted here!-->
<div class="container justify-content-between align-items-center">
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af"><i class="fa-regular fa-heart px-2" style="color:#f599af"></i>
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af">
</div>
<!--Statistics-->
<!--Feel free to adjust colors, fonts, etc.-->
<!--Once again, if you would like to change the symbols used, simply change the 'heart' in 'fa-heart' to your desired symbol from here: https://fontawesome.com/v4/icons/-->
<div class="rounded container" style="border:10px solid #f599af; background-color:#fac1d9; font-family:Garamond; color: #aa1c3e">
<header>
<br>
<span><u><h1><center><i class="fa-regular fa-heart px-2"></i>STATISTICS<i class="fa-regular fa-heart px-2"></i></center></h1></u></span>
<br>
</header>
<!--Progress Bars-->
<!--You can change the "Strength" "Agility", etc. parts to any statistic you would like.-->
<!--If you would like to add additional statistics, refer to the portion between 'COPY HERE FOR ADDITIONAL' to 'PASTE AFTER HERE FOR ADDITIONAL'. The box will automatically expand to fit your progress bars-->
<!--To set the progress bars, set the first 'style="width:%" portion to the desired percentage (I.E., if your character's strength is 80% change this portion to 80%). Next, change the second 'style="width:%" portion to the first percentage minus 100. So, if the first width is 80% the second would be set to 20%. This must be done correctly or else the code will not look correct.-->
<!--STRENGTH-->
<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;background-color:#aa1c3e;"><br></div><div class="progress-bar" style="width: 50%;background-color: #fff4f8;"><br></div></div>
<p style="font-size:20px"> Strength</p></p>
<!--INTELLIGENCE-->
<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;background-color:#aa1c3e;"><br></div><div class="progress-bar" style="width: 50%;background-color: #fff4f8;"><br></div></div>
<p style="font-size:20px"> Intelligence</p></p>
<!--AGILITY-->
<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;background-color:#aa1c3e;"><br></div><div class="progress-bar" style="width: 50%;background-color: #fff4f8;"><br></div></div>
<p style="font-size:20px"> Agility</p></p>
<!--KINDNESS-->
<!--COPY HERE FOR ADDITIONAL-->
<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;background-color:#aa1c3e;"><br></div><div class="progress-bar" style="width: 50%;background-color: #fff4f8;"><br></div></div>
<p style="font-size:20px"> Kindness</p></p>
<!--PASTE AFTER HERE FOR ADDITIONAL-->
</div>
<!--Border Break Symbol-->
<!--If you are adjusting the code's theme entirely and are planning to change the symbol icons, please continue reading. If not, and you wish to keep the heart symbols the same you can ignore this bit and move on to the next part of the code!-->
<!--To switch the symbol, switch the 'heart' part of 'fa-heart' to the name of your desired symbol. Symbol list is available here: https://fontawesome.com/v4/icons/ -->
<!--Colors can also be adjusted here!-->
<div class="container justify-content-between align-items-center">
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af"><i class="fa-regular fa-heart px-2" style="color:#f599af"></i>
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af">
</div>
<!--Relationships-->
<!--Replace 'NAME' with the character name. Replace 'Relationship' with the relationship status/type. Replace the filler text with whatever you'd desire.
<!--To change the icon image, replace 'IMAGE LINK' in 'src="IMAGE LINK"' with the image.-->
<!--To change the link to link the character's page, replace 'CHARACTER LINK HERE' in '<a href="CHARACTER LINK HERE"' with the link.-->
<!--If you would not like to link a page or the page does not exist, you can either leave this blank or remove the link by deleting the code: <a href="CHARACTER LINK HERE" target="_blank"> and the code: </a>
<!--RELATIONSHIP 1-->
<div class="rounded container" style="border:10px solid #f599af; background-color:#fac1d9; font-family:Garamond; color:#aa1c3e">
<header>
<br>
<span><u><h1><center><i class="fa-regular fa-heart px-2"></i>RELATIONSHIPS<i class="fa-regular fa-heart px-2"></i></center></h1></u></span>
<br>
</header>
<div class="row">
<center><img class="rounded-circle" src="IMAGE LINK" style="width:150px;height:150px;cover; border:5px solid #f599af"></center>
<div class="container" style="width:20px"></div>
<div class="col" style="background-color:#fac1d9; line-height:5px">
<center><h2><a href="CHARACTER LINK HERE" target="_blank">NAME</a></h2>
<p>Relationship</p>
<p><p style="font-size:12px; line-height:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p></h5></center>
</h2>
</div>
</div>
<!--RELATIONSHIP 2-->
<br>
<div class="row">
<center><img class="rounded-circle" src="IMAGE LINK" style="width:150px;height:150px;cover; border:5px solid #f599af"></center>
<div class="container" style="width:20px"></div>
<div class="col" style="background-color:#fac1d9; line-height:5px">
<center><h2><a href="CHARACTER LINK HERE" target="_blank">NAME</a></h2>
<p>Relationship</p>
<p><p style="font-size:12px; line-height:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p></h5></center>
</h2>
</div>
</div>
<!--RELATIONSHIP 3-->
<br>
<div class="row">
<center><img class="rounded-circle" src="IMAGE LINK" style="width:150px;height:150px;cover; border:5px solid #f599af"></center>
<div class="container" style="width:20px"></div>
<div class="col" style="background-color:#fac1d9; line-height:5px">
<center><h2><a href="CHARACTER LINK HERE" target="_blank">NAME</a></h2>
<p>Relationship</p>
<p><p style="font-size:12px; line-height:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p></h5></center>
</h2>
</div>
</div>
<!--Credit-->
<!--DO NOT REMOVE!!!!-->
<br>
<div class="container justify-content-between align-items-center">
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af"><a href="https://toyhou.se/Emmkitt2" target="_blank"><i class="fa-regular fa-heart px-2" style="font-size:30px;color:#f599af"></i></a>
<hr class="w-50" style="height:2px;border-width:0;color:#f599af;background-color:#f599af">
</div>
</div>
</div>
</html>
Recent Images
No images.