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 

              
                <nav role="navigation">
  <ul>
    <li><a href="#the-default-view">Home</a></li>
    <li><a href="#nes">NES</a></li>
    <li><a href="#snes">SNES</a></li>
    <li><a href="#n64">N64</a></li>
    <li><a href="#gc">Gamecube</a></li>
  </ul>
</nav>

<main role="main" class="app">
  
  <section id="nes">
    <header class="nes-header">
      <svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
        <title>nes controller</title>
        <path d="M75 150c41.421356 0 75-33.578644 75-75 0-41.4213562-33.578644-75-75-75C33.5786438 0 0 33.5786438 0 75c0 41.421356 33.5786438 75 75 75zm45.667-95H30c-1.104 0-2 .896-2 2v36.5c0 1.104.896 2 2 2h90.667c1.104 0 2-.896 2-2V57c0-1.104-.896-2-2-2zM54.18 81.652c0 .55-.45 1-1 1h-3.152c-.55 0-1 .45-1 1v3.153c0 .55-.45 1-1 1h-4.5c-.55 0-1-.45-1-1v-3.153c0-.55-.45-1-1-1h-3.152c-.55 0-1-.45-1-1v-4.499c0-.55.45-1 1-1h3.152c.55 0 1-.45 1-1V72c0-.55.45-1 1-1h4.5c.55 0 1 .45 1 1v3.153c0 .55.45 1 1 1h3.152c.55 0 1 .45 1 1v4.499zm50.292 5.848c0 1.104-.895 2-2 2H95.64c-1.105 0-2-.896-2-2v-7.166c0-1.104.895-2 2-2h6.832c1.105 0 2 .896 2 2V87.5zm12.334 0c0 1.104-.896 2-2 2h-6.834c-1.104 0-2-.896-2-2v-7.166c0-1.104.896-2 2-2h6.834c1.104 0 2 .896 2 2V87.5z" fill="#FFF" fill-rule="evenodd"/>
      </svg>
      <h1>NES</h1>
      <a href="https://en.wikipedia.org/wiki/Nintendo_Entertainment_System" target="_blank">From Wikipedia</a>
    </header>
    <div class="container">
      <p>The Nintendo Entertainment System (commonly abbreviated as NES) is an 8-bit home video game console that was developed and manufactured by Nintendo. It was initially released in Japan as the Family Computer (Japanese: ファミリーコンピュータ Hepburn: Famirī Konpyūta?) (also known by the portmanteau abbreviation Famicom (ファミコン Famikon?) and abbreviated as FC) on July 15, 1983, and was later released in North America during 1985, in Europe during 1986, and Australia in 1987. In South Korea, it was known as the Hyundai Comboy (현대 컴보이 Hyeondae Keomboi) and was distributed by SK Hynix which then was known as Hyundai Electronics. It was succeeded by the Super Nintendo Entertainment System.</p>
      <p>The best-selling gaming console of its time,the NES helped revitalize the US video game industry following the video game crash of 1983. With the NES, Nintendo introduced a now-standard business model of licensing third-party developers, authorizing them to produce and distribute titles for Nintendo's platform.</p>
      <p>In 2009, the Nintendo Entertainment System was named the single greatest video game console in history by IGN, in a list of 25. It was judged the second greatest console behind the Sega Dreamcast in PC Magazine's "Top 10 Video Game Consoles of All Time".</p>
    </div>
  </section>
  
  <section id="snes">
    <header class="snes-header">
      <svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
        <title>snes controller</title>
        <path d="M75 150c41.421356 0 75-33.578644 75-75 0-41.4213562-33.578644-75-75-75C33.5786438 0 0 33.5786438 0 75c0 41.421356 33.5786438 75 75 75zm39.333333-92.4444444v-1.3333334c0-.5555555-.444444-.6666666-.444444-.6666666-5.111111-2.6666667-10.111111-2.4444445-10.111111-2.4444445H93c-.555556 0-.555556.4444445-.555556.4444445v1H56.8888889v-1s0-.4444445-.5555556-.4444445H45.5555556s-5.1111112-.2222222-10.1111112 2.4444445c0 0-.4444444.1111111-.4444444.6666666v1.4444445C29 61.555556 25 68.222222 25 75.777778 25 87.555556 33.3333333 97 45.1111111 97c0 0 8.7777778.222222 12.9999999-4.333333 0 0 .222222-.333334 1.111111-.333334h31.333334s.444444-.111111.777777.333334C95.555556 97.444444 104.666667 97 104.666667 97c11.666666 0 20.111111-9.444444 20.111111-21.222222 0-7.666667-4.222222-14.444445-10.444445-18.2222224zM45.8888889 87.555556c-6.4444445 0-11.6666667-5.222223-11.6666667-11.666667 0-6.444445 5.2222222-11.777778 11.6666667-11.777778 6.4444444 0 11.6666671 5.222222 11.6666671 11.666667 0 6.444444-5.2222227 11.777778-11.6666671 11.777778zm57.6666671 7c-10.333334 0-18.666667-8.333334-18.666667-18.666667s8.333333-18.6666668 18.666667-18.6666668c10.333333 0 18.666666 8.3333338 18.666666 18.6666668 0 10.333333-8.333333 18.666667-18.666666 18.666667zm0-36.1111116c-9.555556 0-17.333334 7.7777776-17.333334 17.3333336 0 9.555555 7.777778 17.333333 17.333334 17.333333 9.555555 0 17.333333-7.777778 17.333333-17.333333 0-9.555556-7.777778-17.3333336-17.333333-17.3333336zm-13 20.4444446C88.777778 77 88.777778 73.888889 90.666667 72l9.444444-7.333333c2-1.777778 5-1.666667 6.888889.111111 1.777778 1.888889 1.777778 5 0 6.666666l-9.777778 7.666667C95 80.888889 92.333333 80.666667 90.555556 78.888889zM107 87.111111c-2.111111 1.777778-4.777778 1.555556-6.666667-.333333-1.888889-1.888889-1.777777-5 .111111-6.888889l9.444445-7.333333c2-1.777778 5-1.666667 6.888889.111111 1.777778 1.888889 1.777778 5 0 6.666666L107 87.111111zm-13.111111-7.888889c2.025044 0 3.666667-1.641622 3.666667-3.666666 0-2.025045-1.641623-3.666667-3.666667-3.666667s-3.666667 1.641622-3.666667 3.666667c0 2.025044 1.641623 3.666666 3.666667 3.666666zM103.444444 72c2.025045 0 3.666667-1.641623 3.666667-3.666667s-1.641622-3.666666-3.666667-3.666666c-2.025044 0-3.666666 1.641622-3.666666 3.666666C99.777778 70.358377 101.4194 72 103.444444 72zm.333334 15.111111c2.025044 0 3.666666-1.641622 3.666666-3.666667 0-2.025044-1.641622-3.666666-3.666666-3.666666-2.025044 0-3.666667 1.641622-3.666667 3.666666 0 2.025045 1.641623 3.666667 3.666667 3.666667zm9.555555-7.222222c2.025044 0 3.666667-1.641623 3.666667-3.666667s-1.641623-3.666666-3.666667-3.666666-3.666666 1.641622-3.666666 3.666666c0 2.025044 1.641622 3.666667 3.666666 3.666667zm-60.4444441-6.444445h-4.5555556v-4.777777c0-.444445-.3333333-.777778-.7777777-.777778h-3.6666667c-.4444445 0-.5555556.333333-.5555556.777778v4.777777h-4.6666666c-.4444445 0-.5555556.111112-.5555556.555556v3.666667c0 .444444.1111111.555555.5555556.555555h4.7777777v4.888889c0 .444445.1111112.777778.5555556.777778h3.6666667c.4444444 0 .7777777-.333333.7777777-.777778v-4.888889H53c.4444444 0 .7777778-.333333.7777778-.777778v-3.333333c-.1111111-.333333-.4444445-.666667-.8888889-.666667z" fill="#FFF" fill-rule="evenodd"/>
      </svg>
      <h1>SNES</h1>
      <a href="https://en.wikipedia.org/wiki/Super_Nintendo_Entertainment_System" target="_blank">From Wikipedia</a>
    </header>
    <div class="container">
      <p>The Super Nintendo Entertainment System (officially abbreviated the Super NES or SNES, and commonly shortened to Super Nintendo) is a 16-bit home video game console developed by Nintendo that was released in 1990 in Japan and South Korea, 1991 in North America, 1992 in Europe and Australasia (Oceania), and 1993 in South America. In Japan, the system is called the Super Famicom (Japanese: スーパーファミコン Hepburn: Sūpā Famikon?, officially adopting the abbreviated name of its predecessor, the Famicom), or SFC for short. In South Korea, it is known as the Super Comboy (슈퍼 컴보이 Syupeo Keomboi) and was distributed by Hyundai Electronics. Although each version is essentially the same, several forms of regional lockout prevent the different versions from being compatible with one another. It was released in Brazil on September 2, 1992, by Playtronic.</p>
      <p>The SNES is Nintendo's second home console, following the Nintendo Entertainment System (NES). The console introduced advanced graphics and sound capabilities compared with other consoles at the time. The development of a variety of enhancement chips integrated in game cartridges helped to keep it competitive in the marketplace.</p>
      <p>The SNES was a global success, becoming the best-selling console of the 16-bit era despite its relatively late start and the fierce competition it faced in North America and Europe from Sega's Mega Drive/Genesis console. The SNES remained popular well into the 32-bit era, and continues to be popular among fans, collectors, retro gamers, and emulation enthusiasts, some of whom still make homebrew ROM images.</p>
    </div>
  </section>
  
  <section id="n64">
    <header class="n64-header">
      <svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
        <title>n64 controller</title>
        <path d="M75 150c41.421356 0 75-33.578644 75-75 0-41.4213562-33.578644-75-75-75C33.5786438 0 0 33.5786438 0 75c0 41.421356 33.5786438 75 75 75zM94.8140349 34.0802198l-1.4529804-3.278022S88.4025233 27 75.2004618 27h-.3967711c-13.2020615 0-18.1605927 3.8021978-18.1605927 3.8021978l-1.4540887 3.2769231s-21.4189927 1.965934-19.3043576 5.8989011c-12.1646933 3.932967-10.8424922 34.0857143-10.8424922 38.4120879 0 4.3263736 1.8508599 22.9417581 8.9905241 22.9417581s12.163585-27.1373625 12.163585-27.1373625 12.4284686-1.1802198 13.8825573 6.554945c1.4540887 7.7351649 4.9197407 42.2131865 14.7226482 42.2131865h.3967711c9.8029075 0 13.2685595-34.4780216 14.7226482-42.2131865 1.4540887-7.7351648 13.8825576-6.554945 13.8825576-6.554945s5.02392 27.1373625 12.163585 27.1373625c7.139664 0 8.990524-18.6153845 8.990524-22.9417581s1.325526-34.4791209-10.839168-38.410989c2.115744-3.9329671-19.3043571-5.8989011-19.3043571-5.8989011z" fill="#FFF" fill-rule="evenodd"/>
      </svg>
      <h1>Nintendo 64</h1>
      <a href="https://en.wikipedia.org/wiki/Nintendo_64" target="_blank">From Wikipedia</a>
    </header>
    <div class="container">
      <p>The Nintendo 64 (Japanese: ニンテンドー64 Hepburn: Nintendō Rokujūyon?), stylized as NINTENDO64 and often referred to as N64, is Nintendo's third home video game console for the international market. Named for its 64-bit central processing unit, it was released in June 1996 in Japan, September 1996 in North America, March 1997 in Europe and Australia, September 1997 in France and December 1997 in Brazil. It is the industry's last major home console to use the cartridge as its primary storage format, although current handheld systems (such as the PlayStation Vita and Nintendo 3DS) also use cartridges. While the Nintendo 64 was succeeded by Nintendo's MiniDVD-based GameCube in November 2001, the consoles remained available until the system was retired in late 2003.</p>
      <p>Code named Project Reality, the console's design was mostly finalized by mid-1995, though Nintendo 64's launch was delayed until 1996. As part of the fifth generation of gaming, the system competed primarily with the PlayStation and the Sega Saturn. The Nintendo 64 was launched with three games: Super Mario 64 and Pilotwings 64, released worldwide; and Saikyō Habu Shōgi, released only in Japan. The Nintendo 64's suggested retail price at launch was US$199.99 and it was later marketed with the slogan "Get N, or get Out!". With 32.93 million units worldwide, the console was ultimately released in a range of different colors and designs, and an assortment of limited-edition controllers were sold or used as contest prizes during the system's lifespan. IGN named it the 9th greatest video game console of all time; and in 1996, Time Magazine named it Machine of the Year.</p>
    </div>
  </section>
  
  <section id="gc">
    <header class="gc-header">
      <svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
        <title>Gamecube controller</title>
        <path d="M75 150c41.421356 0 75-33.578644 75-75 0-41.4213562-33.578644-75-75-75C33.5786438 0 0 33.5786438 0 75c0 41.421356 33.5786438 75 75 75zm48.545208-84.931227c-.34348-9.2390225-4.724234-13.6019865-8.035644-15.5923049.022232-1.0671918-.425737-2.8458449-3.050188-4.5291932-.366823-.9098282-1.362802-2.0202396-3.790503-3.0552938-1.930822-.823389-3.165792-.4621174-3.947236.210557-.096708-.0088655-.193416-.0166229-.290124-.023272h-.001111s-1.78187-.4842813-4.302944.1097113C93.47796 39.8783906 79.34194 38 74.134167 38c-5.344498 0-19.3315655 1.8783906-25.977729 4.1900856 0 0-5.5579223-.7391662-8.3368835.9231265-2.7789611 1.6622926-3.3347534 4.8018092-3.3347534 4.8018092S26.2960179 50.0826508 25.7402257 65.067665c-.5557922 14.985013-3.6182074 44.154924 8.7081527 46.752533 3.6537781.769088 6.6695068-4.801809 7.4109336-12.928204.9937565-10.894665.802564-12.948151 2.3398853-13.772648.5035478.961913.9404005 2.106679 1.2505325 3.503005l.0022232-.001108c1.2883264 5.406883 6.1515084 9.434064 11.969542 9.434064 6.801785 0 12.315244-5.496647 12.315244-12.277693 0-3.711345-1.658484-7.029281-4.268485-9.281134l.002224-.001108s-.010005-.005541-.011116-.005541c-.432407-.372353-.889268-.714786-1.370584-1.023972-.741427-.683756-1.625136-1.729893-2.226504-3.203792 2.282083-.840012 6.585027-2.066784 12.273005-2.164305 5.697982.094197 10.008706 1.323185 12.291901 2.164305-.601368 1.473899-1.482854 2.521144-2.225393 3.2049-.482427.310295-.938177.652727-1.369472 1.025081-.002223 0-.011115.005541-.011115.005541l.002223.001108c-2.610001 2.251852-4.268485 5.569788-4.268485 9.281133 0 6.781046 5.514571 12.277694 12.315245 12.277694 5.816921 0 10.680103-4.027181 11.970653-9.434065l.002223.001108c.307909-1.396326.744762-2.541091 1.248309-3.503004 1.539545.824497 2.726717 2.952231 4.344072 13.772648 1.600682 10.711813 4.308502 14.098458 8.215721 13.480085 12.443077-1.969263 7.449839-32.321618 6.894047-47.305523zM63.256201 83.654312c.611372 0 1.111585.498688 1.111585 1.108195v2.308371c0 .609507-.500213 1.108195-1.111585 1.108195h-2.223169c-.611371 0-1.111584.498688-1.111584 1.108195v2.21639c0 .609507-.500213 1.108195-1.111584 1.108195h-2.3154309c-.6113715 0-1.1115845-.498688-1.1115845-1.108195v-2.21639c0-.609507-.500213-1.108195-1.1115844-1.108195h-2.223169c-.6113714 0-1.1115844-.498688-1.1115844-1.108195v-2.308371c0-.609507.500213-1.108195 1.1115844-1.108195h2.223169c.6113714 0 1.1115844-.498687 1.1115844-1.108195v-2.21639c0-.610615.500213-1.108195 1.1115845-1.108195h2.3154309c.611371 0 1.111584.498688 1.111584 1.108195v2.21639c0 .609508.500213 1.108195 1.111584 1.108195h2.223169zm30.476312-18.064688c2.025307 0 3.668228 1.637913 3.668228 3.657044 0 2.019132-1.642921 3.657044-3.668228 3.657044-2.025307 0-3.668229-1.637912-3.668229-3.657044 0-2.019131 1.642922-3.657044 3.668229-3.657044zm3.450358-10.285158c-.870371-.8632839-.874817-2.2662589-.010004-3.1339756 1.208292-1.2112573 4.499694-2.9932349 9.163902-1.9892102 1.1994.2582095 1.963058 1.437329 1.704059 2.6330715-.257888 1.1968507-1.440614 1.9581807-2.642236 1.6999712-3.38144-.7280841-5.056598.7657628-5.07216.7812776-.435741.4366288-1.005984.653835-1.577339.653835-.565796-.0011082-1.132704-.2149898-1.566222-.6449695zm7.851121 14.002045c-3.255831 0-5.895844-2.631964-5.895844-5.876759 0-3.2447949 2.640013-5.8767582 5.895844-5.8767582s5.895844 2.6319633 5.895844 5.8767582c0 3.244795-2.640013 5.876759-5.895844 5.876759zm13.822553-3.600526c-.257888 1.195742-1.441725 1.957072-2.641125 1.698863-1.200511-.257101-1.96417-1.436221-1.70517-2.63418.730311-3.3711291-.766994-5.0411791-.782556-5.0566938-.437964-.4344125-.656946-1.0029165-.656946-1.5725288 0-.5651795.215647-1.130359.646942-1.5625551.864813-.8677167 2.27319-.8721495 3.143561-.0099737 1.21385 1.2057162 3.001278 4.4870818 1.995294 9.1370684z" fill="#FFF" fill-rule="evenodd"/>
      </svg>
      <h1>Nintendo Gamecube</h1>
      <a href="https://en.wikipedia.org/wiki/GameCube" target="_blank">From Wikipedia</a>
    </header>
    <div class="container">
      <p>The GameCube (Japanese: ゲームキューブ Hepburn: Gēmukyūbu?, officially called the Nintendo GameCube, abbreviated NGC in Japan and GCN in Europe and North America) is a home video game console released by Nintendo in Japan on September 14, 2001; in North America on November 18, 2001; in Europe on May 3, 2002; and in Australia on May 17, 2002. The sixth-generation console is the successor to the Nintendo 64 and competed with Sony Computer Entertainment's PlayStation 2 and Microsoft's Xbox.</p>
      <p>The GameCube is the first Nintendo console to use optical discs as its primary storage medium. The discs are similar to the miniDVD format; as a result of their smaller size and the console's small disc compartment, the system was not designed to play standard DVDs or audio CDs. The console supports online gaming for a small number of titles via the broadband or modem adapter and connects to the Game Boy Advance via the link cable, allowing players to access exclusive in-game features using the handheld as a second screen and controller.</p>
      <p>Contemporary reception of the GameCube was generally positive. The console was praised for its controller, extensive software library and high-quality games, but was criticized for its exterior design and lack of features. Nintendo sold 21.74 million GameCube units worldwide before it was discontinued in 2007. Its successor, the Wii, was released in November 2006.</p>
    </div>
  </section>

  <section id="the-default-view">
    <div class="container">
      <h1>This is a Single Page App using mostly<sup>*</sup> CSS</h1>
      <p>Click on the links above to simulate a page change.</p>
      <p>This idea comes from Heydon Pickering at <a href="https://www.smashingmagazine.com/2015/12/reimagining-single-page-applications-progressive-enhancement/" target="_blank">Smashing Magazine</a>.</p>
    </div>
  </section>
