First Impression

<!--
    First Impression snippet by Circlejourney. See my codes here:
    https://toyhou.se/orchestrator/characters/folder:524040

    Placeholders (use Ctrl + F to replace):
        Outline colour: #cfcfcf
        Text shadow colour: #ddd
        Text highlight colour: #eee
        FA accent icon: fa-umbrella-beach
-->

<div class="row no-gutters rounded" style="overflow: hidden; border: 3px solid #cfcfcf; background: #cfcfcf; position: relative;">
    <div class="col-12 col-md-6 d-flex" style="border: 3px solid #cfcfcf; height: 400px;">

        <!-- Replace background-image URL to change first image -->
        <div id="SLICE-1"
            style="background-image: url(https://i.postimg.cc/150pr270/1130.png);
                background-size: cover;
                background-position: 20%;
                width: 200px;"
            class="flex-grow-1 rounded-left"></div>

        <!-- Replace background-image URL to change second image -->
        <div id="SLICE-2"
            style="background-image: url(https://i.postimg.cc/bvV02nCK/s-a12-Cb12-Cc12-Cd12-Ce0f0g64h0-C282-C183748-EF6560-E69-A7-CD8-BA98-DAD0-AAi-C.png);
                background-size: cover;
                width: 200px;
                clip-path: polygon(0 0, 100% 0%, 100% 100%, 60px 100%);
                margin-left: -60px;"
            class="flex-grow-1"></div>

    </div>


    <div id="NAME-BLOCK" style="width: 0;" class="col-12 col-md-auto flex-column justify-content-center align-items-center">
        <div style="color: #333; z-index: 3; text-shadow: -3px -3px 0 #eee, 0px -3px 0 #eee, 3px -3px 0 #eee, -3px 0px 0 #ddd, 0px 0px 0 #ddd, 3px 0px 0 #ddd, -3px 3px 0 #ddd, 0px 3px 0 #ddd, 3px 3px 0 #ddd; line-height: 0.4em;" class="display-2 font-weight-bold text-uppercase text-center font-italic">
            Character
        </div>

        <!-- Replace src property below to change character portrait -->
        <img id="PORTRAIT"
            src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?9"
            class="rounded-circle"
            style="z-index: 2; max-width: none; width: 250px; height: 250px; border: 6px solid #cfcfcf;">

        <div class="display-2 font-weight-bold text-uppercase text-center font-italic" style="color: #333; z-index: 3; text-shadow:  -3px -3px 0 #eee, 0px -3px 0 #eee, 3px -3px 0 #eee, -3px 0px 0 #ddd, 0px 0px 0 #ddd, 3px 0px 0 #ddd, -3px 3px 0 #ddd, 0px 3px 0 #ddd, 3px 3px 0 #ddd; line-height: 0em;">
            Name
        </div>
    </div>


    <div class="col-12 col-md-6 d-flex" style="border: 3px solid #cfcfcf; height: 400px;">

        <!-- Replace background-image URL to change third image -->
        <div id="SLICE-3"
            style="background-image: url(https://i.postimg.cc/hvTVw5DB/s-a12-Cb12-Cc12-Cd12-Ce0f0g64h-EFF2-E2-E4-E1-C4-DECEAEDDB79-DABDBF3i-B5.png);
                background-size: cover;
                position: left;
                width: 200px;
                margin-right: -60px;"
            data-toggle="tooltip"
            title="Tooltip text 1"
            class="flex-grow-1" ></div>

        <!-- Replace background-image URL to change fourth image -->
        <div id="SLICE-4"
            style="background-image: url(https://i.postimg.cc/ZR98PqX0/s-a12-Cb12-Cc12-Cd12-Ce0f0g64h162136193649-E79799-E3-B2-A3-E3-CAB3-E8-DFC8i85.png);
                background-size: cover;
                background-position: top;
                width: 200px;
                clip-path: polygon(60px 0, 100% 0%, 100% 100%, 0 100%);"
            data-toggle="tooltip"
            title="Tooltip text 2"
            class="flex-grow-1 rounded-right"></div>
    </div>

    <div id="CORNER-ICON" style="position: absolute; z-index: 2; font-size: 150pt; bottom: -5%; right: -3%; color: #cfcfcf; line-height: 1em;">
        <i class="fa-thin fa-fw fa-umbrella-beach"></i>
    </div>

</div>

<div id="CREDIT" style="z-index: 3; font-size: 9pt; opacity: 0.5;">
    <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-"><i class="fa fa-code"></i> Snippet by Circlejourney</a>
</div>