css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <body style="background:black;">
  <div class="container-fluid quotez">

    <div class="well panel-body animated lightSpeedIn">
      <blockquote><i class="fa fa-quote-left fa-2x"></i>
        <h1 id="quoteMe">Incoming inspiration...</h1>

    <br />

    <button id="quoteButton"><p>Inspire me, baby!</p></button>

    <!-- Tweet Tweet -->
    <button id="tweet" target="_blank" style="float:left;">
      <p>(Ooo that's good tweet that)</p></button>

  <footer class="container-fluid bg-4 text-center">
    <p> <span class="glyphicon glyphicon-heart"></span> Written with love by Michael Gray (d'awwwww...)</p>

              h1 {
  font-family: "Merriweather", serif;
  color: white;
p {
  color: white;

button {
  background-color: black;
  border: dashed;
  float: right;
  padding-bottom: 1px;

button:hover {
  border: solid;
  color: red;

.quotez {
  margin: 100px;
  border: 2px outset red;
  border-radius: 5px;
  padding-top: 70px;
.bg-4 {
  background-color: #2f2f2f;
  color: #ffffff;

.panel-body {
  border: 0px;
  background-color: #2f2f2f;
  color: #ffffff;

              $(document).ready(function() {
  //Quotes with a semicolon interrupt the Tweeting functionality and don't tweet the whole quote
  //Separate out quote and author and restyle for extra points in life
  //Get the new color to fade in after the quote slides in or at roughly the same time for extra style points

  var num = Math.floor(Math.random() * quotes.length);

  $(document).on("click", "#quoteButton", function() {
    num = Math.floor(Math.random() * quotes.length);
    inspiration = quotes[num];
      '<h1 class="animated lightSpeedIn"> ' + inspiration + "</h1>"
      randomColor({ luminosity: "dark" })

//Tweet code goes here...
$(document).on("click", "#tweet", function(tweetText) {
  var tweety = $("#quoteMe").text();
    "https://twitter.com/intent/tweet?hashtags=inspired&text=" + tweety
//And end here.

var quotes = [
  "You don't pass or fail at being a person, dear. -Neil Gaiman, The Ocean at the End of the Lane",
  "Whatever you are, be a good one. -Abraham Lincoln",
  "No one can make you feel inferior without your consent. - Eleanor Roosevelt",
  "Sometimes, magic is just someone spending more time on something than anyone else might reasonably expect. -Raymond Joseph Teller",
  "In dreams, we catch glimpses of a life larger than our own. -Hellen Keller",
  "Far better is it to dare mighty things, to win glorious triumphs, even though checkered by failure... than to rank with those poor spirits who neither enjoy nor suffer much, because they live in a gray twilight that knows not victory nor defeat. -Theodore Roosevelt",
  "We are not figuratively, but literally stardust. - Neil DeGrasse Tyson",
  "From the time you wake until the time to go sleep, strive for excellence. Otherwise, why get out of bed. -Dawne Miller",
  "It's better to be hated for who you are than loved for who you aren't. - Andre Gide",
  "Death is not the greatest loss in life. The greatest loss is what dies inside while still alive. Never surrender. -2Pac",
  "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel. -Maya Angelou",
  "Let go or be dragged. -Zen Proverb",
  "People were created to be loved. Things were created to be used. The reason the world is in chaos is because things are being loved and people are being used. -Dalai Lama",
  "People say nothing is impossible, but I do nothing every day. -A.A. Milne",
  "A diamond is merely a lump of coal that did well under pressure. -Henry Kissinger",
  "Never put off until tomorrow what you can do the day after tomorrow. -Mark Twain",
  "People often say that motivation doesn’t last. Well, neither does bathing – that’s why we recommend it daily. -Zig Ziglar",
  "If you think you are too small to make a difference, try sleeping with a mosquito. -Dalai Lama",
  "There’s never enough time to do all the nothing you want. -Bill Watterson",
  "I didn’t fail the test. I just found 100 ways to do it wrong. -Benjamin Franklin",
  "Don’t worry about the world coming to an end today. It’s already tomorrow in Australia. -Charles Schulz",
  "My therapist told me the way to achieve true inner peace is to finish what I start. So far I’ve finished two bags of M&Ms and a chocolate cake. I feel better already. -Dave Barry",
  "In the end the great truth will have been learned, that the quest is greater than what is sought, the effort finer than the prize, or rather that the effort is the prize, the victory cheap and hollow were it not for the rigor of the game. -Justice Benjamin Cardozo",
  "My goal is not to be better than anyone else, but to be better than I used to be. -Dr. Wayne W. Dyer",
  "How many legs does a dog have if you call the tail a leg? Four. Calling a tail a leg doesn’t make it a leg. ―Abraham Lincoln",
  "Never give up on something you really want. It’s difficult to wait, but more difficult to regret! -Unknown",
  "Holding onto anger is like drinking poison and expecting the other person to die. -Buddha",
  "Many of the truths we cling to depend on our point of view. -Yoda",
  "Do, or do not. There is no try. -Yoda",
  "Dismiss whatever insults your own soul;\nAnd your very flesh shall be a great poem…\nAnd have the richest fluency, not only in its words,\nBut in the silent lines of its lips and face,\nAnd between the lashes of your eyes,\nand In every motion and joint of your body. \n-Walt Whitman",
  "Ah, music. A magic beyond all we do here! -Albus Dumbledore",
  "No problem can be solved by the same consciousness that created it -Albert Einstein",
  "The only thing necessary for the triumph of evil is for good men to do nothing. -Edmund Burke",
  "Education is the most powerful weapon which you can use to change the world. -Nelson Mandela",
  "Happiness can be found, even in the darkest of times, if one only remembers to turn on the light. -Albus Dumbledore",
  "When everything goes to hell, the people who stand by you without flinching -- they are your family. ―Jim Butcher",
  "No one can make you feel inferior without your consent. -Eleanor Roosevelt",
  "When someone shows you who they are, believe them the first time. -Maya Angelou",
  "Courage is the act of being the only one who knows you're scared to death. -Earl Wilson",
  "People need to be reminded more often than they need to be instructed. The real job of every teacher is to keep on bringing us back, time after time, to the old simple principles which we are all so anxious not to see. --C.S. Lewis",
  "I don't want you to float through life pretending that nothing matters. Because trust me, one day you're gonna wake up and you're gonna realize that you don't have the life you wanted. -Meet Bill",
  "Losing an illusion makes you wiser than finding a truth. -Ludwig Börne",
  "She laughed again, as if she said something very witty, and held my hand for a moment, looking up into my face, promising that there was no one in the world she so much wanted to see. -The Great Gatsby, F. Scott Fitzgerald",
  "Learn from me, if not by my precepts, then by my example, how dangerous is the pursuit of knowledge and how much happier is that man who believes his native town to be the world than he who aspires to be greater than his nature will allow. -Frankenstein, Mary Shelley",
  "To live. To live would be an awfully big adventure. -Peter Pan, Hook",
  "Heroes get remembered, but legends never die. -Babe Ruth, The Sandlot",
  "I am a leaf on the wind; watch how I soar. -Wash, Serenity",
  "We are all stories in the end. Just make it a good one. -The 11th Doctor, Doctor Who",
  "900 years of time and space, and I've never met anyone who wasn't important. -The 11th Doctor, Doctor Who",
  "You don't just give up. You don't just let things happen. You make a stand. You say no. You have the guts to do what's right, even when everyone else just runs away. -Rose Tyler, Doctor Who",
  "Some people live more in 20 years than others do in 80. It's not the time that matters, it's the person. -The Tenth Doctor, Doctor Who",
  "If you can't fly, then run; if you can't run, then walk; if you can't walk, then crawl; but whatever you do, you have to keep moving forward. -Dr. Martin Luther King Jr.",
  "Freedom is never voluntarily given by the oppressor; it must be demanded by the oppressed. -Dr. Martin Luther King Jr.",
  "Everything that we see is a shadow cast by that which we do not see. -Dr. Martin Luther King Jr.",
  "Hatred paralyzes life; love releases it. Hatred confuses life; love harmonizes it. Hatred darkens life; love illuminates it. -Dr. Martin Luther King Jr.",
  "Peace is not merely a distant goal that we seek, but a means by which we arrive at that goal. -Dr. Martin Luther King Jr.",
  "The time is always right to do what is right. -Dr. Martin Luther King Jr.",
  "Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that. -Dr. Martin Luther King Jr.",
  "Love is the only force capable of transforming an enemy into a friend. -Dr. Martin Luther King Jr.",
  "In the End, we will remember not the words of our enemies, but the silence of our friends. -Dr. Martin Luther King Jr.",
  "Fall seven times, stand up eight. -Japanese Proverb",
  "It's good people who make good places. -Black Beauty, Anna Sewell",
  "Courage doesn't always roar. Sometimes courage is the little voice at the end of the day that says 'I'll try again tomorrow'. -Mary Anne Radmacher",
  "Confidence comes not from always being right but from not fearing to be wrong. -Peter T. Mcintyre",
  "Out of the night that covers me, black as the pit from pole to pole, I thank whatever Gods may be for my unconquerable soul. Under the fell clutch of circumstance, I have neither winced nor cried aloud. Under the bludgeonings of chance, my head is bloody but unbowed. Beyond this place of wrath and tears looms but the horror of the shade, and yet the menace of the years finds and shall find me unafraid. It matters not how strait the gate, how charged with punishment the scroll: I am the master of my fate. I am the Captain of my soul. -William Ernest Henley",
  "Too often we underestimate the power of a touch , a smile, a kind word, a listening ear, a honest compliment, or the smallest act of caring, all of which have the potential to turn a life around. -Leo Buscaglia",
  "People don't care how much you know until they know how much you care. -Teddy Roosevelt",
  "To laugh is to risk appearing a fool, \nTo weep is to risk appearing sentimental\nTo reach out to another is to risk involvement,\nTo expose feelings is to risk exposing your true self\nTo place your ideas and dreams before a crowd is to risk their loss\nTo love is to risk not being loved in return,\nTo hope is to risk despair,\nTo try is to risk to failure.\nBut risks must be taken because the greatest hazard in life is to risk nothing.\nThe person who risks nothing, does nothing, has nothing is nothing.\nHe may avoid suffering and sorrow,\nBut he cannot learn, feel, change, grow or live.\nChained by his servitude he is a slave who has forfeited all freedom.\nOnly a person who risks is free.\nThe pessimist complains about the wind;\nThe optimist expects it to change;\nAnd the realist adjusts the sails.\n -William Arthur Ward",
  "There comes a time when one must take a position that is neither safe, nor politic, nor popular, but he must take it because conscience tells him it is right. -Dr. Martin Luther King Jr.",
  'We must rapidly begin the shift from a "thing-oriented" society to a "people-oriented" society. When machines and computers, profit motives and property rights are considered more important than people, the giant triplets of racism, materialism, and militarism are incapable of being conquered. -Dr. Martin Luther King Jr.',
  "Rarely do we find men willing to engage in hard, solid thinking. There is an almost universal quest for easy answers and half baked solutions. Nothing pains some people more than having to think. -Dr. Martin Luther King Jr."

// randomColor by David Merfield under the CC0 license
// https://github.com/davidmerfield/randomColor/

(function(root, factory) {
  // Support AMD
  if (typeof define === "function" && define.amd) {
    define([], factory);

    // Support CommonJS
  } else if (typeof exports === "object") {
    var randomColor = factory();

    // Support NodeJS & Component, which allow module.exports to be a function
    if (typeof module === "object" && module && module.exports) {
      exports = module.exports = randomColor;

    // Support CommonJS 1.1.1 spec
    exports.randomColor = randomColor;

    // Support vanilla script loading
  } else {
    root.randomColor = factory();
})(this, function() {
  // Seed to get repeatable colors
  var seed = null;

  // Shared color dictionary
  var colorDictionary = {};

  // Populate the color dictionary

  var randomColor = function(options) {
    options = options || {};

    // Check if there is a seed and ensure it's an
    // integer. Otherwise, reset the seed value.
    if (
      options.seed !== undefined &&
      options.seed !== null &&
      options.seed === parseInt(options.seed, 10)
    ) {
      seed = options.seed;

      // A string was passed as a seed
    } else if (typeof options.seed === "string") {
      seed = stringToInteger(options.seed);

      // Something was passed as a seed but it wasn't an integer or string
    } else if (options.seed !== undefined && options.seed !== null) {
      throw new TypeError("The seed value must be an integer or string");

      // No seed, reset the value outside.
    } else {
      seed = null;

    var H, S, B;

    // Check if we need to generate multiple colors
    if (options.count !== null && options.count !== undefined) {
      var totalColors = options.count,
        colors = [];

      options.count = null;

      while (totalColors > colors.length) {
        // Since we're generating multiple colors,
        // incremement the seed. Otherwise we'd just
        // generate the same color each time...
        if (seed && options.seed) options.seed += 1;


      options.count = totalColors;

      return colors;

    // First we pick a hue (H)
    H = pickHue(options);

    // Then use H to determine saturation (S)
    S = pickSaturation(H, options);

    // Then use S and H to determine brightness (B).
    B = pickBrightness(H, S, options);

    // Then we return the HSB color in the desired format
    return setFormat([H, S, B], options);

  function pickHue(options) {
    var hueRange = getHueRange(options.hue),
      hue = randomWithin(hueRange);

    // Instead of storing red as two seperate ranges,
    // we group them, using negative numbers
    if (hue < 0) {
      hue = 360 + hue;

    return hue;

  function pickSaturation(hue, options) {
    if (options.luminosity === "random") {
      return randomWithin([0, 100]);

    if (options.hue === "monochrome") {
      return 0;

    var saturationRange = getSaturationRange(hue);

    var sMin = saturationRange[0],
      sMax = saturationRange[1];

    switch (options.luminosity) {
      case "bright":
        sMin = 55;

      case "dark":
        sMin = sMax - 10;

      case "light":
        sMax = 55;

    return randomWithin([sMin, sMax]);

  function pickBrightness(H, S, options) {
    var bMin = getMinimumBrightness(H, S),
      bMax = 100;

    switch (options.luminosity) {
      case "dark":
        bMax = bMin + 20;

      case "light":
        bMin = (bMax + bMin) / 2;

      case "random":
        bMin = 0;
        bMax = 100;

    return randomWithin([bMin, bMax]);

  function setFormat(hsv, options) {
    switch (options.format) {
      case "hsvArray":
        return hsv;

      case "hslArray":
        return HSVtoHSL(hsv);

      case "hsl":
        var hsl = HSVtoHSL(hsv);
        return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";

      case "hsla":
        var hslColor = HSVtoHSL(hsv);
        return (
          "hsla(" +
          hslColor[0] +
          ", " +
          hslColor[1] +
          "%, " +
          hslColor[2] +
          "%, " +
          Math.random() +

      case "rgbArray":
        return HSVtoRGB(hsv);

      case "rgb":
        var rgb = HSVtoRGB(hsv);
        return "rgb(" + rgb.join(", ") + ")";

      case "rgba":
        var rgbColor = HSVtoRGB(hsv);
        return "rgba(" + rgbColor.join(", ") + ", " + Math.random() + ")";

        return HSVtoHex(hsv);

  function getMinimumBrightness(H, S) {
    var lowerBounds = getColorInfo(H).lowerBounds;

    for (var i = 0; i < lowerBounds.length - 1; i++) {
      var s1 = lowerBounds[i][0],
        v1 = lowerBounds[i][1];

      var s2 = lowerBounds[i + 1][0],
        v2 = lowerBounds[i + 1][1];

      if (S >= s1 && S <= s2) {
        var m = (v2 - v1) / (s2 - s1),
          b = v1 - m * s1;

        return m * S + b;

    return 0;

  function getHueRange(colorInput) {
    if (typeof parseInt(colorInput) === "number") {
      var number = parseInt(colorInput);

      if (number < 360 && number > 0) {
        return [number, number];

    if (typeof colorInput === "string") {
      if (colorDictionary[colorInput]) {
        var color = colorDictionary[colorInput];
        if (color.hueRange) {
          return color.hueRange;

    return [0, 360];

  function getSaturationRange(hue) {
    return getColorInfo(hue).saturationRange;

  function getColorInfo(hue) {
    // Maps red colors to make picking hue easier
    if (hue >= 334 && hue <= 360) {
      hue -= 360;

    for (var colorName in colorDictionary) {
      var color = colorDictionary[colorName];
      if (
        color.hueRange &&
        hue >= color.hueRange[0] &&
        hue <= color.hueRange[1]
      ) {
        return colorDictionary[colorName];
    return "Color not found";

  function randomWithin(range) {
    if (seed === null) {
      return Math.floor(range[0] + Math.random() * (range[1] + 1 - range[0]));
    } else {
      //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
      var max = range[1] || 1;
      var min = range[0] || 0;
      seed = (seed * 9301 + 49297) % 233280;
      var rnd = seed / 233280.0;
      return Math.floor(min + rnd * (max - min));

  function HSVtoHex(hsv) {
    var rgb = HSVtoRGB(hsv);

    function componentToHex(c) {
      var hex = c.toString(16);
      return hex.length == 1 ? "0" + hex : hex;

    var hex =
      "#" +
      componentToHex(rgb[0]) +
      componentToHex(rgb[1]) +

    return hex;

  function defineColor(name, hueRange, lowerBounds) {
    var sMin = lowerBounds[0][0],
      sMax = lowerBounds[lowerBounds.length - 1][0],
      bMin = lowerBounds[lowerBounds.length - 1][1],
      bMax = lowerBounds[0][1];

    colorDictionary[name] = {
      hueRange: hueRange,
      lowerBounds: lowerBounds,
      saturationRange: [sMin, sMax],
      brightnessRange: [bMin, bMax]

  function loadColorBounds() {
    defineColor("monochrome", null, [[0, 0], [100, 0]]);

      [-26, 18],
        [20, 100],
        [30, 92],
        [40, 89],
        [50, 85],
        [60, 78],
        [70, 70],
        [80, 60],
        [90, 55],
        [100, 50]

      [19, 46],
      [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]

      [47, 62],
        [25, 100],
        [40, 94],
        [50, 89],
        [60, 86],
        [70, 84],
        [80, 82],
        [90, 80],
        [100, 75]

      [63, 178],
        [30, 100],
        [40, 90],
        [50, 85],
        [60, 81],
        [70, 74],
        [80, 64],
        [90, 50],
        [100, 40]

      [179, 257],
        [20, 100],
        [30, 86],
        [40, 80],
        [50, 74],
        [60, 60],
        [70, 52],
        [80, 44],
        [90, 39],
        [100, 35]

      [258, 282],
        [20, 100],
        [30, 87],
        [40, 79],
        [50, 70],
        [60, 65],
        [70, 59],
        [80, 52],
        [90, 45],
        [100, 42]

      [283, 334],
      [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]

  function HSVtoRGB(hsv) {
    // this doesn't work for the values of 0 and 360
    // here's the hacky fix
    var h = hsv[0];
    if (h === 0) {
      h = 1;
    if (h === 360) {
      h = 359;

    // Rebase the h,s,v values
    h = h / 360;
    var s = hsv[1] / 100,
      v = hsv[2] / 100;

    var h_i = Math.floor(h * 6),
      f = h * 6 - h_i,
      p = v * (1 - s),
      q = v * (1 - f * s),
      t = v * (1 - (1 - f) * s),
      r = 256,
      g = 256,
      b = 256;

    switch (h_i) {
      case 0:
        r = v;
        g = t;
        b = p;
      case 1:
        r = q;
        g = v;
        b = p;
      case 2:
        r = p;
        g = v;
        b = t;
      case 3:
        r = p;
        g = q;
        b = v;
      case 4:
        r = t;
        g = p;
        b = v;
      case 5:
        r = v;
        g = p;
        b = q;

    var result = [
      Math.floor(r * 255),
      Math.floor(g * 255),
      Math.floor(b * 255)
    return result;

  function HSVtoHSL(hsv) {
    var h = hsv[0],
      s = hsv[1] / 100,
      v = hsv[2] / 100,
      k = (2 - s) * v;

    return [
      Math.round(s * v / (k < 1 ? k : 2 - k) * 10000) / 100,
      k / 2 * 100

  function stringToInteger(string) {
    var total = 0;
    for (var i = 0; i !== string.length; i++) {
      if (total >= Number.MAX_SAFE_INTEGER) break;
      total += string.charCodeAt(i);
    return total;

  return randomColor;

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................