Components

Coming Soon

A standalone “site under construction” page with no header/footer chrome — a full-viewport hero, a live countdown, and an email capture.

Markup

<div class="coming on-dark">
  <div class="bg" style="background-image:url(img/hero.jpg)" role="img" aria-label="…"></div>
  <div class="shade" aria-hidden="true"></div>
  <header class="top">
    <a class="logo" href="index.html">Ironhouse<em>.</em></a>
    <span class="coords">41.0308&deg; N, 81.5217&deg; W</span>
  </header>
  <main class="mid" id="main">
    <span class="kicker">N&ordm; 31,344 &mdash; SITE REBUILD, IN PROGRESS</span>
    <h1 class="d"><span class="line"><span>The site&rsquo;s on</span></span><span class="line"><span><em>the bench.</em></span></span></h1>
    <p class="lede">We rebuild this the way we rebuild anything.</p>
    <div class="countdown" data-countdown="2026-10-01T07:00:00" aria-label="Countdown to launch">
      <div class="unit"><span class="num" data-dd>00</span><span class="lab">DAYS</span></div>
      <div class="unit"><span class="num" data-hh>00</span><span class="lab">HOURS</span></div>
      <div class="unit"><span class="num" data-mm>00</span><span class="lab">MINUTES</span></div>
    </div>
  </main>
  <footer class="foot">
    <a href="tel:+12165550181">(216) 555-0181</a>
  </footer>
</div>

Unlike every other page, .coming is a self-contained full-page component with no Header or Footer — its own .top and .foot rows stand in for site chrome. Point your web host's maintenance mode at coming-soon.html (see Page Reference) if you want to take the site offline temporarily during a rebuild.

Countdown

.countdown holds three .unit boxes (days/hours/minutes), each a large numeral over a small label. The wrapper's data-countdown attribute is an ISO date-time string — the target the JavaScript below counts down to.

Email capture

.capture wraps a short paragraph and the same newsletter form markup/success-swap pattern used in the footer, so a visitor can leave an email to be notified at launch.

Javascript

main.js parses data-countdown once on load and updates the three data-dd/data-hh/data-mm numerals immediately, then again every 30 seconds (skipped entirely under prefers-reduced-motion, where the static initial values are left as-is rather than ticking). The hero headline gets the same one-time line-reveal treatment as Hero and Page Hero.