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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<body>
 
  
<main id="main">

  <h1 id="title"> "Pokémon Shipwreck"</h1>
    <h2 id="subtitle"> One of the best Pokémon episodes of all time</h2><br>
  
 
   <figure id="img-div">
      <img id="image" src="https://res.cloudinary.com/smr9220/image/upload/v1590258805/tmrocket_6_lz3xnw.png" alt="Jessie and Ash">
      <figcaption id="img-caption">Jessie and Ash making a truce.</figcaption>
    </figure>
    

 <br>
  
  <p id="tribute-info"><strong>Episode Events:</strong></p>
    <ol>
      <li> In the previous episode,<a href="https://bulbapedia.bulbagarden.net/wiki/EP015" target="_blank" id="tribute-link">"Battle Aboard the St. Anne"</a>, Jesse and James plot to lure Pokémon trainers, including Ash and his friends onto a fancy cruise ship to steal their Pokémon.</li>
      
       <figure id="img-div-2"><img id="image-2" src=https://res.cloudinary.com/smr9220/image/upload/v1590249825/tmrocket_2_edit_n9suns.jpg alt="Team Rocket"></img><figcaption id="img-caption-2">Jesse and James disguised as schoolgirls, trying to give free tickets to Ash and his friends.</figcaption>
        </figure>
      <li> Pokémon trading and battling ensues. Further along in the episode the trainers find themselves all gathered in a room. The ship's employees reveal themselves to be members of Team Rocket! As they suck up Poké Balls with vacuum-like devices, the trainers fight back. Their Pokémon team up to multiply their attacks and drive back the bad guys.</li>
      <li> During all the commotion, a tumultuous storm brews outside. Eventually, the ship rocks violently, and the consensus is to abandon ship. Only Jessie, James, Meowth, and Ash and his friends are unable to flee, as they are knocked unconscious by the jerking movements of the ship—then the ship flips over and sinks!</li>
      <li> The episode ends. "Pokémon Shipwreck" opens up with St. Anne plunging deeper into the ocean. The ship is completely sunken, upside down and teetering atop a very tall, narrow pillar. Ash, slowly gaining conciousness, realizes that him and his pals are doomed to a fishy fate. </li>
      <li> Meanwhile, Jessie, James and Meowth are in a different part of the ship. They soon realize their same fate and attempt to use Ekans' acid attack to create an opening and escape. The hole suddenly shoots out massive amounts of water filling the room and washing Team Rocket into another part of the ship.</li>
      <li> Ash, Misty and Brock find their way into a water filled passage. In an effort to find an exit, Misty sends Goldeen out to and instructs it to bring back anything it finds from the outside. Some time passes and Goldeen manages to bring back something - none other than a soggy and unconcious Team Rocket!</li>
    
        <figure id="img-div-3"><img id="image-3" src="https://res.cloudinary.com/smr9220/image/upload/v1590459070/tmrocket_3_ct2xwr.webp" alt="Team Rocket washed up"><figcaption id="img-caption-3"> An unconscious Team Rocket being retrieved by Goldeen.</figcaption></figure>
      
      <li> Team Rocket wakes up, and immediately confront Ash and his friends. The trainer send out their Pokémon in preparation of a Pokemon battle: Squirtle, Charmander, Bulbasaur, Geodude, Ekans and Koffing.</li>
      <li> The extra weight of all these Pokémon threw the ship off balance, causing it to lean over to one side throwing all the trainer and Pokémon alike to one side. Panicking, Ash tells all the Pokémon to run over to the other side of the room to offset the weight and balance the ship again. This fails as they realize its geodude who weighs the most, and Brock tell him to come back over to the trainers side.</li>
      <li> This back and forth continues for a several more trials until Misty becomes the voice of reason. She suggests that Ash call back his Pokémon. He refuses, saying that Team Rocket will beat them if he does so. Misty urges him again, Ash and Brock agree, seeing the dire situation they are all in. To Jessie and James, Misty demands they call back their Pokémon too. They hesitate, prompting her to ask, "What's more important, a Pokémon battle or your life?!" They withdraw Ekans and Koffing, and the ship becomes stable again.</li>
      <li> Arms folded, Misty states that there will be no battle for the time being. She suggests they all work together, but to her dismay notices her pals and Team Rocket furiously glaring at eachother. "Shake hands!", she demands all of them. Grudgingly, all the trainers agree to put aside their differences for the time being to escape the ship.</li>
  
    <figure id="img-div-4"><img id="image-4" src="https://res.cloudinary.com/smr9220/image/upload/v1590459083/tmrocket_4_km6rj2.jpg" alt="Team Rocket and Ash and friends making a truce."><figcaption id="img-caption-4">Jessie, Ash, James, Brock, Pikachu and Meowth make a truce.</figcaption></figure>
  
      <li> Misty reveals that she knows the layout of the ship, being that she built a model one in the past. She devises an excape plan and using each of the trainers Pokémon. With some minor hiccups (involving James' prized Magikarp of course) everyone makes it out of the sunken cruise ship safely on to a piece of floating debris.</li>
      <li> While figuring out how to get back to land, the trainers start feeling extremely hungry. They start thinking about eating Magikarp, seeing as it was a useless fish Pokémon. Meowth suddenly takes a bite out of Magikarp, only to break his teeth on it, learning it is virtually all scale and bone - useless as food. </li>
      <li> In a frustrated rage, James kicks Magikarp off the makeshift raft into the ocean. Suddenly, Magikarp starts evolving into Gyrados! Gyrados attacks the trainers with its ultimate attack, Dragon Rage. The episode closes with a massive water cyclone entrapping and hurling all of the trainers into the air.</li>
  </ol>
 
    <figure id="img-div-5"><img id="image-5"  src="https://www.thekingshabazz.com/wp-content/uploads/2019/06/magikarp-evolve.gif" alt="magikarp evolving"><figcaption id="img-caption-5"> Magikarp evolving into Gyrados</figcaption></figure>
 
      
    
        
       
</main>
</body>
              
            
!

CSS

              
                

body {background-color: lightyellow;
      background: linear-gradient(180deg, white, lightyellow, lightyellow, lightyellow, gold);
      border: solid white 80px;
     }


#title {text-align: center;
    color: yellow;
    font-weight: 1000;
    font-size: 65px;
    background: linear-gradient(180deg, white, blue, blue, white);
    padding: 50px;
    margin: 100px 450px 100px 450px;
    border-radius: 110px;
     
}

