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.

              <div class="col-md-2">

<div class="col-md-8">

  <div id="#heading">
    <h1 class="text-center text-primary">Alan Turing</h1>
    <h3 class="text-center text-primary">The man who cracked the Enigma Code</h3>

  <div id="row">
    <div class="col-md-2">
    <div class="col-md-8">
		<div id="#picture-box" class="text-center img-rounded" style="background-color: #a48664">
			<img id="#picture" src="https://ichef.bbci.co.uk/wwfeatures/live/624_351/images/live/p0/0v/2b/p00v2b0b.jpg" alt="Alan Turning with keyboard backdrop" class="img-rounded">
			<p>Alan Turing infront of an Enigma Machine</p>
    <div class="col-md-2">

<div id="row2" class="col-md-10">
<div id="timeline">
  <h2 style="color: #ccccff">Timeline of Alan Turing's Work</h2>
  <p style="color: #66ccff">• 1912	Alan Mathison Turing born in Maida Vale, London, to Ethel Sara Turing (nee Stoney) and Julius Mathison Turing.<br>
• 1927-30	Alan furthers his love of science and maths by reading Einstein whilst at Sherborne. His great friend, Christopher Morcom, who shares his interests, suddenly dies. Alan is devastated.<br>
• 1934	Alan graduates with distinction in Mathematics from King's College, Cambridge.<br>
• 1938	Alan goes to Princeton University in America to study mathematics and is awarded a PhD.<br>
• 1939	September - Alan is asked to join the Government Codes and Ciphers School and arrives at Bletchley Park the day after war is declared.<br>
• 1940	With Gordon Welchman, Alan develops the Bombe to decipher the messages sent by the Germans using their Enigma machine.<br>
• 1943-45	Alan works with top people in the USA, which he visits to share information on code breaking.<br>
• 1945	At the end of the war, Alan Turing is awarded the OBE for his wartime services.<br>
• 1946	Alan publishes a paper with the first detailed design of a stored-program computer.<br>
• 1949	Alan is made deputy director of the Computing Laboratory at Manchester University.<br>
• 1950	Alan publishes the famous paper 'Computing Machinery and Intelligence' in which he develops the Turing Test.<br>
• 1951	Alan is elected Fellow of the Royal Society, and also gives talks about Artificial Intelligence on the BBC.<br>
• 1952	Alan is arrested for gross indecency. He loses his security clearance so he cannot work. He is offered chemical treatment instead of going to prison. The treatment makes him very unwell.<br>
• 1954	Alan dies in his home in Wilmslow, Cheshire, from poisoning. A half-eaten apple was found next to him laced with cyanide.<br>
• 1986	A play, Breaking the Code, about Alan's life and work opens in the West End with Derek Jacobi playing Alan.<br>
• 2007	A slate sculpture of Alan Turing is unveiled at Bletchley Park.<br>
• 2009	Thousands of people sign a petition. The Prime Minister, Gordon Brown makes a public apology saying the treatment of Alan Turing was "appalling". </p>
  <div id="#facts" style="background-color: #7f7f7f; height: 160px" class="col-md-2 img-rounded">
    <p>Quick facts:</p>
       <li>Olympic-Level runner</li>
       <li>Developed a new field of Biology</li>
       <li>Had a stutter while talking</li>
<div class="col-md-3">
  <div id="#view-more" class="col-md-6">
    <h2 class="text-center" style="color #ffa346">Click <a href="https://en.wikipedia.org/wiki/Alan_Turing" target="_blank">here</a> to view Alan's Wikipedia Page</h2>
              img {
  margin-top: 20px;
  max-width: 80%;

  background-color: #000;

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