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 

              
                <a href="#main" class="skip-link">Skip to main content</a>
<header>
  <div class="container">
    <h1>Style Stage</h1>
    <h2>A modern CSS showcase styled by community contributions</h2>
    <p>
      Maintained by <a href="https://twitter.com/5t3ph">Stephanie Eckles</a> of
      <a href="https://moderncss.dev">ModernCSS.dev</a>
    </p>
    <a href="https://github.com/5t3ph/stylestage" class="link-github"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
        </svg>
      </span>
      Star on Github</a>
  </div>
</header>
<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#guidelines">Guidelines</a></li>
    <li><a href="#contribute">Contribute</a></li>
    <li><a href="#files">Files</a></li>
    <li><a href="/styles/">All Styles</a></li>
    <li><a href="/resources/">Resources</a></li>
  </ul>
</nav>

<main id="main" tabIndex="-1">
  <div class="container">
    <article id="about">
      <section class="container">
        <h2>Setting the Stage</h2>
        <p>
          In 2003, <a href="http://daveshea.com/projects/zen/">Dave Shea</a> began a legendary
          project called <a href="http://www.csszengarden.com/">CSS Zen Garden</a> that provided
          a demonstration of "what can be accomplished through CSS-based design" until
          submissions stopped in 2013.
        </p>
        <p>
          <strong>Style Stage</strong> seeks to rekindle that spirit by providing this page as
          the base HTML for contributors - like you! - to re-style by submitting an alternate
          stylesheet.
        </p>
        <blockquote>
          <p>
            <strong>How it works:</strong> Visit the
            <a href="/styles/">"All Styles"</a> directory page and select a style to view. A
            page with identical content to this one will be presented with a new design provided
            from a contributed stylesheet. CSS practitioners of any skill level are invited to
            <a href="#contribute">submit a stylesheet</a>!
          </p>
        </blockquote>
        <p>
          The HTML for this page was created to be semantic, accessible, and free of nearly all
          other opinions. Nested sectioning elements with the class `.container` serve as
          additional style aids since you do not have access to alter the base HTML. IDs are
          included where needed for nav anchors or accessibility, and a small number of
          additional classes are provided for key elements without IDs. Don't forget the
          `.skip-link`!
        </p>
      </section>
      <section class="container">
        <h2>Modern CSS Under the Spotlight</h2>
        <p>
          Modern CSS has increased and improved the available CSS properties and layout
          behaviors, and browser support is nearly in sync for most high-touch features.
        </p>
        <p>Some examples of modern CSS include:</p>
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
          <li>custom variables</li>
          <li>@supports()</li>
          <li>gradients</li>
          <li>animation</li>
          <li>3D transforms</li>
          <li>object-fit</li>
          <li>:focus-within</li>
          <li>calc()</li>
          <li>min() / max() / clamp()</li>
          <li>viewport units</li>
          <li>scroll-(margin/padding/snap)</li>
          <li>position: sticky</li>
          <li>two-value display</li>
          <li>expanded media query values</li>
          <li>variable fonts</li>
        </ul>
        <p>
          We also collectively have an improved understanding of what it takes to make
          accessible experiences.
        </p>
        <p>
          <a href="#contribute">Join Style Stage as a contributor</a> to refresh your CSS
          skills, and learn from others!
        </p>
      </section>
    </article>
    <article id="guidelines">
      <section class="container">
        <h2>Guidelines</h2>
        <p>
          Contributing a stylesheet to Style Stage means you agree to abide by
          <a href="/guidelines/">our full guidelines</a>.
        </p>
        <h3>TL;DR</h3>
        <p>
          All submissions will be autoprefixed and prepended with the
          <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA license</a>
          as well as attribution using the metadata you provide. You may use any build setup you
          prefer, but the final submission should be the compiled, unminified CSS. You retain
          the copyright to original graphics and must ensure all graphics used are appropriately
          licensed. All asset links, including fonts, must be absolute to external resources.
          Stylesheets will be saved into the Github repo, and detected changes that violate the
          guidelines are cause for removal.
        </p>
        <p>
          Ensure your design is responsive, and that it passes accessible contrast (we'll be
          using aXe to verify). Animations should be removed via `prefers-reduced-motion`.
          Cutting-edge techniques should come with a fallback if needed to not severely impact
          the user experience. No content may be permanently hidden, and hidden items must come
          with an accessible viewing technique. Page load time should not exceed 3 seconds.
        </p>
        <p>
          Most importantly - have fun and learn something new! Check out the
          <a href="/resources/">resources</a> for tips and inspiration.
        </p>
        <a href="/guidelines/" class="link-guidelines">Review full guidelines</a>
      </section>
    </article>
    <article id="contribute">
      <section class="container">
        <h2>Contribute</h2>
        <p>All who enjoy the craft of writing CSS are welcome to contribute!</p>
        <p>
          By participating as a contributor, your work will be shared with your provided
          attribution as long as Style Stage is online, your stylesheet link and any asset links
          remain valid, and all <a href="/guidelines/">contributor guidelines</a> are adhered
          to.
        </p>
      </section>
      <section class="container">
        <h3>Steps to Contribute</h3>
        <ol>
          <li>
            Download the source files listed below to use as a reference to build your
            stylesheet.
          </li>
          <li>
            Host your completed stylesheet at a public URL, and ensure all asset links are
            absolute URLs to external resources.
          </li>
          <li>
            <a href="https://github.com/5t3ph/stylestage">Create a pull request</a> to add your
            information as a unique .json file to: src/_data/styles. The schema is detailed in
            the repo README, and you can review the FAQ on
            <a href="/guidelines/#how-do-i-create-a-pull-request-pr">creating a pull request</a>.
          </li>
          <li>
            If your contribution abides by the previously listed guidelines, your submission
            will be added!
          </li>
        </ol>
      </section>
      <footer id="files">
        <div class="container">
          <h3>Source Files</h3>
          <a href="/source-files/style.css" class="link-downloadcss" download>Download CSS</a>
          <a href="/source-files/stylestage.html" class="link-downloadhtml" download>Download HTML</a>
          <a href="https://codepen.io/5t3ph/pen/b493845ae41e836889dd84fdbb0f5291" class="link-codepen" download>Fork the CodePen</a>
        </div>
      </footer>
    </article>
  </div>
