<!DOCTYPE html>
<html>
<head>
<title>Chromatic Typography</title>
</head>
<body>

<nav>
    <div class="mark">STUDIO—27</div>

<div class="nav-center">
      EXPERIMENTAL TYPOGRAPHY
    </div>

<main>

<div class="vertical-label">
      TYPE / COLOR / COMPOSITION
    </div>

<div class="intro">
      <span>AN EXPLORATION OF</span>
      <p>
        Scale, contrast and unexpected
        relationships between letterforms.
      </p>
    </div>

<div class="word create">
        CREATE
      </div>

<div class="word without">
        WITHOUT
      </div>

<div class="word limits">
        LIMITS
      </div>

</section>

<div class="statement">
        Typography isn't just
        <em>what you read.</em>
        It's how the page
        <strong>feels.</strong>
      </div>

<div>
          <span>DISPLAY</span>
          <strong>FRAUNCES</strong>
        </div>

<div>
          <span>SANS</span>
          <strong>SPACE GROTESK</strong>
        </div>

</div>

</section>

</main>

<span>
      INDEPENDENT TYPE STUDY
    </span>

<span>
      MMXXVI
    </span>

</footer>

</div>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: #d96f52;
  color: #172d38;

font-family:
    "Space Grotesk",
    sans-serif;
}

.poster {
  position: relative;

min-height: 100vh;

overflow: hidden;

padding:
    0 clamp(24px, 5vw, 80px);

background:

radial-gradient(
      circle at 85% 25%,
      rgba(244, 215, 174, .32),
      transparent 30%
    ),

linear-gradient(
      125deg,
      #dd7759 0%,
      #d96f52 52%,
      #cc624c 100%
    );
}

/* =========================
   NAVIGATION
========================= */

nav {
  height: 82px;

display: grid;

grid-template-columns:
    1fr auto 1fr;

align-items: center;

border-bottom:
    1px solid rgba(23,45,56,.25);

font-family:
    "IBM Plex Mono",
    monospace;

font-size: 9px;

letter-spacing: 1.8px;
}

.mark {
  font-weight: 500;
}

.nav-center {
  opacity: .65;
}

.edition {
  text-align: right;
}

/* =========================
   INTRO
========================= */

main {
  position: relative;
}

.intro {
  display: flex;

align-items: flex-start;

gap: 24px;

padding-top: 28px;

margin-left: 9%;
}

.intro span {
  margin-top: 4px;

font-family:
    "IBM Plex Mono",
    monospace;

font-size: 8px;

letter-spacing: 1.5px;

opacity: .55;
}

.intro p {
  margin: 0;

width: 230px;

font-size: 11px;

line-height: 1.55;

opacity: .7;
}

/* =========================
   VERTICAL TYPE
========================= */

.vertical-label {
  position: absolute;

left: -27px;
  top: 255px;

transform: rotate(-90deg);

font-family:
    "IBM Plex Mono",
    monospace;

font-size: 8px;

letter-spacing: 2px;

opacity: .5;
}

/* =========================
   MAIN COMPOSITION
========================= */

.composition {
  position: relative;

min-height: 540px;

margin-top: 5px;
}

/* -------------------------
   CREATE
------------------------- */

.word {
  position: absolute;

white-space: nowrap;
}

.create {
  left: 7%;
  top: 20px;

font-family:
    "Fraunces",
    serif;

font-size:
    clamp(95px, 17vw, 250px);

line-height: .8;

font-weight: 800;

letter-spacing: -.075em;

color: #f1d9b7;

transform:
    scaleX(.94);

transform-origin: left;

transition:
    transform .7s
    cubic-bezier(.16,1,.3,1),
    letter-spacing .7s
    cubic-bezier(.16,1,.3,1);
}

.create:hover {
  transform:
    scaleX(1.02);

letter-spacing: -.04em;
}

/* -------------------------
   WITHOUT
------------------------- */

.without {
  right: 3%;
  top: 190px;

font-family:
    "Space Grotesk",
    sans-serif;

font-size:
    clamp(60px, 10vw, 150px);

line-height: .9;

font-weight: 500;

letter-spacing: -.065em;

color: transparent;

-webkit-text-stroke:
    2px #173846;

opacity: .92;

transition:
    color .45s ease,
    transform .6s
    cubic-bezier(.16,1,.3,1);
}

.without:hover {
  color: #173846;

transform:
    translateX(-12px);
}

