Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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>
<!--google font link -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">

<main id="main">
  <h1 id="title"><stron>Alan Mathison Turing</strong></h1>
  <p>'<strong>Alan Turing</strong> is often called the father of modern computing'</p>
  </div>
<figure id="img-div">
    <img
      id="image"
      src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Alan_Turing_Aged_16.jpg"
      alt="Alan Turing mathematician, computer scientist, logician, cryptanalyst, philosopher and theoretical biologist."
    />
  <figcaption id="img-caption">
      Alan Turning, photo taken 1928, he was 16 years of age when this was taken. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements.
    </figcaption>
  </figure>
<hr>
<section id="tribute-info">
    <h3 id="headline">Here's a time line of Alan Turing's life:</h3>
  <ul>
      <li><strong>23 June 1912 - </strong>
Born in Maida Vale, London, United Kingdom</li>
      <li>
        <strong>1922 - 1926 </strong> Turing was educated at Hazelhurst Preparatory School, an independent school in the village of Frant in Sussex
      </li>
      <li>
        <strong>1931 - 1934 </strong> Turing studied as an undergraduate at King's College, Cambridge, where he was awarded first-class honours in mathematics. In 1935, at the age of 22, he was elected a fellow of King's on the strength of a dissertation in which he proved the central limit theorem.
      </li>
      <li>
        <strong>1936</strong> - Turing published his paper "On Computable Numbers, with an Application to the Entscheidungsproblem".[46] It was published in the Proceedings of the London Mathematical Society journal in two parts, the first on 30 November and the second on 23 December.
      </li>
      <li>
        <strong>1938</strong> - Turing had been working part-time with the Government Code and Cypher School (GC&CS), the British codebreaking organisation. He concentrated on cryptanalysis of the Enigma with Dilly Knox, a senior GC&CS codebreaker.
      </li>
      <li>
        <strong>1939 onwards</strong> - During the Second World War, Turing was a leading participant in the breaking of German ciphers at Bletchley Park. The historian and wartime codebreaker Asa Briggs has said, "You needed exceptional talent, you needed genius at Bletchley and Turing's was that genius."[
      </li>
      <li>
        <strong>1939 onwards</strong> - Turing decided to tackle the particularly difficult problem of German naval Enigma "because no one else was doing anything about it and I could have it to myself".In December 1939, Turing solved the essential part of the naval indicator system, which was more complex than the indicator systems used by the other services.
      </li>
     <li>
        <strong>1941</strong> - Turing proposed marriage to Hut 8 colleague Joan Clarke, a fellow mathematician and cryptanalyst, but their engagement was short-lived. After admitting his homosexuality to his fiancée, who was reportedly "unfazed" by the revelation, Turing decided that he could not go through with the marriage.[
      </li>
      <li>
        <strong>1945 - 1947</strong> - Turing lived in Hampton, London,while he worked on the design of the ACE (Automatic Computing Engine) at the National Physical Laboratory (NPL). He presented a paper on 19 February 1946, which was the first detailed design of a stored-program computer.
      </li>
      <li>
        <strong>1951</strong> - Turing turned to mathematical biology, finally publishing his masterpiece "The Chemical Basis of Morphogenesis" in January 1952. He was interested in morphogenesis, the development of patterns and shapes in biological organisms. He suggested that a system of chemicals reacting with each other and diffusing across space, termed a reaction-diffusion system, could account for "the main phenomena of morphogenesis"
      </li>
      <li>
        <strong>1952</strong> - Turing was 39 when he started a relationship with Arnold Murray, a 19-year-old unemployed man. Just before Christmas, Turing was walking along Manchester's Oxford Road when he met Murray just outside the Regal Cinema and invited him to lunch
      </li>
      <li><strong>1952</strong> - Turing was later convinced for indecency by the advice of his brother and his own solicitor, and he entered a plea of guilty .The case, Regina v. Turing and Murray, was brought to trial on 31 March 1952.Turing was convicted and given a choice between imprisonment and probation. His probation would be conditional on his agreement to undergo hormonal physical changes designed to reduce libido. </li>
      <li>
        <strong>1952</strong> - Turing's conviction led to the removal of his security clearance and barred him from continuing with his cryptographic consultancy for the Government Communications Headquarters (GCHQ), the British signals intelligence agency that had evolved from GC&CS
      </li>
    <li><strong> June 7th 1954</strong>
Diies at the age of (age 41) Wilmslow, Cheshire, United Kingdom.</li>
      <li>
        <strong>2009</strong> - A british programmer John Graham-Cumming started a petition urging the British government to apologise for Turing's prosecution as a homosexual.The petition received more than 30,000 signatures.The Prime Minister, Gordon Brown, acknowledged the petition, releasing a statement on 10 September 2009 apologising and describing the treatment of Turing as "appalling":
      </li>
      <li>
        <strong>2011</strong> - HM Government to grant a pardon to Alan Turing for the conviction of "gross indecency". In 1952, he was convicted of "gross indecency" with another man and was forced to undergo so-called "organo-therapy"—chemical castration. Two years later, he killed himself with cyanide, aged just 41. Alan Turing was driven to a terrible despair and early death by the nation he'd done so much to save.
      </li>
    </ul>
    <blockquote
      cite="http://historysheroes.e2bn.org/hero/whowerethey/91"
    >
      <p>
        "Alan Turing is often called the father of modern computing. He was a brilliant mathematician and logician. He developed the idea of the modern computer and artificial intelligence. During the Second World War he worked for the government breaking the enemies codes and Churchill said he shortened the war by two years"
      </p>
      <cite>--Prof. Jonathan P. Bowen
, London South Bank University</cite>
    </blockquote>
    <h3>
      If you have time, you should read more about this incredible human being
      on his
      <a
        id="tribute-link"
        href="https://en.wikipedia.org/wiki/Alan_Turing"
        target="_blank"
        >Wikipedia entry</a
      >.
    </h3>
  <hr><br><br>
  </section>
</main>

              
            
!

CSS

              
                html {
  font-size: 10px;
}

body {
  font-family: 'Comfortaa',
      cursive;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
  background-color: rgb(192, 192, 192)
}
h1 {
  font-family: 'Comfortaa',
      cursive;
  color: rgb(0, 0, 0, 0.7);
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  background-color: rgb(192, 192, 192,);
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
  border: solid 2px #000000;
  border-radius: 15px;
  box-shadow: 6px 10px #888888;
}

#img-div {
  background-color: rgb(192, 192, 192, ) !important;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%
}

#img-caption {
  margin: 15px 0 5px 0;
  color: rgb(0, 0, 0, 0.7);
  font-style: italic;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#img-caption {
  margin: 15px 0 5px 0;
  color: rgb(0, 0, 0, 0.7);
  font-size: 20px;
  
}

#headline {
  margin: 50px 0;
  text-align: center;
}

p{
  font-family: 'Comfortaa',
      cursive;
  color: rgb(0, 0, 0, 0.7);
  text-align: center;
  font-size: 25px;
}

li {
  font-family: 'Comfortaa',
      cursive;
  color: rgb(0, 0, 0, 0.7);
}

#title {
  padding-top: 20px;
  text-align: center;
  font-size: 70px;
  color: #696969;
  text-shadow: 5px 5px 5px #000000;
}
ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}






              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console