</main>
!

CSS 

              
                // Variables
// NES
$nes-gray: #7C7C7C;
$nes-red: #A81000;

// SNES
$snes-red: #F12934;
$snes-blue: #343D93;
$snes-green: #009554;
$snes-yellow: #F8EA57;

// N64
$n64-blue: #011DA9;
$n64-red: #FE2015;
$n64-green: #069330;
$n64-yellow: #FFC001;

// GC 1
$gc-black: #010101;
$gc-gray: #92929A;
$gc-purple: #6549C2;

// GC 2
$gc-grey: #C2C2C0;
$gc-dark-purple: #505388;
$gc-light-purple: #B3B6D9;

$primary: #E81C4F;
$white: #FFFFFF;
$black: #000000;
$silver: #DDDDDD;
$silver-light: #F5F7F9;
$text-color: #566B78;
$pre-border: #6699CC;

// Mixins
@mixin linear-gradient($angle, $gradient1, $gradient2) {
  background-color: $gradient2; /* Fallback Color */
  background-image: -webkit-gradient(linear, $angle, from($gradient1), to($gradient2)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient($angle, $gradient1, $gradient2); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient($angle, $gradient1, $gradient2); /* FF3.6 */
  background-image:     -ms-linear-gradient($angle, $gradient1, $gradient2); /* IE10 */
  background-image:      -o-linear-gradient($angle, $gradient1, $gradient2); /* Opera 11.10+ */
  background-image:         linear-gradient($angle, $gradient1, $gradient2);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=$angle,StartColorStr='#{$gradient1}', EndColorStr='#{$gradient2}');
}

