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 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

              
                <figure id="instructions">
   <h5><a href="#" id="hideinstructions" title="Close Instructions"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/228208/close_window.png" /></a></h5>

   <h3>VC238 Challenge</h3>
   <h2>Top Ten List</h2>
   <p><em>Remember to first log into your CodePen account, then <strong>Fork</strong> this Pen to begin your work.</em></p>
   <p>Using the provided Pen, add CSS code so that the HTML layout matches identically the provided <a href="https://vc238.chemeketa.vc/challenges/topten/top_ten_list_design_sample.png" target="_blank">design sample</a>. Do not modify the HTML or images in any way - write only CSS to style the page.</p>
   <ul>
	  <li><a href="https://vc238.chemeketa.vc/challenges/topten/top_ten_list_design_sample.png" target="_blank">Design sample</a> (.png; open in Photoshop to grab the colors; be sure to zoom in to 100%)</li>
	  <li>Determine the colors and widths from the example PNG.</li>
	  <li>The two fonts used are Gerogia and Helvetica (Arial is an OK substitute).</li>
	  <li>Fonts sizes and heights should be set in ems.</li>
	  <li>Widths, letter spacing, and border widths should be set in ems.</li>
      <li>Use Flexbox to create the layout of the games.</li>
	  <li>A reset style sheet has already been applied to this page.</li>
	  <li>Most CSS rules in the Challenge make use of margin and/or padding in some combination. When working to solve spacing problems, go to these first.</li>
   </ul>

   <h4>Requirements</h4>
   <p>Name this pen <em>Challenge 01 - Top Ten List</em>. To turn in this assignment, create a link to it from your class Landing page. This Challenge is due at the beginning of class on <strong>Thursday, October 8th, 2020</strong> (Week 02).</p></figure>

<!-- End Instructions -->

<h1>Top Ten Nintendo Games of All Time</h1>
<p>Source: <a href="http://www.ign.com/top-100-nes-games/10.html">http://www.ign.com/top-100-nes-games/10.html</a></p>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/supermariobros3_nesboxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>1</strong> Super Mario Bros. 3</h2>
		<h3><em>By</em> Nintendo | <em>Released: </em>1990</h3>
		<p>While The Legend of Zelda and Super Mario Bros. are unarguable pinnacles of videogame creation, if we were stranded on an island with a power source, an NES and a single game, it would unquestionably be Super Mario Bros. 3. </p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/legendofzelda_nesbox_distboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>2</strong> The Legend of Zelda</h2>
		<h3><em>By</em> Nintendo | <em>Released: </em>1987</h3>
		<p>Few franchises in Nintendo's storied history are as famous as The Legend of Zelda. And back in 1987, the franchise started off with a bang with one of the most ambitious replica-gold-plated cartridges to ever grace the NES.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/smb1_nesboxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>3</strong> Super Mario Bros.</h2>
		<h3><em>By</em> Nintendo | <em>Released: </em>1985</h3>
		<p>Not only is it one of the very best and most iconic videogames ever conceived, but having shipped with the majority of NES consoles, Super Mario Bros. quickly became synonymous with the NES itself. </p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/megaman2_boxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>4</strong> Mega Man 2</h2>
	  <h3><em>By</em> Capcon | <em>Released: </em>1989</h3>
		<p>The sequel to the original Mega Man was quick on the heels of the first, with barely a year in between the release of the two titles in the United States.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/castlevania3_nesboxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>5</strong> Castlevania III: Dracula's Curse</h2>
		<h3><em>By</em> Konami | <em>Released: </em>1990</h3>
		<p>The unique Castlevania II was a popular game, but when it came time for Konami to begin working on Castlevania III: Dracula's Curse, the developers felt it was best for the series to return to its action-platforming roots; a decision that proved to be the right one the day the game was released in the fall of 1990.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/metroid_nes_us_originalboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>6</strong> Metroid</h2>
		<h3><em>By</em> Nintendo | <em>Released: </em>1987</h3>
		<p>Another epically popular franchise to this day, Nintendo's Metroid came to the United States in 1987 and immediately floored gamers not only with its slick presentation, interesting protagonist and open world, but from the fact that it was non-linear in nature.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/miketysonpo_nesboxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>7</strong> Mike Tyson's Punch-Out!!</h2>
		<h3><em>By</em> Nintendo | <em>Released: </em>1987</h3>
		<p>Perhaps the one NES classic most on the minds of gamers in 2009 thanks to the recent release of its incredible Wii sequel/remake, Punch-Out!! is the original masterpiece boxing game that isn't really about boxing at all.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/dragonwarrior_nesboxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>8</strong> Dragon Warrior</h2>
		<h3><em>By</em> Nintendo | <em>Released: </em>1989</h3>
		<p>Before Final Fantasy, there was Dragon Warrior. Known as Dragon Quest in Japan, Dragon Warrior was one of the NES's early smash hits that didn't come from Nintendo itself, even though it was released nearly three years after it saw the light of day on its native Japanese Famicom.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/bioncommand_nesboxboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>9</strong> Bionic Commando</h2>
		<h3><em>By</em> Capcom | <em>Released: </em>1988</h3>
		<p>It may strike some as strange that one of the NES's very greatest platformers dispenses with jumping – that essential component of Mario's repertoire – entirely.</p>
	</div>
</div>

<div class="game">
	<div>
		<img src="http://vc238.chemeketa.vc/challenges/topten/art/duck_talesboxart_160w.jpg">
	</div>
	<div>
		<h2><strong>10</strong> Duck Tales</h2>
		<h3><em>By</em> Capcom | <em>Released: </em>1989</h3>
		<p>Out of all of the games built on Capcom's famous Mega Man architecture (that wasn't a Mega Man game, that is), Duck Tales is perhaps the best of the bunch.</p>
	</div>
</div>
              
            
!

CSS

              
                /* To hide the instructions, uncomment the display property below (Command-/), or click on the close icon. */
figure#instructions {
/*    display: none; */
}

/* Student CSS goes here */


              
            
!

JS

              
                	$( document.body ).ready(function () {

      $( "#hideinstructions" ).click(function() {
			$( "#instructions" ).hide( "fast", function() {
			});
		});      
      
	});
              
            
!
999px

Console