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

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.

If the stylesheet 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 CSS 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

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

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

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>
<main id="main" class="container">

    <header class="header">
      <div class="title-box">
        <img class="decorative-flag" src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" alt="">
        <h1 id="title" class="title">Poland</h1>
        <img class="decorative-flag additional-flag" src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" alt="">
      </div>
      <h2 class="sub-title">Poland is a country in which I live.</h2>
    </header>

    <div class="tribute">
      <div id="img-div" class="image-div map">
        <img id="image" class="image" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/EU-Poland.svg" alt="Poland on the map">
        <p id="img-caption" class="image-caption">Poland on the map</p>
      </div>
      <p id="tribute-info" class="text">
        <a id="tribute-link" class="link" target="_blank" href="https://en.wikipedia.org/wiki/Poland" title="Article about Poland at Wikipedia">Poland</a> (officially the Republic of Poland) is a country in Central Europe. Bordered by Germany to the west;
        the Czech Republic and Slovakia to the south; Ukraine and Belarus to the east; and the Baltic Sea, Kaliningrad Oblast (a Russian exclave) and Lithuania to the north. With a population of over 38.5 million people, Poland is the 34th most populous
        country in the world.
      </p>
    </div>
    <div class="origin">
      <div class="image-div king-image">
        <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/08/MieszkoDagome.jpg" alt="The portrait of the duke Mieszko">
        <p class="image-caption">Mieszko I, Duke of Poland,<br> Imaginary portrait by Jan Matejko.</p>
      </div>
      <p class="text king-description">
        Poland's first historically documented ruler,
        <a class="link" target="_blank" href="https://en.wikipedia.org/wiki/Mieszko_I_of_Poland" title="Article about Mieszko I at Wikipedia">Mieszko I</a>, accepted Christianity with the Baptism of Poland in 966, as the new official religion of his subjects.
        Today Poland is a member of the European Union and NATO. Poland is a representative democracy, with a president as a head of state, whose current constitution dates from 1997. The government structure centers on the Council of Ministers, led by
        a prime minister. The Constitution of Poland is the supreme law in contemporary Poland, and the Polish legal system is based on the principle of civil rights, governed by the code of Civil Law. Historically, the most famous Polish legal act is
        the Constitution of 3 May 1791. Historian Norman Davies describes it as the first of its kind in Europe.
      </p>
    </div>

    <p class="text">
      Poland is the 16th most visited country in the world by foreign tourists, as ranked by World Tourism Organization (UNWTO).
      <a class="link" target="_blank" href="https://en.wikipedia.org/wiki/Krak%C3%B3w" title="Article about Krakow at Wikipedia">Kraków</a> was the former capital and a relic of Poland's Golden Age of Renaissance. The city served as the place of coronation
      of most Polish kings. In Wrocław, the Zoological Gardens are the largest in Poland and are one of the most popular tourist destinations in the country. The Old Town of Poland's capital, Warsaw, was reconstructed after its wartime destruction. The
      historic site of the Nazi-German Auschwitz concentration camp is located near Oświęcim. Poland's main tourist offerings include outdoor activities such as skiing, sailing and mountain hiking, as well as agrotourism, sightseeing historical monuments.
      Tourist destinations include the Baltic Sea coast in the north; the Masurian Lake District and Białowieża Forest in the east; on the south Karkonosze, the Table Mountains and the Tatra Mountains, where
      <a class="link" target="_blank" href="https://en.wikipedia.org/wiki/Rysy" title="Article about Rysy at Wipedia">Rysy</a>, the highest peak of Poland, and the famous Orla Perć mountain trail are located. The Pieniny and Bieszczady Mountains lie in
      the extreme south-east. There are over 100 castles in the country, many along the popular Trail of the Eagles' Nest.
    </p>


    <div class="gallery">
      <div class="image-flex">
        <a target="_blank" href="https://upload.wikimedia.org/wikipedia/commons/f/f0/Wawel2.jpg">
          <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Wawel2.jpg" alt="Viev of Wawel Castle">
        </a>
        <p class="image-caption">The Royal Castle in Kraków</p>
      </div>

      <div class="image-flex">
        <a target="_blank" href="https://upload.wikimedia.org/wikipedia/commons/5/53/Rysy-2004-06-11.jpg">
          <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Rysy-2004-06-11.jpg" alt="View to the summit">
        </a>
        <p class="image-caption ">Rysy, northern summit</p>
      </div>

      <div class="image-flex big-image">
        <a target="_blank" href="https://upload.wikimedia.org/wikipedia/commons/f/f6/Marienburg_2004.jpg">
          <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Marienburg_2004.jpg" alt="View to the brick castle">
        </a>
        <p class="image-caption">Malbork Castle is the world's largest medieval brick gothic complex</p>
      </div>

    </div>


  </main>
  <div class="footer">
    <p>Created by <a class="link" target="_blank" href="http://mybytes.pl/">Sebastian Sporek</a><p>
    <p>This project was made on Dec 5, 2016, as a task from FreeCodeCamp course.
      On July 25, 2018, I refactored it to pass some new tests which were added
      in the new version of FCC course. The content was not changed, but
      two unnecessary images were deleted. Now the page has only one main image.
    </p>
  </div>
