404 met branchegrap New

<!-- 404 met branchegrap · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="e4b">
  <div class="e4b__text">
    <span class="e4b__code">404 · pagina niet gevonden</span>
    <p class="e4b__title">Deze pagina is gesloopt.</p>
    <p class="e4b__lead">Hier stond ooit een pagina. Die hebben we afgebroken, maar de fundering ligt er nog. Waar wilde u naartoe?</p>
    <ul class="e4b__sug">
      <li><a href="#"><b>Nieuwbouw</b><span>Woningen en bedrijfspanden in Friesland</span></a></li>
      <li><a href="#"><b>Verbouwen en aanbouw</b><span>Uitbouw vanaf € 28.500, inclusief vergunning</span></a></li>
      <li><a href="#"><b>Offerte aanvragen</b><span>Binnen 5 werkdagen een prijs op papier</span></a></li>
    </ul>
    <a href="#" class="e4b__home">Naar de homepage</a>
  </div>
  <div class="e4b__art" aria-hidden="true">
    <div class="e4b__wall">
      <div class="e4b__row"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      <div class="e4b__row"><i></i><i></i><i></i><i class="x"></i><i></i><i></i><i></i></div>
      <div class="e4b__row"><i></i><i></i><i class="x"></i><i class="x"></i><i></i><i></i></div>
      <div class="e4b__row"><i></i><i></i><i class="x"></i><i class="x"></i><i class="x"></i><i></i><i></i></div>
      <div class="e4b__row"><i></i><i class="x"></i><i class="x"></i><i class="x"></i><i></i><i></i></div>
      <div class="e4b__row"><i></i><i></i><i class="x"></i><i class="x"></i><i></i><i></i><i></i></div>
      <div class="e4b__row"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </div>
    <div class="e4b__barrier"><span class="e4b__sign">404</span></div>
    <span class="e4b__brick e4b__brick--1"></span><span class="e4b__brick e4b__brick--2"></span><span class="e4b__brick e4b__brick--3"></span><span class="e4b__brick e4b__brick--4"></span>
    <span class="e4b__ground"></span>
  </div>
  <span class="e4b__firm">Bouwbedrijf Hoekstra · Leeuwarden · 058 123 4567</span>
</div>
</div>

/* 404 met branchegrap · NedDev · eigen werk. */
.e4b{position:relative;width:100%;align-self:flex-start;flex:none;min-height:480px;background:#efe6d2;color:#24361f;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:44px 44px 56px;align-items:center}
.e4b *{box-sizing:border-box}
.e4b__code{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#a24a26}
.e4b__title{font-size:clamp(34px,4.6vw,58px);font-weight:900;line-height:.98;letter-spacing:-.03em;margin:14px 0 14px}
.e4b__lead{font-size:16px;line-height:1.55;color:#4b5a43;margin:0 0 20px;max-width:44ch}
.e4b__sug{list-style:none;margin:0 0 22px;padding:0;border-top:2px solid #24361f}
.e4b__sug a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(36,54,31,.2);color:#24361f;text-decoration:none}
.e4b__sug b{font-size:16px}
.e4b__sug span{font-size:13px;color:#5f6c57;text-align:right}
.e4b__sug a:hover b,.e4b__sug a:focus-visible b{color:#a24a26}
.e4b__home{display:inline-block;background:#24361f;color:#efe6d2;font-weight:700;font-size:14px;padding:13px 20px;border-radius:2px;text-decoration:none}
.e4b__home:hover{background:#a24a26}
.e4b__art{position:relative;height:340px}
.e4b__wall{position:absolute;left:8%;right:8%;top:0;display:flex;flex-direction:column;gap:4px;padding:4px;background:#d9ccb0}
.e4b__row{display:flex;gap:4px;height:36px}
.e4b__row:nth-child(even){margin:0 -24px 0 -24px}
.e4b__row i{flex:1;background:#b0562f;border-radius:2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.e4b__row i.x{background:transparent;box-shadow:none}
.e4b__wall{overflow:hidden}
.e4b__ground{position:absolute;left:0;right:0;bottom:0;height:46px;background:#c9b48a;border-top:3px solid #24361f}
.e4b__barrier{position:absolute;left:18%;right:18%;bottom:46px;height:84px}
.e4b__barrier::before{content:'';position:absolute;left:0;right:0;top:12px;height:22px;background:repeating-linear-gradient(-45deg,#d4372b 0 16px,#fff 16px 32px);border:2px solid #24361f;border-radius:2px}
.e4b__barrier::after{content:'';position:absolute;left:10%;right:10%;top:34px;bottom:0;border-left:6px solid #24361f;border-right:6px solid #24361f}
.e4b__sign{position:absolute;left:50%;top:-26px;transform:translateX(-50%) rotate(-4deg);background:#f2c230;color:#24361f;font:700 15px 'JetBrains Mono',monospace;padding:4px 10px;border:2px solid #24361f;border-radius:2px}
.e4b__brick{position:absolute;bottom:46px;width:46px;height:20px;background:#b0562f;border-radius:2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.e4b__brick--1{left:6%;transform:rotate(-8deg)}
.e4b__brick--2{left:13%;bottom:62px;transform:rotate(14deg)}
.e4b__brick--3{right:8%;transform:rotate(4deg)}
.e4b__brick--4{right:24%;animation:e4b-drop 1.1s cubic-bezier(.5,0,.75,0) .4s both}
@keyframes e4b-drop{0%{transform:translateY(-190px) rotate(0)}80%{transform:translateY(0) rotate(22deg)}90%{transform:translateY(-8px) rotate(18deg)}100%{transform:translateY(0) rotate(20deg)}}
.e4b__firm{position:absolute;left:44px;bottom:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#5f6c57}
@media(max-width:820px){.e4b{grid-template-columns:1fr;gap:24px;padding:24px 18px 48px}.e4b__art{height:230px;order:-1}.e4b__row{height:22px}.e4b__brick{width:32px;height:14px}.e4b__barrier{height:60px}.e4b__ground{height:30px}.e4b__barrier,.e4b__brick{bottom:30px}.e4b__brick--2{bottom:42px}.e4b__sug span{display:none}.e4b__firm{left:18px}}
@media(prefers-reduced-motion:reduce){.e4b__brick--4{animation:none;transform:rotate(20deg)}}

// 404 met branchegrap · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.e4b');if(!w)return;
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));