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.

            
              <head>
  <title>Tribute page to Isaac Asimov</title>
</head>

<style>
  body {
    background-color: powderblue;
    font-family: courier;
}
  #myQuote{
    font-style: italic;
    
  }
  #myQuote1{
    font-style: bold;
    font-size: 18px;
  }
</style>

<body>

  <div class="container fluid">
    <h1 class="text-primary">Isaac Asimov and the Foundation series of Novels...</h1>

    <div>
      <div class="row well">
        <div class="col-md-4"><img class="center-block" src="http://www.biografiasyvidas.com/biografia/a/fotos/asimov_isaac.jpg" class="img-responsive" alt="Isaac Asimov in full flow. "></div>
        <div class="col-md-8">
          <p>For nearly thirty years, the series was a trilogy: Foundation, Foundation and Empire, Second Foundation. It won the one-time Hugo Award for "Best All-Time Series" in 1966. Asimov began adding to the series in 1981, with two sequels: Foundation's
            Edge, Foundation and Earth, and two prequels: Prelude to Foundation, Forward the Foundation. The additions made reference to events in Asimov's Robot and Empire series, indicating that they were also set in the same fictional universe.</p>
          <p>FOUNDATION begins a new chapter in the story of man's future. As the Old Empire crumbles into barbarism throughout the million worlds of the galaxy, Hari Seldon and his band of psychologists must create a new entity, the Foundation-dedicated
            to art, science, and technology-as the beginning of a new empire. FOUNDATION AND EMPIRE describes the mighty struggle for power amid the chaos of the stars in which man stands at the threshold of a new enlightened life which could easily be
            destroyed by the old forces of barbarism. SECOND FOUNDATION follows the Seldon Plan after the First Empire's defeat and describes its greatest threat-a dangerous mutant strain gone wild, which produces a mind capable of bending men's wills,
            directing their thoughts, reshaping their desires, and destroying the universe.</p>
        </div>

      </div>
    </div>
    <div class="row">
      <!--List of the books...-->
      <div class="col-sm-9">
        <p>
          <li><b>Prelude to Foundation</b> is a science-fiction novel written by Isaac Asimov. It is one of two prequels to the Foundation Series. For the first time, Asimov chronicles the life of Hari Seldon, the man who transformed Psychohistory from "little
            more than a set of vague axioms" to "a profound statistical science."</li>
          <li><b>Forward the Foundation</b> is a novel written by Isaac Asimov. It is one of two prequels to the Foundation Series. The story takes place on Trantor, and picks up ten years after the events of Prelude to Foundation. It depicts how Hari Seldon
            developed his theory of Psychohistory from hypothetical concept and "set of vague axioms" to "profound statistical science" and practical application in galactic events.</li>
          <li><b>Foundation</b> is a collection of five short stories which were first published together as a book by Gnome Press in 1951. The first story was written by Asimov in 1950 to serve as an introduction to the series. The other four stories were
            originally published in Astounding Science Fiction magazine under the titles "Foundation" (May 1942), "Bridle and Saddle" (June 1942), "The Wedge" (October 1944) and "The Big and the Little" (August 1944).</li>
          <li><b>Foundation and Empire</b> is a science-fiction novel written by Isaac Asimov. It is the second volume in the classic Foundation Trilogy in the Foundation Series. The book was originally published as two stories in Astounding Science Fiction
            magazine. Part 1 appeared in the April 1945 issue of Astounding as "Dead Hand", while Part 2 appeared in the November 1945 and December 1945 issues as "The Mule".</li>
          <li><b>Second Foundation</b> is a science-fiction novel written by Isaac Asimov. It is the last of the classic Foundation Trilogy in the Foundation Series. The book is made up of two parts which were originally published separately in Astounding
            Science Fiction. The first part appeared in the January 1948 issue of Astounding under the title "Now You See It--", while the second appeared in the November 1949, December 1949, and January 1950 issues under the title "--And Now You Don't."</li>
          <li><b>Foundation's Edge</b> is a science-fiction novel by Isaac Asimov, the fourth book in the Foundation Series. It was written thirty years after the Foundation trilogy, in 1982, due to pressure by fans on Asimov to write another, and, according
            to Asimov himself, the amount of the payment offered by the publisher. It was his first novel to ever land on the New York Times best-seller list, after 262 books and 44 years of writing.</li>
          <li><b>Foundation and Earth</b> is a science-fiction novel written by Isaac Asimov. It is the last of the Foundation sequels in the Foundation Series. Councilman Golan Trevize, historian Janov Pelorat and Bliss of the planet Gaia (all of whom we
            last met in Foundation's Edge) set out on a journey to find humanity's ancestral planet -- Earth. The purpose of the journey is to settle Trevize's doubt with his decision at the end of Foundation's Edge.</li>
        </p>

      </div>
      <!--A famous quote & another picture...-->
      <div class="col-sm-3">
        <img class="center-block" src="https://d2arxad8u2l0g7.cloudfront.net/books/1348019171l/651641.jpg" class="img-responsive" alt="Novel cover. ">
        <p id="myQuote">"The most exciting phrase to hear in science, the one that heralds new discoveries, is not 'Eureka!' (I've found it!), but 'That's funny...'"
          <p>
            <p id="myQuote1">Isaac Asimov</p>
      </div>

    </div>
    <!--Some buttons to add a bit of functionality..-->
    <div class="row well">
      <div class="col-lg-4"><a target="_blank" href=http://vignette2.wikia.nocookie.net/uncyclopedia/images/7/70/The_fonz_thumbs_up.jpg/revision/latest?cb=20080823233621 class="btn btn-primary btn-block">Like</a></div>
      <div class="col-lg-4"><a target="_blank" href=https://en.wikipedia.org/wiki/Science_fiction class="btn btn-default btn-block">Click here to learn more about SciFi</a></div>
      <div class="col-lg-4"><a target="_blank" href=https://en.wikipedia.org/wiki/Isaac_Asimov class="btn btn-info btn-block">Click here to learn more about IA</a></div>
    </div>
  </div>
</body>
<!--How to reach me...-->
<footer>
  <div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4">
      <p class="text-center">Created by: <a href target="mailto:dgwalters@me.com">
    Gareth</a>.</p>
    </div>
    <div class="col-xs-4"></div>
  </div>
</footer>
            
          
!
            
              body{
  margin-top: 40px;
}
            
          
!
999px
🕑 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 ..................

Console