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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <html>
  <head>
    <title>Mickey Mouse Tribute Page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
      
      img {
        border-style:solid;
        border-width:5px;
        border-color:#ffffff;
      }

      .blockquote {
      	margin:25px;
      }
      
    </style>
  </head>

<body>
  
<div class="container">
  <div class="jumbotron">


<!--heading and subheading-->
    <h1 class="text-center">Mickey Mouse</h1>
    <h2 class="text-center">The mouse that launched a million laughs</h2>
    

<!--picture and caption-->    
    <div class="container-fluid">

      <div class="row">
        <div class="col-xs-1 col-lg-3"></div>
        <div class="col-xs-10 col-lg-6">
        <img class="img-responsive center-block" src="https://s-media-cache-ak0.pinimg.com/564x/f2/10/a5/f210a52a9813153a68633d43c9765da1.jpg" alt="Picture of Donald Duck, Minnie Mouse, Pluto, Mickey Mouse and Goofy">
        </div>
        <div class="col-xs-1 col-lg-3"></div>
      </div>

      <div class="row">
        <div class="col-xs-1 col-lg-3"></div>
        <div class="col-xs-10 col-lg-6 caption text-center">Mickey Mouse, second from right, with friends Donald, Minnie, Donald, Pluto and Goofy.</div>
        <div class="col-xs-1 col-lg-3"></div>
      </div>  
    </div>


<!--heading followed by list-->    
    <div class="container list text-left">

      <div class="row">
       <div class="col-xs-1"></div>
       <div class="col-xs-10">
    <h3>Here is a partial list of the many achievements of Mickey Mouse:</h3>
        </div>
        <div class="col-xs-1"></div>
      </div>
        
        <div class="row">
          <div class="col-xs-1"></div>
          <div class="col-xs-10">
    <ul>
      <li><strong>1928</strong> - Created by Walt Disney and Ub Iwerks at the Walt Disney Studios</li>
      <li><strong>1928</strong> - Offically debuted in the short film Steamboat Willy (although his first actual film was called Plane Crazy)</li>
      <li><strong>1930</strong> - Started to be also featured as a comic strip character.  He has since been featured in comic books, The Mickey Mouse Club, video games, watches, toys, etc.</li>
      <li><strong>1935</strong> - First appears in color int eh film The Band Concert (prior to this he was in black and white)</li>
      <li><strong>1942</strong> - Mickey's Lend a Paw cartoon won an Academy Award for Best Animated Short Film</li>
      <li><strong>1955</strong> - He plays a central role</li>
      <li><strong>1978</strong> - Became the first cartoon character to have a star on the Hollywood Walk of Fame</li>
    </ul>
          </div>
          <div class="col-xs-1"></div>
        </div>
    </div>


<!--quote-->  
  <div class="container blockquote">

    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-8 text-center">
          <p>"Mickey Mouse popped out of my mind onto a drawing pad 20 years ago on a train ride from Manhatten to Hollywood at a time when business fortunes of my brother Roy and myself were at lowest ebb and disaster seemed right around the corner.</p>
        </div>
        <div class="col-xs-2"></div>
    </div>
        
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-6">
          <footer class="blockquote-footer text-left">- Walt Disney</footer> 
        </div>
        <div class="col-xs-3"></div>
    </div>
  </div>
 

<!--reference to additional information-->      
 <div class="container-fluid">
 
    <div class="row">
      <div class="col-xs-0 col-lg-1"></div>
      <div class="col-xs-12 col-lg-10">
        <p class="text-left"><strong>This is only a small sample of the information you can learn about Mickey Mouse on  <a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank">Wikipedia</a>. If you are inerested, please read more about this incredible mouse on <a href="https://en.wikipedia.org/wiki/Mickey_Mouse" target="_blank">Mickey's Wikipedia Page</a>. Better yet, check out some of his movies available at <a href="https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Dmovies-tv&field-keywords=Mickey+mouse" target="_blank">Amazon.com</a>.</strong></p>
      </div>
      <div class="col-xs-0 col-lg-1"></div> 
    </div>
</div>

</div>    <!--jumbotron closing tag-->


  <!--page footer-->
  <div class="container-fluid text-center">
    <div class="row">
      <div class="col-xs-12>
        <p class="text-center">Written and Coded by TRP</p>
      </div>
    </div>
  </div>


</div>  <!--closing tag for overall page container-->
</body>
</html> 

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console