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

            
              <link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
 
<body>
  <div class="container">
    <div class="jumbotron center">
      <h2>Tribute to</h2>
        <h1 class="text-primary">Robin Williams</h1>
        <h2>A man who brought laughter to millions of people...<br>
        then tragically, brought us all to tears.</h2>
    </div>
    <div>
      <img class="img-responsive img-thumbnail" src="http://images-cdn.moviepilot.com/image/upload/v1426603388/header-tasteless-tv-film-will-recreate-robin-williams-suicide-with-lookalike-porn-star-jpeg-266177.jpg" alt="Robin Williams" />
    </div>
     <div class="panel panel-default">
       <div class="panel-body">
         <div class="panel-heading">
           <h1 class="center">Robin McLaurin Williams<br>July 21, 1951 – August 11, 2014</h1>
         </div>
         <div>
           <p>Williams was an American stand-up comedian, actor, director, producer, writer, singer and voice artist. After rising to fame as Mork in Mork & Mindy (1978–82), Williams went on to establish a career in both stand-up comedy and feature film acting. He was known for his improvisational skills.</p>
           
           <h3 class="headlines">10 Inspiration Robin Williams Quotes</h3>
              <ul>
                 <li>“You're only given one little spark of madness. You mustn't lose it.”</li>
                 <li>“What’s right is what’s left if you do everything else wrong.”</li>
                <li>"No matter what people tell you, words and ideas can change this world." <em>-Dead Poets Society</em></li>
                <li>“Some are born great. Some achieve greatness. Some get it as a graduation gift.”</li>
                <li>"[Mentor Jonathan Winters] taught me that the world is open for play, that everything and everybody is mockable in a wonderful way."</li>
                <li>"You have this idea that you'd better keep working otherwise people will forget. And that was dangerous. And then you realize, no, actually if you take a break people might be more interested in you."</li>
                <li>“I used to think the worst thing in life was to end up all alone. It’s not. The worst thing in life is to end up with people that make you feel all alone.” <em>-World’s Greatest Dad</em></li>
                <li>“If women ran the world we wouldn't have wars, just intense negotiations every 28 days.”</li>
                <li>“It's a wonderful feeling when your father becomes not a god but a man to you -- when he comes down from the mountain and you see he's this man with weaknesses. And you love him as this whole being, not as a figurehead.”</li>
                <li>“But only in their dreams can men be truly free. It was always thus and always thus will be.” <em>-Dead Poets Society</em></li>
                <br>
           </ul>
         </div>
         
         <h3 class="headlines">A Few of My Favorite Robin Williams Movies</h3>
         <div class="row">
          <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <img src="http://d.gr-assets.com/books/1359814692l/67238.jpg" alt="Dead Poets Society">
              <div class="caption">
                <h3>Dead Poets Society</h3>
                <p>English teacher John Keating inspires his students to look at poetry with a different perspective of authentic knowledge and feelings.</p>
                <p><a href=https://en.wikipedia.org/wiki/Dead_Poets_Society class="btn btn-primary" role="button">More Info</a> </p>
            </div>
          </div>
        </div>

          <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <img src="https://images-na.ssl-images-amazon.com/images/I/5144Z06DSXL.jpg" alt="Good Morning, Vietnam">
              <div class="caption">
                <h3>Good Morning, Vietnam</h3>
                <p>An unorthodox and irreverent DJ begins to shake up things when he is assigned to the U.S. Armed Services Radio station in Vietnam.</p>
                <p><a href=https://en.wikipedia.org/wiki/Good_Morning,_Vietnam class="btn btn-primary" role="button">More Info</a></p>
            </div>
          </div>
        </div>

          <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <img src="https://images-na.ssl-images-amazon.com/images/I/61F14ZAHR6L.gif" alt="Aladdin">
              <div class="caption">
                <h3>Aladdin</h3>
                <p>When a street urchin vies for the love of a beautiful princess, he uses a genie's magic power to make himself off as a prince in order to marry her.</p>
                <p><a href=https://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film) target="_blank" class="btn btn-primary" role="button">More Info</a> </p>
              </div>
            </div>
          </div>
        </div>
      </div>
       <h2 class="center">When someone you love becomes a memory, the memory becomes a treasure.</h2>
    </div>
     
    <div class="col-lg-12">
      <div class="col-md-8">
            <p>To learn more about this great man visit: <a href="https://en.wikipedia.org/wiki/Robin_Williams" target="_blank" class="btn-sm btn-primary" role="button">Wikipedia</a></p>
      </div>
      <div class="col-md-4">
        <p class="muted pull-right">© 2016 SEH, In Loving Memory.</p>
      </div>
    </div>
  </div>
</body>
            
          
!
            
              body {
  margin-top:60px;
  margin-bottom:50px;
}

h1, h3, p, ul {
  font-family: 'Libre Baskerville', serif;
  line-height: 120%;
}

h2 {
  font-family: 'Dancing Script', cursive;
  line-height: 120%;
}

p {
  font-size: 20px;
}

ul {
  font-size: 18px;
}

em {
  font-size: 16px;
}

.thumbnail {
  display: inline block;
}

.center {
    text-align: center;
    background: #dae2f1;
    border-style: ridge;
    border-width: 10px;
    padding: 25px;
}

.headlines {
  text-align: center;
}

.caption p {
  font-size: 16px;
}

.col-lg-12 p {
  font-size: 14px;
}




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

Console