Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <header>
  <a href="#" class="home">🏠</a>
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </nav>
</header>
<main id="maincontent">
  <article>
    <h1>Scrolling</h1>
    <div class="details">
      <svg class="author-img" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
      </svg>
      <span class="author">Rob O'Leary</span>
      <span class="publish-date">| Published on Apr. 16, 2022</span>
    </div>
    <img src="https://images.unsplash.com/photo-1467007849282-42dad96c2312?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="coding" />
    <p>
      <strong>Scroll down at least a screen, and then scroll up. You will see the
        "back to top" appear in the bottom-right corner.</strong>
    </p>
    <p>
      Talking about code 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
    </p>
    <p>
      Talking about code 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
    </p>
    <p>
      Talking about code 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
    </p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem nobis
      ex voluptate aliquam, dicta nam cupiditate veniam rem? Maiores velit
      voluptates placeat distinctio quisquam, eveniet qui reiciendis
      voluptas ex ipsum.
    </p>
    <p>
      Placeat eligendi sint similique neque quas. Inventore distinctio sit
      porro expedita omnis repellendus neque accusamus perferendis, iure
      alias sunt? Dicta nesciunt necessitatibus id aliquam. Exercitationem
      laudantium ratione debitis suscipit natus.
    </p>
    <p>
      Neque sit obcaecati pariatur amet porro nam non eligendi quis ducimus
      impedit consectetur, est quisquam facilis cum quaerat dolore minima
      dolorum enim ab quam totam quae sint suscipit voluptas. Sequi!
    </p>
    <p>
      Nobis, provident possimus. Commodi asperiores, omnis repellat alias
      mollitia, excepturi ullam consectetur amet a maiores harum numquam
      quam eaque aliquid praesentium, voluptatem quibusdam natus ipsam
      delectus unde adipisci! Voluptas, ab.
    </p>
    <p>
      Veritatis, doloribus cum sequi minima quis molestias illum
      reprehenderit odit libero suscipit quaerat voluptates maxime excepturi
      dicta exercitationem reiciendis accusantium adipisci numquam corrupti
      quia recusandae aspernatur in iure error! Illum?
    </p>
    <p>
      Impedit, quos minima ullam quasi deserunt adipisci minus labore? Ullam
      facere vitae nulla iure officiis. Vero, rem quaerat maxime quasi
      sapiente voluptatibus nesciunt reprehenderit voluptatum a deleniti
      est, facere quam.
    </p>
    <p>
      Quia corrupti a quo quisquam voluptatem, voluptatum tempora placeat
      aliquid labore commodi! Ea laborum veniam hic porro ut laboriosam
      nesciunt ratione natus, tempore libero? Nisi quibusdam nobis qui alias
      nesciunt.
    </p>
    <p>
      Eum praesentium libero repellat repellendus officia culpa sit porro
      veniam quae nihil iusto vero optio temporibus a dolorum aspernatur
      distinctio illum quaerat quas, voluptas magnam ut cupiditate
      blanditiis saepe. Eius!
    </p>
    <p>
      Neque quasi suscipit laboriosam doloribus ad. Veritatis commodi beatae
      nisi quo. Asperiores nisi ex tenetur ullam, consequuntur saepe ducimus
      repudiandae voluptate maiores ab quasi libero sed pariatur optio,
      laboriosam accusantium.
    </p>
    <p>
      Repellendus, amet? Ab, esse fugiat nisi ad placeat hic facilis iste
      ullam natus quidem. Quae atque voluptas modi aperiam in qui dolore aut
      nulla architecto, exercitationem voluptatum. Exercitationem, atque
      dolore.
    </p>
    <p>
      Eligendi aliquam totam laborum, eveniet fugiat dignissimos, dicta
      deleniti, fuga amet accusamus quae sequi. Repudiandae nam repellendus
      consequatur fugit et, commodi beatae iure dolore! Commodi accusamus
      similique nesciunt laboriosam! Sunt.
    </p>
    <p>
      Vero molestiae maiores nemo voluptatem cupiditate eaque eos quas
      dolore natus tempore quo mollitia saepe inventore, dolores deleniti
      esse assumenda incidunt voluptatum magnam repudiandae, facilis iure
      est. Qui, assumenda voluptate?
    </p>
    <p>
      Asperiores dolorem tempore a, delectus nobis aperiam incidunt sequi
      deserunt veritatis porro, corrupti officia. Modi repellendus pariatur
      eligendi rerum velit non earum facilis, veniam vitae magni sit
      accusantium nobis accusamus.
    </p>
    <p>
      Laboriosam voluptate odit harum voluptatibus ipsum necessitatibus, cum
      libero voluptas et, cumque numquam amet doloribus vitae velit quia
      ipsam? Impedit illo aspernatur fugiat, necessitatibus velit optio
      tempora ex deserunt nisi!
    </p>
    <p>
      Fugit ea commodi aliquid! Maxime pariatur maiores quidem ratione,
      numquam culpa est dolores autem dolorum facere nemo, voluptatibus
      consequatur earum totam quod ipsum dolor necessitatibus fuga repellat
      repellendus perferendis et.
    </p>
    <p>
      Aliquam accusamus rerum nihil reiciendis eos, dicta praesentium eum.
      Tempore provident eligendi numquam, eum eaque libero recusandae
      praesentium aut asperiores voluptas facilis dolor quos alias ut
      aliquid repellendus totam. In.
    </p>
    <p>
      Quasi hic, aliquam dicta minima rerum adipisci necessitatibus neque
      rem quae at numquam cumque ad ullam, accusantium corporis, nostrum
      aspernatur. Autem, tenetur. Aliquid maiores sequi architecto dicta
      labore incidunt debitis.
    </p>
    <p>
      Recusandae dicta nostrum distinctio suscipit. Maiores doloremque
      tempore maxime cupiditate illum praesentium, voluptate, quos, sapiente
      excepturi saepe dignissimos repudiandae laudantium soluta quae ipsam.
      Illo, quas asperiores. Nisi aspernatur quae ipsa!
    </p>
    <p>
      Maiores nostrum ducimus assumenda ea reprehenderit. A rem nihil
      labore. Dolore provident incidunt expedita sapiente, explicabo omnis
      hic ab adipisci, suscipit, quos iusto est aliquid. Numquam ipsam nulla
      id nobis?
    </p>
    <p>
      Dolore perferendis, non hic quo deserunt ratione, velit recusandae
      impedit, eligendi porro vero. Eligendi quam dolor iusto libero ipsa
      laudantium fugiat quis aliquam inventore ullam debitis, possimus
      voluptas rem mollitia.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad provident
      maxime tempora? Facere, in rerum iste laborum recusandae aspernatur
      earum, expedita eum deserunt, sint architecto quia amet. Culpa,
      officiis ipsam!
    </p>
    <p>
      Dolorum alias praesentium perspiciatis odit quo nihil, consequatur
      consequuntur numquam accusantium non, atque saepe ducimus aspernatur
      tempora est doloremque omnis ipsa obcaecati quam. Qui aliquid impedit
      expedita? Molestiae, itaque minus.
    </p>
    <p>
      Quaerat, dolores. Tempore, consectetur. Omnis modi consequuntur, quae
      rerum aliquam rem architecto quis beatae numquam? Consequatur
      quibusdam placeat dolores consequuntur voluptate. Quod, ipsum neque
      fugiat quisquam ducimus ipsa perspiciatis voluptatum?
    </p>
    <p>
      Distinctio consequatur optio repellendus repudiandae animi odio
      quibusdam vel quas sequi, ratione natus dolor ab atque provident.
      Architecto quod autem reprehenderit quisquam eaque nostrum cupiditate
      harum illum magnam. Esse, reprehenderit.
    </p>
    <p>
      Maiores perspiciatis beatae necessitatibus! Magnam doloremque ut,
      inventore consequatur minus reiciendis esse dolorum quod delectus!
      Veniam, dolore saepe quo ullam illo, quisquam quae, placeat aliquid
      sunt vitae quod delectus? Dolor?
    </p>
    <p>
      Ex aliquid sapiente facilis repudiandae natus! Perspiciatis eos
      accusamus dolorum blanditiis ullam corrupti quidem dignissimos,
      aspernatur, consequatur, earum doloremque dolor cum beatae.
      Consectetur culpa ipsum quo, deserunt voluptate nihil ex!
    </p>
    <p>
      Natus labore maiores voluptates atque excepturi fugiat ex culpa
      laudantium eius vero nulla reiciendis voluptate aliquid cupiditate
      reprehenderit tempora earum et quod, sunt eum odio vel, sint officia
      nostrum? Hic?
    </p>
    <p>
      Dolorem accusamus animi sapiente eos facilis assumenda aliquid, a
      magnam, hic incidunt labore tempora, nostrum blanditiis facere soluta
      repellendus architecto sint placeat optio dolores ducimus laboriosam?
      Exercitationem ad quae corrupti.
    </p>
    <p>
      Tenetur quaerat iste dolores odio perferendis neque consectetur quae
      commodi fuga, laboriosam amet placeat ipsam incidunt debitis tempore a
      aperiam inventore obcaecati illo rem. Accusantium ab quas ipsum
      laborum similique?
    </p>
    <p>
      Ratione sed nam molestiae nemo. Animi sed exercitationem unde, commodi
      fugiat laboriosam velit illum obcaecati doloremque veniam quod dicta
      harum, incidunt expedita iste, deserunt quisquam cumque explicabo
      sequi tempora excepturi?
    </p>
    <p>
      Iure rerum fuga culpa quam non aut quidem deserunt magni temporibus
      dolores, sed, nisi corporis omnis architecto dicta delectus quis
      laboriosam cumque dolor dolorum! Suscipit voluptatum eos dolorem
      sapiente eveniet?
    </p>
    <p>
      Necessitatibus incidunt quis dolorum consequatur cupiditate hic magni
      earum, possimus eum. Deleniti, libero. Corporis rerum suscipit,
      delectus minima ab animi quia ipsam repellendus reiciendis perferendis
      eius molestias laboriosam blanditiis mollitia!
    </p>
    <p>
      Quas aliquam magnam quaerat suscipit, dolorem distinctio excepturi
      nobis soluta officiis laudantium temporibus cum itaque nam quos
      aliquid similique modi voluptate, error vel, tenetur corrupti. Saepe
      nulla deserunt natus iure.
    </p>
    <p>
      Hic nobis minus vero, quisquam voluptates reiciendis laudantium alias.
      Distinctio, repellat magnam nam rerum quidem provident sit ipsam
      blanditiis animi a autem sunt, eius similique beatae quia. Quia, quos
      voluptatibus.
    </p>
    <p>
      Ea vero consequatur qui earum doloribus fugiat ex? Omnis vero
      voluptatem consequuntur mollitia doloribus non et voluptates nemo
      tempora molestiae doloremque nulla unde rem at iusto, totam quidem
      deserunt voluptate.
    </p>
    <p>
      Similique nisi enim voluptate quaerat consequuntur eligendi, magni
      facere alias eveniet rem amet. Quidem, ipsam error veniam molestiae
      numquam qui labore voluptate soluta inventore quod rem magnam libero,
      dolorem laborum?
    </p>
    <p>
      Debitis, velit quibusdam! Error sed rerum quia rem dolore magnam at
      impedit nulla. Aut dolore, ratione voluptatum dolor possimus facere
      nihil, blanditiis distinctio corrupti consectetur doloremque error
      voluptates molestias praesentium!
    </p>
    <p>
      Totam cum hic error libero iusto recusandae nostrum, iure autem fugit
      beatae quis modi facere voluptatibus consequuntur, quia sed vero at
      officiis voluptas sint magnam. Quo deserunt deleniti temporibus dicta?
    </p>
    <p>
      Laudantium labore impedit suscipit quidem consequatur illo molestiae
      animi tempore! Voluptatum fugiat modi aut ducimus minima facilis,
      iste, cum laborum quis vero alias, perferendis nulla? Voluptatem
      corrupti maiores corporis rerum?
    </p>
    <p>
      Necessitatibus esse nisi provident cumque vero est expedita iusto
      earum vel temporibus harum non officia ipsam, eveniet saepe. Quas qui
      sunt dolor natus quam a sapiente, libero voluptatibus itaque eligendi!
    </p>
  </article>
