Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&display=swap" rel="stylesheet">
<main id="main">
  <header>
    <h1 id="title">Mustafa Kemal ATATÜRK</h1>
    <p>Turkey's first President and the leader of the Turkish War of Independence</p>
  </header>
  <figure id="img-div">
    <img id="image" src="https://blog.perapalace.com/wp-content/uploads/2018/11/shutterstock_190400015.jpg" alt="Mustafa Kemal Ataturk">
    <figcaption id="img-caption">Mustafa Kemal Atatürk</figcaption>
  </figure>
  <p class="dark">Mustafa Kemal Ataturk was the founder and first President of the <a href="https://en.wikipedia.org/wiki/Turkey" target="_blank">Republic of Turkey</a>. He was a division commander during the Battle of Gallipoli in 1915 and was instrumental in preventing the partition of Anatolia and Eastern Thrace through his political and military leadership in the Turkish War of Independence. The successful anti-imperialist resistance drove out the various Allied occupying forces, and ultimately led to the establishment of the Republic of Turkey in 1923. Ataturk then instituted reforms in the political, economic and cultural aspects of life in Turkey, which led to the creation of a democratic secular nation-state guided by educational and scientific progress.</p>
  <div class="dark">
    <h2>Founding & History of the Turkish Republic</h2>
    <p>Atatürk is internationally known as an outstanding statesman, soldier, commander, reformer, and nation-builder who introduced many reforms with the aim of founding a new secular democratic and modern republic after the collapse of the Ottoman Empire. As a visionary, revolutionary figure, and political thinker, he strove to set Turkey on a path from which Turks today vow not to stray (this path included a series of political, legal, cultural, social and economic reforms, such as the emancipation of women, change in dress and alphabet). Ataturk's legacy and principles are deeply embedded in the Turkish national consciousness, while the results of his reform and modernization movement are firmly rooted in all realms and dimensions of life in Turkey.</p>
    <p>The Turkish people's enduring respect and gratitude for Ataturk's grasp of the future needs of Turkey, along with his nobility of purpose, is demonstrated by the love of nation and patriotism, and is a reason why his statues and photographs are so widely displayed. Turks, regardless of political party affiliation, desire to protect the national ideals which are founded on Ataturk's legacy and principles.</p>
  </div>
  <section id="tribute-info" class="dark">
    <h2>A Brief Summary of His Life</h2>
    <ul>
      <li>
        <span class="year">1881</span>Mustafa Kemal Atatürk is born in Salonika.
      </li>
      <li>
        <span class="year">1893</span>The young Mustafa enters the Military Preparatory School in Salonika and is
        given the second name "Kemal" by his teacher.
      </li>
      <li><span class="year">1895</span>Mustafa Kemal enters the Military High School at Manastir.</li>
      <li><span class="year">1899</span>Mustafa Kemal enters the infantry class of the Military Academy in
        Istanbul.</li>
      <li><span class="year">1902</span>Mustafa Kemal graduates from the Military Academy and continues his studies at the
        General Staff College.</li>
      <li><span class="year">1905</span>Mustafa Kemal graduates from the General Staff College with the rank of
        Staff Captain and is posted to the Fifth Army, based in Damascus.</li>
      <li><span class="year">1906</span>Mustafa Kemal and his friends become active in the little known
        "Fatherland and Freedom" society in Damascus.</li>
      <li><span class="year">1907</span>Mustafa Kemal is transferred to the Third Army and travels to Salonika.</li>
      <li><span class="year">1911</span>Mustafa Kemal is transferred to the General Staff in Istanbul.</li>
      <li><span class="year">1912</span>Mustafa Kemal successfully leads the Tobruk offensive in Libya.</li>
      <li><span class="year">1912</span>Mustafa Kemal is appointed Director of Operations (Mediterranean Straits
        Special Forces).</li>
      <li><span class="year">1913</span>Mustafa Kemal is appointed Military Attaché in Sofia.</li>
      <li><span class="year">1915</span>Allied navy fails to force the Turkish Straits. Mustafa Kemal demonstrates outstanding skills as a soldier and commander throughout the battle at Canakkale.</li>
      <li><span class="year">1915</span>Allied troops land at Arıburnu (Anzac Cove) along the Dardanelles; Mustafa Kemal plays a major role in stopping their advance.</li>
      <li><span class="year">1915</span>Mustafa Kemal is appointed Commander of the Anafartalar Group on the Gallipoli Peninsula</li>
      <li><span class="year">1916</span>Mustafa Kemal is promoted Brigadier-General.</li>
      <li><span class="year">1916</span>Mustafa Kemal wins Bitlis and Muş back from the enemy.</li>
      <li><span class="year">1918</span>Mustafa Kemal becomes Commander, 'Lightning Group' of Armies.</li>
      <li><span class="year">1919</span>Mustafa Kemal is appointed Inspector of the 9th Army based in Erzurum and is granted extensive powers.</li>
      <li><span class="year">1919</span>Mustafa Kemal leaves Istanbul for Samsun on the Bandırma vessel.</li>
      <li><span class="year">1919</span>Mustafa Kemal lands in Samsun, a city located on the Black Sea.. This date marks the beginning of the Turkish national liberation movement, and is an official holiday dedicated to the youth of Turkey.</li>
      <li><span class="year">1919</span>Mustafa Kemal resigns from his post of Inspector of the 3rd Army, and from the army.</li>
      <li><span class="year">1919</span>Mustafa Kemal is elected Chairman of the Erzurum Congress.</li>
      <li><span class="year">1919</span>Mustafa Kemal is elected Chairman of the Sivas Congress.</li>
      <li><span class="year">1919</span>Mustafa Kemal arrives in Ankara with the Excutive Committee.</li>
      <li><span class="year">1920</span>Mustafa Kemal opens the Turkish Grand National Assembly in Ankara.</li>
      <li><span class="year">1920</span>Mustafa Kemal is condemned to death by the government in Istanbul.</li>
      <li><span class="year">1921</span>Mustafa Kemal is appointed Commander-in-Chief by the Grand National Assembly.</li>
      <li><span class="year">1921</span>The battle of Sakarya, led by Mustafa Kemal, begins.</li>
      <li><span class="year">1921</span>The Grand National Assembly gives Mustafa Kemal the rank of Marshal and
        the title Gazi (Victor).</li>
      <li><span class="year">1922</span>Gazi Mustafa Kemal begins to lead the Great Offensive from the hill of
        Kocatepe.</li>
      <li><span class="year">1922</span>Gazi Mustafa Kemal Paşa wins the battle of Dumlupınar.</li>
      <li><span class="year">1922</span>Gazi Mustafa Kemal enters Izmir.</li>
      <li><span class="year">1922</span>The Grand National Assembly accepts Gazi Mustafa Kemal's proposal to
        abolish the Sultanate.</li>
      <li><span class="year">1923</span>Mustafa Kemal's mother Zübeyde Hanım dies in Izmir.</li>
      <li><span class="year">1923</span>Proclamation of the Turkish Republic. Gazi Mustafa Kemal is elected Turkey's
        First President.</li>
      <li><span class="year">1924</span>As part of Turkey's modernization, Gazi Mustafa Kemal wears a hat at Sarayburnu in
        Istanbul.</li>
      <li><span class="year">1928</span>As part of Turkey's reform process, Gazi Mustafa Kemal educates the public on the new Turkish alphabet at Sarayburnu.</li>
      <li><span class="year">1931</span>Gazi Mustafa Kemal establishes the Turkish Historical Society.</li>
      <li><span class="year">1932</span>Gazi Mustafa Kemal founds the Turkish Linguistic Society.</li>
      <li><span class="year">1934</span>The Grand National Assembly passes a law granting Gazi Mustafa Kemal the
        surname "Atatürk."</li>
      <li><span class="year">1938</span>Atatürk died at five past nine in the morning on November 10 in Dolmabahce Palace. Mourning Turkish citizens came to Istanbul to pay their last respects to Atatürk, until November 19, when the coffin in which his body rested, covered by a Turkish flag, was taken in procession to Sarayburnu. After it was placed onto the battleship Yavuz, it was transported to Izmit and later placed on a specially designated train which travelled at a slow speed throughout the country to enable mourners to pay tribute to their leader. Once the coffin arrived in Ankara on November 20, an official funeral was held on November 21. Dignitaries from many countries attended Atatürk’s state funeral. The coffin was moved in a solemn procession by gun carriage from the Grand National Assembly to the Ethnographic Museum, which had been selected as a temporary resting place until a mausoleum for Atatürk could be constructed.</li>
      <li><span class="year">1953</span>At five past nine on November 10, 1953, Atatürk’s remains were taken from the Ethnographic Museum in a Turkish flag-draped coffin for burial at Anıtkabir.</li>
    </ul>
  </section>
  <footer style="text-align:center; margin-bottom:2%;"><a id="tribute-link" target="_blank" href="https://www.ataturktoday.com/Chronology.htm">Please visit ataturktoday.com for more information.</a></footer>
