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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
: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;
}
}
Also see: Tab Triggers