/* -------------------------
   LIMITS
------------------------- */

.limits {
  left: 17%;
  top: 305px;

font-family:
    "Fraunces",
    serif;

font-size:
    clamp(100px, 19vw, 270px);

font-style: italic;

font-weight: 300;

letter-spacing: -.08em;

line-height: .8;

color: #173846;

transition:
    transform .7s
    cubic-bezier(.16,1,.3,1);
}

.limits:hover {
  transform:
    translateX(18px)
    skewX(-4deg);
}

/* =========================
   CIRCLE
========================= */

.circle-text {
  position: absolute;

right: 6%;
  top: 30px;

width: 105px;
  height: 105px;

border-radius: 50%;

border:
    1px solid rgba(23,56,70,.55);

display: flex;

flex-direction: column;

align-items: center;
  justify-content: center;

font-family:
    "IBM Plex Mono",
    monospace;

font-size: 8px;

letter-spacing: 2px;

transition:
    transform .7s
    cubic-bezier(.16,1,.3,1),
    background .4s ease,
    color .4s ease;
}

.circle-text i {
  margin: 4px;

font-family:
    "Fraunces",
    serif;

font-size: 18px;

font-style: italic;
}

.circle-text:hover {
  transform:
    rotate(18deg);

background: #173846;

color: #e9cda9;
}

/* =========================
   NUMBER
========================= */

.number {
  position: absolute;

right: 5%;
  bottom: 6px;

font-family:
    "Fraunces",
    serif;

font-size:
    clamp(70px, 10vw, 145px);

font-weight: 300;

font-style: italic;

color:
    rgba(241,217,183,.35);

line-height: .8;
}

/* =========================
   LOWER SECTION
========================= */

.lower {
  display: grid;

grid-template-columns:
    1fr 1fr;

gap: 10vw;

padding:
    55px 8% 60px;

border-top:
    1px solid rgba(23,45,56,.25);
}

/* Statement */

.statement {
  max-width: 480px;

font-family:
    "Fraunces",
    serif;

font-size:
    clamp(25px, 3vw, 42px);

line-height: 1.08;

letter-spacing: -.035em;
}

.statement em {
  font-weight: 300;

color: #f1d9b7;
}

.statement strong {
  font-weight: 800;
}

/* Font details */

.details {
  display: grid;

grid-template-columns:
    repeat(3,1fr);

gap: 25px;

align-content: end;
}

.details div {
  border-top:
    1px solid rgba(23,45,56,.28);

padding-top: 12px;
}

.details span {
  display: block;

margin-bottom: 6px;

font-family:
    "IBM Plex Mono",
    monospace;

font-size: 7px;

letter-spacing: 1.5px;

opacity: .48;
}

.details strong {
  font-size: 9px;

letter-spacing: .5px;

font-weight: 600;
}

/* =========================
   FOOTER
========================= */

footer {
  min-height: 62px;

display: flex;

align-items: center;

gap: 20px;

border-top:
    1px solid rgba(23,45,56,.25);

font-family:
    "IBM Plex Mono",
    monospace;

font-size: 8px;

letter-spacing: 1.5px;

opacity: .65;
}

.footer-line {
  flex: 1;

height: 1px;

background:
    rgba(23,45,56,.2);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 800px) {

nav {
    grid-template-columns:
      1fr auto;
  }

.nav-center {
    display: none;
  }

.composition {
    min-height: 430px;
  }

.create {
    left: 2%;
    top: 55px;
  }

.without {
    top: 175px;
  }

.limits {
    left: 5%;
    top: 270px;
  }

.circle-text {
    width: 75px;
    height: 75px;

right: 2%;
  }

.lower {
    grid-template-columns: 1fr;

padding-left: 2%;
    padding-right: 2%;
  }

.details {
    margin-top: 20px;
  }

}

@media (max-width: 500px) {

.poster {
    padding:
      0 20px;
  }

.intro {
    margin-left: 0;
  }

.intro span {
    display: none;
  }

.composition {
    min-height: 370px;
  }

.create {
    font-size: 78px;
  }

.without {
    font-size: 52px;

-webkit-text-stroke:
      1px #173846;
  }

.limits {
    font-size: 90px;
  }

.circle-text {
    display: none;
  }

.vertical-label {
    display: none;
  }

.details {
    grid-template-columns: 1fr;
  }

}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground