Pen Settings

HTML

CSS

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

JavaScript

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

Behavior

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.

HTML

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

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Anne Frank's Tribute Page</title>
    
  </head>
  <body>
    <header>
      <h1 id="title">Annelies Marie <span class="name">"Anne" Frank</span></h1>
      <p id="subtitle">The diary of a young girl</p>
      <figure id="img-div">
        <img id="image" src="https://i.imgur.com/nOLBxmc.jpg" alt="Anne Frank smiling" />
        <figcaption id="img-caption">
          Anne Frank smiling at the camera in a black and white picture taken by
          her father.
        </figcaption>
      </figure>
    </header>
    <main id="main">
      <h2 id="timeline-title">Timeline of a short but inspiring life:</h2>
      <div id="tribute-info">
        <ul>
          <li>
            Anne was born on <strong>June 12, 1929</strong>, in Frankfurt, three
            years after her older sister, Margot.
          </li>
          <li>
            After the Nazis reached the power in <strong>1933</strong>, Anne's
            parents, Otto and Edith Frank, decided to move to Amsterdam, where
            Otto had accepted to start a company.
          </li>
          <li>
            Anne's new life in Amsterdam started in
            <strong>February 1934</strong>. She was just one of approximately
            300,000 Jews who left Germany between <strong>1933</strong> and
            <strong>1939</strong>.
          </li>
          <li>
            Anne started school in <strong>April 1934</strong>. She quickly
            adapted to the new environment, learning dutch, and making new
            friends. She was very popular because of her creativity.
          </li>
          <li>
            Germany's military occupation was spreading across Europe. In
            <strong>May 1940</strong>, Germany invaded the Netherlands, and the
            actions against Jews in that country began. Anne's father, Otto,
            tried to obtain a visa for him and his family to emigrate to the
            United States, but the visa is never processed, due to the closing
            of the United States consulate.
          </li>
          <li>
            On her thirteenth birthday in <strong>1942</strong>, Anne received a
            diary. She immediately started writing in it. She wrote on the cover
            page:
            <em
              >"I hope I will be able to confide everything to you, as I have
              never been able to confide in anyone, and I hope you will be a
              great source of comfort and support".</em
            >
          </li>
          <li>
            On <strong>June 20, 1942</strong>, she wrote about the restrictive
            situation the Dutch Jews were experiencing.
          </li>
          <li>
            On <strong>July 5</strong>, Anne's mother, Margot, received a call,
            ordering her to relocate to a work camp in Germany. On the morning
            of <strong>July 6</strong>, the family decided to move into their
            hiding place, a secret annex Otto had set up at his business
            offices.
          </li>
          <li>
            During the period of hiding, Anne constantly wrote in her diary. She
            wrote about the relationship with her parents and sister, the events
            that were occurring, her feelings and concerns. She rewrote a large
            part of the diary, because she wanted to be a journalist, and was
            planning to publish what she was writing in her diary during that
            time, hiding in the secret annex. She even thought of a title for
            her book,
            <em>"Het Achterhuis"</em> or The Secret Annex.
          </li>
          <li>
            On <strong>April 5, 1944</strong>, she wrote:
            <em
              >"I want to be useful or bring enjoyment to all people, even those
              I've never met. I want to go on living even after my death! And
              that's why I'm so grateful to God for having given me this gift,
              which I can use to develop myself and to express all that's inside
              me!"</em
            >
          </li>
          <li>
            She also wrote:
            <em
              >"When I write I can shake off all my cares. My sorrow disappears,
              my spirits are revived! But, and that's a big question, will I
              ever be able to write something great, will I ever become a
              journalist or a writer?"</em
            >
          </li>
          <li>
            On <strong>August 4, 1944</strong>, the hiding place was discovered
            by german police and Anne, her family and other refugees were
            captured
          </li>
          <li>
            During the next days, they were transferred to an overcrowded
            detention center, and then sent to the Westerbork camp, the same way
            more than 100,000 Jews had already been sent.
          </li>
          <li>
            On <strong>September 3, 1944</strong>, they were transported by
            train to Auschwitz with 1,011 more Jews for two days, until they
            arrived. Men and women were separated, being the last time Anne saw
            his father.
          </li>
          <li>
            On <strong>October 30, 1944</strong>, Anne and her sister Margot
            were selected to be transferred to the Bergen-Belsen concentration
            camp, for forced labor activities, with approximately 1,000 more
            women. They left Auschwitz and her mother on
            <strong>November 1 - 2</strong>.
          </li>
          <li>
            By the winter of <strong>1945</strong>, the situation in
            Bergen-Belsen was getting worst, with almost no food and typhus
            infecting prisoners. In <strong>February</strong>, Anne and Margot
            fell ill and died. No specific date of death is known.
          </li>
        </ul>

        <p>
          <em
            >"It's difficult in times like these: ideals, dreams and cherished
            hopes rise within us, only to be crushed by grim reality. It's a
            wonder I haven't abandoned all my ideals, they seem so absurd and
            impractical. Yet I cling to them because I still believe, in spite
            of everything, that people are truly good at heart."</em
          >
        </p>
      </div>
    </main>

    <footer>
      If you would like to know more about this young girl's inspiring story,
      you can visit the
      <a id="tribute-link" target="_blank" href="https://www.annefrank.org"
        ><strong>Official Anne Frank website</strong></a
      >
    </footer>
  </body>
</html>

              
            
!

CSS

              
                html {
  font-size: 20px;
  --pinkcolor: #f1856a;
  --lightbluecolor: #e0fbfc;
}

body {
  font-family: Courier New, courier;
  text-align: center;
  color: #293241;
  background-color: var(--pinkcolor);
}

#main {
  background-color: var(--pinkcolor);
  border-radius: 10px;
  padding-bottom: 3px;
}

#title {
  background-color: #98c1d9;
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
}

@media (max-width: 360px) {
  #title {
    padding: 10px;
    margin: 5px;
  }
}

.name {
  display: block;
}

#subtitle {
  text-align: center;
  padding: 0px;
  margin: 0px 10px 0px 10px;
}

#img-div {
  background-color: var(--lightbluecolor);
  padding: 10px;
  margin: 10px 40px 10px 40px;
  position: relative;
  border-radius: 10px;
}

@media (max-width: 360px) {
  #img-div {
    padding: 5px;
    margin: 5px;
  }
}

#image {
  position: relative;
  max-width: 50%;
  height: auto;
  display: block;
  padding: 10px;
  margin: 0 auto;
}

@media (max-width: 360px) {
  #image {
    max-width: 75%;
  }
}

#img-caption {
  font-size: 0.7rem;
  margin: 2px;
}

#timeline-title {
  font-size: 1.2rem;
  padding-top: 20px;
  padding-bottom: 10px;
  margin: 0px;
}

#tribute-info {
  background-color: var(--lightbluecolor);
  text-align: left;
  padding: 10px 0px 10px 0px;
  margin: 10px;
  border-radius: 10px;
}

@media (max-width: 360px) {
  #tribute-info {
    padding: 5px;
    margin: 5px;
  }
}

ul {
  margin: 10px 20px 10px 20px;
}

@media (max-width: 360px) {
  ul {
    margin: 0px;
  }
}

li {
  margin: 20px 10px 20px 10px;
}

@media (max-width: 360px) {
  li {
    margin: 5px;
  }
}

p {
  padding: 20px 50px 10px 50px;
  text-align: justify;
}

@media (max-width: 360px) {
  p {
    padding: 10px;
    margin: 5px;
  }
}

footer {
  font-size: 1rem;
  padding: 10px;
  margin: 10px;
}

a {
  display: block;
  color: #293241;
}

a:hover {
  color: var(--lightbluecolor);
}
              
            
!

JS

              
                
              
            
!
999px

Console