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

              
                <head>
   <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Homemade+Apple" />
   <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Fondamento" />
</head>

<div class="header">
   <h1 class="walt">Walter Elias Disney</h1>
</div>

<div class="info">
   <p class="intro">Walter Elias "Walt" Disney was an American business magnate, cartoonist, producer, film director, writer, screenwriter, philanthropist, voice actor, and an animator. Walt created magic and optimism. He transformed the entertainment industry and pioneered the fields of animation. Walt Disney did not just create cartoons, he inspired (and still inspires) children of all ages with his movies. These movies send a message that you can look at the world and impose your will on it. <span class="textchange">You could make your dreams come true if you follow them and never give up</span>.</p>
</div>

<div class="about">
   <h3 class="about1"><strong>About</strong></h3>
   <p class="biography">Walt Disney was born on December 5, 1901 in Hermosa, Chicago. He is one of five children and of Irish, German and English descent.</p>
   <p class="biography">When he was four, his family moved to a farm in Marceline, Missouri. It was then Elias developed an interest in drawing when he was paid to draw a horse of a retired doctor. Moreover, he practiced drawing by copying front-page cartoons of Ryan Walker in the <em>Appeal to Reason</em> newspaper. In 1909, his family sold the farm and moved to Kansas City, where they lived in a rented house.</p>
   <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-105514.jpg" class="sketch" alt="A sketch of Mickey Mouse"/>
   <p class="biography">Disney attended McKinley High School, where he took classes in drawing and photography. He was also a member of the school paper as a contributing cartoonist. While attending school during the day, he took courses at the Chicago Academy of Fine Arts at night. Although he did not complete his high school studies, he joined the Red Cross and was sent to France for a year to drive an ambulance. He would continue to draw cartoons on the side of his ambulance for decoration and had some of his sketches published in the army newspaper <em>Stars and Stripes</em>.</p>
   <p class="biography">Upon his return from France in 1919, his brother Roy got him a job as Penmen-Rubin Art Studio. From there, he worked at the Kansas City Film Ad Company, where he started making commercials based on cutout animation. During his time at this company, he started experimenting with a camera and doing hand-drawn cel animation. He eventually decided to open his own animation business.</p>
</div>

<div class="productions">
   <h3 class="">Walt Disney Productions</h3>
   <p>Walt and his brother Roy co-founded Walt Disney Productions. Initially, they started the Disney Brothers Studio in their Uncle Robert’s garage. In 1926, the <em>Disney Brothers Studio</em> was renamed as the Walt Disney Studio and the name <em>Walt Disney Productions</em> was adopted in 1928.</p>
</div>

<div class="mickeymouse">
   <p class="quote" style="color:#FFF; font-family: 'Homemade Apple', Cursive; font-size: 26px;">" When you're curious, you find lots</p>
   
   <p class="quote2" style="color:#FFF; font-family: 'Homemade Apple', Cursive; font-size: 26px"> of interesting things to do." <span style="color:#FFF; font-family: 'Big Calson', Serif; font-size: 24px;">- Walt Disney</span></p>
</div>

<div class="disneyland">
   <h3 class="">Disneyland Park</h3>
   <p>Walt Disney drew sketches of his ideas for an amusement park in the late 1940s, where he envisioned his employees spending time with their children. He spent five years developing Disneyland with the help of a small group of Disney studio employees. Disney’s dream of a clean and organized amusement park came true, as Disneyland Park opened in 1955.</p>
   <p>Today, Walt Disney’s animation/motion picture studios and theme park have developed into a multi-billion dollar television, motion picture, vacation destination, and media corporation that carries his name.</p>
</div>

<div class="death">
   <h3>Death</h3>
   <p>Due to a long habit of smoking since World War I, he was diagnosed with lung cancer in his left lung and treated with cobalt therapy in November 1966. On November 30, he felt unwell and was checked into the St. Joseph’s Hospital across the street from the disney studio lot and his health eventually deteriorated. His dedication to his projects was still visible while lying on his death bed. Walt unfortunately passed away on December 15, 1966 where he had just celebrated his sixty-fifth birthday two weeks earlier. His body was cremated, and his ashes are interred at the Forest Lawn Cemetery in Glendale, California - near his studio.</p>
   <p>Walt Disney remains the central figure in the history of animation. Disney impacted today’s world by helping the tourism business, bringing advancements in technology to the film industries, and inspiring children of all ages.</p>
</div>

<div class="closing">
   <div class="bye">
      <p id="closing">Walt Disney and his staff created a number of the world’s most popular animated properties, one of them being Disney’s alter-ego Mickey Mouse.</p>
      <button class="btn btn-default">
         <p class="movielink"><a href="http://disdb.com/disney-movies.asp" alt="Link to Disney movies" target="blank">Click here to see Disney movies</a></p>
   </button>
   </div>
</div>
              
            
!

CSS

              
                body {
   margin-top: 60px;
   margin-bottom: 60px;
}

div {
   display: block;
}

.header {
   height: 600px;
   width: 100%;
   min-width: 700px;
   background: url(http://www.jonathantony.com/wp-content/uploads/2015/04/Mr-Walt-Disney-sits-at-hi-014.jpg) no-repeat;
   background-size: cover;
   position: left-center;
   opacity: 0.95;
   border-bottom: 40px;
}

.walt {
   color: #2c3834;
   font-size: 70px;
   padding-top: 590px;
   padding-right: 20px;
   padding-botton: 20px;
   float: right;
   font-family: 'Avant Garde', avantgarde, 'Century Gothic';
   text-shadow: 0 0 4px #c2f6e5;
}

.info {
   margin: 140px 60px 60px 60px; 
}

.textchange {
   color: #5c17a5;
}

p {
	font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
}

h2 {
   font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 24.210527420043945px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 27.36842155456543px;
}

.about {
   margin: 0px 60px 60px 60px; 
}

.sketch {
   float: right;
   height: 300px;
   position: center;
}

.productions {
   margin: 0px 60px 60px 60px;
}

.mickeymouse {
   background: url(http://wdy.h-cdn.co/assets/15/47/980x490/landscape-1447881705-mickey-potatoland.jpg) no-repeat fixed center;
   background-size: cover;
   height: 500px;
   width: 100%;
   min-width: 700px;
   opacity: .9;
   text-shadow: 0 0 10px #000;
}

.quote {
   padding-top: 350px;
   padding-left: 30px;
}

.quote2 {
   padding-left: 90px;
}

.disneyland {
   margin: 60px; 
}

.death {
   margin: 0px 60px 60px 60px;
}

.closing {
   background: url(https://4.bp.blogspot.com/-jxJ5eTNN9QY/TsNQMwNWQ4I/AAAAAAAAEWo/89tRm5xoO_Q/s1600/Castle+1%252C+Herb+Ryman%252C+1953+or+54.jpg) no-repeat center;
   height: 400px;
   background-size: cover;
   width: 100%;
   min-width: 700px;
   opacity: .84;
}

.bye {
   margin: auto;
   padding: 120px 80px 0 80px;
   text-align: center;
}

#closing {
   color: #FFF;
   font-family: Fondamento;
	font-size: 28px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 30px;
   text-shadow: 0 0 50px #000;
}

.btn {
   margin: 60px;
   background-color: ;
   align: center;
}
              
            
!

JS

              
                
              
            
!
999px

Console