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.

            
              <html lang="en">

<head>
  <!-- <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> -->
  <meta charset="UTF-8">
  <title>Isaac Asimov Tribute Page</title>
</head>
<div class="img-responsive">
  <div class="container">
    <div class="header">
      <h1>Isaac Asimov</h1>
      <h3>The greatest explainer of the age</h3>
    </div>
    <div class="boxed-text">
      <body>
        <p>Isaac Asimov was a Russian-born (born somewhere between October 4, 1919 and January 2, 1920), American author, a professor of biochemistry at Boston University, and a writer, best known for his science fiction and popular science books. He is considered one of the most prolific writers of all time, having written or edited more than 500 books.</p>
        <p>People call him a master of the science-fiction genre and along with Robert A. Heinlein and Arthur C. Clarke, was considered one of the "Big Three" science-fiction writers during his lifetime.</p>
        <p>Asimov's most famous work is the <a href="https://www.goodreads.com/series/59386-foundation-publication-order">Foundation Series</a>; his other major series are the <a href="https://www.goodreads.com/series/43817-galactic-empire">Galactic Empire</a> series and the <a href="https://www.goodreads.com/series/49175-robot">Robot</a> series, both of which he later tied into the same <a href="https://www.goodreads.com/series/49421-foundation-universe">fictional universe</a>, as the Foundation Series to create a unified "future history" for his stories.
        </p>
        </br>
      </body>

      <div class="row">
        <div class="col-md-6">
          <div class="timeline">
            <p>
              Asimov's first short story to be sold, "Marooned Off Vesta," was published in Amazing Stories in 1938.
            </p>
            <p>
              In 1941 Astounding published the 32nd story Asimov wrote, <a href="https://www.goodreads.com/book/show/70771.Nightfall_and_Other_Stories">"Nightfall"</a>, which has been described as one of <em>the most famous science-fiction stories of all time</em>. "Nightfall" is an archetypal example of social science fiction, a term coined by Asimov to describe a new trend in the 1940s, led by authors including Asimov and <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein</a>,
              away from gadgets and space opera and toward speculation about the human condition. From 1943 to 1949, all of his published science fiction appeared in <em>Astounding</em>. In 1942, he published the first of his <em>Foundation</em> stories.
            </p>
                        <ul>
              Years later, he published his first book in 1950, the sci-fi novel <a href="https://www.goodreads.com/book/show/41820.Pebble_in_the_Sky"><em>Pebble in the Sky</em></a>.
            </ul>
            <ul> Also in 1950, the first book in Robot series. <a href="https://www.goodreads.com/book/show/41804.I_Robot"><em>I, Robot</em></a>.
              <p>
                This series brought a spotlight to human-robot interaction. There Asimov though out, and wrote - "The three laws of Robotics":
                <em><ol><li>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</li>
                <li>A robot must obey orders givein to it by human beings except where such orders would conflict with the First Law.</li>
                <li>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</li></ol></em>
                </br>
                With these three, simple directives, Isaac Asimov changed our perception of robots forever when he formulated the laws governing their behavior. In <em>I, Robot</em>, Asimov chronicles the development of the robot through a series of interlinked stories: from its primitive origins in the present to its ultimate perfection in the not-so-distant future--a future in which humanity itself may be rendered obsolete.
              </p>
            </ul>
            </br>
              <div class="col-sm-4 col-md-5">
                  <p>Foundation series recounts the collapse and rebirth of a vast interstellar empire in a universe of the future. Taken together, they are his most famous work of science fiction.</p>
                  <ul>
                    <li>1951 <a href="https://www.goodreads.com/book/show/29579.Foundation">Foundation</a></li>
                    <li>1952 <a href="https://www.goodreads.com/book/show/29581.Foundation_and_Empire">Foundation and Empire</a></li>
                    <li>1953 <a href="https://www.goodreads.com/book/show/29580.Second_Foundation">Second Foundation</a></li>
                    <p>In 1966 they won the <a href="https://en.wikipedia.org/wiki/Hugo_Award">Hugo Award</a> for the all-time best series of science fiction novels. Asimov continued his work on the Foundation series in 1980s, writing prequels and sequels.
                    </p>
                    <li><a href="https://www.goodreads.com/book/show/76683.Foundation_s_Edge">Foundation's Edge </a>(1982)</li>
                    <li><a href="https://www.goodreads.com/book/show/29582.Foundation_and_Earth">Foundation and Earth </a>(1986)</li>
                    <li><a href="https://www.goodreads.com/book/show/30013.Prelude_to_Foundation">Prelude to Foundation </a>(1988)</li>
                    <li><a href="https://www.goodreads.com/book/show/76679.Forward_the_Foundation">Forward the Foundation </a>(1993)</li>
                  </ul>
      <p>
        Isaac Asimov was also known for writing books on a wide variety of subjects outside of science fiction, taking on topics like astronomy, phisics, chemistry, biology, history, math, religion and literary biography. In the late 1950s Asimov decreased fiction
        output and greately increased writing on science topics. Contemporaries called him <em class="explain">The greatest explainer of the age</em>.
      </p>
            </div>         
            <div class="row">
              <div id="foundation">
                <div class="col-sm-4 col-md-6">
                  <h4 class="award">Awards</h4>
                  <p>Here are some of the many awards Asimov won.</p>
                  <ul class="awards">
                    <li>1957 - Thomas Alva Edison Foundation Award, for <em>Building Blocks of the Universe</em></li>
                    <li>1962 - Boston University's Publication Merit Award</li>
                    <li>1963 - special <a href="https://en.wikipedia.org/wiki/Hugo_Award">Hugo Award</a> for "adding science to science fiction" for essays published in the <em>Magazine of Fantasy and Science Fiction</em></li>
                    <li>1963 - Fellow of the <a href="https://en.wikipedia.org/wiki/American_Academy_of_Arts_and_Sciences">American Academy of Arts and Sciences</a></li>
                    <li>1964 - <a href="https://en.wikipedia.org/wiki/Science_Fiction_Writers_of_America">The Science Fiction Writers of America</a> voted <em>Nightfall</em> (1941) the all-time best science fiction short story</li>
                    <li>1966 - Best All-time Novel Series Hugo Award for the <a href="https://en.wikipedia.org/wiki/Foundation_series">Foundation</a> series</li>
                    <li>1967 – Westinghouse Science Writing Award</li>
                    <li>1972 – <a href="https://en.wikipedia.org/wiki/Nebula_Award_for_Best_Novel">Nebula Award for Best Novel</a> for <a href="https://www.goodreads.com/book/show/41821.The_Gods_Themselves"><em>The Gods Themselves</em></a></li>
                    <li>1973 – <a href="https://en.wikipedia.org/wiki/Hugo_Award_for_Best_Novel">Hugo Award for Best Novel</a> for <em>The Gods Themselves</em></li>
                    <li>1973 - <a href="https://en.wikipedia.org/wiki/Locus_Award_for_Best_Science_Fiction_Novel">Locus Award for Best Science Fiction Novel</a> for <em>The Gods Themselve</em></li>
                    <li>1977 – <a href="https://en.wikipedia.org/wiki/Hugo_Award_for_Best_Novelette">Hugo Award for Best Novelette</a> for <a href="https://en.wikipedia.org/wiki/The_Bicentennial_Man"><em>The Bicentennial Man</em></a></li>
                    <li>1977 – <a href="https://en.wikipedia.org/wiki/Nebula_Award_for_Best_Novelette">Nebula Award for Best Novelette</a> for <em>The Bicentennial Man</em></li>
                    <li>1981 – An asteroid, <a href="https://en.wikipedia.org/wiki/5020_Asimov">5020 Asimov</a>, was named in his honor</li>
                    <li>1983 – Hugo Award for Best Novel for <a href="https://www.goodreads.com/book/show/76683.Foundation_s_Edge?from_search=true&search_version=service"><em>Foundation's Edge</em></a></li>
                    <li>1983 – <a href="https://en.wikipedia.org/wiki/Locus_Award">Locus Award</a> for Best Science Fiction Novel for <em>Foundation's Edge</em></li>
                    <li>1987 – Locus Award for Best Short Story for <em>Robot Dreams</em></li>
                    <li>1995 – <a href="https://en.wikipedia.org/wiki/Hugo_Award_for_Best_Non-Fiction_Book">Hugo Award for Best Non-Fiction Book</a> for <a href="https://www.goodreads.com/book/show/41814.I_Asimov"><em>I. Asimov: A Memoir</em></a></li>
                    <li>2009 – A crater on the planet Mars, <a href="https://en.wikipedia.org/wiki/Asimov_(crater)">Asimov</a>, was named in his honor</li>
                  </ul>
                  </div>
                <!-- </div> -->
              </div>  <!--  END div class foundation  -->
            </div>  <!--  END row  -->
          </div>
        </div>
              </br>
               <div class="col-md-6">
                <img class="drawing" src="http://www.skeptic.com/eskeptic/2014/images/14-01-01/Isaac-Asimov-by-Pat-Linse.jpg" alt="Illustration of Isaac Asimov, by Pat Linse">
                 </br>
                 <!--<img class="drawing" src="http://www.juanosborne.com/wp-content/uploads/2012/08/JO-D-120814-IsaacAsimov.jpg">-->
              </div>
            </br>
      </div>  <!--  END row  -->
    </div>

    <div class="media">
      <div class="container">
        <div class="video">
        <h3 class="media-section">Media</h3>
        <p>Here are some video recordings. In first on the left, is an interview by Bill Moyers with Dr. Isaac Asimov for TV show World of Ideas.</br>
          And the second is the audio recording of Isaac Asimov reading his favourite story, <a href="https://www.goodreads.com/book/show/4808763-the-last-question">The Last Question</a>.</p></br>
        <div class="row">
          <div class="col-sm-4 col-md-6 col-lg-6">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/aogsJ4t4aBE" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="col-sm-4 col-md-6 col-lg-6">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/R3U30wSAV4Q?rel=0" frameborder="0" allowfullscreen></iframe>
          </div>
        </div>  <!--  END Row  -->
        </div>  <!--  END video  -->
        <div class="row">
          <div class="col-lg-12">
            <div id="gallery" class="images img-thumbnail">
              <h3 class="media-section">Image Gallery</h3>
              <inline>
                <ul>
                  <li>
                    <a href="#">
                      <img class="thumb" src="http://afflictor.com/wp-content/uploads/2014/10/ia.jpg" height="130px" width="160px" alt="Picture of dr. Asimov in front a bookshelf" /><span><img class="fullsize" src="http://afflictor.com/wp-content/uploads/2014/10/ia.jpg" height="400px" width="470px" alt="Picture of dr. Asimov in front a bookshelf"></a></span>
                  </li>
                  </br>
                  <li>
                    <a href="#">
                      <img class="thumb" src="http://www.wbdaily.com/wp-content/uploads/2015/01/isaac-asimov.jpg" height="130px" width="160px" alt="dr. Asimov and his writing machine" /><span><img class="fullsize" src="http://www.wbdaily.com/wp-content/uploads/2015/01/isaac-asimov.jpg" height="400px" width="470px" alt="dr. Asimov and his writing machine"/></a></span>
                  </li>
                  </br>
                  <li>
                    <a href="#">
                      <img class="thumb" src="https://www.blackgate.com/wp-content/uploads/2015/11/Isaac-Asimov-paperbacks.jpg" height="130px" width="160px" alt="Some of the books he wrote" /><span><img class="fullsize" src="https://www.blackgate.com/wp-content/uploads/2015/11/Isaac-Asimov-paperbacks.jpg" height="400px" width="470px" alt="Some of the books he wrote"/></a></span>
                  </li>
                  </br>
                  <li>
                    <a href="#">
                      <img class="thumb" src="http://opi.wiki/pic?w=3&f=205296&e=1&o=703" height="130px" width="160px" alt="Foundation series books" /><span><img class="fullsize" src="http://opi.wiki/pic?w=3&f=205296&e=1&o=703" height="400px" width="470px" alt="Foundation series books"/></a></span>
                  </li>
                </ul>
            </div>  <!--  END gallery  -->
          </div>
        </div>
      </div>
    </div>  <!--  END Container  -->
  </div> <!--  END Media  -->
