css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

<body id="body">
<div id="firstsplit">
<h1>A Tribute To</h1>
<h2>Mohandas Karamchand Gandhi (1869-1958)</h2>
<h3>The father of the nation</h3>
<div id="image-block">
<img class="img-responsive" src="http://trak.in/wp-content/uploads/2014/10/Mahatma-Gandhi-Dandi-March.jpg" width="1200" height="500" alt="image-mahatma-gandhi" id="img-gandhi">
<figcaption style="text-align: center;">Mahatma Gandhi Leading the Dandi March</figcaption>
<h4 style="text-align: left;">Here is the timeline of Gandhi:</h4>
	<li><strong>1869</strong> Mohandas Karamchand Gandhi was born in Porbandar, a coastal town in present-day Gujarat, India.</li>
	<li><strong>1876</strong> Gandhi Begins Primary School in Rajkot. </li>
	<li><strong>1881</strong> Gandhi Enters High School in Rajkot.</li>
	<li><strong>1883</strong> Gandhi Marries Kasturbai Makhanji in an Arranged Child Marriage.</li>
	<li><strong>1884</strong> Gandhi Enters Rebellious Adolescent Phase, Engaging in Activities.</li>
	<li><strong>1885</strong> Gandhi's Father Dies at 63.</li>
	<li><strong>1888</strong> Gandhi Travels to London to Train as a Barrister.</li>
	<li><strong>1891</strong> Gandhi Returns to India from London After Passing the Bar.</li>
	<li><strong>1893</strong> Gandhi Travels to South Africa to Work Under a Year-Long Contract with Dada Abdulla & Co., an Indian Firm.</li>
	<li><strong>1893</strong> Gandhi is Ejected from a South African Train, Motivating Him to Fight for Indian Rights in the British Colony.</li>
	<li><strong>1894</strong> Gandhi Founds the Natal Indian Congress.</li>
	<li><strong>1897</strong> Gandhi is Nearly Lynched by White Settlers in Durban upon Returning from a Brief Trip to Fetch his Family in India.</li>
	<li><strong>1899</strong> Gandhi Organizes an Indian Ambulance Corps of 1100 Men During His Service in the Boer War.</li>
	<li><strong>1904</strong> Gandhi Founds the Phoenix Settlement.</li>
	<li><strong>1906</strong> Gandhi Organizes Stretcher-Bearer Corps that Serves During the Zulu Uprising.</li>
	<li><strong>1906</strong> Gandhi Introduces Non-Violent Protest Philosophy of Satyagraha.</li>
	<li><strong>1908</strong> Gandhi is Arrested for the First Time, for Refusing to Carry an Obligatory ID Card in South Africa.</li>
	<li><strong>1910</strong> Gandhi Establishes the Tolstoy Farm, which Serves as a Base of Operations for His Activities in South Africa.</li>
	<li><strong>1913</strong> Gandhi Begins "Great March" to Gain Indian Rights in South Africa.</li>
	<li><strong>1914</strong> Gandhi Suspends South African Struggle After Winning Passage of the Indian Relief Act.</li>
	<li><strong>1915</strong> Gandhi Receives Hero's Welcome Upon Returning to India from South Africa.</li>
	<li><strong>1917</strong> Gandhi Receives Hero's Welcome Upon Returning to India from South Africa.</li>
	<li><strong>1917</strong> Gandhi Goes to Champaran to Investigate Conditions of Local Farmers</li>
	<li><strong>1917</strong> Gandhi Establishes Sabarmati Ashram.</li>
	<li><strong>1918</strong> Gandhi Begins Advocating on Behalf of Farmers in Kheda Subject to Oppressive Taxation During a Famine.   </li>
	<li><strong>1919</strong> British Government Passes the Rowlatt Act in Colonial India, Indefinitely Extending the Use of 'Emergency Measures.</li>
	<li><strong>1919</strong> Jallianwala Bagh Massacre.</li>
	<li><strong>1920</strong> The Gandhi Era of the Indian Independence Movement Begins with the Non-Cooperation Movement.</li>
	<li><strong>1921</strong> Gandhi is Given Exclusive Authority Over the Indian National Congress.</li>
	<li><strong>1922</strong> Nationalist Mob Sets Fire to a Police Station in Chauri Chaura Incident, Prompting Mahatma Gandhi to Call Off the Non-Cooperation Movement.</li>
	<li><strong>1922</strong> Gandhi is Arrested by the British Government on Charges of Inciting Violence at Chauri Chaura.</li>
	<li><strong>1924</strong> Gandhi is Released from Prison After Serving Only Two Years of a Six-Year Sentence Following Surgery for Appendicitis.</li>
	<li><strong>1924</strong> Gandhi Begins Twenty-One Day Fast in an Attempt to Reconcile Hindus and Muslims.</li>
	<li><strong>1925</strong> Gandhi Founds the All-India Spinners' Association.</li>
	<li><strong>1927</strong> Gandhi's 'The Story of My Experiments with Truth' is Published.</li>
	<li><strong>1929</strong> Indian National Congress Raises the Tricolor Flag of India.</li>
	<li><strong>1930</strong> Declaration of the Independence of India.</li>
	<li><strong>1930</strong> Mahatma Gandhi Embarks on the Salt Satyagraha.</li>
	<li><strong>1930</strong> Mahatma Gandhi Arrives at Dandi, Gujarat, Concluding the Salt March.</li>
	<li><strong>1931</strong> Lord Irwin, Viceroy of India, Signs the Gandhi-Irwin Pact.</li>
	<li><strong>1931</strong> Gandhi Sets Sail for England to Represent the Indian National Congress at the Second Round Table Conference.</li>
	<li><strong>1931</strong> Gandhi Arrives in Bombay After His Visit to Europe.</li>
	<li><strong>1932</strong> Gandhi Begins Six-Day Fast to Protest Separate Elections for Untouchables.</li>
	<li><strong>1934</strong> Gandhi Announces Retirement from Politics to Focus on Village Economics.</li>
	<li><strong>1936</strong> Gandhi Relocates Base of Operations to Sevagram, a Small Village Near Wardha in Central India.</li>
	<li><strong>1939</strong> Gandhi Announces Fast-Unto-Death in the Effort to Form a People's Council in Rajkot.</li>
	<li><strong>1942</strong> The Cripps' Mission.</li>
	<li><strong>1942</strong> The All India Congress Committee Launches the Quit India Movement.</li>
	<li><strong>1942</strong> Gandhi is Arrested, Along with the Entire Congress Working Committee.</li>
	<li><strong>1942</strong> Mahadev Desai, Gandhi's Personal Secretary, Dies From Heart Failure.</li>
	<li><strong>1944</strong> Kasturba Gandhi Dies at Age 74.</li>
	<li><strong>1946</strong> The British Cabinet Mission Arrives in India.</li>
	<li><strong>1946</strong> The Simla Conference.</li>
	<li><strong>1946</strong> Direct Action Day, Also Known as the "Great Calcutta Killing".</li>
	<li><strong>1946</strong> Formation of the Interim Government of India.</li>
	<li><strong>1947</strong> United Kingdom Passes the Indian Independence Act 1947.</li>
	<li><strong>1947</strong> The Partition of India.</li>
	<li><strong>1948</strong> Mahatma Gandhi Announces Fast to End Hindu/Muslim Violence in Delhi.</li>
	<li><strong>1948</strong> Mohandas Karamchand Gandhi is Assassinated by Nathuram Godse.</li>
