Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens


+ add another resource



Add External Scripts/Pens


+ add another resource


Add 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 or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.


Save Automatically?


Auto-Updating Preview


Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings


              <script src=""></script>


Hello Camper!


- The freeCodeCamp Team 

<header id="header">
<div class="logo">
<img id="header-img" src="" alt="original trombones logo"></img></div>
  <nav id="nav-bar">
      <li><a href="#features" class="nav-link">Features</a></li>
      <li><a href="#howitworks" class="nav-link">How it works</a></li>
      <li><a href="#pricing" class="nav-link">Pricing</a></li>
<div class="container"></div>

Premium Materials
<p id="description">
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.

<div id="features">Features</div>
<form id="form" action=""><input name="email" id="email" type="email" placeholder="enter email address" required/><input id="submit" type="submit">

<div id="howitworks">How it works</div>
<div><iframe id="video" src=";controls=0&amp;showinfo=0" border="0"></iframe></div>
<div id="pricing">Pricing</div>
<div>Lots of $$$</div>
              @import ',700';

body {
  background-color: #eee;
  font-family: 'Lato', sans-serif;

li {
  list-style: none;

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;

.logo {
 width: 60vw; 

img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
    @media (max-width: 650px) {
      margin: 0 auto;

nav {
    font-weight: 400;
      padding-bottom: 5px; 
  ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
@media (max-width: 650px) { ul 
    {flex-direction: column;}

.container {
  max-width: 1000px;
  width: 100%;
  padding: 20px;
  margin: 0 auto;

              // !! IMPORTANT README:


  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