</br>
<footer>
  <p>Coded by Tomassonn, for <a href="https://www.freecodecamp.com/">Free Code Camp</a></p>
  <div class="row">
          <div class="col-md-6">
            <div class="resource">
            <h4 class="sources">Resources:</h4>
            <p>These are the web pages that were very useful. Check them out for more information.
            </p>
            <ul><li><a href="https://en.wikipedia.org/wiki/Isaac_Asimov">Wikipedia</a></li>
              <li><a href="http://www.asimovonline.com/asimov_home_page.html">Asimov Online</a></li>
              <li><a href="">goodreads</a> author page.</li>
              <li><a href="http://www.skeptic.com/eskeptic/14-01-01/">A Tribute to Isaac Asimov</a> by Steve Allen; from the premiere issue of Skeptic magazine (1992).</li>
              <li>Great <a href="http://ww.skeptic.com/eskeptic/2014/images/14-01-01/Isaac-Asimov-by-Pat-Linse.jpg">illustration</a> of Isaac Asimov, by Pat Linse.</li>
              <li>Another great illustration, this one is by <a href="http://www.juanosborne.com/2012/08/isaac-asimov/">Juan Osborne</a>. He used the word count from 170 Asimov books and spread them over a portrait.</li>
              </div>
          </div>
        </div>
