Creating a banner in section 'Custom Liquid'

[JayFinlay]

I tried creating a banner with photoshop for AfterPay promo.

Here:  

But it's extremely pixelated and looks terrible once exported to PNG format. I have decided to try using the Custom Liquid section to make it which also allows me to reuse it for other payment methods or banners in the future.

I want 430x57 in size.

Background color is #b2fce4

Font is Sophia Pro Soft Bold if possible

How do I go about creating exactly the same thing above but in Custom Liquid format. I tried searching the internet and found nothing useful I could understand to teach myself. I know the logo is the only thing I will need to use in the coding and change in the future as the rest will just be a coding/text/fonts

If anyone could create it for me I would be eternally greatful and happy to pay/tip.

[Spac-es · Accepted solution]

Custom Liquid:

    <div class="afterpay-banner">
        <!-- Text -->
        <span class="afterpay-banner-text">Play Now. Pay Later.</span>
        <!-- Afterpay Logo -->
        <img src="https://businessgrowth.afterpay.com/rs/424-IAB-218/images/AP_logo_lockup_6328x2204_blackclear_png.png" alt="Afterpay Logo" class="afterpay-logo">
    </div>
    <style>
        .afterpay-banner {
            width: 430px;
            height: 57px;
            background-color: #b2fce4;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .afterpay-banner-text {
            font-family: 'Sophia Pro Soft Bold', sans-serif;
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
        .afterpay-logo {
            height: 61px;
            width: auto;
        }
    </style>

Result:

(If you want the typography to have an effect on the text you must install it within the theme)