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

<div class="nav-center">
      TYPE / SPACE / OBJECT
    </div>

<main>

<div class="hero-meta">
        <span>01</span>
        <span>TYPOGRAPHY AS FORM</span>
      </div>

<div class="headline">
        <div class="line line-one">
          BEAUTY
        </div>

<div class="line line-two">
          <em>IN</em>
          <span>SIMPLICITY</span>
        </div>

<div class="line line-three">
          <span>DESIGN</span>
          <sup>®</sup>
        </div>
      </div>

<div class="hero-description">
        A study in proportion, rhythm and
        typography — where letters become
        architecture.
      </div>

<div class="hero-mark">
        <div class="circle">
          <span>SCROLL</span>
          <span>→</span>
        </div>
      </div>

</section>

<div class="quote">
        “Good typography is
        invisible. Great typography
        is unforgettable.”
      </div>

<div class="specs">
        <div>
          <small>DISPLAY</small>
          <strong>BODONI MODA</strong>
        </div>

<div>
          <small>BODY</small>
          <strong>MANROPE</strong>
        </div>

<div>
          <small>DETAIL</small>
          <strong>DM MONO</strong>
        </div>
      </div>

</section>

</main>

<footer>
    <span>INDEPENDENT TYPE STUDY</span>
    <span>VOL. 01 — 2026</span>
    <span>ATL / NY / LDN</span>
  </footer>

</div>

</body>
</html>

* {
  box-sizing: border-box;
}

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

body {
  background: #e9e6df;

color: #171713;

font-family: "Manrope", sans-serif;
}

.page {
  min-height: 100vh;

padding: 0 5vw;

display: flex;
  flex-direction: column;
}

/* -------------------------------- */
/* Navigation                       */
/* -------------------------------- */

.nav {
  height: 82px;

display: grid;

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

align-items: center;

border-bottom: 1px solid
    rgba(20,20,15,.15);

font-family: "DM Mono", monospace;

font-size: 9px;

letter-spacing: 1.5px;

color: rgba(20,20,15,.55);
}

.logo {
  font-weight: 400;
}

.nav-center {
  text-align: center;
}

.menu {
  text-align: right;

cursor: pointer;

transition:
    color .2s ease;
}

.menu:hover {
  color: #111;
}

/* -------------------------------- */
/* Hero                             */
/* -------------------------------- */

.hero {
  position: relative;

min-height: 68vh;

padding-top: 8vh;

display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-meta {
  position: absolute;

top: 45px;
  left: 0;

display: flex;
  gap: 16px;

font-family: "DM Mono", monospace;

font-size: 9px;

letter-spacing: 1.5px;

color: rgba(20,20,15,.42);
}

/* -------------------------------- */
/* Main typography                  */
/* -------------------------------- */

.headline {
  position: relative;

margin-left: -0.03em;

font-family: "Bodoni Moda", serif;

font-size: clamp(
    75px,
    13vw,
    190px
  );

line-height: .78;

letter-spacing: -.065em;

font-weight: 500;

max-width: 1300px;
}

.line {
  position: relative;

overflow: hidden;
}

.line-one {
  animation:
    reveal .9s
    cubic-bezier(.16,1,.3,1)
    both;
}

.line-two {
  margin-left: 11vw;

animation:
    reveal 1s
    .08s
    cubic-bezier(.16,1,.3,1)
    both;
}

.line-three {
  margin-left: 3vw;

animation:
    reveal 1.1s
    .16s
    cubic-bezier(.16,1,.3,1)
    both;
}

.line-two em {
  font-weight: 400;

font-style: italic;

font-size: .65em;

letter-spacing: -.08em;

margin-right: .08em;

color: #706b61;
}

.line-three sup {
  display: inline-block;

margin-left: .08em;

vertical-align: top;

font-family: "DM Mono", monospace;

font-size: 12px;

letter-spacing: 0;

opacity: .5;
}

@keyframes reveal {

from {
    transform:
      translateY(110%);
  }

to {
    transform:
      translateY(0);
  }
}

/* -------------------------------- */
/* Description                      */
/* -------------------------------- */

.hero-description {
  position: absolute;

right: 4vw;
  bottom: 8vh;

width: 230px;

font-size: 11px;

line-height: 1.7;

color: rgba(20,20,15,.58);

animation:
    fade .9s
    .5s
    ease both;
}

@keyframes fade {

from {
    opacity: 0;
    transform: translateY(10px);
  }

to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------- */
/* Round scroll mark                */
/* -------------------------------- */

.hero-mark {
  position: absolute;

right: 4vw;
  top: 14vh;
}

.circle {
  width: 78px;
  height: 78px;

border: 1px solid
    rgba(20,20,15,.2);

border-radius: 50%;

display: flex;
  flex-direction: column;

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

gap: 5px;

font-family: "DM Mono", monospace;

font-size: 8px;

letter-spacing: 1px;

color: rgba(20,20,15,.6);

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

.circle:hover {
  transform: rotate(15deg) scale(1.05);

background:
    rgba(255,255,255,.3);
}

/* -------------------------------- */
/* Lower content                    */
/* -------------------------------- */

.bottom {
  display: grid;

grid-template-columns:
    1.3fr 1fr;

gap: 10vw;

padding: 6vh 0;

border-top:
    1px solid
    rgba(20,20,15,.15);
}

.quote {
  font-family: "Bodoni Moda", serif;

font-size: clamp(
    20px,
    2.4vw,
    32px
  );

line-height: 1.18;

font-style: italic;

max-width: 530px;
}

.specs {
  display: grid;

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

gap: 20px;
}

.specs div {
  display: flex;
  flex-direction: column;

gap: 7px;
}

.specs small {
  font-family:
    "DM Mono",
    monospace;

font-size: 8px;

letter-spacing: 1.5px;

color:
    rgba(20,20,15,.4);
}

.specs strong {
  font-size: 10px;

letter-spacing: .5px;

font-weight: 500;
}

/* -------------------------------- */
/* Footer                           */
/* -------------------------------- */

footer {
  min-height: 65px;

margin-top: auto;

border-top:
    1px solid
    rgba(20,20,15,.15);

display: flex;
  justify-content: space-between;
  align-items: center;

font-family:
    "DM Mono",
    monospace;

font-size: 8px;

letter-spacing: 1.5px;

color:
    rgba(20,20,15,.42);
}

/* -------------------------------- */
/* Responsive                       */
/* -------------------------------- */

@media (max-width: 800px) {

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

height: 65px;
  }

.nav-center {
    display: none;
  }

.headline {
    font-size:
      clamp(56px, 14vw, 105px);
  }

.line-two {
    margin-left: 5vw;
  }

.hero-description {
    position: relative;

right: auto;
    bottom: auto;

margin-top: 45px;

width: 260px;
  }

.hero-mark {
    display: none;
  }

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

gap: 40px;
  }

.specs {
    max-width: 450px;
  }

footer {
    gap: 15px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {

.page {
    padding: 0 20px;
  }

.hero {
    min-height: 65vh;
  }

.headline {
    font-size: 58px;
  }

.line-two {
    margin-left: 0;
  }

.line-three {
    margin-left: 2vw;
  }

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

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