// Keyframes
@keyframes fade {
  0% { opacity: 0 }
  50% { opacity: 0.5 }
  100% { opacity: 1 }
}

nav {
  ul {
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
  }
  a {
    margin: 0 1rem;
    color: $text-color;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: flex-start;
  }
}

// BLACK MAGIC
.app > * {
  display: none;
}

.app > *:last-child {
  display: block;
}

.app > *:target {
  display: block;
  animation: fade 300ms linear 1;
}
  
.app > *:target ~ * {
  display: none;
}

body {
  background-color: $silver;
  color: $text-color;
  font-family: 'Inconsolata', monospace;
  font-size: 18px;
  line-height: 1.5;
}

h1, h2, strong {
  color: #333;
}

a {
  color: $black;
}

header {
  background-color: gray;
  line-height: 1.2;
  padding: 8vw 2em;
  text-align: center;
  
  h1 {
    color: $white;
    font-size: 2.5em;
    text-transform: uppercase;
  }
  
  a {
    border: 2px solid $white;
    color: $white;
    border-radius: 4px;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    padding: 1em 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: none 200ms;
    transition-property: color, background, border;
    
    &:hover {
      background: crimson;
      border-color: crimson;
    }
  }
}

.nes-header {
  background-color: $nes-gray;
  @include linear-gradient(90deg, $nes-gray, $black);
  
  a {
    &:hover {
      background: $nes-red;
      border-color: $nes-red;
    }
  }
}

