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.

              <div class="container-fluid">
  <div class="jumbotron text-center">
	  <h1 class="header">Winston Churchill</h1>
		<h2 class="header"><em>The Greatest Man of the 20th Century</em></h2>
	<div class="jumbotron">

	  <!-- Row 1 -->
		<div class="row">
			<div class="col-md-6">
				<h3 class="header">A Chronology of the Great Man's Life</h3>
					<li><em><strong>Born:</strong> 30 November 1874, Woodstock, Oxfordshire, UK</em>, son of Lord Randolph Henry Spencer-Churchill and Lady Randolph Churchill, née Jerome, an American from the great borough of Brooklyn, New York.</li>
					<li><em><strong>Graduated Harrow:</strong> 1893</em>, after writing his mother many times that he couldn't stand the place.</li>
					<li><em><strong>Commissioned:</strong> 20 February 1895, Cornet, 4th Queen's Own Hussars</em>, after graduating from the Royal Military College, Sandhurst.</li>
					<li><em><strong>Bombay:</strong> October, 1896</em>, stationed in Bombay, British India.</li>
					<li><em><strong>Battle of Omdurman:</strong> 2 September 1898</em>, participated in the last meaningful British cavalry charge as a member of the 21st Lancers under General Herbert Kitchener.</li>
					<li><em><strong>War Correspondent:</strong> 12 October 1899,</em> when the Second Boer War broke out, he became a war correspondent for the Washington Post.  He was later captured by the Boers and escaped to much fanfare.</li>
					<li><em><strong>Parliament:</strong> 1900 General Election, seat of Oldham</em>, Churchill entered Parliament.</li>
					<li><em><strong>Married:</strong> 12 September 1908, Church of St. Margaret, Westminster Abbey, City of Westminster, London, UK</em>, to Clementine Hozier.</li>
					<li><em><strong>First Lord of the Admiralty:</strong> 1911 - 1915</em>, he received this appointment before World War I and continued in it until the failure of the Gallipoli landings in the Dardanelles led to his ouster.</li>
					<li><em><strong>Chancellor of the Exchequer:</strong> 1924-1929,</em> he oversaw a return to the gold standard that apparently didn't go as well as it should have.</li>
					<li><em><strong>First Lord of the Admiralty:</strong> 3 September 1939 - 10 May 1940</em>, he became a member of Neville Chamberlain's War Cabinet.</li>
					<li><em><strong>Prime Minister:</strong> 10 May 1940 - 26 July 1945,</em> he began his first term as P.M. under attack from the Nazis, and the country in disarray, and left with the defeat of the Axis powers and the country restored.</li>
					<li><em><strong>Opposition Leader:</strong> 1945 - 1951</em>, </li>
					<li><em><strong>First Stroke:</strong> 1949, </em>on holiday in the south of France, he suffered his first stroke.</li>
					<li><em><strong>Prime Minister:</strong> 26 October 1951 - 6 April 1955,</em> he began his second term as P.M. during the early years of the Cold War when western values were under attack by Soviet communists and British socialists, and did his best to fight these swamp rats, but it is an ongoing struggle.</li>
					<li><em><strong>Nobel Prize:</strong> 1953</em>, won the Nobel Prize for Literature.</li>
					<li><em><strong>Died:</strong> 24 January 1965, Kensington, County London, UK</em>, aged 90 of a stroke.</li>
		  <div class="col-md-6">
			  <img	src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Sir_Winston_Churchill_-_19086236948.jpg"
				  		alt="Winston Churchill, Greatest Man of the 20th Century">

		<!-- Row 2 -->
		<div class="row">
			<div class="col-md-6">
				<img	src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Churchill_V_sign_HU_55521.jpg"
		  				alt="Winston Churchill, Making His Famous 'V' for Victory Sign.">
			<div class="col-md-6">
				<h3 class="header">Major Historical Works</h3>
					<li><em><strong><u>The World Crisis</u>:</strong> 1923 - 1931</em>, six volumes.</li>
					<li><em><strong><u>Marlborough: His Life and Times</u>:</strong> 1933 - 1938</em>, four volumes on his ancestor.</li>
					<li><em><strong><u>The Second World War</u>:</strong> 1948 - 1953</em>, six volumes.</li>
					<li><em><strong><u>A History of the English-Speaking Peoples</u>:</strong> 1956 - 1958</em>, four volumes.</li>
				<h3 class="header">Major Speeches</h3>
					<li><em><strong>Blood, Toil, Tears, and Sweat:</strong> 13 May 1940</em>.</li>
					<li><em><strong>We Shall Fight on the Beaches:</strong> 4 June 1940</em>.</li>
					<li><em><strong>Their Finest Hour:</strong> 18 June 1940</em>.</li>
					<li><em><strong>Never Give In:</strong> 29 October 1941</em>.</li>
					<li><em><strong>The Sinews of Peace:</strong> 5 March 1946</em>.</li>
				<p>For more on Churchill refer to <a href="https://www.winstonchurchill.org/" target="_blank">Winston Churchill.org</a>.</p>


              body {
  background-color: coral;
  margin: 50px;

.header {
  font-weight: bold;

.jumbotron {
  background-color: lightsteelblue;

img {
  width: 100%;
  border: 5px solid coral;

🕑 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.