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

              
                <article>
  <h1 class="title">A history of bubble gum 
    <span class="emoji" aria-hidden="true">🍬</span>
  </h1>
  <div class="content">
    <p>From the <a href="https://en.wikipedia.org/wiki/Bubble_gum">bubblegum article on Wikipedia</a>:</p>
    <p>In 1928, Walter Diemer, an accountant for the Fleer Chewing Gum Company in Philadelphia, was experimenting with new gum recipes. One recipe, based on a formula for a chewing gum called "Blibber Blubber", was found to be less sticky than regular chewing gum, and stretched more easily. This gum became highly successful and was eventually named by the president of Fleer as Dubble Bubble because of its stretchy texture.</p>
    <p>This remained the dominant brand of bubble gum until after WWII, when Bazooka bubble gum entered the market.</p>
    <p>Until the 1970s, bubble gum still tended to stick to one's face. At that time, synthetic gum was introduced, which would almost never stick as a bubble popped. The first brands in the US to use these new synthetic gum bases were Hubba Bubba and Bubble Yum.</p>
    <p>Bubble gum got its distinctive pink color because the original recipe Diemer worked on produced a dingy gray colored gum, so he added red dye (diluted to pink) as that was the only dye he had on hand at the time.</p>
    <p>And now some lorem ipsum for filler:</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada ullamcorper vehicula. Donec pulvinar a elit a mollis. Fusce dapibus magna ullamcorper tellus ultricies, at ultricies orci interdum. Vestibulum ornare neque augue, nec sollicitudin enim tincidunt eget. Aliquam in sapien a velit consequat porta in sed enim. Vestibulum ac ipsum nec metus sollicitudin luctus. Duis ultrices id purus at venenatis. Donec feugiat mi lacus, efficitur fermentum ligula vulputate et. Etiam sit amet fringilla magna. Etiam dictum imperdiet dictum. In vel fringilla nibh, sed rutrum arcu.</p>
    <p>Mauris placerat arcu sed consequat tempor. Aliquam massa nulla, egestas quis iaculis vulputate, auctor vel elit. Proin porttitor dolor id turpis porttitor, sit amet vehicula orci viverra. In laoreet, lectus ut euismod semper, nibh orci faucibus velit, eget viverra lectus nulla quis ex. Nullam dapibus, sem vitae accumsan commodo, nunc dolor interdum mauris, tristique cursus libero ante sed risus. Vestibulum egestas porttitor mi, a fringilla lectus commodo in. In venenatis accumsan nulla, ac sagittis ipsum molestie et. Integer blandit ornare malesuada. Nulla ut est in nibh sollicitudin blandit. Proin quis faucibus arcu. Donec sollicitudin hendrerit vestibulum. Donec id lacus vel tortor tristique efficitur.</p>
  <p>Duis et velit quis risus tincidunt convallis rhoncus nec sem. Pellentesque lacinia id metus vel viverra. Nam iaculis nec eros et interdum. Nam sollicitudin pellentesque neque sed convallis. Curabitur imperdiet, ante a posuere commodo, massa tortor finibus nisi, at iaculis leo elit vel lacus. Duis varius nisi suscipit interdum efficitur. Nam ut ex metus. Sed suscipit lobortis risus vehicula volutpat. Aliquam id bibendum felis. In eu pulvinar enim. Mauris pellentesque nisl vitae orci mollis aliquam. Nam suscipit dolor at metus sollicitudin, quis malesuada nunc luctus. Maecenas vel leo nulla. Nunc dignissim quam eget nulla pretium, ac vehicula mauris feugiat.</p>
  <p>Aenean eget efficitur mi. Cras a sapien et orci varius ullamcorper et ac sapien. Quisque quis imperdiet augue, eget vestibulum ante. Nunc metus lectus, interdum et diam et, lobortis tempor nulla. Nulla ornare, ipsum sit amet pulvinar porttitor, ex mi faucibus metus, sed consequat urna diam venenatis massa. Vivamus nec dapibus nibh. Curabitur metus velit, volutpat vel tempus ac, consequat nec magna. Nam hendrerit accumsan faucibus.</p>
  <p>Curabitur interdum tellus vel euismod consequat. Nam vel sem non nunc condimentum pretium in sed augue. Etiam efficitur turpis sed sem laoreet aliquet. Aliquam ac convallis felis, quis cursus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque imperdiet neque diam, id sollicitudin ante porttitor vitae. Ut suscipit justo quam, ut laoreet leo vestibulum a. Vivamus tempus, justo nec vestibulum vehicula, lacus felis ornare felis, ac pretium augue leo vestibulum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris magna sapien, convallis eu efficitur porttitor, varius sed augue. Sed ornare tellus rutrum, lobortis enim vel, sagittis lectus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada ullamcorper vehicula. Donec pulvinar a elit a mollis. Fusce dapibus magna ullamcorper tellus ultricies, at ultricies orci interdum. Vestibulum ornare neque augue, nec sollicitudin enim tincidunt eget. Aliquam in sapien a velit consequat porta in sed enim. Vestibulum ac ipsum nec metus sollicitudin luctus. Duis ultrices id purus at venenatis. Donec feugiat mi lacus, efficitur fermentum ligula vulputate et. Etiam sit amet fringilla magna. Etiam dictum imperdiet dictum. In vel fringilla nibh, sed rutrum arcu.</p>
    <p>Mauris placerat arcu sed consequat tempor. Aliquam massa nulla, egestas quis iaculis vulputate, auctor vel elit. Proin porttitor dolor id turpis porttitor, sit amet vehicula orci viverra. In laoreet, lectus ut euismod semper, nibh orci faucibus velit, eget viverra lectus nulla quis ex. Nullam dapibus, sem vitae accumsan commodo, nunc dolor interdum mauris, tristique cursus libero ante sed risus. Vestibulum egestas porttitor mi, a fringilla lectus commodo in. In venenatis accumsan nulla, ac sagittis ipsum molestie et. Integer blandit ornare malesuada. Nulla ut est in nibh sollicitudin blandit. Proin quis faucibus arcu. Donec sollicitudin hendrerit vestibulum. Donec id lacus vel tortor tristique efficitur.</p>
  <p>Duis et velit quis risus tincidunt convallis rhoncus nec sem. Pellentesque lacinia id metus vel viverra. Nam iaculis nec eros et interdum. Nam sollicitudin pellentesque neque sed convallis. Curabitur imperdiet, ante a posuere commodo, massa tortor finibus nisi, at iaculis leo elit vel lacus. Duis varius nisi suscipit interdum efficitur. Nam ut ex metus. Sed suscipit lobortis risus vehicula volutpat. Aliquam id bibendum felis. In eu pulvinar enim. Mauris pellentesque nisl vitae orci mollis aliquam. Nam suscipit dolor at metus sollicitudin, quis malesuada nunc luctus. Maecenas vel leo nulla. Nunc dignissim quam eget nulla pretium, ac vehicula mauris feugiat.</p>
  <p>Aenean eget efficitur mi. Cras a sapien et orci varius ullamcorper et ac sapien. Quisque quis imperdiet augue, eget vestibulum ante. Nunc metus lectus, interdum et diam et, lobortis tempor nulla. Nulla ornare, ipsum sit amet pulvinar porttitor, ex mi faucibus metus, sed consequat urna diam venenatis massa. Vivamus nec dapibus nibh. Curabitur metus velit, volutpat vel tempus ac, consequat nec magna. Nam hendrerit accumsan faucibus.</p>
  <p>Curabitur interdum tellus vel euismod consequat. Nam vel sem non nunc condimentum pretium in sed augue. Etiam efficitur turpis sed sem laoreet aliquet. Aliquam ac convallis felis, quis cursus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque imperdiet neque diam, id sollicitudin ante porttitor vitae. Ut suscipit justo quam, ut laoreet leo vestibulum a. Vivamus tempus, justo nec vestibulum vehicula, lacus felis ornare felis, ac pretium augue leo vestibulum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris magna sapien, convallis eu efficitur porttitor, varius sed augue. Sed ornare tellus rutrum, lobortis enim vel, sagittis lectus.</p>
  </div>
</article>
              
            
!

CSS

              
                /*
 *  RELEVANT STYLES
 *  position: sticky; has no effect here
 *  ---------------------------------------------
 */

article {
  display: grid;
  grid-template-columns: 20em 1fr;
  grid-gap: 4em;
}

.title {
  position: sticky;
  top: 2rem;
  padding: .5em;
  border: 10px solid;
}

/*
 *  IRRELEVANT STYLES
 *  ---------------------------------------------
 */

body {
  margin: 0;
  padding: 4em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #F3E5E2;
}

a:link, a:visited {
  border-bottom: 2px solid;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

a:hover {
  border-bottom-color: transparent;
}

article {
  margin: 0 auto;
  width: 90%;
  max-width: 64em;
}

.title {
  margin: 0;
  font-size: 2.25em;
  line-height: 1.2;
  color: #E0464D;
}

.emoji {
  font-size: .75em;
}
              
            
!

JS

              
                
              
            
!
999px

Console