cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <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>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 col-md-offset-2">
      <img src="http://aynrandlexicon.com/lib_style/img/25936.jpg" alt="Ayn Rand Photo" class="img-thumbnail img-responsive">
    </div>
    <div class="col-md-6">
      <blockquote>
        <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>
      </blockquote>
    </div>
  </div>
  <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">
          <h4><b>Biography</b></h4>
        </div>
        <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="https://en.wikipedia.org/wiki/The_Fountainhead">The&nbsp;Fountainhead</a> and <a href="https://en.wikipedia.org/wiki/Atlas_Shrugged">Atlas&nbsp;Shrugged</a>, and for developing a philosophical system she called <a href="https://en.wikipedia.org/wiki/Objectivism_(Ayn_Rand)">Objectivism</a>.</p>
        </div>
        <ul class="list-group">
          <li class="list-group-item"><strong>1905</strong> - Born in <a href="https://en.wikipedia.org/wiki/Saint_Petersburg">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="https://en.wikipedia.org/wiki/Frank_O%27Connor_(actor)">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="https://en.wikipedia.org/wiki/We_the_Living">We the Living</a></li>
          <li class="list-group-item"><strong>1935</strong> - Start writing <a href="https://en.wikipedia.org/wiki/The_Fountainhead">The Fountainhead</a></li>
          <li class="list-group-item"><strong>1936</strong> - Publishes <a href="https://en.wikipedia.org/wiki/We_the_Living">We the Living</a> in the US and UK</li>
          <li class="list-group-item"><strong>1943</strong> - Publishes <a href="https://en.wikipedia.org/wiki/The_Fountainhead">The Fountainhead</a></li>
          <li class="list-group-item"><strong>1943</strong> - Returns to Hollywood to write the screenplay for <a href="https://en.wikipedia.org/wiki/The_Fountainhead">The Fountainhead</a></li>
          <li class="list-group-item"><strong>1946</strong> - Begins her major novel, <a href="https://en.wikipedia.org/wiki/Atlas_Shrugged">Atlas Shrugged</a></li>
          <li class="list-group-item"><strong>1947</strong> - Publishes <a href="https://en.wikipedia.org/wiki/Atlas_Shrugged">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>
        </ul>
        <div class="panel-footer text-center">
          You can read more about Ayn Rand on <a href="https://en.wikipedia.org/wiki/Ayn_Rand">Wiki&nbsp;page</a> 
        </div>
      </div>
    </div>
  </div> <!-- Quote -->
  <footer class="text-center">
    <hr>
    <p class="text-muted">Coded by <a href="https://www.freecodecamp.com/lancelote" target="_blank">Pavel Karateev</a> - 2016</p>
  </footer>
</div>
            
          
!
            
              /* Font and background color */
body,
.panel,
.panel .panel-heading,
.panel-footer,
.list-group-item {
  background-color: #2B2B2B;
  color: #A9B7C6;
}

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

/* Border color */
hr,
blockquote,
.page-header,
.panel,
.list-group-item {
  border-color: #555555;
}

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

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

a:hover,
a:active {
  color: #A36029;
}

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

.img-thumbnail {
  background-color: #555555;
  border: 0;
}
            
          
!
999px
Loading ..................

Console