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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!-- descriptions from: http://www.empower-yourself-with-color-psychology.com/color-meanings-in-business.html -->

<h1>The Color of Business</h1>

<form data-color="white">
  <input class="arrow prev" type="button" value="&#9664;" />
  <input class="arrow next" type="button" value="&#9664;" />
  
  <input class="color-range" type="range" step="1" min="0" max="10" value="0" />
  
  <div class="white">
    <h3>White</h3>
    <p>A blank canvas waiting for creative stimulation. It implies efficiency and simplicity, fairness and order. Best suited for clean freaks.</p>
  </div>
  <div class="gray">
    <h3>Gray</h3>
    <p>Neutral and conservative but does imply security and reliability. It works well with other colors. A geate way to play it safe.</p>
  </div>
  <div class="black">
    <h3>Black</h3>
    <p>The color of power and authority. In excess it can be intimidating and unfriendly. Not suited for those afraid of the dark.</p>
  </div>
  <div class="red">
    <h3>Red</h3>
    <p>High energy and strong. Draws attention to itself and demands to be noticed. “Hey look at me, I’m red!”</p>
  </div>
  <div class="orange">
    <h3>Orange</h3>
    <p>A color of adventure which inspires and creates enthusiasm. It’s optimistic, sociable and suggests affordability. It’s also a fruit.</p>
  </div>
  <div class="yellow">
    <h3>Yellow</h3>
    <p>An illuminating and uplifting color which stimulates analytical processes and assists with mental clarity. Not to mention, it’s pretty.</p>
  </div>
  <div class="green">
    <h3>Green</h3>
    <p>Associated with nature, health and healing. It balances the emotions and inspires compassion. Can alos be kinda boring.</p>
  </div>
  <div class="blue">
    <h3>Blue</h3>
    <p>The safest color to use in most applications, implying honesty, trust and dependability. No wonder banks use this color so often.</p>
  </div>
  <div class="purple">
    <h3>Purple</h3>
    <p>Implies wealth, quality, fantasy and creativity. It works well with many other colors. Nothin’ wrong with purple.</p>
  </div>
  <div class="pink">
    <h3>Pink</h3>
    <p>Inspires compassion and nurturing. It is a non-threatening color used most often in feminine businesses. However, it’s not just for the ladies.</p>
  </div>
  <div class="brown">
    <h3>Brown</h3>
    <p>A strong, reassuring color that is comforting and reliable. It relates well to businesses that promote down-to-earth and outdoor products and activities. It’s not just dark orange.</p>
  </div>
</form>
              
            
!

CSS

              
                /* Fonts */
@import url(https://fonts.googleapis.com/css?family=Exo+2:300,600);

*, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; }
input:focus { outline: none; }
body {
  max-width: 600px; margin: 40px auto;
  font: 100%/1.4em 'Exo 2', sans-serif; color: #fff;
  background: #32383d; }

h1 { font-weight: normal; font-size: 300%; line-height: 1em; text-align: center; }

form {
  position: relative;
  width: 90%; padding: 20px; margin: 40px 5%;
  background: #e8ebed; border-radius: 3px; }

.arrow {
  appearance: none; cursor: pointer;
  position: absolute;
  width: 5%; height: 30px;
  color: #fff;
  background: #32383d; border: none; border-radius: 5px 0 0 5px; }
.next { right: 20px; transform: rotate(180deg); }

input[type=range] {
  appearance: none; cursor: pointer;
  position: relative; z-index: 100;
  width: 90%; margin: 0 5%;
  background-color: #eee;
  background-image: linear-gradient(to right,
    #fff 0%, #fff 9.0909%,
    #8a8d94 9.0909%, #8a8d94 18.1818%,
    #222 18.1818%, #222 27.2727%,
    #ed094a 27.2727%, #ed094a 36.3636%,
    #ffa82e 36.3636%, #ffa82e 45.4545%,
    #ffe100 45.4545%, #ffe100 54.5454%,
    #1de085 54.5454%, #1de085 63.6363%,
    #1393e8 63.6363%, #1393e8 72.7272%,
    #b357de 72.7272%, #b357de 81.8181%,
    #f27ee3 81.8181%, #f27ee3 90.9090%,
    #a37550 90.9090%, #a37550 100%); }
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 9.0909%; height: 30px;
  background-color: transparent;
  border: 6px solid #32383d;
  box-shadow: 2px 0 0 #32383d, -2px 0 0 #32383d; }
[data-color=black] input[type=range]::-webkit-slider-thumb {
  border: 6px solid #565f69;
  box-shadow: 2px 0 0 #565f69, -2px 0 0 #565f69; }

form div { display: none;  padding: 10px; margin-top: 15px; }

[data-color=white] .white,
[data-color=gray] .gray,
[data-color=black] .black,
[data-color=red] .red,
[data-color=orange] .orange,
[data-color=yellow] .yellow,
[data-color=green] .green,
[data-color=blue] .blue,
[data-color=purple] .purple,
[data-color=pink] .pink,
[data-color=brown] .brown {
  display: block;
  border-radius: 3px; }

.white { background: #fff; color: #32383d; }
.gray { background: #8a8d94; }
.black { background: #222; }
.red { background: #ed094a; }
.orange { background: #ffa82e; }
.yellow { background: #ffe100; color: #32383d; }
.green { background: #1de085; }
.blue { background: #1393e8; }
.purple { background: #b357de; }
.pink { background: #f27ee3; }
.brown { background: #a37550; }

              
            
!

JS

              
                var colorRange = $('.color-range'),
    arrow = $('.arrow');

arrow.on('click', function() {
  var self = $(this),
      crVal = parseInt(colorRange.val(), 10),
      crMax = parseInt(colorRange.attr('max'), 10);
  
  if (self.hasClass('prev') && crVal > 0) colorRange.val(crVal-1);
  if (self.hasClass('next') && crVal < crMax) colorRange.val(crVal+1);
  
  changeColor(colorRange.val());
});

colorRange.change(function() {
  var self = $(this);
  changeColor(self.val());
});

function changeColor(n) {
  switch(n) {
    case '0':
      colorRange.parents('form').attr('data-color', 'white');
      break;
    case '1':
      colorRange.parents('form').attr('data-color', 'gray');
      break;
    case '2':
      colorRange.parents('form').attr('data-color', 'black');
      break;
    case '3':
      colorRange.parents('form').attr('data-color', 'red');
      break;
    case '4':
      colorRange.parents('form').attr('data-color', 'orange');
      break;
    case '5':
      colorRange.parents('form').attr('data-color', 'yellow');
      break;
    case '6':
      colorRange.parents('form').attr('data-color', 'green');
      break;
    case '7':
      colorRange.parents('form').attr('data-color', 'blue');
      break;
    case '8':
      colorRange.parents('form').attr('data-color', 'purple');
      break;
    case '9':
      colorRange.parents('form').attr('data-color', 'pink');
      break;
    case '10':
      colorRange.parents('form').attr('data-color', 'brown');
      break;
    default:
      colorRange.parents('form').attr('data-color', 'white');
  };
};
              
            
!
999px

Console