<div id="landing" class="landing collapsed">

  <div class='links'>

    <a style='--index: 0; z-index: 7;' href="#">Home</a>

    <a style='--index: 1; z-index: 6;' href="#">Work</a>

    <a style='--index: 2; z-index: 5;' href="#">Product</a>

    <a style='--index: 3; z-index: 4;' href="#">About</a>

    <a style='--index: 4; z-index: 3;' href="#">Tools</a>

    <a style='--index: 5; z-index: 2;' href="#">Blog</a>

    <a style='--index: 6; z-index: 1;' href="#">Contact</a>

  </div>

  <h1>Deeecode</h1>

</div>

​

<main>

  <h2>Some stuff</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id leo ac massa consequat imperdiet vel non justo. Mauris velit ligula, sodales eu augue at, blandit blandit quam. Aenean porttitor, enim in rutrum sagittis, nisl neque faucibus nunc, eu volutpat tellus elit eu turpis. Curabitur eget scelerisque metus, nec faucibus ligula. Aenean nec vestibulum risus. Nunc malesuada metus tellus, at molestie justo maximus a. Etiam ac scelerisque turpis, vitae rhoncus diam. Morbi in tempus felis, sed ornare dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam porta lorem vel nunc interdum, vitae malesuada nisl pellentesque. Sed congue lorem nec sem sollicitudin lobortis. Nullam lacus ligula, semper sed nibh sit amet, luctus finibus quam.

​

    Donec eget risus ac lectus faucibus hendrerit id ac ligula. Morbi iaculis ex convallis, lacinia quam nec, interdum felis. Nam nec nunc dui. Vivamus luctus, risus nec lobortis tristique, orci libero luctus felis, ac ullamcorper lorem libero vitae magna. Aliquam lobortis sed augue ac convallis. Proin sit amet nibh placerat, iaculis tellus eu, iaculis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla volutpat enim quis erat blandit, vel pretium eros maximus. Duis auctor, nisl condimentum finibus consectetur, sapien leo maximus eros, vel accumsan lectus sem id sem. Donec hendrerit consequat fermentum. Fusce pulvinar, diam in tristique vestibulum, orci arcu gravida lorem, vel ultricies lectus tortor nec ex. Nunc eu nibh accumsan, fringilla ante et, tristique nunc. Suspendisse ut pulvinar ex, a maximus nulla. Morbi blandit posuere viverra.

    In vitae sapien ut tellus bibendum facilisis. Nullam id lacinia augue, vel blandit libero. Ut vestibulum ligula vel tortor hendrerit, non sagittis orci scelerisque. Nunc laoreet viverra mi. Etiam ut risus sed erat condimentum fermentum. Etiam at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis odio ante. Cras pulvinar lorem a convallis pulvinar. Nulla in tellus ut tortor ullamcorper ornare. Vestibulum eget pharetra lectus, sed gravida nisl.

    Sed nec porta quam. Nullam eleifend diam malesuada nulla mattis sollicitudin. Nunc a pretium erat. Integer sed erat eros. Donec porta convallis finibus. Maecenas nec tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mauris nisl, viverra vel lorem id, hendrerit interdum mauris. Aenean viverra suscipit erat, sed mollis risus ultricies at.

    Etiam mollis elit eget dolor fringilla eleifend. Pellentesque pharetra ultrices ligula, at ullamcorper lacus porta et. Ut viverra elit ac tincidunt blandit. Duis sed bibendum sem. Integer blandit arcu urna, vel tempus sem pellentesque ut. Donec rhoncus et mi a sodales. Vivamus vel orci ut nunc elementum egestas a ac nisl. Curabitur et venenatis quam. Maecenas nec lectus nunc. Praesent blandit lectus tempus felis mattis, sit amet gravida lorem convallis. Morbi placerat leo sem, eu blandit mi imperdiet sit amet. Etiam velit nisl, pellentesque at tristique id, sodales sit amet felis. Nunc at est sit amet eros fringilla faucibus. Morbi in massa mauris.</p>