</main>
<footer>
  <nav aria-label="Footer navigation">
    <div class="footer-links">
      <ul>
        <li>
          <h2>What we do</h2>
        </li>
        <li><a href="/newsletters/">Newsletters</a></li>
        <li><a href="/community/">Forums</a></li>
      </ul>
      <ul>
        <li>
          <h2>About</h2>
        </li>
        <li><a href="/about-us/">Our story</a></li>
        <li><a href="/legals/">Terms of use</a></li>
        <li><a href="/privacy-policy/">Privacy policy</a></li>
        <li>
          <a href="#">Corporate memberships</a>
        </li>
      </ul>
      <ul>
        <li>
          <h2>Contact</h2>
        </li>
        <li><a href="/contact-us/">Contact us</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="/write-for-us/">Write an article for us</a></li>
        <li>
          <a href="#/" target="_blank">Advertise</a>
        </li>
      </ul>
      <ul class="social">
        <li>
          <h2>Connect</h2>
        </li>
        <li>
          <a href="#" rel="noopener noreferrer" target="_blank" aria-label="See facebook account"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="social-icon fa-facebook-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
            </svg></a><a href="#" rel="noopener noreferrer" target="_blank" aria-label="See twitter account"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="social-icon fa-twitter-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
            </svg></a><a href="#" rel="noopener noreferrer" target="_blank" aria-label="See RSS feed"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss-square" class="social-icon fa-rss-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
            </svg></a>
        </li>
      </ul>
    </div>
    <p class="copyright">
      © 2010 –
      <!-- -->2022
      <!-- -->
      Yada Yada Pty. Ltd.
    </p>
  </nav>
