Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <body>
    <div class="menu">
      <div class="close-button"><span class="icon">&times;</span> Close</div>
      <ul class="nav">
        <li>
          <a href="#" class="nav-item selected">Original Collection</a>
        </li>
        <li>
          <a href="#"
            class="nav-item"
            data-cid="1163637"
            data-ctitle="Architectural Lines"
            data-cdesc="Metal and glass, concrete and wood, straight lines and curves."
            data-cavail="1000"
          >Architecture</a>
        </li>
        <li>
          <a href="#"
            class="nav-item"
            data-cid="1198157"
            data-ctitle="City Lines"
            data-cdesc="Architects, Engineers and builders...This is for you"
            data-cavail="51"
          >City</a>
        </li>
        <li>
          <a href="#"
            class="nav-item"
            data-cid="827737"
            data-ctitle="Sport"
            data-cdesc="Exercise, activities, fashion and lifestyle"
            data-cavail="137"
          >Sport</a>
        </li>
        <li>
          <a href="#"
            class="nav-item"
            data-cid="573226"
            data-ctitle="Retro"
            data-cdesc="Retro, vintage, blue, and car photos"
            data-cavail="29"
          >Retro</a>
        </li>
        <li>
          <a href="#"
            class="nav-item"
            data-cid="610876"
            data-ctitle="Sky"
            data-cdesc="Sky, star, night, and space photos"
            data-cavail="52"
          >Sky</a>
        </li>
        <li>
          <a href="#"
            class="nav-item"
            data-cid="504554"
            data-ctitle="Found Typography"
            data-cdesc="Letters and numbers out in the wild"
            data-cavail="55"
          >Typography</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="menu-button">
        <svg class="icon arrow-right" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
          <path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/>
        </svg>
        Menu
      </div>
      <section class="gallery">
        <ul class="cards">
          <li>
            <a href="https://unsplash.com/photos/m73iqlbI-3M">
              <img src="https://source.unsplash.com/m73iqlbI-3M/800x640" alt="Bauhaus Archiv, Berlin photo by Simone Hutsch" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Bauhaus Archiv, Berlin photo by Simone Hutsch</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/504554">
              <img src="https://images.unsplash.com/photo-1512445600578-574f23656707?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=6db397ff4e4f9a99afc060da5d9f820f" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/504554">
              <img src="https://images.unsplash.com/photo-1487392882838-c9cd493de5eb?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=b7cffc737c932ca603abcecb5ae79c42" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1481710216369-907102eb457d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=31b367ce9b852c07c6d809089075c3d3" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1467154243382-ebe2c7d14fef?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=1731ffd4d65f0f2434b3dd4e4efcd7d3" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1470768153548-5d248f5676fe?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=ee56526aa8a7cf694ef0c294316e8722" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1481535668376-4c3ab7d84e7d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=ce6f0be77e682b2260fc82c4fdbd05f0" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/504554">
              <img src="https://images.unsplash.com/photo-1468528885091-58bab38a6632?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=2620a2c5aaa55ce09c8ea6cceebfe793" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1493930251520-c4e958c27b86?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=5177b3a0aff6cc1d92fe4c85527caff2" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1504788482283-123743797899?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=4b653701e8ac58e0567cb51b39c58a90" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1529592829369-5e84d19ca37a?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=5145b716f75b37e5f2c2aca14a81b582" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1433832597046-4f10e10ac764?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=3631b94379188c455a54aa43c743fae6" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/504554">
              <img src="https://images.unsplash.com/photo-1468184271582-9198a28f064e?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=6c3fca7b6a4e257d6ed4d33da560189d" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1496307777624-f14b6bbf5349?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=fe92f7d3bf19f49a8f7ce560c8d98dbb" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/collections/1198157">
              <img src="https://images.unsplash.com/photo-1511355910413-2bc9ee1aa943?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=de61ac9bd2c56b0e75af37e870d08858" alt="Photo from Unsplash">
              <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/czDvRp5V2b0">
              <img src="https://source.unsplash.com/czDvRp5V2b0/800x640" alt="Abu Dhabi Louvre Museum by Alvaro Pinot" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Abu Dhabi Louvre Museum by Alvaro Pinot</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/H0vuplqoX0c">
              <img src="https://source.unsplash.com/H0vuplqoX0c/800x640" alt="Architecture photo by Viktor Jakovlev" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Architecture photo by Viktor Jakovlev</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/PhYq704ffdA">
              <img src="https://source.unsplash.com/PhYq704ffdA/800x640" alt="Taller than the Trees by Sean Pollock" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Taller than the Trees by Sean Pollock</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/VNQl_4OmZJw">
              <img src="https://source.unsplash.com/VNQl_4OmZJw/800x640" alt="Den Bell, Antwerpen, Belgium by Brent De Ranter" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Den Bell, Antwerpen, Belgium by Brent De Ranter</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/jU9VAZDGMzs">
              <img src="https://source.unsplash.com/jU9VAZDGMzs/800x640" alt="Glass plate facade edge, Madrid, Spain by Joel Filipe" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Glass plate facade edge, Madrid, Spain by Joel Filipe</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/ypVM8PnygUo">
              <img src="https://source.unsplash.com/ypVM8PnygUo/800x640" alt="British Museum ceiling photo by Mika" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">British Museum ceiling photo by Mika</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/tvPvROBv0F4">
              <img src="https://source.unsplash.com/tvPvROBv0F4/800x640" alt="Evening over Millennium Bridge photo by James Padolsey" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Evening over Millennium Bridge photo by James Padolsey</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/c9z9RlCh0Zo">
              <img src="https://source.unsplash.com/c9z9RlCh0Zo/800x640" alt="Architecture, building, geometric and structure HD photo by Frances Gunn" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Architecture, building, geometric and structure HD photo by Frances Gunn</span></div>
            </a>
          </li>
          <li>
            <a href="https://unsplash.com/photos/KY-opXSvJsU">
              <img src="https://source.unsplash.com/KY-opXSvJsU/800x640" alt="Building, sky, grey and blue HD photo by Pierre Châtel-Innocenti" />
              <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Building, sky, grey and blue HD photo by Pierre Châtel-Innocenti</span></div>
            </a>
          </li>
        </ul>
      </section>
    </div>
  </body>

              
            
