Gainsight/Custom_Templates/customer_templates/RocketChat/_homepage_events.html.liquid

<div class='events-wrapper' id="events">
    <div class='events'>
        <div class='events-header'>
            <div class='events-header-title'>
                Drive revenue & harvests with decisions informed from Conservis' Suite of Tools.
            </div>
            <div class='events-header-subtitle'>
                Hundres of customers have organized their fields and finances by using the Conservis Platform and their expert Customer Success plans. Why not join them?
            </div>
        </div>
        <div class='events-event'>
            <div class='events-event-left'>
                <div class='events-event-left-title'>
                    Standardizing Inventory Management
                </div>
                <div class='events-event-left-subtitle'>
                    From the moment you purchase to the moment you use it, standardizing your inventory leads to actionable results. Not to mention that it frees your staff up for other tasks!
                </div>
                <div class='events-event-left-date'>
                    March 27, 2022 @ 2PM EST
                </div>
                <button class='events-event-left-button'>
                    Register
                </button>
            </div>
            <div class='events-event-right'>
                <div class='events-event-right-title'>
                    Hosts
                </div>
                <div class='events-event-right-person'>
                    <img class='events-event-right-person-image' src='https://media-exp1.licdn.com/dms/image/C4E03AQHUBtcttBJTZw/profile-displayphoto-shrink_800_800/0/1516236401149?e=1651708800&v=beta&t=VkbQ1BwLZ_6YRdGxnvwiWS4PKx7RTlezN-sTKhY1dQo'>
                    <div class='events-event-right-person-right'>
                        <div class='events-event-right-person-right-name'>
                            Aneetha Gopalan
                        </div>
                        <div class='events-event-right-person-right-title'>
                            VP, Product & Engineering
                        </div>
                    </div>
                </div>
                <div class='events-event-right-person'>
                    <img class='events-event-right-person-image' src='https://media-exp1.licdn.com/dms/image/C5603AQGckaki_fPzkg/profile-displayphoto-shrink_800_800/0/1516585708428?e=1651708800&v=beta&t=8TXevG1-W4hPcNibAAYhhqfRNSrzNDF0OzvwBvr0UJ8'>
                    <div class='events-event-right-person-right'>
                        <div class='events-event-right-person-right-name'>
                            Juliet Phillips
                        </div>
                        <div class='events-event-right-person-right-title'>
                            Training & Development Manager
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class='events-event'>
            <div class='events-event-left'>
                <div class='events-event-left-title'>
                    How to Financial Plan for a Full Future
                </div>
                <div class='events-event-left-subtitle'>
                    Increase your harvest numbers for years to come with proper management.
                </div>
                <div class='events-event-left-date'>
                    February TBD
                </div>
                <button class='events-event-left-button'>
                    Register
                </button>
            </div>
            <div class='events-event-right'>
                <div class='events-event-right-title'>
                    Host
                </div>
                <div class='events-event-right-person'>
                    <img class='events-event-right-person-image' src='https://media-exp1.licdn.com/dms/image/C4E03AQELOcYI4FL7jg/profile-displayphoto-shrink_800_800/0/1582566920630?e=1651708800&v=beta&t=oDTc9zXONrDS8evefxY-Q1VnMVUUDl9ush2VqUJ4QGg'>
                    <div class='events-event-right-person-right'>
                        <div class='events-event-right-person-right-name'>
                           Tyler Jaeger 
                        </div>
                        <div class='events-event-right-person-right-title'>
                            Commercial Operations
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .events-wrapper {
        background-image: url('https://conservis.ag/wp-content/uploads/bkr_pivot_scouting-scaled.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .events {
        width: 70%;
        margin: auto;
        padding: 120px 0;
    }
    .events-header {
        width: 55%;
        margin: auto;
        margin-bottom: 100px;
    }
    .events-header-title {
        font-size: 43px;
        font-weight: 800;
        text-align: center;
    }
    .events-header-subtitle {
        font-size: 21px;
        font-weight: 400;
        text-align: center;
        margin-top: 40px;
    }
    .events-event {
        width: 70%;
        margin: 20px auto;
        background: rgb(255, 251, 238);
        padding: 50px 60px;
        display: flex;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 10px;
        
    }
    .events-event-left {
        width: 55%;
    }
    .events-event-left-title {
        font-size: 28px;
        font-weight: 800;
        color: rgb(6, 40, 70);
        margin: 10px 0 20px;
    }
    .events-event-left-subtitle {
        font-size: 21px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.75);
        margin-bottom: 20px;
    }
    .events-event-left-date {
        font-size: 21px;
        font-weight: 800;
        color: rgb(6, 40, 70);
        margin: 10px 0;
    }
    .events-event-left-button {
        background: none;
        border: 2px solid rgb(6, 40, 70);
        color: rgb(6, 40, 70);
        font-size: 16px;
        font-weight: 700;
        padding: 12px 45px;
        margin-top: 40px;
        border-radius: 25px;
    }
    .events-event-right {
        margin-left: 70px;
        display: flex;
        flex-direction: column;
    }
    .events-event-right-title {
        font-size: 21px;
        font-weight: 800;
        color: rgb(155, 169, 181);
        margin-top: 10px;
    }
    .events-event-right-person {
        display: flex;
        margin: 30px 0;
    }
    .events-event-right-person-image {
        border-radius: 50%;
        height: 52px;
    }
    .events-event-right-person-right {
        margin-left: 20px;
    }
    .events-event-right-person-right-name {
        color: rgb(6, 40, 70);
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 7px;
    }
    .events-event-right-person-right-title {
        color: rgb(38, 49, 61);
        font-size: 16px;
        font-weight: 400;
    }

</style>