Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ add another resource

JavaScript

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.

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

Behavior

Save Automatically?

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

              
                <main class="wrapper flow">
  <h1 class="visually-hidden">HTML, CSS and a sprinkling of JavaScript…</h1>
  <div aria-hidden="true" class="header flow">
    <div class="header__display-text">HTML, CSS</div>
    <div>and a sprinkling of</div>
    <div class="header__display-text">JavaScript</div>
  </div>
  <p>It’s all you need to build a solid, resillient and importanty, inclusive front-end that everyone can enjoy, regardless of their device power, connection speed and environment.</p>
  <h2>How to get it done</h2>
  <div class="steps">
    <ul class="auto-grid" role="list">
      <li class="card flow">
        <h3>Progressive Enhancement</h3>
        <p>Build for everyone, not just those with fast connections and devices.</p>
      </li>
      <li class="card flow">
        <h3>Modern CSS</h3>
        <p>CSS is so powerful and most of the new features like layout, logical properties, custom properties and useful units are fully supported in all browsers.</p>
      </li>
      <li class="card flow">
        <h3>Semantic HTML</h3>
        <p>Using semantic HTML elements helps everyone. It’s amazingly useful for assistive tech, like screen readers. If the CSS doesn’t load, the page will still make sense. You get all the right JavaScript events, too. Everyone is a winner.</p>
      </li>
      <li class="card flow">
        <h3>Go low tech</h3>
        <p>The lower tech you go, the least likely it is that your page will break. And it will break. The vast majority of internet users don’t use hi-spech devices with fast connections. Build for them, not for yourself.</p>
      </li>
    </ul>
  </div>
</main>
<footer class="wrapper" role="contentinfo">
  <div class="cluster">
    <svg with="3em" height="3em" viewBox="0 0 60 57" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#a)">
        <path opacity=".16" d="M4.841 13.334.208 16.005 23.34 29.332l4.672-2.643L4.84 13.334ZM27.974 37.372l-4.634 2.67.039 16.026 4.634-2.67-.039-16.026ZM27.974 26.842l-4.634 2.671.039 5.189 4.634-2.672-.039-5.188Z" fill="#838383" />
        <path opacity=".1" d="M55.159 13.332 31.988 26.687l4.625 2.67L59.79 15.998l-4.631-2.667ZM32.074 26.756l-.086 26.64 4.633 2.67.084-26.644-4.631-2.666Z" fill="#838383" />
        <g opacity=".13">
          <path opacity=".85" d="m6.889 5.404-.094 5.288L29.966 23.94l23.172-13.248-.12-5.28L29.967 18.78 6.89 5.404Z" fill="#838383" />
        </g>
        <g opacity=".11">
          <path opacity=".71" d="M39.135 2.848 25.322 10.69l4.635 2.671 9.148-5.173.03-5.34Z" fill="#838383" />
        </g>
        <path opacity=".07" d="m50.504 26.83-9.248 5.201v5.463l13.926-8.054-4.678-2.61Z" fill="#838383" />
        <path opacity=".05" d="m55.123 29.151-4.619-2.322 4.619-2.7v5.022Z" fill="#838383" />
        <path opacity=".07" d="m55.124 34.699-13.78 8.005-.127 5.353L59.802 37.31l-4.678-2.611Z" fill="#838383" />
        <path opacity=".1" d="m9.374 26.688-4.634 2.67-.038-5.188 4.672 2.518Z" fill="#838383" />
        <path opacity=".1" d="m9.067 26.842-4.264 2.517L23.34 40.042l4.634-2.67-18.907-10.53ZM4.718 34.865.454 37.383l18.29 10.676v-5.343l-14.026-7.85Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="m4.841 13.095 23.38 13.474v5.58l-4.427 2.553 4.426 2.55v16.265l-4.841 2.79L0 42.833v-5.58l4.426-2.551L0 32.15V15.886l4.841-2.791Zm0 .478L.415 16.125V31.91l4.841 2.79-4.841 2.79v5.103l22.964 13.235 4.426-2.55V37.49l-4.841-2.79 4.841-2.79v-5.103L4.841 13.573Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="m.087 16.18.208-.36L23.368 29.12l4.53-2.611.208.358-4.738 2.731L.088 16.18ZM23.548 40.037v16.058h-.415V40.037h.415ZM4.942 34.522l14.01 8.075v5.821L.1 37.552l.207-.359 18.231 10.508v-4.865L4.734 34.88l.208-.359ZM4.72 29.18l4.424-2.624.212.356-4.424 2.624-.212-.356Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="m4.596 23.824 18.537 10.52v-5.012h.415v5.725L5.011 24.536v4.703l18.33 10.564 4.53-2.61.207.358-4.738 2.73L4.596 29.48v-5.655ZM55.159 13.093 60 15.883V32.15L41.464 42.833v4.864L60 37.013v5.819L36.621 56.305l-4.841-2.791V26.567l23.379-13.474Zm0 .478L32.195 26.807v26.469l4.426 2.551 22.964-13.235v-4.861L41.049 48.414v-5.82L59.585 31.91V16.122l-4.426-2.55Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M55.404 23.638v5.757L41.05 37.748v-5.836l14.355-8.274Zm-13.94 8.513v4.876l13.525-7.87v-4.802l-13.525 7.796Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="m55.058 29.463-4.7-2.47.194-.366 4.7 2.47-.194.366ZM59.894 16.178 36.613 29.596l-4.74-2.732.208-.359 4.532 2.612L59.686 15.82l.208.359Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M36.79 29.322v26.763h-.414V29.322h.415ZM55.256 34.518l4.678 2.611-.202.362-4.679-2.611.203-.362Z" fill="#838383" />
        <path d="m34.633.574 4.142 2.387v5.702l.74-.414 8.996-4.998 4.129 2.384v4.77L29.966 23.473 7.293 10.405v-4.77l4.142-2.387 9.03 5.204.25.143.248-.143L34.633.573v.001Zm0-.575L20.714 8.021l-9.28-5.348-4.639 2.674v5.342l23.171 13.357L53.138 10.69V5.347l-4.622-2.663-9.243 5.137V2.674L34.633 0v-.002Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="m39.01 2.513.25.43-13.44 7.747 4.138 2.385 9.024-5.104.245.433-9.27 5.244-5.133-2.958L39.01 2.513ZM29.717 18.848 6.765 5.62l.249-.43L30.215 18.56v5.318h-.498v-5.03Z" fill="#838383" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M29.833 18.49 52.894 5.197l.25.43L30.081 18.92l-.25-.43Z" fill="#838383" />
      </g>
      <defs>
        <clipPath id="a">
          <path fill="#fff" d="M0 0h60v56.308H0z" />
        </clipPath>
      </defs>
    </svg>
    <p>And that’s exactly how we do it at <a href="//set.studio">Set Creative Studio</a>.</p>
  </div>
