Staircase Overlay – Frontend Snippet

Go back

<header class="h08">
  <a href="#" class="h08-logo">Studio®</a>
  <div class="h08-right">
    <span class="h08-status"><i></i>Available for work</span>
    <button class="h08-btn" aria-expanded="false">
      <span class="h08-roll"><span>Menu</span><span>Close</span></span>
      <span class="h08-ic"><i></i><i></i></span>
    </button>
  </div>
  <div class="h08-menu">
    <div class="h08-stairs"><span></span><span></span><span></span><span></span><span></span></div>
    <div class="h08-inner">
      <nav aria-label="Menu">
        <a href="#"><span><sup>01</sup>Home</span></a>
        <a href="#"><span><sup>02</sup>Work</span></a>
        <a href="#"><span><sup>03</sup>About</span></a>
        <a href="#"><span><sup>04</sup>Contact</span></a>
      </nav>
      <div class="h08-foot"><a href="#">Portfolio ↗</a><a href="#">hello@example.com</a></div>
    </div>
  </div>
</header>