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>Menu &amp; Header Coding</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 this provided Pen, add CSS code so that the page matches identically the provided <a href="https://vc238.chemeketa.vc/challenges/header_menu_coding/design_example.png">design sample</a>. There is also an <a href="https://vc238.chemeketa.vc/challenges/header_menu_coding/hover_animation.mp4">example movie</a> to demonstrate the hover interaction.</p>
  <p>In addition, code the header for responsive design, making sure the menu works correctly on mobile devices. Our jQuery code for showing/hiding mobile menus is provied in JS area of this pen. You will need to modify the HTML for some aspects of this Challenge (for example, to add the hamburger menu HTML). However, most of your work should be to the CSS styles the page.</p>
   <ul>
      <li>Container width is provided; Logo width is 23em.</li>
      <li>The font used is Zilla Slab in 400 and 700 weights from Google Fonts.</li>
      <li>Fonts sizes, leading, padding, etc. are all set in ems.</li>
      <li>All links have hover states. Use light green for Quote button, and light gray for primary navigation links.</li>
      <li>Colors used: <em>Greens:</em> <code>#004923</code>, <code>#436d57</code>, <em>Grays:</em> <code>#aaa</code>, and <code>#dfdfdf</code></li>
      <li>Use Flexbox for layout.</li>
      <li>All hovers use a transition of <code>transition: .2s all ease;</code></li>
   </ul>
   
   <h4>Requirements</h4>
   <p>Name this pen <em>Challenge 03 - Header &amp; Menu Coding</em>. To turn in this assignment, create a link to it from your class Landing page. This Challenge is due by the end of the day (5PM) on <strong>Tuesday, November 10th, 2020</strong> (Week 07).</p></figure>

<!-- End Instructions -->


<section class="outerwrap">
   
   <div class="innerwrap">
      
      <header>
         
         <div>
            <h1>Running Wild Tree Service</h1>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/228208/running_wild_tree_service.svg" alt="Running Wild Tree Service" />
         </div>
         
         <div>
      
            <nav class="utility">
               <ul>
                  <li class="quote"><a href="#">Request a Quote</a></li>
               </ul>
            </nav>

            <nav class="primary" id="primarynav">
               <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">Certifications</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
               </ul>
            </nav>
            
         </div>
         
      </header>
      
   </div>
   
</section>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Zilla+Slab:400,700&display=swap');

/* To hide the instructions, uncomment the display property below (Command-/) */
figure#instructions {
/*    display: none; */
}

@media screen and (max-width: 520px) {  }

body { background-color: white; }
img, embed, object, video { max-width: 100%; }

/* COLORS & TYPOGRAPHY

  Dark Green:    #004923
  Light Green:   #436d57
  Light Gray:    #dfdfdf
  Dark gray:     #aaa

  Font Family:    font-family: 'Zilla Slab', serif;

*/

/*
   CORE LAYOUT
*/
.outerwrap {
   width: 100%;
   margin: 0;
   clear: both;
   display: block;
}

.innerwrap {
   width: 94%;
   max-width: 68.75em;
   margin: 0 auto;
   display: block;
}
              
            
!

JS

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

		/* UNCOMMENT THIS SECTION WHEN READY TO ENABLE MOBILE NAVIGATION

		$( "#mobilenav" ).click(function() {
			$( "#primarynav" ).slideToggle( "fast", function() {
			});
		});

		*/

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

Console