</footer>
!

CSS 

              
                *,
*:before,
*:after {
  box-sizing: border-box;
}

/* scroll-related */

h1 {
  position: sticky;
  top: 0;
  background-color: white;
}

.scroll-down:after {
  content: " down";
  background-color: green;
}

.scroll-up:after {
  content: " up";
  background-color: red;
}

/* other styles */
body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  overflow-x: hidden;
}

body > header {
  display: flex;
  align-items: center;
  min-height: 4em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0;
  background-color: white;
}

.home {
  padding: 0 2rem 0 0.5rem;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  padding-right: 1rem;
}

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

main {
  display: grid;
  max-width: 800px;
  margin: 20px auto;
}

.details {
  display: grid;
  grid-template-columns: auto max-content 1fr;
  align-items: center;
  grid-gap: 10px;
  margin-bottom: 30px;
  width: 100%;
}

h1 {
  position: sticky;
  top: 0;
  font-family: Raleway, serif;
  font-size: 2.25em;
  line-height: 1.25em;
  grid-column: 1 / -1;
}

.author-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

article img {
  display: block;
  width: 100%;
}

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

footer {
  background-color: black;
  color: white;
  margin: 0;
  font-size: 1.1rem;
}

footer nav {
  margin: 0 auto;
  max-width: 1248px;
  width: 100%;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-evenly;
  padding: 16px;
  width: 100%;
}

@media screen and (max-width: 700px) {
  .footer-links {
    grid-template-columns: auto;
  }
}

.footer-links ul {
  display: flex;
  flex-direction: column;
}

.social {
  align-self: flex-start;
}

.social-icon {
  width: 1.5em;
  margin-right: 0.5rem;
}

.copyright {
  text-align: center;
  padding: 5px;
  margin: 0;
}
!

JS 

              
                let mainHeading = document.querySelector("h1");
let previousScrollPosition = 0;

const isScrollingDown = () => {
  let goingDown = false;

  let scrollPosition = window.pageYOffset;

  if (scrollPosition > previousScrollPosition) {
    goingDown = true;
  }

  previousScrollPosition = scrollPosition;

  return goingDown;
};

const handleScroll = () => {
  if (isScrollingDown()) {
    mainHeading.classList.add("scroll-down");
    mainHeading.classList.remove("scroll-up");
  } else {
    mainHeading.classList.add("scroll-up");
    mainHeading.classList.remove("scroll-down");
  }
};

// throttle function from lodash library
const scrollThrottle = _.throttle(handleScroll, 100);
window.addEventListener("scroll", scrollThrottle);
!
999px

Console