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 :,)-->
<!DOCTYPE html>
<html>
<!--Backgound Image + Icon-->
<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-->
<div style="font-family:Garamond; font-size:50px; color:#f599af;"><center>CHARACTER NAME</center>
</div>
<!--Border Break Symbol-->
<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-->
<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-->
<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-->
<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-->
<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-->
<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-->
<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-->
<!--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-->
<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-->
<!--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.