Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ add another resource


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


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.


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.


                <div class="container">
  <div class="page-header text-center">
    <div class="row">
      <div class="col-md-12">
        <h1>Ayn Rand</h1>
        <h2 class="text-muted">Objectivism Atlas</h2>
  <div class="row">
    <div class="col-md-2 col-md-offset-2">
      <img src="" alt="Ayn Rand Photo" class="img-thumbnail img-responsive">
    <div class="col-md-6">
        <p>And we know well that there is no transgression blacker than to do or think alone</p>
        <footer>Ayn Rand <cite title="Source Title">"Anthem"</cite></footer>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
      <div class="panel panel-default">
        <div class="panel-heading text-center">
        <div class="panel-body">
          <p class="text-justify"><strong>Ayn Rand</strong> was a Russian-born American novelist, philosopher, playwright, and screenwriter. She is known for her two best-selling novels, <a href="">The&nbsp;Fountainhead</a> and <a href="">Atlas&nbsp;Shrugged</a>, and for developing a philosophical system she called <a href="">Objectivism</a>.</p>
        <ul class="list-group">
          <li class="list-group-item"><strong>1905</strong> - Born in <a href="">St. Petersburg</a>, Russia</li>
          <li class="list-group-item"><strong>1924</strong> - Graduating from the University of Petrograd (philosophy and history)</li>
          <li class="list-group-item"><strong>1924</strong> - Enters the State Institute for Cinema Arts to study screenwriting</li>
          <li class="list-group-item"><strong>1925</strong> - Obtains permission to leave Soviet Russia for a visit to relatives in the US</li>
          <li class="list-group-item"><strong>1926</strong> - Arrives in New York City</li>
          <li class="list-group-item"><strong>1929</strong> - Marries actor <a href="">Frank O’Connor</a></li>
          <li class="list-group-item"><strong>1932</strong> - Sells her first screenplay, “Red Pawn,” to Universal Pictures</li>
          <li class="list-group-item"><strong>1934</strong> - Completes her first novel, <a href="">We the Living</a></li>
          <li class="list-group-item"><strong>1935</strong> - Start writing <a href="">The Fountainhead</a></li>
          <li class="list-group-item"><strong>1936</strong> - Publishes <a href="">We the Living</a> in the US and UK</li>
          <li class="list-group-item"><strong>1943</strong> - Publishes <a href="">The Fountainhead</a></li>
          <li class="list-group-item"><strong>1943</strong> - Returns to Hollywood to write the screenplay for <a href="">The Fountainhead</a></li>
          <li class="list-group-item"><strong>1946</strong> - Begins her major novel, <a href="">Atlas Shrugged</a></li>
          <li class="list-group-item"><strong>1947</strong> - Publishes <a href="">Atlas Shrugged</a></li>
          <li class="list-group-item"><strong>1962</strong> - Publishes her own periodicals on Objectivism (to 1976)</li>
          <li class="list-group-item"><strong>1982</strong> - Dies in her New York City apartment</li>
        <div class="panel-footer text-center">
          You can read more about Ayn Rand on <a href="">Wiki&nbsp;page</a> 
  </div> <!-- Quote -->
  <footer class="text-center">
    <p class="text-muted">Coded by <a href="" target="_blank">Pavel Karateev</a> - 2016</p>


                /* Font and background color */
.panel .panel-heading,
.list-group-item {
  background-color: #2B2B2B;
  color: #A9B7C6;

/* List items animation */
.list-group-item:hover {
  background-color: #232323;

/* Border color */
.list-group-item {
  border-color: #555555;

.panel-heading {
  border-color: #555555 !important;

/* Link colors */
a:visited {
  color: #CC7832;

a:active {
  color: #A36029;

/* Image */
.img-thumbnail {
  margin-bottom: 20px;

.img-thumbnail {
  background-color: #555555;
  border: 0;