!

CSS

              
                /*
====================================

Gallery UI CSS

====================================
*/

body {
  left: 0;
  margin: 0;
  position: relative;
  font-family: Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
------------------------------------
Content
------------------------------------ */
.content {
  background: #eee;
}

/*
------------------------------------
Menu
------------------------------------ */
.menu {
  background: #222;
  left: -320px;
  height: 100%;
  position: fixed;
  width: 320px;
  z-index: 10;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  line-height: 45px;
}

.menu a {
  color: #999;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding: 0 25px;
}

.menu a:hover {
  color: #fff;
  background: #333;
}

.menu a.selected,
.menu a:active {
  color: #fff;
  background: DodgerBlue;
}

/*
------------------------------------
Buttons
------------------------------------ */
.close-button,
.menu-button {
  color: #999;
  cursor: pointer;
  font-size: 16px;
  padding: 25px 25px 25px 65px;
  height: 68px;
  box-sizing: border-box;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-button {
  background: #eee;
  background: rgba(255,255,255,.85);
  position: fixed;
  width: 100%;
  z-index: 5;
}

.menu-button:hover {
  background: #fff;
}

.close-button {
  color: #666;
}

.close-button:hover {
  color: #fff;
}

.close-button .icon {
  font-size: 30px;
  position: absolute;
  top: 14px;
  left: 25px;
}

.close-button:hover .icon {
  color: DodgerBlue;
}

.menu-button .icon {
  fill: #999;
  position: absolute;
  top: 23px;
  left: 25px;
}

.menu-button:hover {
  color: #000;
  background: rgba(255,255,255,.85);
}

.menu-button:hover .icon {
  fill: DodgerBlue;
}

.open .menu-button {
  color: #bbb;
  cursor: default;
}

.open .menu-button .icon {
  fill: #bbb;
}


/*
------------------------------------
Gallery
------------------------------------
*/
.gallery {
  padding-top: 68px;
}

.cards {
  font-size: 1em;
  line-height: 1.4em;
  list-style: none;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.cards li {
  background: #fff;
  position: relative;
  width: 100%;
}
.cards li a,
.cards li a img {
  display: block;
  position: relative;
}
.cards li a img {
  max-width: 100%;
}
.cards li a {
  overflow: hidden;
  text-decoration: none;
  color: #999;
}
.cards li a div {
  background: #fff;
  min-height: 120px;
  padding: 25px 30px;
  box-sizing: border-box;
}
.cards li a div span {
  display: block;
}

.caption-title {
  font-weight: bold;
}

.caption-desc {
  font-size: .85em;
}

/*
------------------------------------
Images (Lazy Loading)
------------------------------------ */
img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
  min-height: 150px;
}

/*
------------------------------------
Media Queries
------------------------------------ */
@media (min-width: 750px) {

  .gallery {
    padding: 88px 20px 20px;
  }

  .cards {
    min-height: 1600px;
    overflow: hidden;
  }

  .cards li {
    float: left;
    width: 50%;
    background: none;
  }

  .open .cards li {
    width: 100%;
  }

  .cards li a {
    background: none;
    margin: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px #ccc;
  }

  .cards li a div {
    height: 120px;
  }

}

@media (min-width: 1024px) {

  .cards li {
    width: 33.33333333%;
  }

  .open .cards li {
    width: 50%;
  }

}

@media (min-width: 1400px) {

  .gallery {
    max-width: 1400px;
    margin: 0 auto;
  }

  .cards li {
    width: 25%;
  }

  .open .cards li {
    width: 33.33333333%;
  }

}

@media (min-width: 1800px) {

  .open .cards li {
    width: 25%;
  }

}

              
            
!

JS

              
                /*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-csstransitions-domprefixes-mq-setclasses-shiv-testallprops-testprop !*/
!function(e,t,n){function r(e,t){return typeof e===t}function o(){var e,t,n,o,a,i,s;for(var l in S)if(S.hasOwnProperty(l)){if(e=[],t=S[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"function")?t.fn():t.fn,a=0;a<e.length;a++)i=e[a],s=i.split("."),1===s.length?Modernizr[s[0]]=o:(!Modernizr[s[0]]||Modernizr[s[0]]instanceof Boolean||(Modernizr[s[0]]=new Boolean(Modernizr[s[0]])),Modernizr[s[0]][s[1]]=o),C.push((o?"":"no-")+s.join("-"))}}function a(e){var t=b.className,n=Modernizr._config.classPrefix||"";if(w&&(t=t.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),w?b.className.baseVal=t:b.className=t)}function i(e,t){return!!~(""+e).indexOf(t)}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):w?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function u(e,t){return function(){return e.apply(t,arguments)}}function c(e,t,n){var o;for(var a in e)if(e[a]in t)return n===!1?e[a]:(o=t[e[a]],r(o,"function")?u(o,n||t):o);return!1}function f(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(t,n,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,t,n);var a=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(a){var i=a.error?"error":"log";a[i].call(a,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!n&&t.currentStyle&&t.currentStyle[r];return o}function p(){var e=t.body;return e||(e=s(w?"svg":"body"),e.fake=!0),e}function m(e,n,r,o){var a,i,l,u,c="modernizr",f=s("div"),d=p();if(parseInt(r,10))for(;r--;)l=s("div"),l.id=o?o[r]:c+(r+1),f.appendChild(l);return a=s("style"),a.type="text/css",a.id="s"+c,(d.fake?d:f).appendChild(a),d.appendChild(f),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(t.createTextNode(e)),f.id=c,d.fake&&(d.style.background="",d.style.overflow="hidden",u=b.style.overflow,b.style.overflow="hidden",b.appendChild(d)),i=n(f,e),d.fake?(d.parentNode.removeChild(d),b.style.overflow=u,b.offsetHeight):f.parentNode.removeChild(f),!!i}function h(t,r){var o=t.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(t[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var a=[];o--;)a.push("("+f(t[o])+":"+r+")");return a=a.join(" or "),m("@supports ("+a+") { #modernizr { position: absolute; } }",function(e){return"absolute"==d(e,null,"position")})}return n}function g(e,t,o,a){function u(){f&&(delete j.style,delete j.modElem)}if(a=r(a,"undefined")?!1:a,!r(o,"undefined")){var c=h(e,o);if(!r(c,"undefined"))return c}for(var f,d,p,m,g,v=["modernizr","tspan","samp"];!j.style&&v.length;)f=!0,j.modElem=s(v.shift()),j.style=j.modElem.style;for(p=e.length,d=0;p>d;d++)if(m=e[d],g=j.style[m],i(m,"-")&&(m=l(m)),j.style[m]!==n){if(a||r(o,"undefined"))return u(),"pfx"==t?m:!0;try{j.style[m]=o}catch(y){}if(j.style[m]!=g)return u(),"pfx"==t?m:!0}return u(),!1}function v(e,t,n,o,a){var i=e.charAt(0).toUpperCase()+e.slice(1),s=(e+" "+N.join(i+" ")+i).split(" ");return r(t,"string")||r(t,"undefined")?g(s,t,o,a):(s=(e+" "+_.join(i+" ")+i).split(" "),c(s,t,n))}function y(e,t,r){return v(e,n,n,t,r)}var C=[],S=[],E={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){S.push({name:e,fn:t,options:n})},addAsyncTest:function(e){S.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=E,Modernizr=new Modernizr;var b=t.documentElement,w="svg"===b.nodeName.toLowerCase();w||!function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=C.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=C.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),C.elements=n+" "+e,u(t)}function a(e){var t=y[e[g]];return t||(t={},v++,e[g]=v,y[v]=t),t}function i(e,n,r){if(n||(n=t),f)return n.createElement(e);r||(r=a(n));var o;return o=r.cache[e]?r.cache[e].cloneNode():h.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!o.canHaveChildren||m.test(e)||o.tagUrn?o:r.frag.appendChild(o)}function s(e,n){if(e||(e=t),f)return e.createDocumentFragment();n=n||a(e);for(var o=n.frag.cloneNode(),i=0,s=r(),l=s.length;l>i;i++)o.createElement(s[i]);return o}function l(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return C.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(C,t.frag)}function u(e){e||(e=t);var r=a(e);return!C.shivCSS||c||r.hasCSS||(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||l(e,r),e}var c,f,d="3.7.3",p=e.html5||{},m=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,h=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g="_html5shiv",v=0,y={};!function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",c="hidden"in e,f=1==e.childNodes.length||function(){t.createElement("a");var e=t.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(n){c=!0,f=!0}}();var C={elements:p.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:d,shivCSS:p.shivCSS!==!1,supportsUnknownElements:f,shivMethods:p.shivMethods!==!1,type:"default",shivDocument:u,createElement:i,createDocumentFragment:s,addElements:o};e.html5=C,u(t),"object"==typeof module&&module.exports&&(module.exports=C)}("undefined"!=typeof e?e:this,t);var x="Moz O ms Webkit",_=E._config.usePrefixes?x.toLowerCase().split(" "):[];E._domPrefixes=_;var N=E._config.usePrefixes?x.split(" "):[];E._cssomPrefixes=N;var z={elem:s("modernizr")};Modernizr._q.push(function(){delete z.elem});var j={style:z.elem.style};Modernizr._q.unshift(function(){delete j.style});E.testProp=function(e,t,r){return g([e],n,t,r)};E.testAllProps=v,E.testAllProps=y,Modernizr.addTest("csstransitions",y("transition","all",!0));var P=function(){var t=e.matchMedia||e.msMatchMedia;return t?function(e){var n=t(e);return n&&n.matches||!1}:function(t){var n=!1;return m("@media "+t+" { #modernizr { position: absolute; } }",function(t){n="absolute"==(e.getComputedStyle?e.getComputedStyle(t,null):t.currentStyle).position}),n}}();E.mq=P,o(),a(C),delete E.addTest,delete E.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);


/*--------------------------------*/
/* Unsplash Gallery               */
/*--------------------------------*/
/* by Stephen Bau                 */
/*--------------------------------*/

var main = function() {

  var count = 0;
  var windowResize = 0;
  var body = $('body');
  var menu = $('.menu');
  var menuButton = $('.menu-button');
  var closeButton = $('.close-button');
  var navItems = $('.nav a');
  var menuClick = 0;
  var closeClick = 0;
  var navClick = 0;
  var loadCount = 0;
  var resizeTimer;
  var unloadTimer;
  var imageFetch = {
    on: false,
    timer: null,
    timeout: 250
  };
  var unique = true;
  var numItemsToGenerate = 24; //how many gallery items you want on the screen
  var numImagesAvailable = 1000; //the number of images available in the collection
  var imageWidth = 800; //desired image width in pixels
  var imageHeight = 640; //desired image height in pixels
  var collectionID = 1163637; //the collection ID from the original url
  var collectionTitle = "Architectural Lines"; //the collection ID from the original url
  var collectionDesc = "Metal and glass, concrete and wood, straight lines and curves.";
  var mQuery = Modernizr.mq('(min-width: 750px)');
  var gallery = $('.cards');
  var galleryItems = $('.cards li');
  var cards = galleryItems;
  var galleryLoaded = true;

  // Generate random image gallery on page load
  // var unsplashImages = getUnsplashImages(true);

  // Hide cards on page load
  // cards.css({opacity: 0});

  addClickEvents();

  $(window).on('resize', function(e) {

    removeClickEvents();
    resetMenu();

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      windowResize++;
      // console.log("Window resized: " + windowResize);
      addClickEvents();
    }, 200);
  });

  function lazyLoad() {

    // https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
    [].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
      img.setAttribute('src', img.getAttribute('data-src'));
      img.onload = function() {
        img.removeAttribute('data-src');
      };
    });
  }

  function testQuery() {
    return mQuery = Modernizr.mq('(min-width: 750px)');
  }

  function addClickEvents() {

    testQuery();

    menuButton.on('click', function(e) {
      menuClick++;
      // console.log("Menu clicked: " + menuClick);
      menu.animate({left: 0}, 200);
      if (mQuery) {
        body.animate({marginLeft: '320px'}, 250).addClass('open');
      } else {
        body.addClass('open');
      }
    });
    closeButton.on('click', function(e) {
      closeClick++;
      // console.log("Close clicked: " + closeClick);
      menu.animate({left: '-320px'}, 200);
      if (mQuery) {
        body.animate({marginLeft: 0}, 200).removeClass('open');
      } else {
        body.removeClass('open');
      }
    });

     navItems.on('click', function(e) {
       navClick++;
       // console.log("Nav clicked: " + navClick);
       clickGalleryMenu(this);
       unloadCards();
     });

  }

  function resetMenu() {
    body.css({marginLeft: 0}).removeClass('open');
    menu.css({left: -320});
  }

  function removeClickEvents() {
    menuButton.off('click');
    closeButton.off('click');
    navItems.off('click');
  }

  function positionCards() {
    if (cards instanceof jQuery) {
      cards.each(function(index, value) {
        var topValue = ((index + 3) * 200) + 1000 + "px";
        $(this).css({top: topValue, opacity: 0});
      });
    }
  }

  function loadCards() {
    loadCount++;
    console.log("===================================");
    console.log("Loading");
    console.log("-----------------------------------");
    console.log("loadCount: " + loadCount);
    if (galleryLoaded) {
      console.log("Cards already loaded");
      animateCards();
    } else {
      animateCards();
    }
  }

  function animateCards() {
    if (cards instanceof jQuery) {
      cards.each(function(index, value) {
        var delayValue = (index * 150);
        $(this).delay(delayValue).animate({top: 0, opacity: 1}, 400, "swing", countingCards(loadCompleted));
      });
    }
  }

  function loadCompleted() {
    galleryLoaded = true;
    console.log("Load Completed");
  }

  function unloadCards() {
    console.log("===================================");
    console.log("Unloading");
    console.log("-----------------------------------");
    galleryLoaded = false;
    if (cards instanceof jQuery) {
      cards.each(function(index, value) {
        var reverse = Math.abs(index - cards.length);
        var topValue = ((index + 3) * 200) + 1000 + "px";
        var delayValue = (reverse * 30);
        $(this).delay(delayValue).animate({top: topValue, opacity: 0}, 400, "swing", countingCards(unloading));
      });
    }
  }

  function unloading() {
    unloadTimer = setTimeout(function() {
      getNewImageCollection();
    }, 1000);
  }

  function getNewImageCollection() {
    clearTimeout(unloadTimer);
    if (collectionID) {
      getUnsplashImages(true);
    } else {
      loadOriginalImageCollection();
    }
  }

  function loadOriginalImageCollection() {
    cards = galleryItems;
    replaceGallery(cards);
    positionCards();
    loadCards();
  }

  function shuffleAndLoadCards() {
    clearTimeout(unloadTimer);
    cards = shuffle(cards);
    replaceGallery(cards);
    positionCards();
    loadCards();
  }

  function replaceGallery(items) {
    gallery.empty();
    for(let i = 0; i < items.length; i++) {
      gallery = gallery.append(items[i]);
    }
  }

  function shuffle(items) {
    return items.slice().sort(function() { return 0.5 - Math.random() });
  }

  function countingCards(func = null) {
    count++;
    // console.log("image " + count);
    if (count >= cards.length) {
      count = 0;
      if (func) {
        func();
      }
    }
  }

  function clickGalleryMenu(item) {
    collectionID = item.dataset.cid;
    collectionTitle = item.dataset.ctitle;
    collectionDesc = item.dataset.cdesc;
    numImagesAvailable = item.dataset.cavail;

    navItems.removeClass('selected');
    $(item).addClass('selected');
  }

  function getUnsplashImages(render = false) {
    // https://medium.com/quick-code/how-to-quickly-generate-a-random-gallery-of-images-from-an-unsplash-collection-in-javascript-4ddb2a6a4faf

    console.log("===================================");
    console.log(collectionTitle);
    console.log("-----------------------------------");
    console.log("collectionID: " + collectionID);
    console.log("collectionTitle: " + collectionTitle);
    console.log("collectionDesc: " + collectionDesc);
    console.log("numImagesAvailable: " + numImagesAvailable);
    console.log("-----------------------------------");

    var imageCount = 0;
    let images = [];

    for(let i = 0; i < numItemsToGenerate; i++){
      let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
      getImage(randomImageIndex, unique);
    }

    function startFetchTimer (time = imageFetch.timeout) {
      imageFetch.on = true;
      imageFetch.timer = setTimeout(function() {
        stopFetchTimer(renderImages);
      }, time);
    }

    function stopFetchTimer(callback = null) {
      clearTimeout(imageFetch.timer);
      imageFetch.on = false;
      if (callback) {
        console.log("Fetch timer timed out");
        callback();
      }
    }

    function getImage(randomNumber){
      fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`)
      .then((response)=> {
        if (!galleryLoaded) {
          if (unique) {
            if (isUnique(images, response.url)) {
              images.push(response.url);
              imageCount++;
              console.log("image " + imageCount);
              stopFetchTimer();
              startFetchTimer();
            }
          } else {
            images.push(response.url);
            imageCount++;
            // console.log("image " + imageCount);
          }
        } else {
          // console.log("Gallery already loaded");
          // console.log("image " + imageCount);
          // console.log("Number of images: " + images.length);
          return;
        }
        // if (!unique && imageCount >= numItemsToGenerate && render) {
        //   renderUnsplashGallery(images, collectionID, collectionTitle, collectionDesc);
        //   return images;
        // } else {
        //   if (!imageFetch.on) {
        //     startFetchTimer(imageFetch.timeout);
        //   }
        // }
      });
    }

    function renderImages() {
      console.log("Render Images");
      renderUnsplashGallery(images, collectionID, collectionTitle, collectionDesc);
      return images;
    }

  }

  function renderUnsplashGallery(images, collectionID, collectionTitle, collectionDesc) {
    var newGallery = $('<ul />').addClass('cards');
    for(let i = 0; i < images.length; i++){
      var galleryItem = document.createElement('li');
      var html = `
        <a href="https://unsplash.com/collections/${collectionID}">
          <img data-src="${images[i]}" alt="Photo from Unsplash" />
          <div class="caption"><span class="caption-title">${collectionTitle}</span><span class="caption-desc">${collectionDesc}</span></div>
        </a>
      `;
      galleryItem.innerHTML = html;
      galleryItem = $(galleryItem);
      newGallery.append(galleryItem);
    }
    cards = newGallery.find('li');
    replaceGallery(cards);
    lazyLoad();
    positionCards();
    loadCards();
    console.log("Unsplash images loaded");
  }

  function isUnique(array, value) {
    for(let i = 0; i < array.length; i++){
      if (array[i] == value) {
        return false;
      }
    }
    return true;
  }

};

$(document).ready(main);

              
            
!
999px

Console