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.

            
              <body class="container body-background">
  <div class="inbodyblue-background">
    <div class="inbodyred-background">
    
      <div>
        <h1 align="center">Stanley Martin Lieber<h1>
        <h2 align="center">"Stan Lee"<h2>
      </div>

      <div>
        <table align="center">
          <tr><td><img src="http://www.blastr.com/sites/blastr/files/stan-lee.jpeg" class="img-responsive"></td></tr>
          <tr><td class="subtitle-text">"I used to be embarrassed because I was just a comic-book writer while other people were building bridges or going on to medical careers. And then I began to realize: entertainment is one of the most important things in people's lives. Without it they might go off the deep end. I feel that if you're able to entertain people, you're doing a good thing." <a href="http://www.notable-quotes.com/l/lee_stan.html#cj59uW0dkV94Hbsd.99" target="_blank" class="a a:hover">-STAN LEE, The Washington Post, July 23, 2010</a></td></tr>
        </table>
      </div>
          <br>

      <div>
        <p>Stan Lee is most commonly known for being a comic-book writer; but he is also an editor, publisher, and media producer. In collaboration with several artists he helped create some of our favorite superheroes such as: Spider-Man, the Hulk, the Fantastic Four, Iron Man, Thor, the X-Men, and many others.</p>
      </div>
        
      <div>
        <h3 align="center"><b>Here's a time line of Mr. Lieber's life:</b></h3>
        <ul align="center">
          <li><b>1922</b>- Born December 28 in New York City, NY as Stanley Martin Lieber to his Romanian-born Jewish immigrant parents Celia and Jack Lieber.</li>
          <li><b>1939</b>- Graduated from high school at age 16 and through family connections got a job at Timely Comics as an assistant.</li>
          <li><b>1941</b>- Becomes editor at Timely Comics. His beginning work being the third issue of Captain America.</li>
          <li><b>1942-1945</b>- Serves in the United States Army writing manuals and scripts for training films as part of the Signal Corps.</li>
          <li><b>1947</b>- Marries Joan Clayton Boocock on December 5th (they are still married to date).</li>
          <li><b>1961</b>- Created the Fantastic Four with the help of Jack Kirby</li>
          <li><b>1962</b>- Created the incredible Hulk with the help of Jack Kirby, the mighty Thor with the help of Jack Kirby and Larry Lieber, and the amazing Spider-man with the help of Steve Ditko.</li>
          <li><b>1963</b>- Created Iron Man with the help of Jack Kirby, Larry Lieber, and Don Heck, the X-Men with the help of Jack Kirby, and Doctor Starnge with the help of Steve Ditko.</li>
          <li><b>1964</b>- Created Daredevil with the help of 	Bill Everett.</li>
          <li><b>1966</b>- Created the Silver Surfer with the help of 	Jack Kirby.</li>
          <li><b>1969</b>- Created Falcon, the first African-American superhero, with the help of Gene Colan.</li>
          <li><b>1971</b>- Helped reform the Comics Code when the U. S. Department of Health, Education and Welfare had asked him to write a comic story about the dangers of drugs. The comics sold well and Marvel won praise for its socially conscious efforts.</li>
          <li><b>1972</b>- Becomes Marvel's publisher.</li>
          <li><b>1977</b>- Launched the Spider-Man newspaper comic strip with John Romita Sr.</li>
          <li><b>1978</b>- His final collaboration with Jack Kirby was published, The Silver Surfer: The Ultimate Cosmic Experience.</li>
          <li><b>1980</b>- Produced the first issue of the savage She-Hulk with the help of John Buscema.</li>
          <li><b>1994</b>- Won the Will Eisner Award and was inducted into the Hall of Fame.</li>
          <li><b>1995</b>- Inducted into the Jack Kirby Hall of Fame.</li>
          <li><b>1998</b>- Began Stan Lee Media with Peter Paul, a new internet-based superhero creation, production, and marketing studio.</li>
          <li><b>2000</b>- His first work for DC Comics was launching the Just Imagine... series, in which he re-imagined the DC superheroes Superman, Batman, Wonder Woman, Green Lantern, and the Flash. Also, he won the Lifetime Achievement Award in the Burbank International Children's Film Festival.</li>
          <li><b>2001</b>- Fantastic Four #48 was chosen as #24 in the 100 Greatest Marvels of All Time poll of Marvel's readers. Also, POW! (Purveyors of Wonder) Entertainment was formed with the help of Gill Champion and Arthur Lieberman to develop film, television and video game properties.</li>
          <li><b>2002</b>- Won the Saturn Award and the The Life Career Award.</li>
          <li><b>2006</b>- Marvel commemorated his 65 years with the company by publishing a series of one-shot comics starring Mr. Lieber himself meeting and interacting with many of his co-creations.</li>
          <li><b>2008</b>- Receives the American National Medal of the Arts.</li>
          <li><b>2009</b>- Won the Scream Award and the Comic-Con Icon Award. The County of Los Angeles and the City of Long Beach declared October 2, 2009 "Stan Lee Day".</li>
          <li><b>2010</b>- The Stan Lee Foundation was founded to focus on literacy, education and the arts.</li>
          <li><b>2011</b>- Hollywood Walk of Fame.</li>
          <li><b>2012</b>- Won the Vanguard Award in the Producers Guild of America, won the Lifetime Achievement Award and the Visual Effects Society Award in the Savannah Film and Video Festival. Announced his YouTube channel, Stan Lee's World of Heroes, at San Diego Comic-Con International.</li>
          <li><b>2015</b>- Wrote the book, Zodiac, and released it with Stuart Moore.</li>
        </ul>
      </div>
          <br>
          
      <div>
        <h4>For more information on Mr. Lieber please visit his <a href="https://en.wikipedia.org/wiki/Stan_Lee" target="_blank" class="a a:hover">Wikipedia</a> or <a href="https://www.facebook.com/realstanlee/timeline?ref=page_internal" target="_blank" class="a a:hover">Facebook</a> page.</h4>
      </div>
          
      <div>
        <footer>Written and coded by <a href="https://codepen.io/EuniceTrey7/" target="_blank">Eunice Martinez</a>.
        </footer>
      </div>
        
    </div>      
  </div>
</body>
            
          
!
            
              h1 {
  font-family: Serif;
  font-size: 40px;
  color: black;
}

h2 {
  font-family: Serif;
  font-size: 35px;
  color: #000066;
}

h3 {
  font-family: Serif;
  font-size: 20px;
  color: black;
}

h4 {
  font-size: 18px;
  font-family: Serif;
  color: black;
}

footer {
  font-size: 15px;
  font-family: Serif;
  color: black;
}

.subtitle-text {
  font-size: 15px;
  font-family: Serif;
  color: black;
}

p {
  font-size: 18px;
  font-family: Serif;
  text-align: left;
  color: black;
}

.body-background {
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/f7/5f/e9/f75fe9d6f289c1f3b5382f832ff35477.jpg");
  padding: 4% 4% 4% 4%;
}

.inbodyblue-background {
  background-color: #000066;
  padding: 10px;
}

.inbodyred-background {
  background-color: #ffcc99;
  border: 10px solid red;
  padding: 3% 4% 3% 4%;
  text-align: center;
}

table,
th,
td {
  border-radius: 5px;
  padding: 1%;
  text-align: left;
  background-color: #ffcc66;
}

ul {
  font-size: 18px;
  font-family: Serif;
  text-align: left;
  color: black;
}

a,
a:hover {
  color: red;
}

a:hover {
  color: #000066;
  text-decoration: underline;
}

img {
  display: block;
  margin: 0 auto;
}
            
          
!
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