<header class="page-header">
  <div class="container">
    <nav>
      <a href="">
        <img width="178" height="38" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/horizontal-logo-mobile.svg" alt="forecastr logo">
      </a>
      <button type="button">
        GET STARTED
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
          <path d="M7.411 21.39l-4.054 2.61-.266-1.053c-.187-.744-.086-1.534.282-2.199l2.617-4.729c.387 1.6.848 3.272 1.421 5.371zm13.215-.642l-2.646-4.784c-.391 1.656-.803 3.22-1.369 5.441l4.032 2.595.266-1.053c.186-.743.085-1.533-.283-2.199zm-10.073 3.252h2.895l.552-2h-4l.553 2zm1.447-24c-3.489 2.503-5 5.488-5 9.191 0 3.34 1.146 7.275 2.38 11.809h5.273c1.181-4.668 2.312-8.577 2.347-11.844.04-3.731-1.441-6.639-5-9.156zm.012 2.543c1.379 1.201 2.236 2.491 2.662 3.996-.558.304-1.607.461-2.674.461-1.039 0-2.072-.145-2.641-.433.442-1.512 1.304-2.824 2.653-4.024z" />
        </svg>
      </button>
    </nav>
  </div>
</header>

<section>
  <div class="container container-max">
    <div class="text">
      <h2>Title here</h2>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
      <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
    </div>
    <figure>
      <img width="1920" height="1277" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg" alt="">
    </figure>
  </div>
</section>
<section>
  <div class="container container-max">
    <div class="text">
      <h2>Another title here</h2>
      <p>Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox.</p>
      <p>The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!"</p>
    </div>
    <figure>
      <img width="1920" height="1290" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg" alt="">
    </figure>
  </div>
</section>

<section>
  <div class="container container-max">
    <div class="text">
      <h2>Another title here</h2>
      <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains</p>
    </div>
    <figure>
      <img width="1920" height="1279" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg" alt="">
    </figure>
  </div>
</section>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET & BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font: 18px/26px "Cabin", sans-serif;
}

.container {
  padding: 0 15px;
}

.container-max {
  max-width: 1000px;
  margin: 0 auto;
}

/* HEADER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 20px 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.15);
}

.page-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header button {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 20px;
  border-radius: 10px;
  color: white;
  background: #08a6df;
  transition: background 0.3s;
}

.page-header button svg {
  flex-shrink: 0;
  margin-left: 5px;
  fill: currentColor;
}

.page-header button:hover {
  background: #0ab8f6;
}

/* SECTION STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
  margin: 100px 0 20px;
}

section:last-of-type {
  margin-bottom: 100px;
}

section .text {
  max-width: 700px;
  margin: 0 auto 50px;
}

section img {
  border-radius: 15px;
  background: whitesmoke;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* STICKY STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header.is-sticky {
  position: fixed;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  backdrop-filter: blur(10px);
  animation: slideDown 0.35s ease-out;
}

.page-header.is-sticky img {
  max-width: 80%;
}

.page-header.is-sticky button {
  font-size: 14px;
  padding: 7px 10px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  background: white;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const header = document.querySelector(".page-header");
const toggleClass = "is-sticky";

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll > 150) {
    header.classList.add(toggleClass);
  } else {
    header.classList.remove(toggleClass);
  }
});