123

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.

            
              <h1>About Super Mario</h1>
<img src= "https://c1.staticflickr.com/4/3535/4566449122_462543fffd_z.jpg" alt= "Super Mario Bros world 1-1">
<p> Super Mario Bros took the world by storm when it released in 1985 and there's so much to learn about everything in Mario's world. The characters, power-ups, and each game all have so much to know. </p>
<h2>Characters</h2>
<p>There are hundreds of characters in the Mario universe, but these are some of the main ones.</p>
<h3>Mario</h3>
<img src= "https://cdn12.picryl.com/photo/2016/12/31/mario-figure-play-emotions-8066ad-1024.png" alt="Mario action figure">
<p>Mario is obviously the main character of his own series and he has had different names like Jumpman due to his appearence in Donkey Kong in 1981. Mario's main powers vary depending on the power-ups he uses, but in Mario and Luigi: Superstar Saga, he uses a move called firebrand and his hammer to attack. Mario also has been featured in games like Kirby Super Star as a spectator in the crowd and Punch Out as a referee. Mario has also typically used fire as a form of attacking, such as in Super Smash Bros., he uses a raging blast of fire as his final smash. Mario was also given a new ability for Smash Bros. Ultimate in which he can use his hat, Cappy, as a taunt.</p>
<div class="Luigi-info"><h3>Luigi</h3>
<img src="https://cdn12.picryl.com/photo/2016/12/31/luigi-figure-play-emotions-8dacb8-1024.jpg" alt="Luigi action figure" >
<p>Luigi is Mario's younger twin brother who has also starred in his own games like the notable Luigi's Mansion titles and the much hated Mario is Missing. Luigi first appeared in 1983 as the second player's option for the arcade game, Mario Bros. Luigi is often shown using his famous Poltergust as an attack strategy, or as a kart in Mario Kart DS. In Mario and Luigi: Superstar Saga, Luigi has an ability called thunder hand, which is similar to Mario's firebrand and he also uses his hammer to attack. The Smash Bros. Ultimate Simon Belmont trailer shows Luigi exploring the Catlevania castle while using the Poltergust designed for Luigi's Mansion 3; Luigi was also thought to be killed off in this trailer until Nintendo tweeted that "Luigi is okay". In Super Paper Mario, Luigi had an evil alter-ego named Mr. L who Mario has to fight.</p></div>
<div class="Peach-info"><h3> Princess Peach</h3>
  <img src="https://c1.staticflickr.com/8/7112/7661103888_b1e5140025_b.jpg" alt="Peach figure">
  <p> Princess Peach is the ruler of the Mushroom Kingdom and Mario's love interest. She has starred in her own game, Super Princess Peach, in which Mario, Luigi, and Toad were captured by Bowser. Peach is mainly sought after by Bowser, so she gets kidnapped by him over and over in almost every main game. In Super Mario Odyssey and Super Paper Mario, Peach was set to marry Bowser, but Mario or Luigi got in the way. Peach started to appear in Smash Bros. series when Super Smash Bros. Melee was released, where she could use Toads to defend herself at will.</p></div>
<div class="Toad-and-Bowser-info"><h3>Toad and Bowser</h3>
 <img src="https://c1.staticflickr.com/1/378/20328402291_51dbbbb14a_b.jpg" alt="Toad, Bowser, Yoshi, and Peach amiibos"><p> Toad is Princess Peach's helper and there are hundreds of Toads in the Mushroom Kingdom. Bowser is Mario's arch-nemisis who always kidnaps Peach and tries to take over the Mushroom Kingdom. The Toad race was confirmed to be genderless by Shigiru Miyamoto, the creator of Mario, and Toad is able to run faster than any other character in Super Mario 3D World. Bowser also has one son named Bowser Jr. and 7 others, known as the Kooplings, which have been proven to not be Bowser's biological children. Toads are also somewhat weak when it comes to protecting Princess Peach, and in Mario and Luigi: Bowser's Inside Story, a disease known as the Blorbs affected the Toad race. Toads also come in many different colors, like red, green, yellow, blue, and purple. Bowser was also originally supposed to be an ox, but Miyamoto decided to change him to a turtle instead. This original form can be seen in some official art for Super Mario Bros.</p></div>
<h4>Games</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Super_Mario_World_cassette_on_Super_Nintendo_Entertainment_System_20080610.jpg" alt="Super Mario World cartrige">
<p>There are many games in the Mario series, but some of the main ones include Mario's first adventure, Super Mario Bros., Luigi's Mansion, Super Mario 64, Super Mario World, and New Super Mario Bros. Wii. Super Mario Bros. was the first main series game that launched Mario's successful career which released in 1985. Super Mario World released in 1990 and introduced a new character, Yoshi, who was originally planned for the first game, but was scrapped due to the limited amount of pixal space on the NES. Luigi's Mansion was released in 2001 for the Nintendo Gamecube, but was announced at Spaceworld 2000 and had a darker atmosphere than the final product. Super Mario 64 was a game for the Nintendo 64 and was the first 3D Mario game; it was released in 1996 and marked the debut of the Nintendo 64. New Super Mario Bros. Wii came out for the Wii in 2009 with a four player feature and new power-ups.</p>
<h5>Power-ups</h5>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Novosel_mushroom.svg/2000px-Novosel_mushroom.svg.png" alt="Super mushroom">
<p>The power-ups in Super Mario are almost as numerous as the games, so some main ones include the super mushroom, 1-up mushroom, fire flower, super star, and ice flower. The super mushroom can change Mario into a taller version of himself that now needs two hits to kill. The 1-up mushroom can give Mario one extra life and the 3-up moon acts similarly, except appearing less often and giving Mario 3 extra lives. The fire flower gives Mario the ability to kill enemies that can't be jumped on, and the ice flower lets Mario freeze his enemies in place. The super star turns Mario invincible for about 10 seconds so he can defeat any enemy with a touch; the golden tanooki suit acts like the super star, but its effects last for the whole level or if Mario falls into a pit or in lava.</p> 
            
          
!
            
              body {
  font-family:sans-serif;
  background-color: rgb(216,57,40);
  color: rgb(1,76,181);
}
h2 {
  font-weight: bold;
}
img {
  height: 234px;
}
.Luigi-info {
 background-color: rgb(46,163,8);
  color: rgb(17,76,135);
}
.Peach-info {
  background-color: rgb(242,138,205);
  color: rgb(252,236,17);
}
.Toad-and-Bowser-info {
  background-color: rgb(4,119,10);
    color: blue; 
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 18px;
}
            
          
!
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.

Console