HTML CSS

<header class="hero">
  <h1>Subzero Cool Peeps</h1>
  <h2>Scroll down and the navigation bar will stick to the top</h2>
</header>
<main>
  <nav>
    <ul>
      <li><a href="">Cool 1</a></li>
      <li><a href="">Cool 2</a></li>
      <li><a href="">Cool 3</a></li>
      <li><a href="">Cool 4</a></li>
    </ul>
  </nav>
  <article>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
    <p>
      Something chiller killer here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure. Sunt
      elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat
      sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore
      enim laboris occaecat sint sit id consequat nostrud velit anim laborum.
    </p>
  </article>
</main>
<footer>
  <p>this is the bottom (you said bottom, hehe)</p>
</footer>

nav {
    position: sticky;
    top: 0;
  }

  .hero {
    background-color: rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url(https://dev-to-uploads.s3.amazonaws.com/i/3hj2gsz3ipnwo2sgeftg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 40rem;
  }

  body {
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }

  nav ul {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background: rgb(0, 125, 167);
    font-weight: 700;
  }

  nav ul li {
    display: inline-block;
    padding: 20px;
  }

  article {
    min-height: 60rem;
  }

  h1 {
    font-size: 4rem;
    margin: 0;
    letter-spacing: 1rem;
    text-align: center;
    padding-top: 4rem;
  }

  h1,
  h2 {
    text-align: center;
  }

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

  p {
    color: black;
  }

  footer {
    text-align: center;
  }