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" 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>
            
          
!
            
              * {
  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;
  }
}

            
          
!
999px
🕑 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.

Console