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 class="header">

  <nav class="nav">
    <ul class="nav__items wrapper">

      <li class="nav__item">
        <a href="#podtytul-1" class="nav__link">Podtytuł 1</a>
      </li>

      <li class="nav__item">
        <a href="#podtytul-2" class="nav__link">Podtytuł 2</a>
      </li>

      <li class="nav__item">
        <a href="#podtytul-3" class="nav__link">Podtytuł 3</a>
      </li>

    </ul>
  </nav>

</header>

<main>
  <article class="wrapper">

    <h1>Przykładowy artykuł</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum ultrices ipsum vel egestas. Quisque in pharetra mi, ut laoreet enim. Mauris mollis leo nibh, eget porttitor arcu facilisis vitae. Vivamus consectetur, dolor in interdum rutrum, velit nisl lobortis lacus, a finibus dui arcu sed ex. Maecenas convallis, ex sed pellentesque cursus, ex elit placerat purus, id accumsan sem massa et tortor. Aliquam cursus tempor nisi, eget venenatis purus dapibus sed. Nam finibus rutrum augue, vitae placerat ante ornare in. Fusce rutrum tortor cursus eleifend euismod. Cras elementum aliquet diam, sed molestie neque congue non. Quisque in leo at justo accumsan convallis eu ut ex. Curabitur nec faucibus dui. Aenean congue urna nunc, in placerat purus elementum finibus. Aliquam id velit sed risus facilisis faucibus ut ac felis. Integer ac purus fermentum, imperdiet ex non, sodales ante.</p>

    <p>Nunc eu risus eleifend felis convallis finibus sed non arcu. Phasellus non erat eget nisl elementum vehicula. Vestibulum gravida porttitor lacus vel porta. Aliquam lorem magna, imperdiet eu felis eu, dignissim efficitur enim. Quisque rhoncus enim eu neque porta lobortis. Ut in facilisis lacus. Ut neque neque, vestibulum ut varius a, lobortis at lorem. Morbi vitae accumsan nunc. Fusce suscipit bibendum turpis at ultrices. Curabitur lacinia mattis pulvinar. Maecenas molestie neque a malesuada pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus euismod pharetra ligula sit amet tincidunt. Donec odio lacus, mollis interdum sodales ac, dignissim sed sem. Vivamus pellentesque lacus nec mi sollicitudin aliquam.</p>

    <h2 id="podtytul-1">Podtytuł 1</h2>

    <p>In mattis metus accumsan velit consectetur fringilla. Aliquam scelerisque felis eu magna convallis, vel tempus nisi luctus. Praesent ultricies urna et tincidunt consectetur. Sed faucibus ex nunc, sit amet euismod nunc ultrices quis. Donec convallis diam id mauris molestie molestie. Donec eget rhoncus massa. Nullam ac sapien vitae mauris dapibus vestibulum eu sed risus. Cras sodales id diam non aliquet. Pellentesque vehicula at metus id aliquam. Praesent vel leo eu velit tincidunt pharetra. Integer placerat mi eget venenatis posuere. Morbi in sem bibendum odio vehicula maximus. Quisque sit amet enim et lacus consequat porttitor.</p>

    <p>Nulla sit amet justo nisi. In dictum felis vel sem dictum lobortis. Suspendisse non luctus nulla. Aliquam tincidunt vulputate ex ac sollicitudin. Proin pulvinar sapien ornare, dapibus orci non, pharetra mi. Quisque mollis porta pharetra. Morbi vitae orci et urna blandit dignissim volutpat posuere tortor. Maecenas finibus dignissim tempus. Aliquam lacus nulla, auctor sit amet mi eget, convallis tempus eros. Quisque euismod turpis congue, ultricies lectus id, posuere metus.</p>

    <h2 id="podtytul-2">Podtytuł 2</h2>

    <p>Fusce justo risus, scelerisque a magna sed, luctus iaculis ante. Vestibulum et ultrices risus. Quisque consequat tellus at diam ultrices interdum. Suspendisse commodo fringilla lacus eget pretium. Integer blandit hendrerit ligula, ac fringilla neque rutrum vel. Pellentesque ut tempus odio. Suspendisse bibendum tellus elit, non blandit velit accumsan ultrices. Mauris laoreet pharetra placerat. Integer vitae arcu ut nisl facilisis varius. Etiam tellus odio, volutpat quis euismod in, feugiat eu velit. Curabitur sed arcu molestie, consequat ligula sit amet, tempus nibh. Nunc pellentesque velit quis tellus vehicula, at blandit ligula porttitor. Ut eget elit consectetur, gravida tortor vitae, euismod lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

    <p>Vivamus ut purus porta, pulvinar dolor non, imperdiet est. Aenean mattis ante eu ligula imperdiet auctor. Etiam ultricies neque in interdum vehicula. Vestibulum imperdiet justo eu felis mattis egestas. Integer maximus sapien lectus, in fermentum est dictum nec. Sed quis sapien sit amet arcu laoreet iaculis. Nunc sed nulla sit amet augue blandit varius. Quisque nec vehicula lectus, ac ultrices magna. Integer porta varius sapien, non sodales felis pulvinar quis. Phasellus a diam vel eros finibus fringilla. Maecenas iaculis libero quis nulla varius, sit amet laoreet magna semper. Fusce dictum lacinia feugiat.</p>

    <h2 id="podtytul-3">Podtytuł 3</h2>

    <p>Vivamus maximus dui ex, ac pharetra est eleifend id. Nunc sagittis eget nulla nec facilisis. Donec lectus risus, fringilla nec tellus nec, porta venenatis ex. Mauris finibus eleifend ornare. Fusce ex enim, porta non placerat tempor, tincidunt id tellus. Curabitur vestibulum, sapien in dictum ornare, enim urna consequat massa, in finibus libero ipsum nec ex. Pellentesque aliquet massa id odio egestas interdum.</p>

    <p>Proin dolor tellus, feugiat quis iaculis ut, condimentum ac tellus. Morbi a finibus velit. Nulla et placerat felis. Vivamus sodales libero a arcu sodales tincidunt at at diam. Aenean varius ut lorem vel mollis. Aenean eu orci ac dolor tincidunt porttitor in id urna. Morbi commodo luctus felis, id congue lacus bibendum pulvinar. Quisque id justo nibh. Vivamus placerat neque non massa lacinia pretium. Nullam facilisis scelerisque nisl vitae vulputate.</p>

    <p>Phasellus nec felis vel lectus venenatis pellentesque. Nunc egestas consequat lectus, ac molestie metus iaculis eget. Nullam cursus turpis odio, ut sodales sapien condimentum eu. Sed fringilla odio sed dolor aliquet, ac tincidunt elit varius. Pellentesque vestibulum volutpat ipsum, vel luctus ligula mattis non. Vivamus blandit metus at metus finibus, vel vehicula magna tempor. Nunc sit amet urna et diam dignissim porta.</p>

    <p>Donec quam turpis, dapibus sit amet congue vitae, pretium at nisi. Curabitur viverra fermentum sodales. Nulla ac odio orci. Pellentesque consectetur nulla libero, eu vehicula felis congue in. Sed eget felis ut nunc hendrerit malesuada eget quis nulla. Mauris vitae venenatis ipsum. Maecenas congue ex a placerat pulvinar. Donec nec quam eget eros mattis finibus in vitae purus. Maecenas hendrerit nisi augue, a sodales quam sagittis eget. Cras non ligula sit amet nisl congue bibendum. Duis sit amet tincidunt tellus. Cras eu volutpat massa, ac posuere diam. Ut faucibus, magna vitae suscipit aliquam, urna dolor finibus purus, id vestibulum orci augue non turpis.</p>

    <p>Nam egestas, lorem sed pharetra vehicula, lectus augue interdum nisl, convallis accumsan arcu mauris blandit quam. Suspendisse tristique ac odio a imperdiet. In aliquet eleifend scelerisque. Integer in facilisis dolor, at pulvinar ex. Nullam felis nisl, ullamcorper et ullamcorper vel, facilisis vitae ipsum. Suspendisse faucibus libero tristique nisl laoreet, ac porta purus hendrerit. Mauris feugiat leo arcu, a condimentum metus venenatis vitae. Sed laoreet iaculis imperdiet. Ut fermentum ipsum eu tincidunt bibendum. Fusce at dui lobortis, molestie neque et, scelerisque urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tincidunt sagittis odio id euismod. Etiam egestas pharetra interdum. Praesent enim nulla, malesuada ac ex in, rhoncus vulputate quam. Suspendisse sodales cursus lacus, non hendrerit metus iaculis vel. Suspendisse hendrerit lorem tincidunt, consequat enim et, gravida erat.</p>

    <p>Nam volutpat augue mollis sapien porttitor, quis vestibulum nisl iaculis. Ut tincidunt velit eu tempus pretium. Donec vel massa non ipsum hendrerit porta. Suspendisse dictum erat eget metus maximus consequat. Donec aliquam interdum faucibus. In posuere orci dolor, eget congue ipsum consectetur vel. Mauris tempus leo risus, non elementum odio pharetra sit amet. Fusce consequat justo ut fermentum sodales. Nam non arcu fermentum, aliquam urna vel, maximus metus. Aenean gravida ipsum nec fringilla auctor. Sed sollicitudin auctor ante quis gravida. Sed varius eu mi eu dignissim. Sed tincidunt massa sed sollicitudin cursus.</p>

    <p>Fusce volutpat erat libero, in vehicula nulla condimentum et. Cras a varius arcu, sagittis porttitor arcu. Nunc luctus tincidunt massa. Duis id hendrerit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id feugiat elit. Proin ac neque in nisl tincidunt ullamcorper ac ornare ligula. Maecenas sollicitudin nisl mollis, cursus turpis ac, sodales purus. Curabitur sodales justo eget feugiat semper. Donec in nisi et dui condimentum ultrices. Fusce ac nisi arcu. Curabitur blandit elementum dapibus. Quisque elementum leo nec lorem tincidunt tincidunt.</p>

    <p>Fusce volutpat erat libero, in vehicula nulla condimentum et. Cras a varius arcu, sagittis porttitor arcu. Nunc luctus tincidunt massa. Duis id hendrerit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id feugiat elit. Proin ac neque in nisl tincidunt ullamcorper ac ornare ligula. Maecenas sollicitudin nisl mollis, cursus turpis ac, sodales purus. Curabitur sodales justo eget feugiat semper. Donec in nisi et dui condimentum ultrices. Fusce ac nisi arcu. Curabitur blandit elementum dapibus. Quisque elementum leo nec lorem tincidunt tincidunt.</p>

    <p>Suspendisse ac purus sit amet neque semper consectetur id vitae enim. Suspendisse cursus ac purus a lobortis. Morbi vitae lorem et lectus condimentum euismod sit amet ut ipsum. Sed at sodales eros, eget tincidunt ipsum. Phasellus consequat, ex et pellentesque tempus, justo elit finibus nibh, eget tincidunt tellus purus et lorem. Etiam luctus lacus ac gravida commodo. Vivamus facilisis, mi at finibus aliquam, nibh est consequat elit, et egestas erat felis feugiat urna. Phasellus sodales ullamcorper pulvinar. Curabitur tellus elit, condimentum eu neque ut, facilisis porttitor dolor. Sed suscipit feugiat velit in facilisis. Nunc pretium ut mauris et scelerisque.</p>

    <p>Nam gravida interdum dictum. Praesent non metus urna. Fusce vitae tempor diam. Vivamus et gravida erat. In quis tristique augue. Cras iaculis hendrerit tortor vitae aliquet. Quisque aliquam, sem ultricies fringilla vulputate, lorem metus dictum orci, quis gravida sem velit eu turpis. Maecenas non leo eu augue feugiat fringilla vel quis ante. Etiam quis magna vel ex pulvinar viverra ut ac nisl. Nullam at odio venenatis, feugiat nulla at, condimentum elit. Morbi tristique felis convallis diam tincidunt, eu luctus nulla iaculis. In tempor est sed est vestibulum lacinia. Phasellus et augue varius, dapibus enim sit amet, posuere nunc. Praesent id metus tempor, volutpat lorem sit amet, porttitor ipsum.</p>

    <p>Donec pretium arcu id massa venenatis lobortis. Integer quis urna consectetur, lacinia quam non, dictum quam. In quis scelerisque lorem. Duis condimentum convallis purus et pharetra. Nullam ullamcorper, tellus et egestas egestas, nibh neque lacinia justo, at maximus ex augue ut elit. Morbi felis tellus, blandit vel ultricies a, rhoncus eu massa. Praesent blandit imperdiet diam, quis volutpat elit molestie eget. Aliquam posuere viverra odio a bibendum. Proin justo ligula, pharetra vitae diam sit amet, suscipit mollis leo. Duis imperdiet, massa id elementum venenatis, nisl ex finibus magna, fermentum lacinia nibh turpis id lorem. Vestibulum euismod laoreet felis id pretium. Sed ex lectus, elementum vitae felis quis, ultricies elementum nunc. Morbi sit amet arcu nibh.</p>

    <p>Praesent lacinia, ante at pharetra egestas, leo erat volutpat tortor, ut convallis magna sem vitae felis. Proin eget mauris et ante posuere ultricies. Quisque sollicitudin mattis tellus non convallis. Sed faucibus nulla ut sollicitudin lobortis. Aenean eget pellentesque neque. Suspendisse et rutrum lectus. Aliquam ex sem, varius id sagittis quis, pellentesque non velit. Nullam mattis ac ante sed laoreet. Praesent faucibus bibendum molestie. Quisque quis turpis ligula.</p>

    <p>Nunc tempus est id velit accumsan mattis. Aliquam in sapien ullamcorper, dictum lectus et, condimentum orci. Vivamus pulvinar leo at purus molestie facilisis. Nullam vestibulum ornare elit vel vulputate. Donec ultrices mauris consectetur nibh blandit suscipit. Donec et arcu nulla. Donec vel laoreet sem. Pellentesque tincidunt dui et vehicula maximus. Phasellus rhoncus a purus sit amet pretium. Vivamus sit amet tellus et justo varius vehicula sit amet at eros. Morbi quis dignissim nunc. Cras interdum auctor posuere. Nam interdum eros nec orci lobortis iaculis. Quisque pulvinar semper lacus nec finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum at commodo ligula, nec molestie velit.</p>

    <p>In arcu dolor, suscipit mollis ullamcorper sit amet, scelerisque id nisi. Mauris nec massa diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus mauris nisi, quis bibendum enim viverra id. Phasellus venenatis lacinia lacus ut tempor. Morbi ornare rutrum lacus non molestie. Vestibulum pellentesque, neque et pellentesque egestas, tellus orci auctor risus, vitae consequat turpis elit accumsan dolor. Ut tincidunt rutrum tincidunt. Aliquam odio lacus, lacinia tincidunt rutrum nec, accumsan eu est.</p>

  </article>
</main>
!

CSS 

              
                :root {
  --nav-height: 4rem;
}

html {
  scroll-behavior: smooth;

  font-size: min(1.1rem, 4vw);
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

ul {
  padding: 0;
  margin: 0;
}

article {
  padding: min(5rem, 12vw) 0;
}

h1,
h2 {
  padding-top: 2rem;
  font-weight: 700;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

p {
  line-height: 1.6em;
}

.wrapper {
  width: min(800px, 90vw);
  margin: 0 auto;
}

.nav {
  position: fixed;
  width: 100vw;
  height: var(--nav-height);
  top: 0;
  left: 0;
  background-color: #10131a;
  transition: top 200ms ease-in-out;

  &__items {
    display: flex;
    align-items: center;
    height: 100%;

    list-style: none;
  }

  &__item {
    padding: 0 1rem 0 0;
  }

  &__link {
    color: #fff;

    &:not(:hover) {
      text-decoration: none;
    }
  }
}

// -----

:target {
  scroll-margin-top: var(--nav-height);
}
!

JS
!
999px

Console