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.
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.
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.
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;
}
}
Also see: Tab Triggers