css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <div class="container" style="background-color:ghostwhite">
  <h1 class="display-2 text-center">Walt Disney</h1>
  <h2  class="display-4 text-center"><em>The man who created the impossible</em></h2>
    <div class="text-center container">
        <img class="img-thumbnail text-center img-responsive"  src="https://flavorwire.files.wordpress.com/2015/12/disney1.jpg" alt="Walt Disney with Mickey image">
      <p><strong>Walt Disney with Mickey c.1935</strong></p>
<div class="container">
    <h3 class="text-center">Here's a timeline of Walt Disney's life:</h3>
    <div class="container">
    <div class="row">
      <div class="col-md-3"></div>
    <div class="col-md-6"><ul>
      <li><strong>1901:</strong> Born in Chicago, IL.</li>
      <li><strong>1906:</strong> The Disney family moves to Marceline, MO where young Walt develops an interest in drawing, and his love for trains.</li>
      <li><strong>1911:</strong> The Disneys move to Kansas City. Walt delivers The Times everyday at 4.30 a.m. Joins the Kansas City Art Institute</li>
      <li><strong>1908:</strong> Joins the Red Cross as an ambulance driver in World War I. He's stationed in France</li>
      <li><strong>1920:</strong> Starts the Iwerks-Disney Commercial Artists company after being laid off from Pesmen-Rubin. It's short-lived effort, but Walt's first attempt at entrepreneurship. </li>
      <li><strong>1921:</strong> Disney establishes the Laugh-O-Grams studio. Their main client is the Newman Theater.</li>
      <li><strong>1923:</strong> Walt and his brother Roy move to Los Angeles. They sell the distribution of <em>Alice's Adventures in Wonderland</em>, a mix of live action and animation, to New York's Margaret J. Winkler.</li>
      <li><strong>1925:</strong> Walt marries Lilly Bounds</li>
      <li><strong>1927:</strong> The Disney Brothers Studio develops the <em>Oswald the Lucky Rabbit</em> cartoon series. Charles Mintz, Winkler's husband and Universal Pictures distributor, hires half of Disney's staff to reduce payments. Disney finds out Universal has the rights to <em>Oswald the Lucky Rabbit</em>. Heartbroken, but never defeated, Walt develops the concept of a mischievous mouse as he travels back to Los Angeles. He plans to name the mouse Mortimer. Lilly suggest the name Mickey. Ub Iwerks develops Mickey's physical appearance while Walt would provide the mouses' voice until 1947.
      <li><strong>1928:</strong> <em>Steamboat Willie</em> starring Mickey Mouse is released. It becomes the first sound cartoon. Mickey Mouse becomes a global sensation. 
      <li><strong>1933:</strong> Disney produces the <em>Three Little Pigs </em></li>
      <li><strong>1937:</strong> Disney releases <em>Snow White and the Seven Dwarfs</em>. The film industry predicted the films' failure and named it "Disney's folly". Disney proves the critics wrong. <em>Snow White and the Seven Dwarfs</em> would eventually gross $6.5 million dollars (the top grossing sound film at the time) and win a honorary Academy Award. 
      <li><strong>1941:</strong> After the releases of both <em>Pinnocchio</em> and <em>Fantasia</em> the Walt Disney Studio suffered a strike. The financial stress and staff morale would haunt Walt for years. Disney begins to develop cartoons to support the US military front during World War II. 
      <li><strong>1950:</strong> <em>Cinderella</em> is released, earning praise from both critics and audiences. 
      <li><strong>1955:</strong> <em>Disneyland</em> opens. The first day was a disaster, but a PR success. As with <em>Snow White and the Seven Dwarfs</em> the <em>Disneyland</em> project was considered a failure. His fiercest critics said "who would want to visit a magic castle in the middle of Anaheim?" Walt proved the power of that idea.  
      <li><strong>1964:</strong> WED enterprises participates in New York's Fair. The <em>It's a small world</em> and <em>Progressland</em> attractions delight audiences. They would become staples of Disney Parks. 
      <li><strong>1965:</strong> Disney announces the construction of the <em>Florida</em>project. It would become <em>Walt Disney World</em>.
      <li><strong>1966:</strong> Walt Disney dies.    
  <blockquote class="blockquote">
  <p class="h4">"The difference in winning and losing is most often not
    <footer class="blockquote-footer"><cite>Walt E. Disney</cite></footer>
      <h3>For more information on Walt Disney, check out his<a href="https://en.wikipedia.org/wiki/Walt_Disney" target="_blank"> Wikipedia page.</a></h3>       
      <footer class="text-center">Written and coded by <a href="https://www.linkedin.com/in/jorge-celorio-439189b4/" target="_blank">J. Celorio</a></p>



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