cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="container">
  <div id="quote-card">
    <div>
      <p id="quote-text">“You don't have to be great to start, but you have to start to be great.”</p>
    </div>
    <div>
      <p id="quote-author">~ Zig Ziglar</p>
    </div>
    <div>
      <a target="_blank" href="https://twitter.com/intent/tweet?hashtags=quote&related=damianocasula&text=“You don't have to be great to start, but you have to start to be great.” ~ Zig Ziglar" type="button" class="btn button" id="tweet">Tweet</a>
      <button type="button" class="btn button" id="new-quote">Generate</button>
    </div>
  </div>
  <p class="by">by <a target="_blank" href="http://dmy.li">Damiano Casula</a>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Asar|Trocchi');

body {
  background-color: #ffd3c1;
}

#quote-card {
  width: 70%;
  margin: 10% auto auto auto;
  padding: 2%;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19), 0 6px 20px 0 rgba(0, 0, 0, 0.13);
}

.button, .button:link, .button:visited {
  background-color: #ff9970;
  color: white;
  border: none;
  border-radius: 3px;
}

.button:hover {
  background-color: #ff8554;
  color: white;
}

.button:active {
  background-color: #ff7842;
  color: white;
}

@media (max-width: 768px) {
  body {
    background-color: white;
  }
  
  #quote-card {
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

#quote-text {
  font-family: "Asar", sans-serif;
  font-size: 160%;
}

#quote-author {
  font-family: "Asar", sans-serif;
  font-style: italic;
  font-size: 115%;
  margin-bottom: 30px;
}

.by {
  margin-top: 20px;
  text-align: center;
}
            
          
!
            
              function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

var quotes = [
  {
    text: "Men talk to women so they can sleep with them and women sleep with men so they can talk to them.",
    author: "Jay McInerney"
  },
  {
    text: "Sometimes life hits you like a brick. Don't lose faith.",
    author: "Steve Jobs"
  },
  {
    text: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.",
    author: "James Cameron"
  },
  {
    text: "Positive thinking will let you do everything better than negative thinking will.",
    author: "Zig Ziglar"
  },
  {
    text: "A goal properly set is halfway reached.",
    author: "Zig Ziglar"
  },
  {
    text: "Expect the best. Prepare for the worst. Capitalize on what comes.",
    author: "Zig Ziglar"
  },
  {
    text: "What you get by achieving your goals is not as important as what you become by achieving your goals.",
    author: "Zig Ziglar"
  },
  {
    text: "If you learn from defeat, you haven't really lost.",
    author: "Zig Ziglar"
  },
  {
    text: "Your attitude, not your aptitude, will determine your altitude.",
    author: "Zig Ziglar"
  },
  {
    text: "You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.",
    author: "Zig Ziglar"
  },
  {
    text: "You can get everything in life you want if you will just help enough other people get what they want.",
    author: "Zig Ziglar"
  },
  {
    text: "People often say that motivation doesn't last. Well, neither does bathing - that's why we recommend it daily.",
    author: "Zig Ziglar"
  },
  {
    text: "Remember that failure is an event, not a person.",
    author: "Zig Ziglar"
  },
  {
    text: "Life is a one time offer, use it well.",
    author: "Unknown"
  },
  {
    text: "I don’t want to earn my living; I want to live.",
    author: "Oscar Wilde"
  },
  {
    text: "There are no facts, only interpretations.",
    author: "Friedrich Nietzsche"
  },
  {
    text: "Whatever you are, be a good one.",
    author: "Abraham Lincoln"
  },
  {
    text: "There are no secrets to success. It is the result of preparation, hard work, and learning from failure.",
    author: "Colin Powell"
  },
  {
    text: "Try to learn something about everything and everything about something.",
    author: "Thomas Henry Huxley"
  },
  {
    text: "Don’t wait. The time will never be just right.",
    author: "Napoleon Hill"
  },
  {
    text: "Wherever you go, go with all your heart.",
    author: "Confucius"
  },
  {
    text: "I didn’t fail 1000 times. The light bulb was an invention with 1000 steps.",
    author: "Thomas Edison"
  },
  {
    text: "I hear and I forget, I see and I remember. I do and I understand.",
    author: "Confucius"
  },
  {
    text: "Life is trying things to see if they work.",
    author: "Ray Bradbury"
  },
  {
    text: "It does not matter how slowly you go as long as you do not stop.",
    author: "Confucius"
  },
  {
    text: "Don’t regret the past, just learn from it.",
    author: "Ben Ipock"
  },
  {
    text: "A friendship founded on business is better than a business founded on friendship.",
    author: "John D. Rockefeller"
  },
  {
    text: "Half the money I spend on advertising is wasted; the trouble is I don’t know which half.",
    author: "John Wanamaker"
  },
  {
    text: "A kiss without a hug is like a flower without the fragrance.",
    author: "Maltese proverb"
  },
  {
    text: "90 people get the swine flu and everybody wants to wear a mask. A million people have AIDS and no one wants to wear a condom.",
    author: "Anonymous"
  },
  {
    text: "Beer will get you through times of no money better than money will get you through times of no beer.",
    author: "Freddie Freak"
  },
  {
    text: "A kiss is an inquiry on the second floor as to what’s going on on the first floor.",
    author: "Theresa Russell"
  },
  {
    text: "A spaniel, a woman, and a walnut tree, the more they’re beaten the better they be.",
    author: "John Ray"
  },
  {
    text: "When I was born I was so surprised I didn’t talk for a year and a half.",
    author: "Gracie Allen"
  },
  {
    text: "Turn your face to the sun and the shadows fall behind you.",
    author: "Maori proverb"
  }
];

$(document).ready(function () { 
  var random = 0;
  $("#new-quote").on("click", function () {
    random = getRandomInt(0, quotes.length);
    
    $("#quote-text").text("“" + quotes[random].text + "”");
    $("#quote-author").text("~ " + quotes[random].author);
    $("#tweet").attr("href", "https://twitter.com/intent/tweet?hashtags=quote&related=damianocasula&text=“" + quotes[random].text + "” ~ " + quotes[random].author)
  });
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console