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.

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

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console