</footer>
              
            
!

CSS

              
                @font-face {
  font-family: "slussen_stencilbold";
  src: url("https://assets.codepen.io/174183/slussen-stencil-bold-webfont.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-light: #fbf3ea;
  --color-light-glare: #fff9f2;
  --color-dark: #122932;
  --color-dark-glare: #154254;
  --color-primary: #b43741;

  --radius: 0.25rem;

  /* Type scale https://utopia.fyi/type/calculator?c=320,16,1.125,1200,20,1.381,7,1,&s=,1.5%7C2%7C3%7C4%7C6,l-3xl */
  --step--1: clamp(0.91rem, calc(0.88rem + 0.03vw), 0.89rem);
  --step-0: clamp(1rem, calc(0.91rem + 0.45vw), 1.25rem);
  --step-1: clamp(1.13rem, calc(0.91rem + 1.09vw), 1.73rem);
  --step-2: clamp(1.27rem, calc(0.86rem + 2.03vw), 2.38rem);
  --step-3: clamp(1.42rem, calc(0.74rem + 3.4vw), 3.29rem);
  --step-4: clamp(1.6rem, calc(0.53rem + 5.35vw), 4.55rem);
  --step-5: clamp(1.8rem, calc(0.17rem + 8.14vw), 6.28rem);
  --step-6: clamp(2.03rem, calc(-0.39rem + 12.08vw), 8.67rem);
  --step-7: clamp(2.28rem, calc(-1.24rem + 17.63vw), 11.98rem);

  /* Space scale https://utopia.fyi/space/calculator?c=320,16,1.125,1200,20,1.381,7,1,&s=,1.5%7C2%7C3%7C4%7C6,l-3xl */
  --space-xs: clamp(0.5rem, calc(0.45rem + 0.23vw), 0.63rem);
  --space-s: clamp(1rem, calc(0.91rem + 0.45vw), 1.25rem);
  --space-m: clamp(1.5rem, calc(1.36rem + 0.68vw), 1.88rem);
  --space-l: clamp(2rem, calc(1.82rem + 0.91vw), 2.5rem);
  --space-xl: clamp(3rem, calc(2.73rem + 1.36vw), 3.75rem);
  --space-2xl: clamp(4rem, calc(3.64rem + 1.82vw), 5rem);
  --space-3xl: clamp(6rem, calc(5.45rem + 2.73vw), 7.5rem);

  /* Space scale one-up pairs */
  --space-s-m: clamp(1rem, calc(0.68rem + 1.59vw), 1.88rem);
  --space-m-l: clamp(1.5rem, calc(1.14rem + 1.82vw), 2.5rem);
  --space-l-xl: clamp(2rem, calc(1.36rem + 3.18vw), 3.75rem);
  --space-xl-2xl: clamp(3rem, calc(2.27rem + 3.64vw), 5rem);
  --space-2xl-3xl: clamp(4rem, calc(2.73rem + 6.36vw), 7.5rem);

  /* Space scale custom pairs */
  --space-l-3xl: clamp(2rem, calc(0rem + 10vw), 7.5rem);
}

/* Global CSS */

/* Blocks */

/* Compositions */

/* Utilities */

              
            
!

JS

              
                
              
            
!
999px

Console