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