.snes-header {
  background-color: $snes-red;
  @include linear-gradient(90deg, $snes-red, $snes-yellow);
  
  a {
    &:hover {
      background: $snes-green;
      border-color: $snes-green;
    }
  }
}

.n64-header {
  background-color: $n64-green;
  @include linear-gradient(90deg, $n64-green, $n64-yellow);
  
  a {
    border: 2px solid $white;
    color: $white;
    
    &:hover {
      background: $n64-yellow;
      border-color: $n64-yellow;
    }
  }
}

.gc-header {
  background-color: $gc-purple;
  @include linear-gradient(90deg, $gc-purple, $gc-gray);
  
  a {
    border: 2px solid $white;
    color: $white;
    
    &:hover {
      background: $black;
      border-color: $black;
    }
  }
}

// Container
.container {
  margin: 0 auto;
  max-width: 50em;
  padding: 4em 2em;
}
!

JS 

              
                // You can comment this JS out and the app will still work.
(function() {
  var app = {
    'routes': {
      'nes': {
        'rendered': function() {
          console.log('view currently showing is "nes"');
          app.preventScroll();
        }
      },
      'snes': {
        'rendered': function() {
          console.log('view currently showing is "snes"');
          app.preventScroll();
        }
      },
      'n64': {
        'rendered': function() {
          console.log('view currently showing is "n64"');
          app.preventScroll();
        }
      },
      'gc': {
        'rendered': function() {
          console.log('view currently showing is "gc"');
          app.preventScroll();
        }
      },
      'the-default-view': {
        'rendered': function() {
          console.log('view currently showing is "the-default-view"');
          app.preventScroll();
        }
      },
    },
    'default': 'the-default-view',
    'preventScroll': function() {
      document.querySelector('html').scrollTop = 0;
      document.querySelector('body').scrollTop = 0;
    },
    'routeChange': function() {
      app.routeID = location.hash.slice(1);
      app.route = app.routes[app.routeID];
      app.routeElem = document.getElementById(app.routeID);
      app.route.rendered();
    },
    'init': function() {
      window.addEventListener('hashchange', function() {
        app.routeChange();
      });
      if (!window.location.hash) {
        window.location.hash = app.default;
      } else {
        app.routeChange();
      }
    }
  };
  window.app = app;
})();

app.init();
!
999px

Console