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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  
  <header id="h1">HTML Colors</header>
  <a class="nav-link" href="#What_are_web_colors">What are web colors</a>
  <a class="nav-link" href="#The_RGB_color_model">The RGB color model</a>
  <a class="nav-link" href="#Hex_triplets">Hex triplets</a>
  <a class="nav-link" href="#HTML_color_names">HTML color names</a>
  <a class="nav-link" href="#CSS_colors">CSS colors</a>
</nav>
<main id="main-doc">
  <header id="h2">HTML Colors</header>
  <section class="main-section" id="What_are_web_colors">
    <header>What are web colors</header>
    <p>Web colors are colors used in displaying web pages on the World Wide Web, and the methods for describing and specifying those colors. Colors may be specified as an RGB triplet or in hexadecimal format (a hex triplet) or according to their common English names in some cases. A color tool or other graphics software is often used to generate color values. In some uses, hexadecimal color codes are specified with notation using a leading number sign (#). A color is specified according to the intensity of its red, green and blue components, each represented by eight bits. Thus, there are 24 bits used to specify a web color within the RGB gamut, and 16,777,216 colors that may be so specified.
    </p>
    <p>
      Web colors have an unambiguous colorimetric definition, sRGB, which relates the chromaticities of a particular phosphor set, a given transfer curve, adaptive whitepoint, and viewing conditions.
    </p>
    <p>
      These have been chosen to be similar to many real-world monitors and viewing conditions, in order to allow rendering to be fairly close to the specified values even without color management. User agents vary in the fidelity with which they represent the specified colors.</p>
  </section>
  <section class="main-section" id="The_RGB_color_model">
    <header>The RGB color model</header>
    <p>The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors:
    </p>
    <p>
      <ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
      </ul>
    </p>
    <p>
      The main purpose of the RGB color model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography. Before the electronic age, the RGB color model already had a solid theory behind it, based in human perception of colors.
    </p>
  </section>
  <section class="main-section" id="Hex_triplets">
    <header>Hex triplets</header>
    <p>A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. Thus web colors specify colors in the 24-bit RGB color scheme. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:
    </p>
    <ul>
      <li>Byte 1: red value (color type red)</li>
      <li>Byte 2: green value (color type green)</li>
      <li>Byte 3: blue value (color type blue)</li>
    </ul>
    <p>
      For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a grayish-blue color). The decimal numbers 36, 104 and 160 are equivalent to the hexadecimal numbers 24, 68 and A0 respectively. The hex triplet is obtained by concatenating the six hexadecimal digits together, 2468A0 in this example.
    </p>
    If any one of the three color values is less than 10 hex (16 decimal), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810.
    <p>
      The number of colors that can be represented by this system is 166 or 2563 or 224 = 16,777,216.
      <p>
        An abbreviated, three (hexadecimal)-digit form is used. Expanding this form to the six-digit form is as simple as doubling each digit: 09C becomes 0099CC as presented on the following CSS example:
      </p>
      <p>
        <code>
          .threedigit { color: #09C; } </code></p>
        <p><code>
          .sixdigit { color: #0099CC; }
          </code></p>
        <p><code>
          /* same color as above */
        </code>
      </p>
      <p>
        This shorthand form reduces the palette to 4,096 colors, equivalent of 12-bit color as opposed to 24-bit color using the whole six-digit form (16,777,216 colors), this limitation is sufficient for many text based documents.</p>
  </section>
  <section class="main-section" id="HTML_color_names">
    <header>HTML color names</header>
    <p>The HTML 4.01 specification, ratified in 1999, defines 16 named colors, as follows</p>
    <div id="white" class="colors">white #FFFFFF</div>
    <div id="silver" class="colors">silver #C0C0C0</div>
    <div id="gray" class="colors">gray #808080</div>
    <div id="black" class="colors">black #000000</div>
    <div id="red" class="colors">red #FF0000</div>
    <div id="maroon" class="colors">maroon #800000</div>
    <div id="yellow" class="colors">yellow #FFFF00</div>
    <div id="olive" class="colors">olive #808000</div>
    <div id="lime" class="colors">lime #00FF00</div>
    <div id="green" class="colors">green #008000</div>
    <div id="aqua" class="colors">aqua #00FFFF</div>
    <div id="teal" class="colors">teal #008080</div>
    <div id="blue" class="colors">blue #0000FF</div>
    <div id="navy" class="colors">navy #000080</div>
    <div id="fuchsia" class="colors">fuchsia #FF00FF</div>
    <div id="purple" class="colors">purple #800080</div>
  </section>
  <section class="main-section" id="CSS_colors">
    <header>CSS colors</header>
    <p>
      The syntax in CSS is:
      <code>
        rgb(#,#,#) </code>
      where # equals the proportion of red, green, and blue respectively. This syntax can be used after such selectors as <code>"background-color:" </code> or (for text) <code> "color:" </code>.
      <p>Source: Wikipedia</p>
  </section>
</main>
              
            
!

CSS

              
                #navbar {
  display: flex;
  flex-flow: column wrap;
  position: fixed;
  width: 300px;  
  height: 100%;
  font-family: candara;
  border-style: solid;
  border-radius: 10px;
  border-width: 1px;
  box-shadow: 5px 5px 10px black;
  padding: 10px;
  top: 10px;
  right: 300px;
  bottom: 0;
  left: 0;
}
.nav-link {
  text-decoration: none;
  color: black;
  font-family: candara;
  padding: 15px;
}
html {
  overflow: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
#main-doc {
  position: relative;
  font-family: candara;
  text-align: justify;
  margin-left: 320px;
  scroll-behavior: smooth;
  margin-right: 10px;
}
.main-section {
  padding: 20px;
}
#h1 {
  font-size: 25px;
  font-style: bold;
}
#h2 {
  font-size: 30px;
  color: blue;
  margin-left: 20px;
  padding: 20px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 5px 5px 10px black;
}
header {
  font-style: bold;
  font-size: 25px;
}
.colors {
  width: 200px;
}
#white {
  background-color: #FFFFFF;
}
#silver	{
  background-color: #C0C0C0;
}
#gray	{
  background-color: #808080;
}
#black	{
  background-color: #000000;
  color: white;
}
#red	{
  background-color: #FF0000;
}
#maroon	{
  background-color: #800000;
}
#yellow	{
  background-color: #FFFF00;
}
#olive	{
  background-color: #808000;
}
#lime	{
  background-color: #00FF00;
}
#green	{
  background-color: #008000;
}
#aqua	{
  background-color: #00FFFF;
}
#teal	{
  background-color: #008080;
}
#blue	{
  background-color: #0000FF;
  color: white;
}
#navy	{
  background-color: #000080;
  color: white;
}
#fuchsia	{
  background-color: #FF00FF;
}
#purple {
  background-color: #800080;
}
@media screen and (max-width: 599px) {
  #navbar {
    display: flex;
    flex-flow: row nowrap;
    position: absolute;
    font-size: 15px;
    width: 100%;
    visibility: hidden;
  }
  #main-doc {
    width: 100%;
    margin-left: 5px;
    margin-top: 5px;
  }
  #h2 {
    margin-left: 2px;
  }
}

              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - 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!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console