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

              
                <link href="https://fonts.googleapis.com/css?family=Meddon" rel="stylesheet" type="text/css">

<style>
  body {
    background-color: #c3c3c3;
    font-family: serif;
    margin-bottom: 50px;
  }
  
  h1 {
    color: black;
    font-family: Meddon;
    margin-top: 50px;
  } 
  
  .footer-card {
  background-color: #a9a9a9;
  border-width: 0;
  }
</style>

<body>
  <div class="container">
    <h1 class="text-center">Charles Darwin</h1>
 <hr>
    <div class="row">
      <div class="col-12">
        <img class="mx-auto d-block figure-img img-fluid rounded" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/800px-Charles_Darwin_seated_crop.jpg" alt="Photograph of Charles Darwin seated" height="526" width="400"/>
        <figcaption class="figure-caption text-center text-muted">Darwin, c. 1854 when he was working towards publication of On the Origin of Species.</figcaption>
      </div>
    </div>
 <hr>
    <div class="row">
      <div class="col-sm-6">
        <p>Charles Robert Darwin,  12 February 1809 – 19 April 1882) was an English naturalist, geologist and biologist, best known for his contributions to the science of evolution. He established that all species of life have descended over time from common ancestors and, in a joint publication with Alfred Russel Wallace, introduced his scientific theory that this branching pattern of evolution resulted from a process that he called natural selection, in which the struggle for existence has a similar effect to the artificial selection involved in selective breeding.</p>
      </div>
      <div class="col-sm-6">
        <p>Darwin published his theory of evolution with compelling evidence in his 1859 book On the Origin of Species, overcoming scientific rejection of earlier concepts of transmutation of species. By the 1870s, the scientific community and a majority of the educated public had accepted evolution as a fact. However, many favoured competing explanations and it was not until the emergence of the modern evolutionary synthesis from the 1930s to the 1950s that a broad consensus developed in which natural selection was the basic mechanism of evolution. Darwin's scientific discovery is the unifying theory of the life sciences, explaining the diversity of life.</p>
      </div>
   </div>
<hr>
<blockquote class="blockquote text-center">
  <p class="mb-0"><i>"I have called this principle, by which each slight variation, if useful,</br>is preserved, by the term of Natural Selection."</i></p>
  <footer class="blockquote-footer">Charles Darwin</footer>
</blockquote>
<hr>
  <div class="card footer-card">
    <div class="card-body">
      <p class="card-text text-light text-center">Please <a href="http://darwin-online.org.uk/Introduction.html" target="_blank" class="text-dark">visit the website Darwin Online</a> for extensive information on Darwin's publications.</p>
    </div>
  </div>
</div>
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console