<blockquote>Live as if you were to die tomorrow; learn as if you were to live forever.
 <cite> Mohandas karamchand Gandhi</cite>
<h5>If you believe M.K. Gandhi can inspire you or others or want to learn more  about him and his life, click the link:
<a href="https://en.wikipedia.org/wiki/Mahatma_Gandhi" target="_blank" class="text-decoration: nones">Mahatma Gandhi Wikipedia.</a></h5>
<p id="fcc-nabilhassan">Written and coded by <a href="https://www.freecodecamp.com/devd01" target="_blank"> Nabil Hassan.</a> <br>
<div id="socialmedia">
Follow me on <button><a href="https://www.facebook.com/nabilhassan.786" target="_blank">Facebook</a></button>
<button><a href="https://twitter.com/SupercoolNabs"target="_blank">Twitter</a></button>
<button><a href="https://www.instagram.com/_nabilhassan_/" target="_blank">Instagram</a></button>
<button><a href="https://github.com/DevD01" target="_blank">GitHub</a></button><br/>
<button id="bottomtotop"><a href="#body">Home</a></button>

		text-align: center;
		text-align: center;
		text-align: center;
		padding-left: 16px;
  text-decoration: none;
		margin: 65px 30px 10px 50px;
		background-color: #000000;
		color: #FFFFFF;
  text-decoration: none;
	.button {
    		background-color: grey;
   		border: 2px 2px 2px 2px;
   		border-color: black;
    		color: black;
    		padding: 2px 2px 2px 2px;
   		text-align: center;
    		text-decoration: none;
    		display: block;
    		font-size: 16px;
    		border-radius: 50%;
    		width: 50px;
    		margin: 0;
    		float: right;
	.button:hover {
    		background-color: black;
    		color: white;
    		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

		margin: 5px 5px 5px 10px;
		background-color: #333333;
		border-radius: 1%;
		border-color: black;
		border-style: solid;
		border-spacing: 10px;
		border-radius: 1%;
		text-align: center;
	blockquote {
		font-family: Georgia, serif;
		font-size: 18px;
		font-style: italic;
		width: 600px;
		margin: 0.25em 0;
		padding: 0.25em 40px;
		line-height: 1.45;
		position: relative;
		color: rgba(249, 164, 6,10);
	blockquote:before {
		display: block;
		content: "\201C";
		font-size: 80px;
		position: absolute;
		left: -20px;
		top: -20px;
		color: #FFFFAB;
	blockquote cite {
		color: green;
		font-size: 14px;
		display: block;
		margin-top: 5px;
	blockquote cite:before {
		content: "\2014\ \2009";
		float: left;
		float: right;
img {
    width: 100%;
    height: auto;
🕑 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.
Loading ..................