CodePen Embed - Inverted Colors

<header class="header">
  <nav class="navigation">
    <ul class="navigation__list navigation__list--inline">
      <li class="navigation__item">
        <a href="#about" class="navigation__link navigation__link--active">About</a>
      </li>
      <li class="navigation__item">
        <a href="#work" class="navigation__link">Work</a>
      </li>
      <li class="navigation__item">
        <a href="#contact" class="navigation__link">Contact</a>
      </li>
    </ul>
  </nav>
</header>
<main class="main">
  <section class="section section--dark section--full" id="about">
    <div class="grid">
      <h2>About</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi
        veniam neque, hic mollitia adipisci explicabo asperiores eaque
        nostrum labore! Nihil earum unde quia numquam accusantium
        perspiciatis ea maxime nam similique.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Consectetur natus magni quos asperiores tempora eos praesentium.
      </p>
    </div>
  </section>
  <section class="section section--full" id="work">
    <div class="grid">
      <h2>Work</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        recusandae doloribus illo officia sunt obcaecati?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi
        veniam neque, hic mollitia adipisci explicabo asperiores eaque
        nostrum labore! Nihil earum unde quia numquam accusantium
        perspiciatis ea maxime nam similique.
      </p>
    </div>
  </section>
  <section class="section section--dark section--full" id="contact">
    <div class="grid">
      <h2>Contact</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi
        veniam neque, hic mollitia adipisci explicabo asperiores eaque
        nostrum labore! Nihil earum unde quia numquam accusantium
        perspiciatis ea maxime nam similique.
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Cupiditate, pariatur.
      </p>
    </div>
  </section>
</main>
<footer class="footer">
  <ul class="language-switch">
    <li>
      <a href="#" class="language-switch__link language-switch__link--active">EN</a>
    </li>
    <li>
      <a href="#" class="language-switch__link">DE</a>
    </li>
  </ul>

  <ul class="social-profiles">
    <li>
      <a href="https://github.com/marcobiedermann" class="social-profiles__link" rel="noopener noreferrer" target="_blank">
        <svg class="icon">
          <use xlink:href="#github" />
        </svg>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/BiedermannMarco" class="social-profiles__link" rel="noopener noreferrer" target="_blank">
        <svg class="icon">
          <use xlink:href="#twitter" />
        </svg>
      </a>
    </li>
    <li>
      <a href="https://www.instagram.com/marcobiedermann/" class="social-profiles__link" rel="noopener noreferrer" target="_blank">
        <svg class="icon">
          <use xlink:href="#instagram" />
        </svg>
      </a>
    </li>
  </ul>
</footer>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="github" viewBox="0 0 24 24">
    <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z" />
  </symbol>

  <symbol id="instagram" viewBox="0 0 24 24">
    <path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" />
  </symbol>

  <symbol id="twitter" viewBox="0 0 24 24">
    <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
  </symbol>
</svg>

@use postcss-preset-env {
  stage: 0;
}


:root {
  --color-text: #000;
  --color-background: #f0f0f0;
}

* {
  background-color: transparent;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-text);
  color: var(--color-text);
  font-family: Merriweather, serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.875;
  margin: 0;
  min-height: 100vh;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-background);
}

body::-webkit-scrollbar {
  height: 0.5em;
  width: 0.25em;
}

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

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

h2 {
  font-family: Lato, sans-serif;
  font-size: 6rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.125em;
}

p {
  margin-bottom: 1.5em;
  margin-top: 0;
  max-width: 72ch;
}

svg {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  vertical-align: middle;
  width: 1em;
}

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 90%;
}

.header,
.footer {
  color: var(--color-background);
  display: flex;
  font-family: Lato, sans-serif;
  inset-inline: 0;
  mix-blend-mode: difference;
  padding: 1.5em 3em;
  position: fixed;
  z-index: 1;
}

.header {
  inset-block-start: 0;
  justify-content: flex-end;
}

.icon {
  font-size: 1.75rem;
}

.footer {
  inset-block-end: 0;
  justify-content: space-between;
}

.language-switch {
  display: flex;
  list-style: none;
  gap: 1em;
  margin: 0;
  padding: 0;
}

.language-switch__link--active {
  font-weight: 700;
}

.navigation {
  font-size: 1.33rem;
  text-transform: lowercase;
}

.navigation__link::after {
  content: ".";
}

.navigation__link--active {
  font-weight: 700;
}

.navigation__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation__list--inline {
  display: flex;
  gap: 1.5em 3em;
}

.section {
  background-color: var(--color-background);
  display: grid;
  padding-bottom: 6em;
  padding-top: 6em;
  place-items: center;
  position: relative;
}

.section ::selection {
  background-color: var(--color-text);
  color: var(--color-background);
}

.section--dark {
  background-color: var(--color-text);
  color: var(--color-background);
}

.section--dark ::selection {
  background-color: var(--color-background);
  color: var(--color-text);
}

.section--full {
  min-height: 100vh;
}

.social-profiles {
  display: flex;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-profiles__link {
  color: var(--color-background);
}

View Compiled

// nothing to see here

View Compiled

This Pen is owned by Marco Biedermann on CodePen.

See more by @marcobiedermann on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.