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.

            
              <body>

      <header>
        <h1>NTM 2532</h1>
        <nav>
          <ul>
            <li><a href="#" class="current">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
      
      <img src="featured.png" alt="Featured Image">

      <section class="bottom right">
        <h3>Suspendisse et diam diam</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet erat lectus. 
          Etiam tincidunt sed dolor non tempus. Aenean ac tempus diam. Curabitur quis egestas sapien. 
          Nam eleifend purus felis, id semper neque ornare scelerisque. Nunc nec tempor metus.
        </p>
        <button>tempor metus</button>
      </section>

      <section class="bottom">
        <h3>Ultrices nec iaculis vel</h3>
        <p>
          Morbi non massa tortor. Donec elementum venenatis lacus et commodo. Donec tempor, orci in rhoncus imperdiet, 
          lectus risus elementum dolor, quis volutpat augue odio non sem. Cras neque eros, ultrices nec iaculis vel, 
          sagittis sed odio. Nulla placerat convallis bibendum.
        </p>
        <button>quis volutpat</button>
      </section>

      <section class="right">
        <h3>In vitae sollicitudin diam</h3>
        <p>
          Cras posuere magna eu mollis rutrum. Suspendisse at congue lorem, a condimentum diam. In vitae sollicitudin diam. 
          Aenean adipiscing ullamcorper sodales. Vivamus sem elit, facilisis placerat quam non, lobortis vehicula ante. 
          Sed sed eros sit amet elit faucibus interdum aliquam sed tellus.
        </p>
        <button>aliquam sed</button>
      </section>

      <section>
        <h3>Quisque consequat magna magna</h3>
        <p>
          Aenean mattis, diam a pulvinar blandit, lorem nisi molestie justo, at placerat dolor orci id orci. 
          Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
          Quisque consequat magna magna, a ullamcorper erat iaculis vel. 
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </p>
        <button>turpis egestas</button>
      </section>
      
      <footer>
        <p>NTM 2532 &copy;2015 | DESIGN BY DANNY RUBIO WITH &#9829;</p>
      </footer>

  </body>
            
          
!
            
              body {font-family: "Helvetica Neue"; font-size: 14px;margin: 0 auto; width: 1200px;}

/* TODO[x] New Declaration: Select the *header* element. Set the top border to a solid one pixel border with the color rgba(28, 86, 126, .4). */
header {
  border-top: 1px solid rgba(28,86,126);
  border-top: 1px solid rgba(28, 86, 126,0.4);  
}

/* TODO [x] New Declaration: Select the *h1* element that is a descendant of the *header* element. Set the text align property to center, padding to 3px 0 20px, color to #1C567E, and display the element inline-block. */
header h1 {
  color: #1C567E;
  display: inline-block;
  padding: 3px 0 20px;
  text-align: center;  
}
/* TODO New Declaration: [x] Select the *nav* element. Set the display of the element to inline-block, the overflow property to hidden, margin to 0 auto, the top margin to 30px, float it right. */
nav {
  display: inline-block;
  float: right;
  margin: 0 auto;
  margin-top: 30px;
}

/* TODO New Declaration:[x] Select the *li* elements that are descendants of a *nav* element. Set the list style type property to none, padding to 20px and display the element inline. */
nav li {
  display:inline;
  list-style-type: none;
  padding: 20px;
}

/* TODO New Declaration:[x] Select all *a* elements that are descendants of an *li* element that is a descendant of a *nav* element. Set the padding to 10px, color to #000000, font size to 18px,  text transform property to uppercase, and text decoration property to none.  */

nav li a {
  color: #000000;
  padding: 10px;
  font-size: 18px;
  text-decoration: none;
  text-transform: uppercase;
}

/* TODO New Declaration: Select all elements that have a class of *current* and set the background color to #1C567E and the color to #FFFFFF. */
.current {
  background-color: #1C567E;
  color: #FFFFFF;
}

/* TODO New Declaration:[x] Select all *section* elements and set the width to 559px, the padding to 20px, float them left, and set the text align property to center. */
section {
  float:left;
  padding: 20px;
  text-align: center;
  width: 559px;
}

/* TODO New Declaration:[x] Select all elements that have a class of *right*. Add a right border with the following: solid 1px #1C567E. */
.right {
  border-right: 1px solid #1C567E;
}

/* TODO New Declaration:[x] Select all elements that have a class of *bottom*. Add a bottom border with the following: solid 1px #1C567E. */
.bottom {
  border-bottom: 1px solid #1C567E;
}

/* TODO New Declaration:[x] Select all *button* elements. Set the width to 150px, padding to 10px, the top margin to 10px. Give the button a background color of #1C567E and color the text white. */
button {
  background-color: #1C567E;
  color: white;
  padding: 10px;
  top-margin: 10px;
  width: 150px;
}
/* TODO New Declaration:[x] Select the *footer* element. Set the height to 100px, use the clear property to clear both sides. Set the background color to #1C567E and align the text to the center. */
footer {
  text-align: center;
  clear:both;
  background-color:#1C567E;
  height: 100px;
}
/* TODO New Declaration:[x] Select the *p* elements that are descendants of the *footer* element. Set the top padding property to 50px and color the text white. */
footer p{
  padding-top:50px;
  color: white;
}
/* TODO New Declaration:[x] Select all *h3* and button *elements* and uppercase their text. */
h3,button {
  text-transform: uppercase;
}
/* TODO New Media Query:[x] Test for a max-width less than 600px and onlly for the screen media type. Don't forget the opening brace. */

@media only screen and (min-width: 600px) {
  
    
    /* TODO New Declaration in Media Query:[x] Select the *h1* element that is a descandant of the *header* element. Set the display back to block, reset the padding to 0, and re align the text to the left */
  header h1 {
    display: block;
    padding: 0px;
    text-align: left;
  }
    /* TODO New Declaration in Media Query:[x] Select the *nav* element. Set float to none and reset the margin to 0. */
  nav {
    float:none;
    margin: 0;
  }
    /* TODO New Declaration in Media Query:[x] Select the *li* elements that are descendants of a *nav* element.  Set the display back to block, and the padding to 0. */
  nav li {
    display: block;
    padding: 0;
  }
    /* TODO New Declaration in Media Query:[x] Select all *section* elements and set the width to 360px, remove the float, and set a solid 1px top border colored #1C567E. */
  section {
    width: 360px;
    float: none;
    border-top: 1px solid #1C567E;
  }
    /* TODO New Declaration in Media Query: Select all elements that have a class of *right*. Remove the border. */
  .right{
    border: none;
  }
    /* TODO New Declaration in Media Query: Select all elements that have a class of *bottom*. Remove the border. */
  .bottom {
    border: none;
  }
}
*/
/* TODO Brace: Add a closing brace for the media query. */
            
          
!
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