<!--- | DARK & ELEGANT : SIMPLE v.

2 PROFILE HTML | --->

<!--------------------------------------------------------------------------------

Feel free to edit this however you like, however, do not remove the credit!

If you have any issues you can DM me on TH or leave a comment in my shop

thread.

Thank you for downloading.

----------------------------------------------------------------------------------

+-----------------+
| E D I T I N G |
+-----------------+

If you'd like to edit any aspect of the code, you can find guides for how to
add or change
things around the web - here are a couple of websites that should be able to
help you out:

> https://www.w3schools.com/ - for general HTML / CSS guides

> https://getbootstrap.com/docs/5.0/getting-started/introduction/ - Bootstrap

Documentation

+-----------------------------+
| C O L O R S & I C O N S |
+-----------------------------+

!! FIND AND REPLACE THE HEX CODES BELOW TO CHANGE COLORS !!

This theme uses a reddish accent color as a default, and a transparent dark
background
both of which can be easily changed to any custom color you'd like with a
simple find and replace;
the colors used are all listed below.

+-------------------------------------+
| Accent Color: #78326d; |
| Text Color: #fff; |
| Card BG: rgba(0,0,0,0.75); |
+-------------------------------------+

!! To change the Icons you can refer to the Font Awesome list of icons and
paste in
whichever icon you prefer for each section -- or you can remove them
entirely.

> https://fontawesome.com/icons

--------------------------------------------------------------------------------->

<!--- START OF CODE --->

<div class="container my-5 py-5">

 <!--- Background Card - Image Below --->

<div class="card mx-auto p-5 border-0" style=" background-

image:url('https://images.unsplash.com/photo-1522741949908-b876f57404b6?
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-
1.2.1&auto=format&fit=crop&w=2851&q=80') ; background-size:cover; max-
width:700px;">

<div class="card border-0 rounded-0 p-2 mx-auto" style="max-

width:625px; background-color:rgba(0,0,0,0.75); box-shadow:8px 8px 0px -1px
rgba(0,0,0,0.2);">
<div class="p-1" style="border:1px dashed #444;">
<div class="mx-auto text-center pt-5 pb-4 px-2"
style="color:#fff; border:1px solid #444;">

<!-- Icon Below -->

<h1><i class="fal fa-crown mb-3" style="font-

size:1.5em;"></i></h1>

<!-- Portrait Image Below -->

<img class="img-thumbnail bg-transparent mx-auto mb-2

rounded-circle" src="https://imgur.com/uBi9RvN.png" style="max-width:215px; max-
height:215px; border:1px solid #444;">

<!-- Character Name Below -->

<h1 class="text-center mb-0" style="font-

family:serif; font-size:4em; color:#78326d; text-transform:uppercase; letter-
spacing:4px; text-shadow: 3px 3px 0px #000;">ℭ𝔥𝔞𝔯𝔞𝔠𝔱𝔢𝔯</h1>

<!-- Quick Info Below -->

<h1 class="text-center" style="font-family:serif;

letter-spacing:1.5px; font-weight:300;">age / gender / prns / misc</h1>

<div class="text-justify px-5 py-4" style="letter-

spacing:2px;">

<!-- Blurb Below -->

<p><span class="mr-2 pull-left" style="font-

size:41px;line-height:41px; font-family:serif;">𝔏</span>orem ipsum dolor sit amet,
consectetur adipiscing elit. Integer ornare orci tempor tortor
sollicitudin finibus. Mauris aliquet, lectus in
lobortis tincidunt, sapien nisi pulvinar tortor, vitae cursus felis magna venenatis
nulla. Pellentesque ac placerat lorem. Morbi condimentum
rutrum mauris, non varius libero accumsan
sed.</p>

<div class="row no-gutters mt-3 mb-n3">

<!-- FAVORITES AND DISLIKES LISTS BELOW

-->

<div class="col-md-6 pr-md-5">

 <div class="text-justify h-100"
style="background-color:; letter-spacing:2px; font-size: 1.1em; line-
height:1.75em;">
<ul class="list-unstyled ml-
0">
<li><i class="fal fa-
heart" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

heart" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

heart" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

heart" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

heart" style="color:#78326d;"></i> ENTRY</li>
</ul>
</div>
</div>

<div class="col-md-6 pl-md-5">

<div class="text-justify h-100"
style="background-color:; letter-spacing:2px; font-size: 1.1em; line-
height:1.75em;">
<ul class="list-unstyled ml-
0">
<li><i class="fal fa-
times" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

times" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

times" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

times" style="color:#78326d;"></i> ENTRY</li>

<li><i class="fal fa-

times" style="color:#78326d;"></i> ENTRY</li>
</ul>
</div>
</div>
</div>
</div>
 <!-- AESTHETIC IMAGES BELOW -->

<div class="row no-gutters px-5 mx-n2 mt-2">

<div class="col-md-4 px-2"><img class="img-
thumbnail bg-transparent" src="https://imgur.com/0IpJnDB.png" style="border:1px
solid #444;">
</div>

<div class="col-md-4 px-2"><img class="img-

thumbnail bg-transparent" src="https://imgur.com/J3nz7mW.png" style="border:1px
solid #444;">
</div>

<div class="col-md-4 px-2"><img class="img-

thumbnail bg-transparent" src="https://imgur.com/63anmCS.png" style="border:1px
solid #444;">
</div>
</div>
</div>
</div>
</div>
</div>
<!--- CREDIT - you may alter the placement ot appearance but don't
remove the link! =-->

<div class="container text-right pr-3" style="color: #fff; font-size:16px;

font-family:courier new; max-width:720px; margin-top:-26px">
<a href="https://toyhou.se/~forums/16.htmlcss-graphics/105818"
style="color:inherit; text-decoration:none;"><i class="fas fa-code fa-sm"></i>
credit</a>
</div>
</div>