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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


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


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.


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.


                <link rel="stylesheet" href="//" />

<link rel="stylesheet" href="">

<div class="container-fluid">

  <div class="row text-center">
    <h2>How I Met Your Mother Quotes</h2>

  <div class="row">
    <div class="col-xs-6 quoteBox well">
      <div id="quote" class="quote">
        Click "Suit Up!" to get a random quote.

      <div id="char" class="character">


  <div class="row text-center">
    <div class="col-xs-12">
      <button id="getQuote" class="btn btn-info">
        Suit Up!
      <button id="tweet" class="btn btn-primary"> <i class="fa fa-twitter"></i> Tweet

  <i class="wi wi-umbrella"></i>


                body {
  margin-top: 50px;
  background: #474747;

h2 {
  color: #ffff00;

.quote {
  text-align: center;

.character {
  text-align: right;

.quoteBox {
  text-align: center;
  background-color: gray;
  color: #191919;
  margin-left: 25%;

.wi {
  color:  #ffff00;
  font-size:  150px;
  margin-top:  50px;

.container-fluid {
  text-align: center;


                $(document).ready(function() {
  var quoArr = [
    ['"I peed in an alley which happened to have a church which I did not see because I was drunk!"', "-Barney"],
    ['"The best I can give you is a fake smile and dead eyes."', "-Robin"],
    ['"Your package has always been big enough. You may not realize this Marshall Eriksen, but you’ve got a huge package!"', "-Lily"],
    ['"We struggle so hard to hold on to these things that we know are gonna disappear eventually. And that’s really noble."', "-Lily"],
    ['"Whenever I’m sad, I stop being sad and be awesome instead."', "-Barney"],
    ['"Because sometimes even if you know how something’s gonna end that doesn’t mean you can’t enjoy the ride."', "-Ted"],
    ['"The littlest thing can cause a ripple effect that changes your life. "', "-Ted"]
    ['"That’s life, you know, we never end up where you thought you wanted to be."', "-Marshall"],
    ['"Aw, man!"', "-The Blitz"],
    ['"Sometimes we search for one thing but discover another."', "-Barney"], ['"Dude, lots of chicks think that architects are hot. Think about that, you create something out of nothing. You’re like God. There is no one hotter than God."', "-Barney"], ['"OK, here’s my thing – if gay guys start getting married, then suddenly the whole world’s gonna be doing it. That’s how it works: they start something, then six months later, everyone follows. Like… now everyone gets manicures."', "-Barney"], ['"We’re going to get older whether we like it or not, so the only question is whether we get on with our lives, or desperately cling to the past."', "-Ted"], ['"God, it’s me, Barney. What up? I know we don’t talk much, but I know a lot of girls call out your name because of me. Awesome."', "-Barney"], ['"Everyone has an opinion on how long it takes to recover from a breakup. "', "-Ted"], ['"I wound up shame-eating the whole pizza. I woke up all greasy and sweaty. My sheets looked like what they wrap Deli sandwiches in. Maybe I should join a gym. Do you go to a gym?"', "-Ted"], ['"There are a lot of little reasons why the big things in our lives happen."', "-Ted"], ['"Look, you can’t design your life like a building. It doesn’t work that way. You just have to live it… and it’ll design itself."', "-Lily"], ['"You can’t just skip ahead to where you think your life should be."', "-Lily"], ['"It’s just, eventually we’re all gonna move on. It’s called growing up."', "-Lily"], ['"There are two big days in any love story: the day you meet the girl of your dreams and the day you marry her."', "-Lily"], ['"It’s time to let go of the fantasies. It’s time to grow up."', "-Barney"], ['"The future is scary but you can’t just run back to the past because it’s familiar."', "-Robin"], ['"We gotta wait for the real thing, no matter how tough it gets."', "-Ted"], ['"In marriage, being right is less important than being supportive. Remember: Happy wife equals happy life."', "-Lily"], ['"I’ve never asked Lily to do anything “no questions asked” because I never wanted to. She’s the love of my life. I never keep anything from her."', "-Marshall"]
  var theQuote = "";
  var theChar = "";
  var theTweet = theQuote + " " + theChar;

  $("#getQuote").on("click", function() {
    var i = Math.floor(Math.random() * (quoArr.length));
    theQuote = quoArr[i][0];
    theChar = quoArr[i][1];
    theTweet = theQuote + " " + theChar;

  $("#tweet").on("click", function() {

  function tweetIt() {
    if (theQuote.length > 124) {
      theQuote = theQuote.slice(0, 124) + '...';
    }"" + theTweet);