<div class="footer-join">
    <img class="footer-join-background" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/homepage_join.png">
    <div class="footer-join-content">
        <div class='footer-join-text'>
            Join the <br class="footer-join-break"><span style="color: #A6F41C;"> 70,000+ ecommerce brands </span> that grow with Omnisend every day.
        </div>
        <a class="footer-join-button" href="https://app.omnisend.com/registrationv2?ict_source=academy&ict_medium=academy&ict_campaign=startfree">
            Sign up for Omnisend
        </a>
    </div>
</div>

<style>
    .footer-join {
        width: 100%;
        position: relative;
    }
    .footer-join-background {
        width: 100%;
    }
    .footer-join-content {
        position: absolute;
        top: 80px;
        left: 4%;
        width: 96%;
    }
    .footer-join-text {
        font-size: 3.5rem;
        font-weight: 800;
        font-family: 'Faktum', sans-serif;
        color: white;
        width: 50%;
        line-height: 56px;
    }
    .footer-join-button {
        color: #1E2423; 
        padding: 10px 80px; 
        background: #A6F41C; 
        border: none; 
        border-radius: 5px; 
        margin-top: 40px; 
        display: inline-block;
        text-decoration: none;
        font-size: 1rem;
        text-align: center;
    }
    .footer-join-button:hover {
        color: black;
    }
    @media only screen and (min-width: 1800px) {
        .footer-join-content {
            left: 10%;
            width: 90%;
        }
    }
    @media only screen and (max-width: 1400px) {
        .footer-join-text {
            font-size: 3.125rem;
            line-height: 50px;
        }
        .footer-join-content {
            top: 60px
        }
    }
    @media only screen and (max-width: 1200px) {
        .footer-join-text {
            font-size: 2.5rem;
            line-height: 40px;
        }
        .footer-join-content {
            top: 30px
        }
    }
    @media only screen and (max-width: 850px) {
        .footer-join {
            background: #1E2423;
        }
        .footer-join-text {
            width: 70%;
        }
        .footer-join-content {
            position: relative;
            width: 92%;
            top: 0;
        }
        .footer-join-break {
            display: none;
        }
    }
    @media only screen and (max-width: 550px) {
        .footer-join-text {
            width: 90%;
        }
    }
    @media only screen and (max-width: 350px) {
        .footer-join-button {
            width: 100%;
        }
    }
</style>