css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main-doc">
  <nav id="navbar">
    <header>The Witcher</header>
    <div class="bold-hr"></div>
    <a href="#Books" class="nav-link">Books</a>
    <a href="#The_Witcher_stories" class="nav-link">The Witcher Stories</a>
    <a href="#Saga" class="nav-link">Saga</a>
    <a href="#Standalone_novel" class="nav-link">Standalone novel</a>
    <a href="#Non-Witcher_anthologies" class="nav-link">Non-Witcher Anthologies</a>
    <a href="#Spin-offs" class="nav-link">Spin-offs</a>
    <a href="#Background" class="nav-link">Background</a>
    <a href="#Major_characters" class="nav-link">Major characters</a>
  <div class="content">
  <section class="main-section" id="Books">
    <p>The Witcher short stories were first published in Fantastyka, a Polish science fiction and fantasy magazine, beginning in the mid-1980s. The first short story, "Wiedźmin" ("The Witcher") (1986), was written for a contest held by the magazine and won third place. The first four stories dealing with the witcher Geralt were originally featured in a 1990 short-story collection entitled Wiedźmin—now out of print—with "Droga, z której się nie wraca" ("The Road With No Return"), which is set in the world before the Witcher stories and features Geralt's mother to be.</p>
    <p>The second published short-story collection was Miecz przeznaczenia (Sword of Destiny). Although Ostatnie życzenie (The Last Wish) was published after Sword of Destiny, it replaced The Witcher as the first book since it included all the stories in The Witcher except "The Road With No Return" (the only story without Geralt). Although new short stories were added to The Last Wish, they took place before those in Sword of Destiny.</p>
    <p>Although "The Road With No Return" and "Coś się kończy, coś się zaczyna" ("Something Ends, Something Begins", an alternate ending of the Witcher saga about Geralt and Yennefer's wedding written as a wedding gift for Sapkowski's friends) were later published in 2000 in Something Ends, Something Begins and in 2012 in Maladie and other stories (Maladie i inne opowiadania) collections, the other stories in those books are unconnected to the Witcher series. In some Polish editions, "The Road With No Return" and "Something Ends, Something Begins" are added to The Last Wish or Sword of Destiny.</p>
  <section class="main-section" id="The_Witcher_stories">
    <header>The Witcher stories</header>
      <li> Miecz Przeznaczenia (Sword of Destiny) (1992, English edition: 2015)</li>
<li>Ostatnie życzenie (The Last Wish) (1993, English edition: 2007). Note that, while The Last Wish was published after The Sword of Destiny, the stories contained in The Last Wish take place first chronologically, and many of the individual stories were published before The Sword of Destiny.</li></ul>
  <section class="main-section" id="Saga">
    <p>The saga focuses on Geralt of Rivia and Ciri, a child of destiny. Ciri, princess of a recently conquered country and a pawn of international politics, becomes a witcher-in-training. Geralt is drawn into a whirlwind of events in his attempts to protect her.</p>
      <li>Krew elfów (Blood of Elves) (1994, English edition: 2008)</li>
      <li>Czas pogardy (Time of Contempt) (1995, English edition: 2013)</li>
      <li>Chrzest ognia (Baptism of Fire) (1996, English edition: 2014)</li>
      <li>Wieża Jaskółki (The Tower of the Swallow) (1997, English edition: 2016)</li>
      <li>Pani Jeziora (Lady of the Lake) (1999, English edition: 2017)</li>
  <section class="main-section" id="Standalone_novel">
    <header>Standalone novel</header>
    <p>Sezon burz (Season of Storms) (2013, English edition: 2018) – set between short stories in The Last Wish, but containing a few hints on events which follow the original pentalogy.</p>
  <section class="main-section" id="Non-Witcher_anthologies">
    <header>Non-Witcher anthologies</header>
      <li>Coś się kończy, coś się zaczyna (Something Ends, Something Begins) (2000) – Stories by Sapkowski, including two Witcher stories: "The Road With No Return" and "Something Ends, Something Begins".</li>