</footer>
</div>
</div>
<!--  END  -->
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Orbitron');

.header, .media-section {
  color: #d11141;
  text-align: center;
  font-family: 'Orbitron', sans-serif, Verdana;
  font-weight: bold;
}

/*.jumbotron {
  background-image: url("http://jtgnew.sjrdesign.net/images/milkyway_panorama.jpg");
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/

.media-section {
  text-align: left;
}

.img-responsive {
  background-color: #202020;
  background-image: url("http://www.juanosborne.com/wp-content/uploads/2012/08/JO-D-120814-IsaacAsimov.jpg");
  display: block;
  width: 100%;
  /*max-width: 1200px;*/
  height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.boxed-text, .media, .timeline {
  padding: 10px;
}

.timeline {
  background-color: #53061a;
  opacity: 0.8;
}

.video {
  background-color: #53061a;
  opacity: 0.8;
}

.drawing {
  max-width: 95%;
  position: relative;
  top: 40px;
}

.explain, .award, .sources {
  font-family: 'Orbitron', sans-serif, Verdana;
  font-weight: bold;
}

#foundation {
  padding: 10px;
}
#gallery {
  position: relative;
  width: 840px;
  height: 750px;
  background-color: #11d1a1;
  margin: 10px;  
}

#gallery ul {
  list-style-type: none;
  margin-top: 20px;
  margin-right: 20px;
}

