<div class="poster">
    <div class="circle circle-grey"></div>
    <div class="triangle"></div>
    <div class="square">
        <div class="circle circle-red"></div>
    </div>
    <div class="event-info">
        <ul class="event-date">
            <li>held over the entire summer</li>
            <li>wednesday thru sunday / 11 pm & 1 am <br>june 24 thru august 28 1970</li>
        </ul>
        <h1 class="event-title">the velvet underground</h1>
    </div>
    <div class="semi-circle"></div>
    <div class="event-address">
        <ul>
            <li>upstairs at max's kansas city</li>
            <li>213 park avenue south, new york city</li>
        </ul>
    </div>
</div>
:root {
    font-size: 70.945vh;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    background-color: #171a21;
}

.poster {
    display: grid;
    /* 45.45% 54.55% 1:~1.2 */
    grid-template-columns: 1fr 1.2fr;
    /* 32.25% 32.25% 35.5% 1:1:~1.1 */
    grid-template-rows: 1fr 1fr 1.1fr;
    width: 1em;
    height: 100vh;
    margin: 0 auto;
    color: #dfe3d4;
    background-color: #00000a;
}

.semi-circle {
    grid-column: 1 / -1;
    grid-row-start: 3;
    background-color: #fcac0d;
    -webkit-clip-path: ellipse(50% 100% at 50% 0%);
            clip-path: ellipse(50% 100% at 50% 0%);
}

.circle {
    -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
}

.circle-grey,
.square {
    background-color: #dfe0d8;
}

.circle-red {
    background-color: #ee281b;
    height: 100%;
}

.triangle {
    background-color: #00b2a4;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
            clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.event-info {
    display: grid;
    align-content: space-between;
    padding: 0.0335em 0.02em 0.03em;
}

.event-title {
    font-size: 0.088em;
}

.event-date,
.event-address {
    font-size: 0.02em;
    line-height: 1.5;
    letter-spacing: 0.025em;
}

.event-date li:first-of-type {
    margin-bottom: 0.85em;
}

.event-address {
    grid-column-start: 2;
    grid-row-start: 3;
    z-index: 1;
    color: #000;
    padding: 1.6em 1em;
}
/*

Full Page View:

https://codepen.io/GeorgePark/full/ajwbGL/

------------------------------------------

Original Poster by Mike Joyce:

https://www.swissted.com/products/the-velvet-underground-at-maxs-kansas-city-1970

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.