<!-- COLOR CODES
bg color: #f8fbf6
hearts: #47B672
text: #257F55
symbol for bullets and nickname: fas fa-clover

TIPS:
use the ctrl+f command to replace the hex codes/symbols all at once!
the background here uses tiles! i use https://sadgrl.online/webmastery/downloads/tiledbgs for all my tiled backgrounds :]
minus the image, every single box can scroll! so go buck wild!
-->

    <!--background tile!-->
<div class="container-fluid" style="background:url(https://sadhost.neocities.org/images/tiles/tumblr_inline_mlkwolhobQ1r53miq.png) repeat fixed;padding:20px;border-radius:5px;max-width:1000px;margin:30px auto 5px;">
    <div class="row no-gutters justify-content-center">
        <div class="card col-lg-6 p-3 justify-content-center" style="background-color:#f8fbf6;border-radius:10px;">
            <div class="p-2 row no-gutters justify-content-center">
    <!--symbol and name!-->
            <i class="fas fa-clover fa-3x " style="color:#47B672"> </i>
        <h3 style="color:#257F55;font-size:33px;font-family:'ms gothic';padding:5px;" class="font-weight-bold" align="center">NAME LASTNAME</h3>
            <i class="fas fa-clover fa-3x " style="color:#47B672"> </i>
        </div>
        </div>
    </div>
    <!--cover image! be wary i could not figure out how to get it to crop right, recommended size is a 1:2 ratio ex. 1000:2000! :-] just play around w it maybe you can figure it out -->
    <div class="row no-gutters p-3">
        <div class="card col-lg-4 p-3 justify-content-center" style="background-color:#f8fbf6;border-radius:10px;">
            <img class="mx-auto" style="border-radius:10px;max-width:100%;max-height:520px;" src="https://cdn.discordapp.com/attachments/599831392108675072/1153895868508950608/IMG_3944.png">
        </div>
    <!--general info section! feel free to change the parameters as you like -->
    <div class="row p-1 col-lg-4">
        <div class="container-fluid">
        <div class="card col-lg-12 p-2" style="background-color:#f8fbf6;border-radius:10px;margin:5px;height:188px;overflow:auto;">
            <div class="p=1">
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-left">pronouns:</span><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">txt</span>
             </div>
            <div class="p=1">
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-left">age:</span><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">txt</span>
            </div>
            <div class="p=1">
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-left">birthday:</span><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">txt</span>
            </div>
            <div class="p=1">
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-left">occupation:</span><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">txt</span>
            </div>
            <div class="p=1">
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-left">orientation:</span><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">txt</span>
            </div>
        </div>
        <div class="card col-lg-12 p-3 justify-content-center" style="background-color:#f8fbf6;border-radius:10px;margin:5px;height:170px;overflow:auto;">
    <!--likes -->
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-left">likes:</span>
            <div class="p-1">
            <i class="fas fa-clover" style="color:#47B672"> </i><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold">x</span>
            </div>
            <div class="p-1">
            <i class="fas fa-clover" style="color:#47B672"> </i><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold">y</span>
            </div>
            <div class="p-1">
            <i class="fas fa-clover" style="color:#47B672"> </i><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold">z</span>
            </div>
        </div>
        <div class="card col-lg-12 p-3 justify-content-center" style="background-color:#f8fbf6;border-radius:10px;margin:5px;height:170px;overflow:auto;">
    <!--dislikes -->
            <span style="color:#257F55;font-size:16px;font-family:'ms gothic';padding:5px;overflow:auto;" class="font-weight-bold pull-left">dislikes:</span>
            <div class="p-1">
            <i class="fas fa-clover" style="color:#47B672"> </i><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold">x</span>
            </div>
            <div class="p-1">
            <i class="fas fa-clover" style="color:#47B672"> </i><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold">y</span>
            </div>
            <div class="p-1">
            <i class="fas fa-clover" style="color:#47B672"> </i><span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold">z</span>
            </div>
        </div>
        </div>
    </div>
    <!--bio -->
    <div class="row p-1 col-lg-4 no-gutters">
        <div class="card col-lg-12 p-2" style="background-color:#f8fbf6;border-radius:10px;margin:5px;height:260px;overflow:auto;">
            <h3 style="color:#257F55;font-size:20px;font-family:'ms gothic';padding:5px;" class="font-weight-bold" align="center">ABOUT:</h3>
            <span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">Here's a box! It can scroll!! 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.</span>
        </div>
        <!--personality: -->
        <div class="card col-lg-12 p-2" style="background-color:#f8fbf6;border-radius:10px;margin:5px;height:266px;overflow:auto;">
            <h3 style="color:#257F55;font-size:20px;font-family:'ms gothic';padding:5px;" class="font-weight-bold" align="center">PERSONALITY:</h3>
            <span style="color:#47B672;font-size:16px;font-family:'ms gothic';padding:5px;" class="font-weight-bold pull-right">Here's a box! It can scroll!! 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.</span>
        </div>
         </div>
    </div>
<!--credit!! dont remove -->
     <div class="card col-lg-2 justify-content-center" style="background-color:#2b2f2bc1;border-radius:5px;">
         <a href="https://toyhou.se/chairischair1" style="color:#f8fbf6;font-size:7px;font-family:'ms gothic';padding:0px;" class="font-weight-bold pull-right">code by chairischair1</a>
    </div>
</div>