!

CSS 

              
                * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
}

body {
  background-color: white;
}

.container {
  font-family: 'Lato', sans-serif;
}

.header {
  font-family: 'Baloo Bhaina', cursive;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.title-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.decorative-flag {
  height: auto;
  max-width: 40px;
  display: block;
  border: 1px solid red;
  margin: 0 0.5rem;
}

.additional-flag {
  display: none;
}

.title {
  font-size: 2rem;
  line-height: 2rem;
  padding-top: 0.75rem;
  color: red;
  letter-spacing: 0.5rem;
}

.sub-title {
  font-size: 1.25em;
  line-height: 1.25rem;
  font-weight: normal;
  color: black;
  padding: 0.5rem 0.25rem 0.5rem 0.25rem;
}

.image-div {
  margin-bottom: 1rem;
  margin: 0 auto;
}

.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.image-caption {
  font-size: 0.8rem;
  padding: 0.25rem 0;
  text-align: center;
  background-color: #ddd;
}

.king-image {
  max-width: 250px;
}

.king-image>.image-caption {
  max-width: 250px;
  margin: 0 auto;
}

.text {
  text-align: justify;
  font-size: 0.8rem;
  padding: 0.25rem;
  line-height: 1rem;
}

.link {
  color: red;
  letter-spacing: 1px;
  font-weight: bold;
}

.gallery {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.image-flex {
  margin-bottom: 1rem;
  flex: 1 1 auto;
  max-width: 450px;
}

.image-flex p {
  width: 100%;
}

.footer {
  margin: 10px auto;
  text-align: center;
  color: #555;
  border-top: 1px solid silver;
  font-size: 0.7rem;
  max-width: 1024px;
  font-family: 'Lato', sans-serif;
  padding: 0.25rem 0.5rem 0;

}
.footer .link {
  color: #555;
}

@media (min-width: 375px) {
  .title-box {
    flex-direction: row;
    justify-content: center;
  }
  .additional-flag {
    display: block;
  }
  .image-div {
    max-width: 80vw;
  }
  #image-div {
    max-width: 80vw;
  }
  .image-caption {
    font-size: 0.75rem;
  }
  .text {
    font-size: 1rem;
    padding: 0.5rem;
    line-height: 1.1rem;
  }
}

@media (min-width: 768px) {
  .title {
    font-size: 2.5rem;
    line-height: 2.5rem;
    padding-top: 0.75rem;
  }
  .sub-title {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .decorative-flag {
    width: 50px;
    margin: 0 1rem;
  }
  .image-caption {
    font-size: 1.0rem;
    padding: 0.5rem 0;
  }
  .text {
    font-size: 1.25rem;
    line-height: 1.5rem;
    padding: 1rem;
  }
  .image-flex {
    flex: 1 1 340px;
    height: 400px;
    margin: 10px;
  }
  .big-image {
    flex: 1 1 auto;
  }
  .image-flex>.image-caption {
    min-height: 40px;
    line-height: 1.5rem;
  }
  .image-flex>a>img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }
  .footer {
    margin-top: 20px;
  }
}

@media (min-width:1024px) {
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  .title {
    font-size: 3rem;
    line-height: 3rem;
    padding-top: 1rem;
  }
  .sub-title {
    font-size: 2rem;
    line-height: 2rem;
  }
  .decorative-flag {
    width: 60px;
    margin: 0 1rem;
  }
  .origin, .tribute {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .king-image, .map {
    flex-shrink: 0;
    flex-basis: 400px;
    padding: 1rem;
  }
  .footer {
    margin-top: 30px;
  }
}
!

JS
!
999px

Console