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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <body>

    <nav id="navbar">
    <header>
        <h1>CSS First Steps</h1>
    </header>
        <ul>
            
                <li><a class="nav-link" href="#Starting_with_some_HTML">Starting with some HTML</a></li>
                <hr>
                <li><a class="nav-link" href="#Adding_CSS_to_our_document">Adding CSS to our document</a></li>
                <hr>
                <li><a class="nav-link" href="#Styling_HTML_elements">Styling HTML elements</a></li>
                <hr>
                <li><a class="nav-link" href="#Changing_the_default_behavior_of_elements">Changing the default behavior of elements</a></li>
                <hr>
                <li><a class="nav-link" href="#Adding_a_class">Adding a class</a></li>
                <hr>
                <li><a class="nav-link" href="#Styling_things_based_on_their_location_in_the_document">Styling things based on their location in the document</a></li>
                <hr>
                <li><a class="nav-link" href="#Combining_selectors_and_combinators">Combining selectors and combinators</a></li>
                <hr>
                <li><a class="nav-link" href="#Wrapping_up">Wrapping up</a></li>
                <hr>
        </ul>
    </nav>

    <main id="main-doc">
        <section class="main-section" id="Starting_with_some_HTML">
          <header class="section-header" ><h2>Starting with some HTML</h2></header>
            <article>
                <span class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sequi suscipit repellat accusantium cum neque?</span>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque amet ex tenetur quibusdam quaerat a iste id, exercitationem sed magnam. Necessitatibus veniam autem amet itaque iure illum? Recusandae, nihil voluptatem?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dolorum deserunt aut omnis sequi a deleniti eveniet nam voluptas minus!</p>
                <ul>
                    <li>Aesthetics</li>
                    <li>Accessibility</li>
                </ul>
                <code>
                    <div class="code-block">
                        &lt;p&gt;This is a paragraph of text. In the text is a &lt;span&gt;span element&lt;/span&gt;
                        and also a &lt;a href="https://example.com"&gt;link&lt;/a&gt;.&lt;/p&gt;
                    </div>
                </code>
            </article>   
                <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Adding_CSS_to_our_document">
          <header class="section-header" ><h2>Adding CSS to our document</h2></header>
            <article>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem amet totam culpa animi qui delectus cumque maxime dolores ad deserunt sed recusandae aspernatur molestias et vel, omnis nam alias voluptate ipsum est earum! Facilis error commodi perferendis consequatur, omnis, optio molestiae eos quas natus inventore accusantium architecto dolorem neque asperiores.</p>
                <code>
                    <div class="code-block">
                        &lt;link rel="stylesheet" href="styles.css"&gt;
                    </div>
                </code>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta temporibus perferendis fugit ipsam nisi omnis accusamus, harum earum doloribus tenetur.</p>
                <p class="note">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellendus nisi velit reprehenderit accusamus maiores, pariatur explicabo cum et impedit!</p>
            </article>
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Styling_HTML_elements">
          <header class="section-header"><h2>Styling HTML elements</h2></header>
            <article>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste animi pariatur ipsum totam saepe, odio ex. Quidem earum fugit pariatur perspiciatis similique distinctio, impedit quos repellat corporis obcaecati, commodi est beatae ipsum. Corporis mollitia illo, doloremque, et quas pariatur nobis vel ullam molestiae animi maiores nesciunt ratione distinctio inventore voluptatibus quasi iure reprehenderit in odit dicta ab saepe doloribus tempora.</p>
            </article>    
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Changing_the_default_behavior_of_elements">
          <header class="section-header"><h2>Changing the default behavior of elements</h2></header>
            <article>
                <span class="article-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi, at iste culpa illum repudiandae commodi porro soluta ipsa! Sit, quam.</span>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio corporis ut exercitationem mollitia inventore magnam doloribus quam fugiat nisi laborum? Rem reprehenderit hic at sed enim nulla! Reprehenderit, et ullam fugit neque enim fugiat rem repellendus, quo, eos ex culpa?</p>
                <code>
                    <div class="code-block">
                    .special {color: orange; font-weight: bold;}
                    </div>
                </code>
                <p class="note">Note: Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas fuga ea, aut totam voluptate iure sed labore quisquam cumque ipsa.</p>   
            </article>
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Adding_a_class">
          <header class="section-header"><h2>Adding a class</h2></header>
            <article>
                <span class="article-text">Lorem ipsum dolor sit amet.</span>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolore voluptates ab officia delectus ipsum deserunt! Exercitationem reiciendis facere, maiores laboriosam atque, incidunt adipisci at assumenda cumque nostrum magni corrupti sint quo eligendi repellendus. At perspiciatis, blanditiis quia consequatur molestias quisquam nihil tenetur distinctio eius harum suscipit sequi sit! Non saepe soluta sint pariatur vitae, magnam nisi provident rerum. Magni, voluptate quam. Sint deleniti voluptatum quis esse. Debitis, unde vel?</p>
                <code>
                    <div class="code-block">
                    li.special, span.special {color: orange; font-weight: bold;}   
                    </div>
                </code>
            </article>
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Styling_things_based_on_their_location_in_the_document">
            <header class="section-header"><h2>Styling things based on their location in the document</h2></header>
            <article>
                <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti perspiciatis ipsa at minus doloribus ex provident sequi porro nulla aliquam earum tempore, magnam maxime consequatur corporis numquam facilis. Dolores expedita qui neque assumenda, esse aliquam distinctio? Provident nemo at unde.</p>
                <code>
                    <div class="code-block">
                    li em {color: rebeccapurple;}
                    </div>
                </code>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur, veritatis! Inventore eligendi et incidunt ipsum numquam, autem sequi repellat nihil.</p>
            </article>
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Combining_selectors_and_combinators">
          <header class="section-header"><h2>Combining selectors and combinators</h2></header>
            <article>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur perferendis id sequi distinctio voluptate sed. In vitae excepturi ullam corporis itaque officia vel eius est nihil nisi suscipit odio, minus repellat dolore non, accusantium voluptas minima cupiditate doloremque dolorem. Odit dolores voluptatibus dolore qui nam praesentium ipsa error aliquid fugiat quasi neque eveniet, sit accusantium hic nisi quam aut labore in doloribus, eos illo quo accusamus, minima doloremque. Harum repudiandae nam veniam atque beatae! Ipsum rerum commodi praesentium dolores hic!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci inventore, quam nihil totam minus tempore!</p>
                <code >
                    <div class="code-block">
                    body h1 + p .special {color: yellow; background-color: black; padding: 5px;}
                    </div>
                </code>
                <p class="note">Note: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas neque beatae veritatis fugit nostrum dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio quis voluptatem quo aliquid facere temporibus exercitationem quam qui, amet sunt?</p>
            </article>    
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <section class="main-section" id="Wrapping_up">
          <header class="section-header"><h2>Wrapping up</h2></header>
            <span class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, voluptas!</span>
            <article>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime sunt alias cupiditate temporibus repellendus. Facilis voluptas sunt impedit sed soluta!</p>
                <ul>
                    <li>Alpha</li>
                    <li>Beta</li>
                    <li>Gamma</li>
                </ul>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ipsum quaerat a suscipit fugit non odit mollitia est possimus earum aut dignissimos recusandae reiciendis, alias ipsa aperiam dolore itaque repudiandae nemo cupiditate illo minima laudantium sed? Nesciunt eos doloremque expedita.</p>
            </article>    
            <p class="top-link"><a href="#">Back to top</a></p>
        </section>
        <footer>Reference: Title, Subheadings, and Code Samples taken from MDN.</footer>
   
   
   
    </main>

