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

              
                <section><h1>Typography</h1></section>

  <h1>Jump over the hill</h1>
  <h2>Jump over the hill</h2>
  <h3>Jump over the hill</h3>
  <h4>Jump over the hill</h4>
  <h5>Jump over the hill</h5>
  <h6>Jump over the hill</h6>
  <p>Jump over the hill</p>

<section><h1>Colors</h1></section>
<div class="header"><p>100</p></div>
<div class="header"><p>200</p></div>
<div class="header"><p>300</p></div>
<div class="header"><p>400</p></div>
<div class="header"><p>500</p></div>
<div class="header"><p>600</p></div>
<div class="header"><p>700</p></div>
<div class="header"><p>800</p></div>
<div class="header"><p>900</p></div>


<div class="clear"></div>

<div class="gray1"></div>
<div class="gray2"></div>
<div class="gray3"></div>
<div class="gray4"></div>
<div class="gray5"><p>Hello there</p></div>
<div class="gray6"></div>
<div class="gray7"></div>
<div class="gray8"></div>
<div class="gray9"></div>

<div class="clear"></div>

<div class="pink1"></div>
<div class="pink2"></div>
<div class="pink3"></div>
<div class="pink4"></div>
<div class="pink5"></div>
<div class="pink6"></div>
<div class="pink7"></div>
<div class="pink8"></div>
<div class="pink9"></div>

<div class="clear"></div>

<div class="green1"></div>
<div class="green2"></div>
<div class="green3"></div>
<div class="green4"></div>
<div class="green5"></div>
<div class="green6"></div>
<div class="green7"></div>
<div class="green8"></div>
<div class="green9"></div>

<div class="clear"></div>

<div class="blue1"></div>
<div class="blue2"></div>
<div class="blue3"></div>
<div class="blue4"></div>
<div class="blue5"></div>
<div class="blue6"></div>
<div class="blue7"></div>
<div class="blue8"></div>
<div class="blue9"></div>


<section><h1>Shadows</h1></section>

<div class="shadow-container">
  <div class="shadow shadow1"></div>
  <div class="shadow shadow2"></div>
  <div class="shadow shadow3"></div>
  <div class="shadow shadow4"></div>
  <div class="shadow shadow5"></div>
</div>


<div class="clear"></div>

<section><h1>Background Pattern</h1></section>

<div class="shadow background-pattern1"></div>
<div class="shadow background-pattern2"></div>
<div class="shadow background-pattern3"></div>
<div class="shadow background-pattern4"></div>
<div class="shadow background-pattern5"></div>
<div class="shadow background-pattern6"></div>
<div class="shadow background-pattern7"></div>
<div class="shadow background-pattern8"></div>
<div class="shadow background-pattern9"></div>
              
            
!

CSS

              
                h1, h2, h3, h4, h5, h6, p
  font-family: 'Roboto', sans-serif
  margin: 10px
h1
  font-size: 40px
h2
  font-size: 36px
h3
  font-size: 30px
h4
  font-size: 26px
h5
  font-size: 24px
h6
  font-size: 18px
p
  font-size: 16px
  
div
  display: inline-block
  box-sizing: border-box
  width: 120px
  vertical-align: top
  border-radius: 5px
  height: 40px
  margin: 10px 5px
section
  margin-top: 50px
  margin-bottom: 30px
  border-bottom: 1px solid hsl(30, 5%, 95%)
.header
  border-bottom: 1px solid  hsl(30, 5%, 95%)
  border-radius: 0
  margin: 10px 5px
  display: inline-block
  p 
    text-align: center
    width: 100%
    color: hsl(200, 0, 20%)
.clear
  display: block
  height: 0
  margin: 0
  
$gray1: hsl(30, 7%, 99%)
$gray2: hsl(30, 5%, 95%)
$gray3: hsl(30, 12%, 70%)
// $gray4: hsl(200, 0, 50%)
$gray5: hsl(30, 14%, 50%)
// $gray6: hsl(200, 0, 85%)
$gray7: hsl(30, 15%, 30%)
// $gray8: hsl(200, 0, 15%)
$gray9: hsl(30, 30%, 10%)

.gray1
  background-color: $gray1
.gray2
  background-color: $gray2
.gray3
  background-color: $gray3
// .gray4
//   background-color: $gray4
.gray5
  background-color: $gray5
// .gray6
//   background-color: $gray6
.gray7
  background-color: $gray7
// .gray8
//   background-color: $gray8
.gray9
  background-color: $gray9
  
$pink1: hsl(0, 80%, 95%)
$pink2: hsl(11, 99%, 90%)
$pink3: hsl(11, 90%, 80%)
// $pink4:
$pink5: hsl(11, 85%, 70%)
// $pink6:
// $pink7:
// $pink8:
$pink9: hsl(11, 100%, 15%)

.pink1
  background-color: $pink1
.pink2
  background-color: $pink2
.pink3
  background-color: $pink3
.pink5
  background-color: $pink5
.pink9
  background-color: $pink9


$green1: hsl(82, 85%, 90%)
// $green2:
$green3: hsl(82, 95%, 80%)
// $green4:
$green5: hsl(82, 85%, 75%)
// $green6:
$green7: hsl(82, 85%, 60%)
// $green8:
$green9: hsl(82, 90%, 50%)

.green1
  background-color: $green1
.green3
  background-color: $green3
.green5
  background-color: $green5
.green7
  background-color: $green7
.green9
  background-color: $green9


$blue1: hsl(222, 90%, 90%)
// $blue2:
$blue3: hsl(235, 80%, 80%)
// $blue4:
$blue5: hsl(222, 49%, 51%)
// $blue6:
$blue7: hsl(230, 85%, 60%)
// $blue8:
$blue9: hsl(222, 60%, 30%)
  
.blue1
  background-color: $blue1
.blue3
  background-color: $blue3
.blue5
  background-color: $blue5
.blue7
  background-color: $blue7
.blue9
  background-color: $blue9

.shadow-container
  display: block
  background-color: $gray1
  width: 100%
  margin: 0
  height: auto
.shadow
  position: relative
  background-color: white
  width: 200px
  height: 200px
  display: inline-block
  margin: 20px
  
$shadow1: 0 2px 5px hsla(0, 0, 0, .2)
// $shadow2:
$shadow3: 0 5px 15px hsla(0, 0, 0, .4)
// $shadow4:
$shadow5: 0 15px 35px hsla(0, 0, 0, .2)

.shadow1
  box-shadow: $shadow1
.shadow3
  box-shadow: $shadow3
.shadow5
  box-shadow: $shadow5

  
.background-pattern1
  background-color: #f9d3cb
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23f48971' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E")
              
            
!

JS

              
                /* Southern Dev conference is for those of us who don't get to go out on a Friday night and see amazing talks at our local meet up space. I want that in my city. I think its something totally possibly to have. The problem as I see it is that I need buy in from those in the community. When I started the Augusta Developer last year I expected that I was going to have to fight off speakers, and sponsors. I mean it was the only and to my knowledge is still the only technology agnostic developer meetup in Augusta. People tell me all the time that Augusta is a small town or I'm told that Augusta is the second largest city in the state. I feel like if ether of those things were true then I would expect that a community of developers would emerge to help each other. I work in the Java Script, Python, and PHP communities and see how much people care for each other. I want that in my city. I believe that a conference is a step on a long road to energizing Augusta's developers to believe and trust in each other's creativity and passion.*/


/* Check these out
https://www.heropatterns.com/
*/
              
            
!
999px

Console