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.

            
              <html>
<head>
<link rel="stylesheet" type="text/css" href="tp.css">
<meta charset="UTF-8">
 <meta name="description" content="Tribute page">
 <meta name="keywords" content="tribute, Hulk, Banner">
 <meta name="author" content="Cicero Silva">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Tribute to the HULK</title>
</head>
<body>
    <body>
        <div id="main">
         <div><h1 id="title" style="text-align:center;">The INCREDIBLE HULK!!!</h1></div>
         <div id="img-div">
          <img id="image" src="https://i.ytimg.com/vi/6f9uKOzN2kE/maxresdefault.jpg" alt="Hulk transforming"></img>
       <div id="img-caption" style="text-align:center;">The transformation of Banner into the Hulk</div>
         </div>
         <div id="splitter"><h3 style="text-align:center;">Everyone has a superhero they wish they could tranform into,<br> mine just happens to be the</h3>
       <img id="image2" src="https://imgc.allpostersimages.com/img/print/posters/david-nakayama-marvel-adventures-hulk-no-4-cover-hulk_a-G-13754799-13198931.jpg" alt="the Hulk"></img>
       <div id="img-caption-two" style="text-align:center;">Hulk cover #4 by David</div>
         </div>
         <div id="tribute-info">
         <p>The Hulk is a fictional superhero created by writer Stan Lee and artist Jack Kirby for Marvel Comics. The Hulk's first appearance came in May 1962. Lee stated that the Hulk's creation was inspired by a combination of Frankenstein and Dr. Jekyll and Mr. Hyde.Kirby, commenting upon his influences in drawing the character, recalled as inspiration the tale of a mother who rescues her child who is trapped beneath a car. Lee has also compared Hulk to the Golem of Jewish mythology.</p>
         <p>For the debut, Lee chose grey for the Hulk because he wanted a color that did not suggest any particular ethnic group. Colorist Stan Goldberg, however, had problems with the grey coloring, resulting in different shades of grey, and even green, in the issue. After seeing the first published issue, Lee chose to change the skin color to green. Green was used in retellings of the origin, with even reprints of the original story being recolored for the next two decades, until The Incredible Hulk vol. 2, issue #302 in December 1984 reintroduced the grey Hulk in flashbacks set close to the origin story.</p>
         <p id="comic"><h3>Origin Story</h3><br>During the experimental detonation of a gamma bomb, scientist Robert Bruce Banner saves a teenager Rick Jones who had driven onto the testing field; Banner pushes Jones into a trench to save him, but is hit with the blast, absorbing massive amounts of gamma radiation. He awakens later seemingly unscathed, but that night transforms into a lumbering grey form. A pursuing soldier dubs the creature a "hulk". Originally, it was believed that Banner transformations into the Hulk were caused by sunset and undone at sunrise, but later, after Rick witnessed Banner turn into Hulk at daytime following a failed attempt by Ross' men to shoot the Hulk into space, it was discovered to be caused by anger. Banner was cured in The Incredible Hulk #4, but chose to restore Hulk's powers with Banner's intelligence. In The Avengers #1 (September 1963), the Hulk became a founding member of the title's eponymous superhero team. </p>
         <p>As Bruce Banner, the character is approximately 5'9" tall and weighs 128Ibs, but when transformed into the Hulk, the character can stand between 7–8 feet tall and weigh up to 1,400Ibs. Incredible Hulk #227 (1978) established that the Hulk's separate personality was not due to the mutation affecting his brain, but because Banner was suffering from multiple personality disorder, with the savage Green Hulk representing Banner's repressed childhood rage and aggression and the Grey Hulk representing Banner's repressed selfish desires and urges.</p> 
        </div>
        <div><h3 style="text-align:center">The various INCARNATIONS of the HULK</h3></div>
        <div id="versions">
          <div id="tribute-info-1"><h4>The Grey Hulk</h4><img id="grey-hulk" class="grey-hulk" alt="The Grey Hulk" src="https://78.media.tumblr.com/4d07eac3ecc160467007bf6b6152ae4e/tumblr_pf3bdkDzAl1qhrzm6o1_250.jpg"></img><p style="text-align: justify" id="grey-hulk-text">Grey Hulk is the original Hulk. Stan Lee wanted the Hulk to be grey but due to ink problems, Hulk's color was changed to green. This was explained by saying that the Grey Hulk persona and the Green Hulk persona are battling in  Bruce Banner's sub-conscious.<br> David revamped the personality significantly, giving the Grey Hulk the alias "Joe Fixit" and setting him up as a morally ambiguous Las Vegas enforcer and tough guy. This incarnation represents the personality that can do all the not so nice things that Bruce was too unsure of to do himself. This incarnation can lift approximately 75 tons and does possess the "madder he gets, the stronger he gets" ability, but at a much slower rate, since this incarnation has some level of intelligence and reasoning and would not "lose control" as easy as the Savage Hulk incarnation</p></div>
          <div id="tribute-info-2"><h4>The Maestro</h4><img id="maestro" alt="The Maestro" src="https://78.media.tumblr.com/ddfea0b8367719cbcb48cb4c3a72d947/tumblr_pf3bdkDzAl1qhrzm6o2_250.jpg"></img><p>Approximately a hundred years into the future, a nuclear war has killed almost all of Earth's superhumans and has taken the world to the brink of extinction. A future version of the Hulk, called Maestro, has seized control, driven insane by the nuclear radiation he has absorbed and the bitterness he feels towards the world at his continued treatment. He has the intelligence of Bruce Banner and the absorbed radiation has significantly enhanced his strength. At some unknown point in his future, he teams up with a version of Wolverine, to go back in time in search of the Red Hulk. he Maestro largely possesses the same powers as the Hulk, but to a greater degree than most incarnations due to the century's worth of radiation he has absorbed as a result of the nuclear wars that decimated his Earth. This includes certain mental powers, such as the Hulk's ability to see and interact with astral forms.</p></div>
          <div id="tribute-info-3"><h4>The Red Hulk</h4><img id="red-hulk"alt="The Red Hulk" src="https://78.media.tumblr.com/dc9a674d3ceb9b8a8942555a445858fa/tumblr_pf3bdkDzAl1qhrzm6o3_250.jpg"></img><p>General Ross never told anyone that from the first moment he encountered the Hulk he coveted the creature's raw power. At a time when Ross was at his lowest point – Hulk was banished off-world, Betty was dead and Captain America was killed – the Leader and M.O.D.O.K. came to him once more. They had a plan that needed Ross to succeed, and they made him an offer he couldn't refuse. The Leader promised to resurrect Betty if Ross agreed to work with them. Using radiation siphoned from the Hulk, Leader and M.O.D.O.K. transformed Ross into the Red Hulk. the Hulk returned and challenged his authority. The battle of the Hulks was savage, and both knew the only way their feud would end was when one of them was dead. Banner was unwilling to take a life, but his opponent wasn't as squeamish. Red Hulk delivered a killing blow only he failed to kill the Hulk. Instead, he was defeated, and Hulk told him he could never change back into Ross or he would expose him as a traitor to the world. Ross was trapped in the body of what he hated most and there was nothing he could do about it.</p></div>
         </div>
         <div id="world-breaker">
           <div id="chant"><H2 style="text-align: center">Hulk SMASH!!!!</H2></div>
           <p style="text-align: center">Check out the video below for one of the last incarnations to be inked - WORLD-BREAKER HULK!!!</p>
           <iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" width="560" height="315" src="https://www.youtube.com/embed/bQfRpv4s3ho" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>  
         </div>
        <footer id="footer"><p style="text-align:center;">For more information on the <em>JADE GIANT</em>, click <a id="tribute-link" href="https://www.marvel.com/characters/hulk-bruce-banner/in-comics/profile" target="_blank">here</a></footer>
        </div>    
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>    
</body>
</html>
            
          
!
            
              html {
  font-size: 14px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(14px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 20px;
  }
}