#subtitle{text-align: center;
    color: blue;
    font-weight: 100px;
    font-size: 40px;}
#img-div {text-align: center;}
#image {display: block;
        max-width: 100%;
        height: auto;
        margin: auto;}

#img-caption {color: blue;
              font-size: 15px;}

#img-div-2 {text-align: center;
            }
#image-2 {max-width: 100%;
          height: auto;
          margin: auto;
          diplay: block;}
#img-caption-2 {font-size: 15px;}

#img-div-3 {text-align: center;}
#image-3 {max-width: 100%;
          height: auto;
          maragin: auto;
          diplay: block;}
#img-caption-3 {font-size: 15px;}

#img-div-4 {text-align: center;}
#image-4 {max-width: 100%;
          height: auto;
          margin: auto;
          diplay: block;}
#img-caption-4 {font-size: 15px;}

#img-div-5 {text-align: center;}
#image-5 {max-width: 100%;
          height: auto;
          margin: auto;
          display: block;}
#img-caption-5 {font-size: 15px;
                color: blue;}



#tribute-info {font-size: 40px;
               color: blue;
               text-align: center}
ol {color: blue;
    font-size: 25px;}

li {padding: 20px}

#main{font-family: Comic Sans MS;}



              
            
!

JS

              
                
              
            
!
999px

Console