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


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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


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.

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.


                <script src=""></script>
<div id="main">
  <div id="title">Georg Ferdinand Duckwitz</div>

  <h2><i>A Nazi who saved Jews</i></h2>

  <p>Georg Duckwitz was a hero. Even though he belonged to the Nazi Party he saved the Danish Jews from extermination.</p>

  <div id="img-div"><a><img src="" alt="Georg Ferdinand Duckwitz" id="image"></a>
    <div id="img-caption">Georg Ferdinand Duckwitz. A hero who saved Denmark's Jews</div>
<div id="tribute-info">
  <h2 style="color: #2B65EC; font-size: 24px;"><i>The Story</i></h2>
<p>Georg Ferdinand Duckwitz was born in Germany in 1904. In 1932 he joined the Nazi Party. In 1939 he was sent to Denmark by the German government. In April 1940, Germany occupied Denmark. For a while, Denmark's Jewish community was safe, but then in September 1943, a Gestapo colleague told Duckwitz that all of Denmark's Jews were to be rounded up and send to extermination camps. Duckwitz took immediate action by travelling to Germany to try to stop the plan. When this was unsuccessful, he travelled to Sweden and sought the help of the Swedish Prime Minister. He also warned Danish politicians about the plan. In September and October 1943 Duckwitz's warnings caused many Danes to join together to smuggle the Danish Jews to safety in Sweden. Nearly 8,000 people were smuggled to Sweden over the course of a few days.<br><br> 
  In recognition of his efforts to save thousands of people, Duckwitz was honoured after World War II finished by being appointed as West Germany's Ambassador to Denmark in 1955, and as West Germany's Secretary of State in 1966. In order to honour his efforts to help the Jewish people, Duckwitz was declared as "righteous among the nations" by Vad Hashem (The World Holocaust Remembrance Center).
  <a href="" target="_blank" id="tribute-link" alt="Source">Visit the Georg Duckwitz Wikipedia page for more information</a>


                section {
  background: url("");
  background-repeat: no-repeat;
  background-blend-mode: lighten;
  height: 250px   

height: 50px; 

p {
  font-size: 16px;

  color: black;
  font-size: 26px;

  width: auto;
  height: auto;

  max-width: 100%;
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;

  border: 1px solid red;
  font-size: 16px;

  font-size: 14px;

h2 {
  color: #2B65EC;
  font-size: 24px;


                // !! 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.