A Pen by Mike Stezycki.

A-Pen-by-Mike-Stezycki.markdown

A Pen by Mike Stezycki

A Pen by Mike Stezycki on CodePen.

License.

index.html

<div id="modal--menu" class="page-modal  modal--menu">
    <div class="modal-header">
      <div class="wrapper">
        <a href="#" role="button" class="menu-trigger-close" data-classtoggle-target=".page-modal" data-classtoggle-class="--modal--menu--is-open">Close</a>
        <a href="/" class="page-logo  page-logo--modal"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zero Culture" class="page-logo__img"></a>
      </div>
    </div>
    <div class="modal-content">
      <div class="wrapper">
        <div class="modal-search">
          <fieldset class="modal-search__field">
            <i class="icon  icon--large  icon--search"></i>
            <input type="search" class="modal-search__input" name="q" value="Search Site">
          </fieldset>
        </div>
        <ul class="nav-block" role="menu">
          <li class="nav-block__item"><a href="/brand" class="nav-block__link  t--uppercase">Brand</a></li>
          <li class="nav-block__item"><a href="/directory" class="nav-block__link  t--uppercase">Directory</a></li>
          <li class="nav-block__item"><a href="/genesis" class="nav-block__link  t--uppercase">Genesis</a></li>
          <li class="nav-block__item"><a href="/magazine" class="nav-block__link  t--uppercase">Magazine</a></li>
          <li class="nav-block__item"><a href="/work" class="nav-block__link  t--uppercase">Work</a></li>
        </ul>
      </div>
    </div>
  </div>