</main>

<aside class="profile" aria-labelledby="profile-title">
  <div class="container">
    <h4 id="profile-title">Currently Staged Style</h4>
    <ul>
      <li class="profile-title"><span>Title:</span> <span>Main Stage</span></li>
      <li class="profile-author"><span>Author:</span> <span>Stephanie Eckles</span></li>
      <li class="profile-twitter">
        <span>Twitter:</span> <span><a href="https://twitter.com/5t3ph">5t3ph</a></span>
      </li>
      <li class="profile-website">
        <span>Website:</span> <span><a href="https://moderncss.dev">ModernCSS.dev</a></span>
      </li>
    </ul>
    <a href="/styles/css/main-stage.css">View Stylesheet</a>
  </div>
</aside>

<aside id="styles">
  <div class="container">
    <h2>Featured Styles</h2>
    <ul class="features">
      <li>
        <span>
          <a href="/styles/web-2.0-lobster-party">Web 2.0 Lobster Party<span aria-hidden="true"></span></a>
          <span>by Andy Bell</span>
        </span>
      </li>
      <li>
        <span>
          <a href="/styles/retroish">Retroish<span aria-hidden="true"></span></a>
          <span>by Jean Louise Tiston</span>
        </span>
      </li>
      <li>
        <span>
          <a href="/styles/transparency">Transparency<span aria-hidden="true"></span></a>
          <span>by Jens Oliver Meiert</span>
        </span>
      </li>
    </ul>

    <a href="/styles/" class="link-allstyles">View All Styles</a>
  </div>
</aside>

