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

<div class='events-wrapper' id="events">
    <div class='events'>
        <div class='events-header'>
            <div class='events-header-title'>
                Online-Seminare unter der Leitung von Change Making-Rednern 
            </div>
            <div class='events-header-subtitle'>
              Kommende Seminare, die Ihre Führungsqualitäten und Kommunikation in den Mittelpunkt stellen
            </div>
        </div>
        <div class='events-event'>
            <div class='events-event-left'>
                <div class='events-event-left-title'>
                    Grundlagen der Internen Kommunikation
                </div>
                <div class='events-event-left-subtitle'>
                  Strukturen, Konzepte und Prozesse für gelungene Mitarbeiterkommunikation
                </div>
                <div class='events-event-left-date'>
                    23. - 24.03.2022
                </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://products.quadriga.eu/app/uploads/2020/09/HP-100x100.png'>
                    <div class='events-event-right-person-right'>
                        <div class='events-event-right-person-right-name'>
                            Amory Fanelsa
                        </div>
                        <div class='events-event-right-person-right-title'>
                            Inhaberin, FanelsaPR
                        </div>
                    </div>
                </div>
                </div>
            </div>

        <div class='events-event'>
            <div class='events-event-left'>
                <div class='events-event-left-title'>
                  Positionspapiere schreiben
                </div>
                <div class='events-event-left-subtitle'>
                    Mit Politikthemen überzeugen – für mehr Aufmerksamkeit, Wirkung und Einfluss
                </div>
                <div class='events-event-left-date'>
                    30. - 31.03.2022
                </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://products.quadriga.eu/app/uploads/2018/10/buelow-mechthild-100x100.png'>
                    <div class='events-event-right-person-right'>
                        <div class='events-event-right-person-right-name'>
                           Mechthild Bülow 
                        </div>
                        <div class='events-event-right-person-right-title'>
                            Inhaberin, Mechthild Bülow Public Affairs
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .events-wrapper {
        background-image: url('https://www.quadriga-hochschule.com/app/uploads/2021/04/qhs-16_9_color-neu.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>