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="text-primary text-center">
  <h1> Dr. Neil Degrasse Tyson</h1>
  <div class="container-fluid img-cover img-responsive">
  <img width="450" class="center-block img-rounded img-responsive grey-border thumbnail-overlap" src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg"
    alt="A photo of Dr. Niel Degrasse Tyson" />
  <div class="container">
    <div class="text-left move-down">
      <div class="row">
        <div class="col-sm-12">
          <p>Dr. Tyson is an astrophysist and the director of the Hayden Planetarium in New York City. Outside of his career he hosts his own radio talk show called Star Talk, and has hosted and appeared as a guest speaker in numerous television shows. I
            had the pleasure of meeting Dr. Tyson once and can say that his passion for science and teaching those who wish to learn more is genuine. His fun and easy-going style of teaching are the reasons why I believe more americans are interested
            in the sciences today. Let's take a moment to look at a timeline of this amazing person:
          <li>1958 - Niel Degrasse Tyson is born in Manhatten, New York, to Sunchita Maria Tyson and Cyril Degrasse Tyson.</li>
          <li> 1967 - Tyson begins showing interest in astronomy after visiting the Sky Theater at the Hayden Planetarium.</li>
          <li> 1972-1976 - Tyson attends the Bronx High School of Science. During his tenure he was the Captain of the wrestling team and editor-in-chief of the <em>Physical Science Journal</em>.</li>
          <li> 1976-1980 - Tyson attends Harvard University where he recieves his AB degree in Physics </li>
          <li> 1983 - Tyson Graduates from the Univeristy of Texas at Austin with a MA in astronomy. </li>
          <li> 1987-1987 - Tyson lectures in astronomy at the University of Maryland.</li>
          <li> 1988-1991 - Tyson is accepted into the Astronomy Graduate Program at Columbia University, where he earns his MPhil degree in astrophysics and his PhD in astrophysics. </li>
          <li> 1991 - Tyson's work in establishing type Ia supernovae as standard candles helps lead to the discovery of Dark Energy. </li>
          <li> 1994 - Tyson joins the staff at the Hayden Planetarium as a staff scientist. </li>
          <li> 1995-1996 - Tyson becomes acting director, and then the appointed director of the Hayden Planetarium. </li>
          <li> 2001-2004 - President George W. Bush appoints Tyson to serve on the Commission on the Future of the United States Aerospace Industry, and after that on the President's Commission on Implementation on United States Space Exploration Policy.
            Soon after he was awarded the NASA Distinguished Public Service Medal, The highest award NASA can give a civilian.</li>
          <li> 2004 - Tyson hosts the four part miniseries <em> Origins</em> on the PBS Nova series. </li>
          <li> 2009 - Tyson launches his hour long radio talkshow <em> Startalk. </em>
            <li> 2014 - Tyson becomes host of the rebooted <em> Cosmos </em> series.
              <li> 2015 - National Geographic begins shooting <em> Startalk </em> as an hour long television show.
     <p> It's hard to see exactly that kind of person Dr. Tyson is by listing things that he's accomplished over his life, so to get a better idea of what kind of person he is, here is a quick video of Dr. Tyson explaining why math and science are important
        to people who are not otherwise involved in those fields professionally:</p>
  <div class="vid-spacing">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/P0E-9uJgDZU" frameborder="0" allowfullscreen></iframe>
  <div class="margin">
  <p> If you would like to learn more about Dr. Tyson, feel free to check out his wiki page <a href="https://en.wikipedia.org/wiki/Neil_deGrasse_Tyson" class="text-success"> here,
  <p> and if you have a netflix account, check out Dr. Tyson's reboot of <a href="https://www.netflix.com/search/cosmos?jbv=80004448&jbp=0&jbr=0" class="text-success"> Cosmos: A Spacetime Odyssey
    <div class="container">
      <div class="copyright-space col-xs-12 col-xs-offset-5">
    <p> Patrick Richetts &copy; 2016 all rights reserved</p>
               body { 
  background-color: black;
  .grey-border { 
  border-color: darkgrey;
  border-width: 2px;
  border-style: solid;
  .img-cover {
  height: 600px;
  background-image: url('http://www.amnh.org/var/ezflow_site/storage/images/media/amnh/images/our-research/hayden-planetarium2/insap/rose-center-interior-night/689582-1-eng-US/rose-center-interior-night.jpg');
  background-size: cover;
  border: 2px solid darkgray;
  color: #000; text-shadow: 1px 1px 0 #fff;
.thumbnail-overlap { 
margin-left: auto;
margin-right: auto;
.move-over { 
margin: 100px; 

.move-down { 
margin-top: 200px;
.margin { 
margin-bottom: 50px;
.vid-spacing { 
margin-top: 50px;
margin-bottom: 25px;
.copyright-space { 
margin-top: 50px;
  margin-bottom: -50px;
🕑 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.