<!------------------------------------------------
NOTES!:
Comments with "❤" means to add information/links/hexcolors
(Control + F and replace text!)
Box color: #ece5d1
Box shadow: #1561b5
Font & icon: #172a6b
Secondary: #9ebe43
Traingles & Background icon: #c3384d
Credit color: #ffffff
Icon: fa-solid fa-star
Font: font-family:andale mono
------------------------------------------------>
<!----------------- ❤ BACKGROUND IMAGE ---------------------------->
<div style="position:absolute; top:0; bottom:0; left:0; background:url(https://pbs.twimg.com/media/EEu767vXkAI0Ln4.jpg) center; background-size:cover; width: 100%; z-index:-1;" ></div><br>
<div class="col-md-9 p-0" style="margin-left: auto; margin-right: auto;">
<!----------------- BACKGROUND ICON ---------------------------->
<div style="position:absolute; left: -70px; z-index:-1">
<i class="fal fa-solid fa-star fa-fw fa-rotate-180" style="font-size: 200px; opacity:0.5; color: #c3384d;"></i>
</div>
<div class="row no-gutters">
<div class="bg- col-md-4 p-4 h-200">
<div class="p-1">
<div class="p-2" style="background-color: #ece5d1; box-shadow: 10px 10px #1561b5;">
<div class="text-uppercase" style="font-family: arial,helvetica,sans-serif; font-weight: 00;font-size:20px; letter-spacing: 3px; color: #172a6b; margin-top: -40px; background-color; filter:drop-shadow(1px 1px #ece5d1)
drop-shadow(-1px -1px #ece5d1)
drop-shadow(-1px 1px #ece5d1)
drop-shadow(1px -1px #ece5d1);">
<!----------------- ❤ USER NAME ---------------------------->
<span style="font-size:190%; font-family:andale mono"><i class="fa-solid fa-star"></i>L</span><span style="letter-spacing: 4px; font-size:100%; font-family:andale mono">eonardo</span></div>
<div style="text-align: center; padding-bottom: 5px;">
<!------------------- ❤ QUICK INFORMATION BADGES ------------>
<span style="font-family:andale mono; font-weight: 600; color: #172a6b; background-color: #9ebe43; padding: 5px;">Pro/Nouns </span>
<span style="font-family:andale mono; font-weight: 600; color: #172a6b; background-color: #9ebe43; padding: 5px;">Age </span>
<span style="font-family:andale mono; font-weight: 600; color: #172a6b; background-color: #9ebe43; padding: 5px;">Etc. </span>
</div>
<!----------------- ❤ BIO INFORMATION ---------------------------->
<p style="color: #172a6b; height: 120px; overflow: auto; font-family:andale mono"> (Box scrolls) 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. 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>
<p class="mb-0" style="font-size: 2em; letter-spacing: 2px; text-align: center;">
<!----------------- ❤ SOCIALS LINKS ---------------------------->
<a href="link_here" style="color: #172a6b;"> <i class="fa-brands fa-twitter"></i></a>
<a href="link_here" style="color: #172a6b;"> <i class="fa-brands fa-square-instagram"></i></a>
<a href="link_here" style="color: #172a6b;"> <i class="fa-brands fa-youtube"></i></a>
<a href="link_here" style="color: #172a6b;"> <i class="fa-solid fa-paintbrush-pencil"></i></a>
<a href="link_here" data-toggle="tooltip" title="#000000" style="color: #172a6b;"><i class="fa-brands fa-discord"></i></a>
</p>
</div>
</div>
<br>
<div class="p-1">
<!----------------- ❤ ICON IMAGE ---------------------------->
<div style="background-color: #ece5d1; box-shadow: 10px 10px #1561b5; background: url(https://cdn.discordapp.com/attachments/1027458626991956090/1067303412133277776/wyfqtzwhbgla-1_waifu2x_art_noise3_scale.png) center; background-size: cover; height: 225px;" >
<!----------------- CREDIT (DO NOT DELETE. Thank you~ <3 ---------------------------->
<a class="tooltipster" data-placement="right" title="Code: PinkyDoggy" href="https://toyhou.se/PinkyDoggy"><i class="fa-solid fa-code" style="color: #ffffff; font-size: 20px; margin: 10px;"></i></a>
</div>
</div>
<!------////////////////////////////////////////////////////////-------->
</div>
<div class="bg- col-md-8 p-4 h-200">
<div class="p-1">
<!----------------- TOP TRIANGLE DECOR (❤ if you want to change the color)---------------------------->
<div class="p-3" style="background-color: #c3384d; clip-path: polygon(0 100%, 100% 100%, 0 0%);" ></div>
<br>
<div class="p-3" style="background-color: #ece5d1; box-shadow: 10px 10px #1561b5;" >
<div class="text-uppercase" style="font-family: arial,helvetica,sans-serif; font-weight:200;font-size:18px; letter-spacing: 3px; color: #172a6b; margin-top: -40px; background-color; filter:drop-shadow(1px 1px #ece5d1)
drop-shadow(-1px -1px #ece5d1)
drop-shadow(-1px 1px #ece5d1)
drop-shadow(1px -1px #ece5d1);">
<!----------------- ART STATUS TITLE ---------------------------->
<span style="font-size:190%; font-family:andale mono"><i class="fa-solid fa-star"></i>A</span><span style="letter-spacing: 4px; font-family:andale mono; font-size:100%">rt Status</span>
</div>
<p>
<!----------------- STATUS ---------------------------->
<span style=""><a href="link_here" class="my-1 p-1 btn" style="font-family:andale mono; background-color: #9ebe43; color: #172a6b; font-weight: 700; border-radius: 0px;"> Art Trade</a></span>
<!----------------- ❤ ART TRADE: EDIT STATUS HERE ---------------------------->
<span style="float: right; color: #172a6b; font-weight: 600; font-family:andale mono;">OPEN</span><br>
<span style=""><a href="link_here" class="my-1 p-1 btn" style="font-family:andale mono; background-color: #9ebe43; color: #172a6b; font-weight: 700; border-radius: 0px;"> Commissions</a></span>
<!----------------- ❤ COMMISSION: EDIT STATUS HERE ---------------------------->
<span style="float: right; color: #172a6b; font-weight: 600; font-family:andale mono;">OPEN</span><br>
<span style=""><a href="link_here" class="my-1 p-1 btn" style="font-family:andale mono; background-color: #9ebe43; color: #172a6b; font-weight: 700; border-radius: 0px;"> Requests</a></span>
<!----------------- ❤ REQUESTS: EDIT STATUS HERE ---------------------------->
<span style="float: right; color:#172a6b; font-weight: 600; font-family:andale mono;">OPEN</span><br>
</p>
</div>
<br><br>
<!---------------////////////////////////////////////////////////-------------------------->
<div class="p-3" style="background-color: #ece5d1; box-shadow: 10px 10px #1561b5;" >
<div class="text-uppercase" style="font-family: arial,helvetica,sans-serif; font-weight:200;font-size:18px; letter-spacing: 3px; color: #172a6b; margin-top: -40px; background-color; filter:drop-shadow(1px 1px #ece5d1)
drop-shadow(-1px -1px #ece5d1)
drop-shadow(-1px 1px #ece5d1)
drop-shadow(1px -1px #ece5d1);">
<!----------------- FEATURED TITLE ---------------------------->
<span style="font-size:190%; font-family:andale mono; "><i class="fa-solid fa-star"></i>F</span><span style="letter-spacing: 4px; font-size:100%; font-family:andale mono;">eatured</span></div>
<div class="row no-gutters">
<div class="col-md-3" style="height 500px;">
<!----------------- FIRST CHARACTER ---------------------------->
<!------------- ❤ IMG HERE ------------------------->
<div style="height 800px; background: url(https://cdn.discordapp.com/attachments/1027458626991956090/1067303792636346458/images-1_waifu2x_art_noise3_scale.png) center; background-size: cover;">
<div style="height: 150px; padding: 5px; background-color: rgb(23,42,107, 0.5)" >
<!------------- ❤ LINK HERE ------------------------->
<a href="link_here" class="my-1 p-1 btn" style="background-color: #9ebe43; color: #172a6b; border-radius: 0px; font-weight: 600; font-family:andale mono; ">
<!------------- ❤ NAME HERE ------------------------->
Name </a> </div>
</div>
</div>
<div class="col-md-3">
<!----------------- SECOND CHARACTER ---------------------------->
<!------------- ❤ IMG HERE ------------------------->
<div style="height 800px; background: url(https://cdn.discordapp.com/attachments/1027458626991956090/1067303800005734482/images_waifu2x_art_noise3_scale.png) center; background-size: cover;">
<div style="height: 150px; padding: 5px; background-color: rgb(23,42,107, 0.5)" >
<!------------- ❤ LINK HERE ------------------------->
<a href="link_here" class="my-1 p-1 btn" style="background-color: #9ebe43; color: #172a6b; border-radius: 0px; font-weight: 600; font-family:andale mono;">
<!------------- ❤ NAME HERE ------------------------->
Name </a> </div>
</div>
</div>
<div class="col-md-3">
<!----------------- THIRD CHARACTER ---------------------------->
<!------------- ❤ IMG HERE ------------------------->
<div style="height 800px; background: url(https://i.pinimg.com/originals/aa/22/49/aa22497149766cd1aa3e77d7987b56f5.jpg) center; background-size: cover;">
<div style="height: 150px; padding: 5px; background-color: rgb(23,42,107, 0.5)" >
<!------------- ❤ LINK HERE ------------------------->
<a href="link_here" class="my-1 p-1 btn" style="background-color: #9ebe43; color: #172a6b;border-radius: 0px; font-weight: 600; font-family:andale mono;">
<!------------- ❤ NAME HERE ------------------------->
Name </a> </div>
</div>
</div>
<div class="col-md-3">
<!----------------- FOURTH CHARACTER ---------------------------->
<!------------- ❤ IMG HERE ------------------------->
<div style="height 800px; background: url(https://i.pinimg.com/736x/5a/93/55/5a93558654f9d302be73d52cb2b7307a.jpg) center; background-size: cover;">
<div style="height: 150px; padding: 5px; background-color: rgb(23,42,107, 0.5)" >
<!------------- ❤ LINK HERE ------------------------->
<a href="link_here" class="my-1 p-1 btn " style="background-color: #9ebe43; color: #172a6b; border-radius: 0px; font-weight: 600; font-family:andale mono;">
<!------------- ❤ NAME HERE ------------------------->
Name </a> </div>
<!---------------////////////////////////////////////////////////-------------------------->
</div>
</div>
</div>
</div>
<br>
<!----------------- BOTTOM TRAINGLE DECOR (❤ if you want to change the color) ---------------------------->
<div class="p-3" style="background-color: #c3384d; clip-path: polygon(0 0, 100% 0, 0 100%);" > </div>
</div>
</div>
</div>
</div>
<!---------------- HEEEYYY!!! Thanks so much for checking out my codes! Welcome to the bottom. ----------------->