​

  <h2>Some stuff</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id leo ac massa consequat imperdiet vel non justo. Mauris velit ligula, sodales eu augue at, blandit blandit quam. Aenean porttitor, enim in rutrum sagittis, nisl neque faucibus nunc, eu volutpat tellus elit eu turpis. Curabitur eget scelerisque metus, nec faucibus ligula. Aenean nec vestibulum risus. Nunc malesuada metus tellus, at molestie justo maximus a. Etiam ac scelerisque turpis, vitae rhoncus diam. Morbi in tempus felis, sed ornare dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam porta lorem vel nunc interdum, vitae malesuada nisl pellentesque. Sed congue lorem nec sem sollicitudin lobortis. Nullam lacus ligula, semper sed nibh sit amet, luctus finibus quam.

​

    Donec eget risus ac lectus faucibus hendrerit id ac ligula. Morbi iaculis ex convallis, lacinia quam nec, interdum felis. Nam nec nunc dui. Vivamus luctus, risus nec lobortis tristique, orci libero luctus felis, ac ullamcorper lorem libero vitae magna. Aliquam lobortis sed augue ac convallis. Proin sit amet nibh placerat, iaculis tellus eu, iaculis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla volutpat enim quis erat blandit, vel pretium eros maximus. Duis auctor, nisl condimentum finibus consectetur, sapien leo maximus eros, vel accumsan lectus sem id sem. Donec hendrerit consequat fermentum. Fusce pulvinar, diam in tristique vestibulum, orci arcu gravida lorem, vel ultricies lectus tortor nec ex. Nunc eu nibh accumsan, fringilla ante et, tristique nunc. Suspendisse ut pulvinar ex, a maximus nulla. Morbi blandit posuere viverra.

    In vitae sapien ut tellus bibendum facilisis. Nullam id lacinia augue, vel blandit libero. Ut vestibulum ligula vel tortor hendrerit, non sagittis orci scelerisque. Nunc laoreet viverra mi. Etiam ut risus sed erat condimentum fermentum. Etiam at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis odio ante. Cras pulvinar lorem a convallis pulvinar. Nulla in tellus ut tortor ullamcorper ornare. Vestibulum eget pharetra lectus, sed gravida nisl.

    Sed nec porta quam. Nullam eleifend diam malesuada nulla mattis sollicitudin. Nunc a pretium erat. Integer sed erat eros. Donec porta convallis finibus. Maecenas nec tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mauris nisl, viverra vel lorem id, hendrerit interdum mauris. Aenean viverra suscipit erat, sed mollis risus ultricies at.

    Etiam mollis elit eget dolor fringilla eleifend. Pellentesque pharetra ultrices ligula, at ullamcorper lacus porta et. Ut viverra elit ac tincidunt blandit. Duis sed bibendum sem. Integer blandit arcu urna, vel tempus sem pellentesque ut. Donec rhoncus et mi a sodales. Vivamus vel orci ut nunc elementum egestas a ac nisl. Curabitur et venenatis quam. Maecenas nec lectus nunc. Praesent blandit lectus tempus felis mattis, sit amet gravida lorem convallis. Morbi placerat leo sem, eu blandit mi imperdiet sit amet. Etiam velit nisl, pellentesque at tristique id, sodales sit amet felis. Nunc at est sit amet eros fringilla faucibus. Morbi in massa mauris.</p>

​

  <h2>Some stuff</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id leo ac massa consequat imperdiet vel non justo. Mauris velit ligula, sodales eu augue at, blandit blandit quam. Aenean porttitor, enim in rutrum sagittis, nisl neque faucibus nunc, eu volutpat tellus elit eu turpis. Curabitur eget scelerisque metus, nec faucibus ligula. Aenean nec vestibulum risus. Nunc malesuada metus tellus, at molestie justo maximus a. Etiam ac scelerisque turpis, vitae rhoncus diam. Morbi in tempus felis, sed ornare dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam porta lorem vel nunc interdum, vitae malesuada nisl pellentesque. Sed congue lorem nec sem sollicitudin lobortis. Nullam lacus ligula, semper sed nibh sit amet, luctus finibus quam.

