<div class="poster">
<div class="circle green"></div>
<div class="triangle black"></div>
<div class="triangle green"></div>
<div class="square green"></div>
<div class="triangle black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="square black"></div>
<div class="letter green">g</div>
<div class="letter green">r</div>
<div class="letter green">i</div>
<div class="letter green">d</div>
<blockquote class="quote">
<p>"<strong>The grid system is an aid, not a guarantee.</strong> It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice." <span class="quote-author">Josef Müller-Brockmann</span></p>
</blockquote>
</div>
:root {
font-size: 74.945vh;
--green: #2e8405;
--yellow: #cbbe0d;
}
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", Arial, sans-serif;
font-weight: 500;
background-color: #0e0e0e;
}
.poster {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr) 0.37fr;
grid-gap: 0.012em;
width: 1em;
height: 100vh;
margin: 0 auto;
background-color: var(--yellow);
border: 0.029em solid #fff;
}
.black {
background-color: #000;
}
.green {
background-color: var(--green);
}
.circle {
-webkit-clip-path: circle(29.5% at 50% 50%);
clip-path: circle(29.5% at 50% 50%);
}
.triangle {
-webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.letter {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.22em;
color: var(--yellow);
text-transform: uppercase;
}
.quote {
grid-column: 3 / -1;
grid-row: 5 / -1;
font-size: 0.0142em;
font-style: italic;
line-height: 2;
padding: 34% 0 0 1em;
}
.quote p {
position: relative;
}
.quote strong,
.quote-author {
font-weight: 900;
}
.quote-author {
position: absolute;
right: 3.5em;
color: var(--green);
}
/*
Full-page view:
https://codepen.io/GeorgePark/full/gjMLXp/
------------------------------------------
Original Poster by Tom Davie:
http://studiotwentysix2.com/poster/grid.html
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.