<footer class="page-footer">
  <div class="container">
    <p>
      Created and maintained by
      <a href="https://twitter.com/5t3ph">Stephanie Eckles (@5t3ph)</a>
    </p>
    <ul>
      <li>
        <a href="https://twitter.com/5t3ph" class="link-twittercontact">Contact on Twitter</a>
      </li>
      <li>
        <a href="https://github.com/5t3ph/stylestage" class="link-github"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
            <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
          </svg>
          Star on Github</a>
      </li>
      <li><a href="/feed/" class="link-rss">RSS Feed</a></li>
      <li><a href="/subscribe/" class="link-support">Subscribe to Updates</a></li>
    </ul>
    <p>
      Crafted with semantic, accessible HTML and CSS, <strong>Style Stage</strong> is generated
      with <a href="https://11ty.dev">11ty</a> and hosted on
      <a href="https://netlify.com">Netlify</a>. This project uses
      <a href="https://postcss.org/">PostCSS</a> with
      <a href="https://github.com/postcss/autoprefixer">autoprefixer</a>.
    </p>
    <p>
      Contributors retain copyright of all graphics used, and styles are available under
      <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA</a>
    </p>
  </div>
</footer>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css2?family=Kufam:wght@600&display=swap");

:root {
  --color-primary: #6f5be1;
  --color-secondary: #321325;
  --color-background: #f9f9f9;
  --color-text: var(--color-secondary);
  --color-anchor: var(--color-primary);
  --font-family: "Kufam", sans-serif;
  --font-size-h1: 4rem;
  --font-size-h2: 3rem;
  --font-size-h3: 2rem;
  --font-size-h4: 1.35rem;
  --font-size-text: 1.15rem;
  --border-radius: 8px;
}

/*
 * [Modified] Modern CSS Reset
 * @link https://github.com/hankchizljaw/modern-css-reset
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4 {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// Begin theme styles

svg {
  display: inline-block;
  width: 1rem;
  fill: currentColor;
  margin-right: 0.25em;
}

.container {
  width: 100%;
  max-width: 60ch;
  margin: 10vh auto 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family);
}

a:not([class]) {
  color: var(--color-anchor);
}

a[class] {
  background-color: var(--color-anchor);
  color: #fff;
  padding: 0.5em 1em;
  border-radius: var(--border-radius);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav {
  margin-top: 10vh;
  font-size: 1.5rem;
}

nav,
main,
footer {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    li {
      margin: 0.25rem;
    }

    a:not([class]) {
      padding: 0.5em;
    }
  }
}

h1 {
  font-size: var(--font-size-h1);
  color: var(--color-primary);
}

h2 {
  font-size: var(--font-size-h2);
}

header h2 {
  font-size: calc(var(--font-size-h2) * 0.8);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
}

header {
  text-align: center;

  * + * {
    margin-top: 3vh;
  }
}

main ul {
  background: #eee;
  border-radius: var(--border-radius);
  display: flex;

  li {
    &:nth-child(odd) {
      font-weight: bold;
    }
  }
}

// View classes and ids
// *[class],
// *[id] {
//   position: relative;
//   outline: 2px dashed red;

//   &::before,
//   &::after {
//     position: absolute;
//     top: 0;
//     left: 0;
//     z-index: 1;
//     padding: 0.25em;
//     background-color: red;
//     color: #fff;
//     font-weight: normal;
//     font-family: sans-serif;
//     font-size: .9rem;
//     border: 1px solid #fff;
//   }

//   &[class]::before {
//     content: "." attr(class);
//   }

//   &[id]::after {
//     content: "#" attr(id);
//     right: 0;
//     left: auto;
//     background-color: blue;
//   }

//   &[id] {
//     outline-color: blue;
//   }
// }

.profile,
#styles {
  text-align: center;

  ul {
    margin-bottom: 3vh;

    li {
      margin-top: 0.5rem;
    }
  }
}

#files {
  text-align: center;

  a {
    margin: 0.25em;
  }
}

.page-footer {
  p:first-child {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
  }
}
!

JS
!
999px

Console