<div class="m-0 p-0 border-0 card" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/16786726_3bbwZFsqTQwKOXm.png'); width:1200px; height:1200px; background-position: center;">
<div class="row">
<div style="width:570px; height:85px; margin-top: 105px; margin-left: 65px; text-align:center;">
<p style="margin-top:5px"><h1 style="color:#211; font-family: courier new,courier; font-weight: 900; font-size: 60px; opacity:.8;">
<!-- ~~~~~ Name section has a 15 character limit, lower the font size above if you need more room; you may need to increase margin-top to compensate. ~~~~~~~ -->
Pete R. Example
</h1>
</div>
<!-- ~~~ PORTRAIT HERE ~~~~
place your portrait url in the background-image:url'HERE'), have it be at least 300x300px. Image will center automatically. Yes, the image is faded to let the texture through.
IF YOUR IMAGE IS TRANSPARENT: remove background-color:#dfd2d2-->
<div class="card" style="width:380px; height:380px; margin-top: 120px; margin-left: 110px; text-align:center; opacity:.8; background-size: cover; background-repeat: no-repeat; background-color:#dfd2d2;
background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/16787244_vj9zXYDsxZmffPr.jpg');">
</div>
<div class="p-1" style="width:505px; height:850px; margin-top: -200px; margin-left: 105px; color:#211; font-family: courier new,courier; font-weight: bold; overflow:auto;">
<h1 style="font-weight: bold;">--> Profile</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget purus diam. Integer mattis sagittis gravida. Mauris mattis mi id velit lacinia, eget placerat elit tristique. Curabitur eu felis augue. Aliquam rhoncus urna ligula, sit amet ullamcorper nisl porta quis. Morbi maximus ex felis, et molestie massa lacinia vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<p>Nulla et turpis ex. Mauris et laoreet arcu, ut hendrerit justo. Vestibulum ornare ipsum lectus, ac faucibus turpis auctor sed. Sed luctus turpis velit. Aenean vitae tortor sit amet tortor posuere viverra quis at dolor. Cras id neque a lorem ultricies egestas. Etiam viverra eleifend efficitur.
<p>Duis maximus nibh at magna mattis congue. In ut neque vel justo molestie semper. In ut dolor eget felis vestibulum sollicitudin. Suspendisse suscipit odio non velit iaculis, id commodo libero fringilla. Vestibulum eget metus varius orci fringilla sagittis. Pellentesque faucibus odio nisi, vitae gravida risus viverra at. Duis elementum velit et tempor tincidunt.
<h1 style="font-weight: bold; text-align: center"> ---</h1>
<h1 style="font-weight: bold;">--> Biography</h1>
<p>Mauris sed tincidunt tortor. Maecenas dictum leo at urna interdum tincidunt. Pellentesque id orci libero. Pellentesque nec ultricies dolor. Nam gravida aliquam magna, non efficitur nibh pellentesque ut. Duis ut metus vehicula, convallis lacus ac, mollis enim. Nullam eu ligula urna. Maecenas varius, turpis et faucibus euismod, erat orci commodo lectus, in maximus elit quam eget turpis. Quisque auctor dolor ac laoreet fringilla. Integer convallis tristique cursus. Donec purus mauris, facilisis eu tortor a, finibus condimentum massa. Nam tempor varius lacinia. In non ligula at purus feugiat maximus. Maecenas tristique enim eu metus commodo lobortis. Praesent ultricies dictum ex. Nunc mauris nisl, varius in tincidunt in, imperdiet sed quam.
<p>Donec at nibh a magna aliquam dictum. Aliquam orci nisl, venenatis vel ipsum et, auctor convallis arcu. Fusce congue sem sed nisl volutpat, et facilisis dolor malesuada. Curabitur dictum tincidunt nisl. Ut et turpis finibus, vestibulum nunc luctus, sollicitudin ipsum. Curabitur sed enim sit amet sapien euismod vehicula quis id leo. Praesent sollicitudin ullamcorper suscipit. Sed placerat risus eget finibus eleifend. Phasellus pellentesque purus quis libero tincidunt, id dictum nunc varius. Nam tempus magna quis ligula mattis, at rhoncus eros blandit. Curabitur molestie eros diam, vitae mollis leo iaculis ac. Sed eget lacus urna. Nullam iaculis risus eros, sit amet porta purus malesuada nec. Nulla auctor tempor dolor sed aliquam. Cras auctor enim eu congue iaculis.
<h1 style="font-weight: bold; text-align: center"> ---</h1>
<div class="row mx-auto text-center" style="color:#211; font-family: courier new,courier; font-weight: bold;">
<div class="w-50 p-2">
<h1 style="font-weight: bold;">Likes</h1>
<p>Cute things
<br>Yummy food
<br>Friends
</div>
<div class="w-50 p-2">
<h1 style="font-weight: bold;">Dislikes</h1>
<p>Mean things
<br>Bad food
<br>Enemies
</div>
</div>
<h1 style="font-weight: bold; text-align: center"> ---</h1>
<h1 style="font-weight: bold;">--> Other Notes of Interest</h1>
<p><span style="font-weight: bold; font-size: 18px;">Habits:</span> Nulla blandit sem in tortor laoreet faucibus. Nam nec quam tortor. Aenean condimentum semper commodo. Etiam finibus imperdiet eros. Quisque pretium nibh a tempus ultrices. Donec pellentesque libero rhoncus magna ornare, ut gravida odio blandit. Proin id aliquet ex. Curabitur laoreet erat sed orci posuere lobortis. In at leo scelerisque, rhoncus purus quis, egestas nunc.
<p><span style="font-weight: bold; font-size: 18px;">Frequents:</span> In blandit augue ac sagittis gravida. Morbi non est nec orci semper lobortis. Vivamus ut lacus nisl. Quisque quis lacus ipsum. Ut gravida augue ut tortor cursus, eget aliquam tortor luctus. Fusce rutrum lectus velit, ultricies ultrices sapien ornare non. Pellentesque placerat non libero a dictum. Morbi porta massa ut volutpat eleifend. Quisque imperdiet tellus nec feugiat vulputate. Cras pulvinar et orci sed commodo. Vivamus auctor dolor vel leo lobortis hendrerit. Quisque varius molestie tempus. Curabitur aliquet, nisl at finibus porttitor, nisl purus sodales neque, quis facilisis elit elit mattis augue. Sed dictum ultrices erat, ac malesuada nibh pellentesque a.
<p><span style="font-weight: bold; font-size: 18px;">Vices:</span> Donec iaculis ipsum ac nunc sodales posuere. Suspendisse consequat sed lacus vel eleifend. Morbi aliquam, quam vel ornare varius, est lorem vehicula dolor, nec semper massa justo at dolor. Etiam tempus mi sit amet dui mollis laoreet. Nullam at aliquet mi. Ut lobortis dolor quis ipsum luctus, in volutpat ante tristique. Fusce vehicula hendrerit magna, sed fermentum neque facilisis ut. Aliquam vitae imperdiet dui, ultrices pretium diam. Duis feugiat nisl vel nulla vulputate placerat. Phasellus vel gravida nibh, ut tempor nisi. Nullam ut semper turpis, non lobortis nunc.
</div>
<div style="width:265px; height:535px; margin-top: 85px; margin-left: 111px; color:#211; font-family: courier new,courier; font-weight: bold; overflow:auto; padding:5px">
<p style="font-weight: bold; text-align:center; font-weight: 900; font-size: 36px; opacity:.8;">Information</p>
<hr style="width:230px; border: 3px dashed #211; opacity:.8; margin-top:-10px; margin-left:8px"></hr>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Alias
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Petey Piranha
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Gender
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Female
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Sexuality
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Unknown
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Height
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
5'4"
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Weight
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Don't Ask
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Age
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Approximately Mid-20's
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Hometown
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Ann Arbor
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Job
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Phantom Thief
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Alignment
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Lawful Chaotic
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Status
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
Developing
</p>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Value
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
$50 + Art
</p>
<br>
<hr style="width:230px; border: 3px dashed #211; opacity:.8; margin-top:-10px; margin-left:8px"></hr>
<p style="font-weight: bold; font-size:18px; line-height: 10%;">
Additional Portrait
</p>
<p style="text-align:right; font-size:18px; line-height: 10%;">
<a href="#" style="color:#633">See Attached File</a>
</p>
<!-- LINK YOUR MAIN REFERENCE IMAGE IN THE "ATTACHED FILE"; replace # with your file url! -->
</div>
</div>
</div>
<p style="text-align:right;"><span style='font-family: "courier new", courier; font-size: 9px;'>code by Pepperly</span></p>