<li>Maladie i inne opowiadania (Maladie and other stories) (2012) – Stories by Sapkowski, also including "The Road With No Return" and "Something Ends, Something Begins".</li>
<li>A Polish Book of Monsters (2010) – English anthology edited and translated by Michael Kandel, with a translation of "The Witcher" entitled "Spellmaker." The story also appears, with a different translation, in The Last Wish.</li>
  <section class="main-section" id="Spin-offs">
    <p>In 2013, the Polish publishing house Solaris published a collection of eight short stories, Opowieści ze świata Wiedźmina, written by eight Russian and Ukrainian fantasy writers (including Andrei Belyanin and Vladimir Vasilyev) set in the world of The Witcher and/or featuring characters from the saga.<code>[3]</code> In 2017, a similar collection of eleven short stories by eleven authors chosen through a competition organized in 2016 by the Polish magazine Nowa Fantastyka was published by SuperNowa.<code>[4][5][6]</code></p>
  <section class="main-section" id="Background">
    <p>The stories are set on the Continent,<code>[7]</code> which was settled several thousand years earlier by elves from overseas. When they arrived, the elves encountered gnomes and dwarves. After a period of war between the elves and dwarves, the dwarves retreated into the mountains and the elves settled in the plains and forests. Human colonists arrived about five hundred years before the events in the stories, igniting a series of wars. The humans were victorious, and became dominant; the non-human races, now considered second-class citizens, often live in small ghettos within human settlements. Those not confined to the ghettos live in wilderness regions not yet claimed by humans. Other races on the Continent are halflings and dryads; werewolves and vampires appeared after a magical event, known as the Conjunction of the Spheres.</p>
    <p>During the centuries preceding the stories, most of the Continent's southern regions have been taken over by the Nilfgaard Empire; the north belongs to the fragmented Northern Kingdoms. The Witcher saga takes place in the aftermath of the first major war between the Nilfgaard Empire and the Northern Kingdoms, with a second war beginning in the middle of the series.</p>
  <section id="Major_characters" class="main-section">
    <header>Major characters</header>
    <p>Geralt of Rivia (Polish: Geralt z Rivii), known also as Gwynnbleid (Elder Speech: "White Wolf") and the Butcher of Blaviken,<code>[8]</code> is the protagonist of the series and its adaptations. A witcher, he travels the Continent and makes a living hunting monsters that plague the land. Péter Apor argues that he embodies the "neo-liberal anti-politics" spirit of the Polish popular culture of the 1990s.<code>[9]</code></p>
    <p>Yennefer of Vengerberg (Polish: Yennefer z Vengerbergu) first appeared in the collection of short stories, The Last Wish, featuring in both "The Last Wish" short story and "The Voice of Reason" frame story. She went on to appear in numerous other Witcher stories as the "soul mate" of Geralt and is one of the main characters of the Witcher saga.<code>[citation needed]</code></p>

<center><p>Original text on <a href="https://en.wikipedia.org/wiki/The_Witcher">Wikipedia</a></center>
              body {
  background-color: #e6e6e8;
  font-family: Source Sans Pro;

section header {
  font-weight: 600;
  font-size: 1.4em;
  padding-top: 1em;
@media only screen and (min-width: 768px) {
  main {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 20px;
    grid-template-areas: "navbar main";
  #navbar {
  grid-area: navbar;
    position: fixed;
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: 20%;
  .content {
    grid-area: main;
    border-left: 1px solid;
    padding-left: 15px;

.nav-link {
  margin: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;

.nav-link:hover {
  border-bottom-color: ;
  border-bottom: 1px solid #c43235;

#navbar header {
  font-weight: 800;
  font-size: 1.6em;

.bold-hr {
  width: 80%;
  border-top: 5px solid black;
  border-color: #c43235;

              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................