<header class="m-header">
  <div class="m-logo">the FAKE COLLECTIVE</div>
</header>
<nav class="m-nav">
  <ul class="m-nav__list">
    <li class="m-nav__listItem" id="_airportTerminal">
      <a href="#airportTerminal" class="a-link a-nav__link">airport terminal</a>
    </li>
    <li class="m-nav__listItem" id="_skyscraper">
      <a href="#skyscraper" class="a-link a-nav__link">skyscraper</a>
    </li>
    <li class="m-nav__listItem" id="_skyscraper2">
      <a href="#skyscraper2" class="a-link a-nav__link">another skyscraper</a>
    </li>
  </ul>
</nav>
<main>
  <div id="airportTerminal" class="m-imageContainer">
    <figure class="m-image">
      <img class="a-image" src="https://picsum.photos/2000/1500/?gravity=center&image=1033" alt="">
      <figcaption class="a-caption">Fake location airport terminal</figcaption>
    </figure>
  </div>
  <div id="skyscraper" class="m-imageContainer">
    <figure class="m-image">
      <img class="a-image" src="https://picsum.photos/2000/1500/?gravity=center&image=1031" alt="">
      <figcaption class="a-caption">Nowhere land skyscraper</figcaption>
    </figure>
  </div>
  <div id="skyscraper2" class="m-imageContainer">
    <figure class="m-image">
      <img class="a-image" src="https://picsum.photos/2000/1500/?gravity=center&image=983" alt="">
      <figcaption class="a-caption">Nowhere land skyscraper 2</figcaption>
    </figure>
  </div>
</main>

<footer class="m-footer">
  <div class="m-logo -big m-footer__logo"><span class="a-logo__text">the</span><span class="a-logo__text -fake">FAKE</span><span class="a-logo__text -colective">COLLECTIVE</span></div>
  <div class="m-social">
    <div class="m-social__item">
      <a href="#" class="a-link a-social__link">
        <svg class="a-social__icon" style="width:24px;height:24px" viewBox="0 0 24 24">
           <path fill="#000000" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
        </svg>
      </a>
    </div>
    <div class="m-social__item">
      <a href="#" class="a-link a-social__link">
      <svg class="a-social__icon" viewBox="0 0 24 24">
        <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
        </svg>
      </a>
    </div>
    <div class="m-social__item">
      <a href="#" class="a-link a-social__link">
        <svg class="a-social__icon" viewBox="0 0 24 24">
          <path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z" />
      </svg>
      </a>
    </div>
    <div class="m-social__item">
      <a href="#" class="a-link a-social__link">
        <svg class="a-social__icon" viewBox="0 0 24 24">
          <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
      </svg>
      </a>
    </div>
  </div>
</footer>
<div class="m-overlay">
  <div class="a-overlay"></div>
  <div class="m-overlay__logo">
    <div class="m-logo -big"><span class="a-logo__text">the</span><span class="a-logo__text -fake">FAKE</span><span class="a-logo__text -colective">COLLECTIVE</span></div>
  </div>
</div>
$min-footer_height: 300px;
$brand-color_01: #ff0;
$brand-color_02: #333;
$ui-color_01: #fff;
$ui-color_02: $brand-color_02;
$ui-color_03: #fff;
$blend_mode-overlay: darken;

@import url('https://fonts.googleapis.com/css?family=Monoton|Raleway');

html {
  font-size: 16px;
}
body {
  font-family: 'Raleway';
  background-color: $ui-color_03;
}

%helper {
  &__centeredContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  &__logoType {
    font-family: 'Monoton', cursive;
  }
}
.a {
  &-image {
    max-width: 100%;
    max-height: calc(75vh - 100px);
    
    filter: saturate(0) contrast(1.5);
    transition: filter .2s ease-in-out;
  }
  
  &-overlay {
    background-color: $brand-color_01;
    transform: skewY(2deg);
    height: 100%;
  }
  
  &-logo__text {
    display: block;
    
    .m-logo.-big & {
      line-height: 1em;
    }
    
    &.-fake {
      font-size: 4.6rem;
    }
  }
  &-caption {
    width: calc(100% - 1rem);
    text-align: right;
    font-size: 0.825rem;
    line-height: 1em;
    padding: .5rem;
    text-transform: uppercase;
    background-color: $brand-color_01;
  }
  
  &-link {
    &, &:focus, &:active, &:visited {
      text-decoration: none;
      color: black;
    }
  }
  &-nav__link {
    text-transform: uppercase;
    display: inline-block;
    padding: .5rem;
    
    &, &:focus, &:active, &:visited {
      color: currentColor;
    }
  }
  &-social {
    &__link {
      padding: .5rem;
      display: inline-block;
    }
    &__icon {
      width: 1.5rem;
      height: 1.5rem;
      color: currentColor;
      
      path {
        fill: currentColor;
      }
    }
  }
}

.m {
  &-logo {
    @extend %helper__logoType;
    font-size: 2rem;
    line-height: 2em;
  }
  &-image {
    &Container {
      height: 75vh;
      width: 60vw;
      @extend %helper__centeredContent;
      margin: auto;  
    }
  }
  &-footer {
    height: 25vh;
    min-height: $min-footer_height;
    @extend %helper__centeredContent;
    @extend %helper__logoType;
    flex-wrap: wrap;
    
    &__logo {
      color: lighten($brand-color_02, 60%);
      position: relative;
      top: 56px;
    }
  }
  
  &-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25vh;
    min-height: $min-footer_height;
    mix-blend-mode: $blend_mode-overlay;
    background-image: linear-gradient(to top, $brand-color_01, $brand-color_01 50%, transparent 50%);
    pointer-events: none;
    &__logo {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      @extend %helper__centeredContent;
    }
  }
  &-header {
    @extend %helper__centeredContent;
    margin-top: 1rem;
  }
  &-nav {
    z-index: 3;
    position: sticky;
    top: 0;
    padding: 1rem 0;
    @extend %helper__centeredContent;
    
    &__list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    &__listItem {
      display: inline-block;
      background-image: linear-gradient(to bottom, $brand-color_02, $brand-color_02 50%, $brand-color_01 50%, $brand-color_01);
      background-size: auto 200%;
      background-position: center 0%;
      color: $ui-color_01;
      transition: background-position .25s ease;
      
      &:hover, &.-active {
        background-position: center 100%;
        color: $ui-color_02;
      }
    }
  }
  &-social {
    flex-basis: 100%;
    @extend %helper__centeredContent;
  }
}
View Compiled
const initSmoothScroll = () => {
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
};

const initObservable = () => {
  const updateNavItems = (currentActiveId) => {
    const prev = document.querySelector('.m-nav__listItem.-active');
    if (prev) {
      prev.classList.remove('-active');
    }
    const current = document.querySelector(`#_${currentActiveId}`);
    if (current) {
      current.classList.add('-active');
    }
  }

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.intersectionRatio >= 1) {
        updateNavItems(entry.target.id);
      }
    });
  }, {
    root: null,
    rootMargin: "0px",
    threshold: 1.0
  });

  const imageContainers = document.querySelectorAll(".m-imageContainer");
  imageContainers.forEach(elem => observer.observe(elem));
};

const init = () => {
  initSmoothScroll();
  initObservable();
};
if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  init();
} else {
  document.addEventListener("DOMContentLoaded", init);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.