</main>
              
            
!

CSS

              
                :root {
  --text-color: #484848;
  --bg-color: #f6f5ed;
  --links-color: #c30c0c;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
  max-width: 840px;
  margin: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 26px;
  text-align: justify;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  margin: 0 0 2ex 0;
}
#img-caption {
  text-align: center;
  font-size: 0.8em;
  font-style: italic;
}
h1,
h2 {
  text-align: center;
}
#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid white;
}
li {
  list-style-type: none;
  display: table;
  border-bottom: 1.35px solid #bdb9b6;
  width: 100%;
  padding: 10px 0px 10px 0;
}
ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
}
.dark {
  padding: 2%;
}
header {
  padding: 0.05%;
  border-radius: 10px;
  text-align: center;
}
.year {
  font-weight: bold;
  font-size: 1.2em;
  float: left;
  margin: 0 15px 0px 0;
  font-family: "Roboto Slab", serif;
}
a {
  color: var(--links-color);
}
@media (max-width: 1200px) {
  body {
    max-width: 65%;
  }
}
@media (max-width: 800px) {
  body {
    max-width: 98%;
  }
  .year {
    display: block;
    float: none;
    background-color: var(--text-color);
    color: var(--bg-color);
    text-align: center;
    width: max;
    margin: 10px 0 10px 0;
  }
  li {
    width: inherit;
    border: none;
    padding: 0;
  }
  #title {
    line-height: 35px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console