#title {
    background-color: #00a86b;
    padding-top: 15px;
    padding-bottom: 10px;
}

#img-div {
    display: absolute;
    align-content: center
   }
   
#image {
    max-width: 100%;
    display: block;
align-content: center;
    height: auto;
   }
   #image2 {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
   }
   #img-caption {
    padding: 5px;
   }
   #img-caption-two {
    padding-bottom: 10px;
   }
   #splitter {
    background: black;
    color: white;
    padding-top: 3px;
    padding-bottom: 3px;
   }
   
   #tribute-info {
       background-color: #00a86b;
    padding: 15px;
    text-align: justify;
    text-align: center;
       }
   
    #versions {
    display: grid;    
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-evenly;    
}

    #tribute-info-1 {
    background-color: gray;
    text-align: center;
    max-width: 100%;
    height: auto;
    padding-left: 7px;
    padding-right: 7px;
   }
   
   #tribute-info-2 {
    background-color: #00a86b;
    text-align: center;
    max-width: 100%;
    height: auto;
    padding-left: 7px;
    padding-right: 7px;
   }
   
   #tribute-info-3 {
    background-color: red;
    text-align: center;
    max-width: 100%;
    height: auto;
    padding-left: 7px;
    padding-right: 7px;
   }
   
   #grey-hulk {
       border-radius: 50%;
       filter: blur(5px);
       transition: transform .2s; /* Animation */
    }
   
   #grey-hulk:hover {
border-radius: 50%;  
filter: blur(0px);
transform: scale(1.3);
}    

   #maestro {
    border-radius: 50%;
    filter: blur(5px);
    transition: transform .2s; /* Animation */
   }

#maestro:hover {
    border-radius: 50%;  
    filter: blur(0px);
    transform: scale(1.3);    
}

#red-hulk {
    border-radius: 50%;
    filter: blur(5px);
    transition: transform .2s; /* Animation */
    }

    #red-hulk:hover {
    border-radius: 50%;  
    filter: blur(0px);
    transform: scale(1.3);
}
    
#world-breaker {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#footer {
    background-color: #00a86b;
    padding: 10px;
}

#grey-hulk-text {
    padding: 2px;
    text-justify: auto;
    text-align: justify;
}

#chant {
  animation-name: smash;
  animation-duration: 3s;
  animation-iteration-count: infinite
}

@keyframes smash {
    0% {
    filter: opacity(100%)
        }
    
        100% {
    filter: opacity(0%)
        }
  }
            
          
!
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