<!-- HTML -->
<div class="grid__container">
  <h1>The Experimental Layout Lab</h1>
  <h2>of Jen Simmons</h2>
  <div class="lists">
    <h3>The Conference Talks</h3>
    <ul>
      <li>
        <a href="#">Modern Layouts: Getting Out of Our Ruts</a>
      </li>
      <li>
        <a href="#">Revolutionize Your Page: Real Art Direction on the Web</a>
      </li>
      <li>
        <a href="#">Designing with Grid</a>
      </li>
      <li>
        <a href="#">Everything You Know About Web Design Just Changed</a>
      </li>
      <li>
        <a href="#">Designing Intrinsic Layouts</a>
      </li>
    </ul>
  </div>
  <ul class="workshop">
    <li>
      <a href="#">Layout Land Videos</a>
    </li>
    <li>
      <a href="#">jensimmons.com</a>
    </li>
  </ul>
  <p class="follow">Follow <a href="#">@jensimmons</a> on Twitter for more as it happens.</p>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

@font-face {
  font-family: "Decovar Regular24";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf");
}

@font-face {
  font-family: "Decovar Regular24";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;

  display: grid;
  place-content: center;
  padding: 20px;
}

h1 {
  font-size: clamp(1.3rem, 2rem + 2vw, 3rem);
  margin: 0;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: right;
  font-family: "Decovar Regular24", sans-serif;
  font-family: "Decovar Regular24", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "SSTR" 183, "INLN" 648, "TSHR" 460, "TRSB" 312,
    "TWRM" 638, "SINL" 557, "TOIL" 333, "TINL" 526, "WORM" 523;
  text-shadow: -1px -1px 0 #6e1f58, 1px -1px 0 #6e1f58, -1px 1px 0 #6e1f58,
    1px 1px 0 #6e1f58, 1px 0px 0px #ff0080, 0px 1px 0px #ff0080,
    2px 1px 0px #ff0080, 1px 2px 0px #ff0080, 3px 2px 0px #ff0080,
    2px 3px 0px #ff0080, 4px 3px 0px #ff0080, 3px 4px 0px #ff0080,
    5px 4px 0px #ff0080, 3px 5px 0px #6e1f58, 6px 5px 0px #6e1f58,
    -1px 2px 0 black, 0 3px 0 #6e1f58, 1px 4px 0 #6e1f58, 2px 5px 0px #6e1f58,
    2px -1px 0 #6e1f58, 3px 0 0 #6e1f58, 4px 1px 0 #6e1f58, 5px 2px 0px #6e1f58,
    6px 3px 0 #6e1f58, 7px 4px 0 #6e1f58;
}

h2 {
  color: #f9423a;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2rem + 2vw, 3rem);
  line-height: 1.3;
  white-space: nowrap;
  font-weight: 700;
  writing-mode: vertical-lr;
  margin-top: -0.25em;
  margin-right: -0.25em;

  font-family: "Crimson Pro";
  text-transform: uppercase;
  color: #52d9da;
  text-shadow: -1px -1px 0 #2f3e9c, 1px -1px 0 #2f3e9c, -1px 1px 0 #2f3e9c,
    1px 1px 0 #2f3e9c, 1px 0px 0px #f98ca4, 0px 1px 0px #f98ca4,
    2px 1px 0px #f98ca4, 1px 2px 0px #f98ca4, 3px 2px 0px #f98ca4,
    2px 3px 0px #f98ca4, 4px 3px 0px #f98ca4, 3px 4px 0px #f98ca4,
    5px 4px 0px #f98ca4, 3px 5px 0px #2f3e9c, 6px 5px 0px #2f3e9c,
    -1px 2px 0 black, 0 3px 0 #2f3e9c, 1px 4px 0 #2f3e9c, 2px 5px 0px #2f3e9c,
    2px -1px 0 #2f3e9c, 3px 0 0 #2f3e9c, 4px 1px 0 #2f3e9c, 5px 2px 0px #2f3e9c,
    6px 3px 0 #2f3e9c, 7px 4px 0 #2f3e9c, 10px 10px 4px rgb(106 241 119 / 80%);
}

.lists {
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

h3 {
  margin: 0;
  font-size: 1.5em;
}

ol,
ul {
  list-style: none inside none;
}

a {
  color: #fff;
  text-decoration: none;
}

@counter-style custom-counter-style {
  system: cyclic;
  symbols: "❤️" "✨" "🔥" "❤️‍🔥" "🐻" "🍔" "⚽" "💨" "🎨" " 🐶";
  suffix: "";
  prefix: " ";
  fallback: disc;
}

ul {
  list-style-type: custom-counter-style;
}

.lists li {
  border-top: 5px solid rgba(12, 12, 10, 0.8);
  text-align: left;
  padding: 4px 0;
}

.lists li:last-child {
  border-bottom: 5px solid rgba(12, 12, 10, 0.8);
}

.follow {
  font-size: 0.9rem;
  border-bottom: 25px solid #f9423a;
  line-height: 1.3;
  padding-bottom: 5px;
  font-weight: 400;

  margin: 0;
  color: rgb(212 212 110 / 0.8);
}

.workshop {
  border-top: 5px solid rgb(12 12 10 / 0.8);
  border-bottom: 5px solid rgb(12 12 10 / 0.8);
  font-weight: 700;
  text-transform: uppercase;
}

.grid__container {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 0.5fr;
  grid-template-rows: auto 1fr 1fr auto auto;
  gap: 1rem;
  max-width: 60vw;
  transform: rotate(-47deg) scale(0.9);
  transform-origin: center;
}

h1 {
  grid-column: 1 / 4;
}

h2 {
  grid-area: 2 / 3 / 5 / 4;
  justify-self: end;
}

.lists {
  grid-area: 4 / 1 / span 2 / 3;
}

.workshop {
  grid-area: 3 / 4 / 4 / 6;
}

.follow {
  grid-area: 5 / 3 / 6 / 6;
}

External CSS

  1. https://fonts.typedetail.com/fonts.css

External JavaScript

This Pen doesn't use any external JavaScript resources.