</body>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Noto+Sans:wght@300;600&display=swap");

body {
  background-color: rgb(5, 19, 34);
  color: white;
  font-family: "Noto Sans", sans-serif;
}

h1 {
  font-family: "Fjalla One", sans-serif;
  font-size: 3rem;
}

nav {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  overflow-y: scroll;
}

@media (min-width: 768px) {
  #navbar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 76%;
  }

  #main-doc {
    margin-left: 25%;
  }
  .code-block {
    width: 70%;
  }
}

nav ul {
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
  color: white;
}

nav li {
  padding-top: 0.5rem;
  padding-bottom: 0.2rem;
  line-height: 1.2rem;
  font-size: 1rem;
}

.nav-link:hover {
  color: rgb(228, 214, 17);
}

.nav-link {
  text-decoration: none;
  color: white;
}

hr {
  width: 40px;
  color: white;
}

.section-header {
  font-weight: 600;
  font-size: 1.75rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  line-height: 2rem;
  font-variant: small-caps;
}

.top-link {
  text-align: right;
}

a {
  text-decoration: none;
  color: rgb(120, 124, 130);
}

.note {
  /*text-align: right;*/
  background-color: rgb(0, 0, 255, 0.25);
  padding: 1rem 1rem;
  border-left: 10px solid /*white*/ rgb(228, 214, 17);
  margin-top: 2rem;
}

section li {
  list-style-type: square;
}

.code-block {
  background-color: rgb(120, 124, 130);
  padding: 1rem;
  font-size: 0.7rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-right: 0.5rem;
  width: 97%;
}

footer {
  font-style: italic;
}


  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #788682;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
              
            
!

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