​

    Donec eget risus ac lectus faucibus hendrerit id ac ligula. Morbi iaculis ex convallis, lacinia quam nec, interdum felis. Nam nec nunc dui. Vivamus luctus, risus nec lobortis tristique, orci libero luctus felis, ac ullamcorper lorem libero vitae magna. Aliquam lobortis sed augue ac convallis. Proin sit amet nibh placerat, iaculis tellus eu, iaculis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla volutpat enim quis erat blandit, vel pretium eros maximus. Duis auctor, nisl condimentum finibus consectetur, sapien leo maximus eros, vel accumsan lectus sem id sem. Donec hendrerit consequat fermentum. Fusce pulvinar, diam in tristique vestibulum, orci arcu gravida lorem, vel ultricies lectus tortor nec ex. Nunc eu nibh accumsan, fringilla ante et, tristique nunc. Suspendisse ut pulvinar ex, a maximus nulla. Morbi blandit posuere viverra.

    In vitae sapien ut tellus bibendum facilisis. Nullam id lacinia augue, vel blandit libero. Ut vestibulum ligula vel tortor hendrerit, non sagittis orci scelerisque. Nunc laoreet viverra mi. Etiam ut risus sed erat condimentum fermentum. Etiam at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis odio ante. Cras pulvinar lorem a convallis pulvinar. Nulla in tellus ut tortor ullamcorper ornare. Vestibulum eget pharetra lectus, sed gravida nisl.

    Sed nec porta quam. Nullam eleifend diam malesuada nulla mattis sollicitudin. Nunc a pretium erat. Integer sed erat eros. Donec porta convallis finibus. Maecenas nec tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mauris nisl, viverra vel lorem id, hendrerit interdum mauris. Aenean viverra suscipit erat, sed mollis risus ultricies at.

    Etiam mollis elit eget dolor fringilla eleifend. Pellentesque pharetra ultrices ligula, at ullamcorper lacus porta et. Ut viverra elit ac tincidunt blandit. Duis sed bibendum sem. Integer blandit arcu urna, vel tempus sem pellentesque ut. Donec rhoncus et mi a sodales. Vivamus vel orci ut nunc elementum egestas a ac nisl. Curabitur et venenatis quam. Maecenas nec lectus nunc. Praesent blandit lectus tempus felis mattis, sit amet gravida lorem convallis. Morbi placerat leo sem, eu blandit mi imperdiet sit amet. Etiam velit nisl, pellentesque at tristique id, sodales sit amet felis. Nunc at est sit amet eros fringilla faucibus. Morbi in massa mauris.</p>

​

  <h2>Some stuff</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id leo ac massa consequat imperdiet vel non justo. Mauris velit ligula, sodales eu augue at, blandit blandit quam. Aenean porttitor, enim in rutrum sagittis, nisl neque faucibus nunc, eu volutpat tellus elit eu turpis. Curabitur eget scelerisque metus, nec faucibus ligula. Aenean nec vestibulum risus. Nunc malesuada metus tellus, at molestie justo maximus a. Etiam ac scelerisque turpis, vitae rhoncus diam. Morbi in tempus felis, sed ornare dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam porta lorem vel nunc interdum, vitae malesuada nisl pellentesque. Sed congue lorem nec sem sollicitudin lobortis. Nullam lacus ligula, semper sed nibh sit amet, luctus finibus quam.

