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="javascript:void 0;" class="togglemenu"></a>

<div id="overlay"><nav class="menu">
  <ul>
    <li><a href="#home">Accueil</a></li>
    <li><a href="#projects">Projets</a></li>
    <li><a href="#home">Contact</a></li>
  </ul>
</nav></div>


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos temporibus culpa id fuga inventore, porro placeat veniam autem sint qui dicta ratione aspernatur recusandae alias praesentium dolorum optio dolor quod eligendi iure. Adipisci blanditiis laborum labore. Quod alias libero nobis distinctio dignissimos atque cum neque consequatur odio, adipisci nemo quisquam iusto totam? Accusantium nostrum maiores harum aliquam quidem error sunt odit, quo, optio quae rem velit itaque? Corporis animi repellat aspernatur fugiat, alias ex expedita dicta minima perferendis nobis, magnam quo, sint minus quam aut voluptas vitae doloremque sapiente laudantium nostrum laborum vero delectus. In, blanditiis veniam. Quisquam, corrupti nemo laudantium eveniet iusto exercitationem accusamus repellendus. Molestias commodi dolor nobis, tenetur quia accusamus amet ipsa, voluptatum modi quaerat sit cum! Dolores corrupti, quaerat voluptatem officia accusantium doloribus sequi aut ea impedit. Beatae veniam doloremque ducimus, cum minus nihil non voluptates dignissimos sed? Aliquam tempore error vitae possimus asperiores reiciendis voluptate alias a quisquam veritatis officiis ipsum molestiae eos culpa, aperiam nihil unde, quam odit, aut eaque et. Totam odio dolor, iure amet, fugiat corrupti quasi, sapiente architecto maxime veritatis deserunt ipsum tempora sint! Quisquam, dolor dolore optio iste dolorum odit magni perferendis! Asperiores voluptatem dignissimos tempore perferendis iure, sequi porro nulla dolore repudiandae, ipsam nihil totam, dicta optio consequuntur ipsum fugiat id. Temporibus neque, modi qui fugit veniam, dolorum numquam esse tenetur ut, odio illo itaque aspernatur hic voluptatum aut. Asperiores adipisci incidunt vero, necessitatibus dolorem maiores natus reiciendis fuga quasi nulla error id modi aperiam quibusdam facere omnis ipsam esse nobis. Assumenda, rem dignissimos? Dolores quibusdam ipsam reprehenderit at cum ullam amet eveniet debitis similique est! Adipisci alias dolor, eum totam corrupti distinctio! Ad minus dolorum alias, sequi beatae doloribus ullam ducimus! Rem excepturi corrupti quidem doloribus atque dolores perferendis non obcaecati odio eius ex tenetur harum iusto iste quae consectetur, ullam facere, sit veniam, laborum nihil quos? Voluptate quod exercitationem maxime sapiente explicabo esse earum quia unde, dolor rem aspernatur saepe quas, quos itaque corporis vitae omnis. Eos, modi reiciendis rerum facere vel veniam praesentium voluptate corporis nam ullam laboriosam consequatur amet repudiandae deserunt placeat sed cum. Tempore modi hic reprehenderit aperiam deserunt libero doloremque pariatur molestiae qui ab labore adipisci at voluptatibus, amet laborum? Culpa, voluptate. Eos, repellendus excepturi cumque officiis architecto quia quam quod eveniet, eius ipsa distinctio magni dolore! Similique enim non earum sed quia temporibus, nulla iure odit dolorum! Dolorem quisquam nam dolore nostrum at soluta delectus eius eveniet dignissimos natus? Reprehenderit eaque dolorum fugiat dolorem. Unde, velit magnam. Quas ducimus autem odit voluptates laudantium similique alias magni, ratione eos! Eos tempora rem neque nemo similique magnam debitis mollitia nisi! Magnam, esse optio repellat est eius tempore numquam delectus quasi quas. Maiores dicta accusantium ab magnam, voluptate cum optio ducimus excepturi, corporis quaerat asperiores vero, odio unde soluta odit! Saepe id obcaecati sint deserunt voluptatum similique, temporibus qui officia blanditiis unde, repudiandae ducimus laudantium ipsa quo assumenda. Aliquid nam laborum ex ea, illum perspiciatis similique ut provident iste suscipit facere. Neque magni laudantium, facere fugit ab eligendi quaerat provident possimus voluptate libero aperiam ipsum maxime consequatur est ut a laboriosam ducimus voluptatibus quae inventore? Saepe quasi, numquam quis doloremque dolore incidunt sequi. Corrupti beatae ab accusantium exercitationem? Consectetur nobis explicabo distinctio reiciendis quidem, obcaecati eius officia qui consequatur, nesciunt maiores illum. Esse eaque, praesentium illo, eius labore reprehenderit, recusandae consequatur assumenda aperiam aspernatur ipsam autem quos voluptas ipsa quasi at est sapiente tempore facere non! Tempora nisi eum vero fugit consectetur illum exercitationem ad eos, placeat ipsum iste, at nostrum dolore, aliquam doloribus quidem fuga similique expedita inventore dolorem praesentium sunt corrupti. Eligendi, odit. Perferendis dolorem natus amet nesciunt, animi facilis similique doloremque nulla nihil magnam! Provident praesentium cupiditate numquam quae consectetur, placeat laudantium repellendus veritatis nulla ea perspiciatis molestias accusamus possimus obcaecati tempora magnam sunt sequi nesciunt ducimus soluta ratione magni itaque culpa autem. Dicta quisquam quasi quibusdam quaerat ut at est provident distinctio quas! Perspiciatis saepe fugiat ipsa pariatur officiis totam dolorem quo accusamus dicta at dolorum laudantium impedit dolores ducimus vel excepturi asperiores eligendi, officia quae in. Incidunt repellendus tempore ratione praesentium non dicta, nulla consequuntur similique, ipsum hic facere pariatur! A, veritatis. Suscipit exercitationem quaerat dolore. Sequi, animi dolores vel nam deleniti fuga consequatur facilis aliquam et? Nisi eum possimus itaque quasi quod officiis perspiciatis blanditiis dicta quo, nobis adipisci nesciunt reiciendis ea ipsa, deserunt maiores explicabo asperiores sequi modi assumenda porro quam earum amet recusandae! In perspiciatis temporibus vitae esse, fugiat quidem corrupti laudantium nostrum molestias illo laboriosam totam deleniti placeat velit pariatur quasi officia numquam omnis ab consequatur autem dignissimos labore, recusandae a? Illo, omnis porro suscipit voluptate sint, doloremque dicta tempore quae distinctio nihil iste, ducimus necessitatibus minima nisi? Autem quas nisi, laborum omnis iure voluptas earum! Autem, vel libero culpa facilis incidunt deleniti fuga consectetur assumenda ratione impedit itaque accusantium et corporis eaque officia accusamus nulla rem quas doloremque blanditiis explicabo vero fugit. Possimus sint sapiente totam dicta, eum aliquam consequuntur eius sed distinctio maxime iusto consectetur quibusdam sequi. Error ad eaque fuga? Quisquam molestiae ad aspernatur natus dignissimos exercitationem ipsum, accusamus, culpa rerum quas quis, expedita magni cumque harum reprehenderit aut et rem vero aperiam quasi eveniet nulla? Architecto vitae soluta in, perspiciatis atque quod deserunt animi culpa facere voluptate a explicabo incidunt minus, minima officiis quam expedita consequuntur ullam qui labore nostrum sapiente non distinctio et. Beatae nesciunt esse repudiandae eos est quaerat laboriosam alias repellendus tempora. Explicabo perspiciatis reprehenderit libero! Quibusdam eveniet consequuntur a nostrum quo obcaecati adipisci asperiores sed nobis natus. Nostrum facere omnis sapiente deserunt, ipsum voluptatum, quis, aliquam vitae tenetur modi rem expedita! Recusandae blanditiis ipsam voluptas quo reiciendis quae atque praesentium distinctio quos voluptates. Tenetur excepturi rem dolor ipsa nesciunt voluptates saepe blanditiis qui nemo! Cumque hic commodi debitis aspernatur illo porro aliquam dicta soluta consectetur minima eligendi dolorem doloremque, quaerat enim animi, atque obcaecati odio reiciendis aliquid itaque architecto totam. Provident voluptas perspiciatis, necessitatibus nostrum vel magnam repellendus minus. Nulla eaque eligendi assumenda quis nobis consequuntur voluptatum facere.
!

CSS 

              
                /*  */

body {
  margin:0;
  font-size:300%;
}

.togglemenu {
  display:block; width:1em;height:1em;
  background:url("https://svgshare.com/i/66Z.svg") center no-repeat; background-size:contain;
  position:fixed; right:0; top:0; margin:.5em; z-index:1;
}

/*.menu {visibility:hidden;}
.menu.active {visibility:visible;}*/
  
.menu {
  text-align:center;
    
  position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);
}
.menu ul {list-style:none; padding-left:0;padding-right:0;}

#overlay {
  position:fixed; left:0;top:0;
  width:100%;height:100vh;
  background:rgba(255,255,255,.97);
  
  opacity:0;
  transition:opacity .3s; will-change:opacity;
  pointer-events:none;
}
#overlay.active {opacity:1; pointer-events:auto;}

.menu a {
  color:black;
}
!

JS
!
999px

Console