modify

<!--

. Hi again
this is just a guillotine code idk what else to say you wont be doing much customization lol

-->

<div class="col-sm-12 col-md-4 mx-auto p-0">
    <div class="px-4 pt-4 bg-faded">
        <div class="card rounded-0 border-0 p-0" style="height: 400px; overflow: hidden">

          <!-- the accordion -->
            <div id="accordion">

                <!-- the rope -->
                <div id="chop" class="collapse px-2" data-parent="#accordion">
                    <div style="width: 7px; height: 325px;" class="mx-auto bg-secondary"></div>
                </div>

                <!-- the pulley thing -->
                <div class="p-2 mx-auto mt-1" style="border-radius: 100% 100% 0px 0px; background-color: #a3a3a3; max-width: 30px"></div>

                <!-- the board -->
                <div class="p-2 bg-faded">
                    <div class="row no-gutters">
                        <div class="col-6 justify-content-start mb-3"><i class="fas fa-hexagon"></i></div>
                        <div class="col-6 justify-content-end mb-3"><i class="fas fa-hexagon"></i></div>
                        <div class="col-6 justify-content-start"><i class="fas fa-hexagon"></i></div>
                        <div class="col-6 justify-content-end"><i class="fas fa-hexagon"></i></div>
                    </div>
                </div>

                <!-- the actual guillotine thing-->
                <div class="px-2">
                    <a class="stretched-link" style="cursor:pointer;" data-toggle="collapse" data-target="#chop" aria-expanded="true" aria-controls="chop"></a>
                    <div style="clip-path: polygon(0 0, 100% 0, 100% 65%, 0 10%); background-color: #a3a3a3; padding-top: 150px"></div>
                </div>

                <!-- if you want the info to be visible just remove the style="display: none" from the div -->
                <div id="unchop" class="collapse show p-2 mt-n4" data-parent="#accordion">
                  <div style="display: none">

                    <!-- name -->
                    <div class="justify-content-between">
                        <p class="mb-0"> <i class="fal fa-user"></i> name </p>
                        <p>lorem ipsum</p>
                    </div>

                    <hr class="my-1">

                    <!-- gender -->
                    <div class="justify-content-between">
                        <p class="mb-0"> <i class="fal fa-venus-mars"></i> gender </p>
                        <p>none</p>
                    </div>

                    <hr class="my-1">

                    <!-- pronouns -->
                    <div class="justify-content-between">
                        <p class="mb-0"> <i class="fal fa-transgender"></i> pronouns </p>
                        <p>it/its</p>
                    </div>

                    <hr class="my-1">

                    <!-- age -->
                    <div class="justify-content-between">
                        <p class="mb-0"> <i class="fal fa-birthday-cake"></i> age </p>
                        <p>69</p>
                    </div>

                    <hr class="my-1">

                    <!-- birthday -->
                    <div class="justify-content-between">
                        <p class="mb-0"> <i class="fal fa-calendar-alt"></i> birthday </p>
                        <p>01/01/01</p>
                    </div>

                    <hr class="my-1">

                    <!-- species -->
                    <div class="justify-content-between">
                        <p class="mb-0"> <i class="fal fa-cat"></i> species </p>
                        <p>text</p>
                    </div>
                  </div>
                </div>

                <!-- hidden info end -->

            </div>
        </div>

        <!-- the chopping board -->
        <div class="bg-faded py-5 px-0" style="text-align: center">
                <div class="row no-gutters py-1">
                <div class="col-12 ml-n4 mt-n5" style="text-align: center; position: absolute; z-index: 1">
                <a class="mx-auto w-100" style="cursor:pointer" data-toggle="collapse" data-target="#unchop" aria-expanded="true" aria-controls="unchop">

                  <!-- put oc profile picture here. be square or be there -->
                <img src="imgurlhere" class="rounded-circle mx-auto" style="max-height: 100px; max-width: 100px">
                </a>
                </div>

                <div class="card w-100 border-0 rounded-0 py-1 w-100 col-12"></div>
                </div>
        </div>
    </div>

    <!-- did you kjnow that fontawesome has no basket icon that isnt a shopping basket. fun right -->

    <div><i class="fal fa-6x fa-basket-shopping mt-n5" style="margin-left: 2em; z-index: 2; position: absolute"></i>
    </div>

    <!-- dont remove the credit thx -->
    <div>
      <a href="/micro-wave"><i class="fal fa-microwave"></i></a>
    </div>
</div>