​

    Donec eget risus ac lectus faucibus hendrerit id ac ligula. Morbi iaculis ex convallis, lacinia quam nec, interdum felis. Nam nec nunc dui. Vivamus luctus, risus nec lobortis tristique, orci libero luctus felis, ac ullamcorper lorem libero vitae magna. Aliquam lobortis sed augue ac convallis. Proin sit amet nibh placerat, iaculis tellus eu, iaculis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla volutpat enim quis erat blandit, vel pretium eros maximus. Duis auctor, nisl condimentum finibus consectetur, sapien leo maximus eros, vel accumsan lectus sem id sem. Donec hendrerit consequat fermentum. Fusce pulvinar, diam in tristique vestibulum, orci arcu gravida lorem, vel ultricies lectus tortor nec ex. Nunc eu nibh accumsan, fringilla ante et, tristique nunc. Suspendisse ut pulvinar ex, a maximus nulla. Morbi blandit posuere viverra.

    In vitae sapien ut tellus bibendum facilisis. Nullam id lacinia augue, vel blandit libero. Ut vestibulum ligula vel tortor hendrerit, non sagittis orci scelerisque. Nunc laoreet viverra mi. Etiam ut risus sed erat condimentum fermentum. Etiam at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis odio ante. Cras pulvinar lorem a convallis pulvinar. Nulla in tellus ut tortor ullamcorper ornare. Vestibulum eget pharetra lectus, sed gravida nisl.

    Sed nec porta quam. Nullam eleifend diam malesuada nulla mattis sollicitudin. Nunc a pretium erat. Integer sed erat eros. Donec porta convallis finibus. Maecenas nec tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mauris nisl, viverra vel lorem id, hendrerit interdum mauris. Aenean viverra suscipit erat, sed mollis risus ultricies at.

    Etiam mollis elit eget dolor fringilla eleifend. Pellentesque pharetra ultrices ligula, at ullamcorper lacus porta et. Ut viverra elit ac tincidunt blandit. Duis sed bibendum sem. Integer blandit arcu urna, vel tempus sem pellentesque ut. Donec rhoncus et mi a sodales. Vivamus vel orci ut nunc elementum egestas a ac nisl. Curabitur et venenatis quam. Maecenas nec lectus nunc. Praesent blandit lectus tempus felis mattis, sit amet gravida lorem convallis. Morbi placerat leo sem, eu blandit mi imperdiet sit amet. Etiam velit nisl, pellentesque at tristique id, sodales sit amet felis. Nunc at est sit amet eros fringilla faucibus. Morbi in massa mauris.</p>

</main>

* {

  box-sizing: border-box;

}

​

body {

  margin: 0;

  background-color: #505323;

  font-family: Poppins;

}

​

.landing {

  padding: 20px 0;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

​

h1 {

  font-size: 100px;

  color: white;

}

​

.links {

  display: flex;

  position: fixed;

  top: 0;

  left: 0;

  padding: 40px;

  justify-content: center;

}

​

.links a {

  font-family: Poppins;

  background-color: white;

  display: block;

  padding: 10px 20px;

  border-radius: 25px;

  text-decoration: none;

  --transparency: 90%;

  background: color-mix(

    in srgb,

    white,

    transparent var(--transparency)

  );

  backdrop-filter: blur(3px);

  color: white;

  transition: color 500ms, background 500ms,

    left 500ms;

  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

  position: relative;

  --width: 100px;

  --margin-right: 10px;

  margin-right: var(--margin-right);

  width: var(--width);

  --x-space: calc(var(--width) + var(--margin-right));

  --start-x-position: calc(var(--x-space) * var(--index) * -1);

  --offset: calc(var(--index) * 6px);

  left: 0;

  text-align: center;

}

​

.landing.collapsed .links a {

  left: calc(var(--start-x-position) + var(--offset));

}

​

.landing .links:hover a {

  left: 0;

}

​

.landing.collapsed .links:not(:hover) a:first-child {

  color: black;

}

​

a:hover {

  color: black;

  --transparency: 20%;

}

​

main {

  color: white;

  padding: 40px;

  background-color: #42697b;

}

​

h2 {

  margin-top: 100px;

}

​

const landingElem =

  document.querySelector("#landing")

​

window.addEventListener("scroll", () => {

  const scrollY = Math.floor(window.scrollY);

  const screenHeight = window.innerHeight

​

  if(scrollY > screenHeight) {

    landingElem.classList.add('collapsed')

  } else {

    landingElem.classList.remove('collapsed')

  }

})

​