#gallery li {
  width: 150px;
}

#gallery a {
  display: inline;
  padding: 10px 20px;
  text-decoration: none;
  width: 130px;
  height: 100px;
  cursor: pointer;
}

#gallery a img.thumb {
  -webkit-box-shadow: 2px 3px 4px #444;
  -moz-box-shadow: 2px 3px 4px #444;
  box-shadow: 2px 3px 4px #444;
}

#gallery a img.fullsize {
  display: none;
  position: absolute;
  left: 280px;
  top: 50px;
  margin: 10px auto;
  width: 550px;
  height: 400px;
  -webkit-box-shadow: 1px 3px 8px #444;
  -moz-box-shadow: 1px 3px 8px #444;
  box-shadow: 2px 3px 8px #444;
}

#gallery a:hover img.fullsize,
#gallery a:focus img.fullsize {
  display: block;
}

a {
  font-family: 'Orbitron', sans-serif, Verdana;
  font-weight: bold;
  color: #11d1a1;
}

a:link {
  text-decoration: none;
  font-weight: bold;
}

a:visited {
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  font-weight: bold;
  color: #d11141;
}

body {
  text-align: left;
  color:#FFFFFF;
  font-style: normal;
  font-family: Verdana, Geneva, sans-serif;
  text-indent: 10px;
}

.awards li, .resource li, .resource ul{
  list-style-type: none;
}

.resource {
  text-align: left;
  text-indent: 0px;
  padding: 10px;
}

.resource p, .resource ul {
  font-size: 12px;
}

footer {
  text-align: center;
}

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

Console