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

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

              
                <div class="text-primary text-center">
  <h1> Dr. Neil Degrasse Tyson</h1>
  <div class="container-fluid img-cover img-responsive">
  </div>
  <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:
          </p>
          <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>
      </div>
    </div>
  </div>
  <div class="vid-spacing">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/P0E-9uJgDZU" frameborder="0" allowfullscreen></iframe>
  </div>
  <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,
    </a>
  </p>
  <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
    </a>
  </p>
    <div class="container">
    <h6>
      <div class="copyright-space col-xs-12 col-xs-offset-5">
    <p> Patrick Richetts &copy; 2016 all rights reserved</p>
        </h6>
    </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                 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:-150px;
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;
}
              
            
!

JS

              
                
              
            
!
999px

Console