123

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.

            
              
<div  class="container container-center">
  
  <div class="row quote-icon">
    <div class="col-md-1 col-md-offset-1 text-left">
      <svg width="109px" height="89px" viewBox="0 0 188 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>left-quote</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Custom-Preset" transform="translate(-107.000000, -129.000000)" fill="#FF6060">
            <g id="left-quote" transform="translate(107.000000, 129.000000)">
                <path d="M138.362562,73.6826771 C143.894314,47.5007629 181.463235,22.8656936 181.463235,22.8656936 C181.463235,22.8656936 174.943626,0.338171534 171.443015,0.0173228271 C163.472496,-0.713215473 131.830571,21.7585974 115.909926,49.2042274 C103.738293,70.1869292 98.9412909,90.3641703 98.8379493,107.84627 C98.6735287,109.306226 98.5882353,110.817754 98.5882353,112.381784 C98.5882353,115.841873 99.0361289,119.203178 99.8801539,122.416819 C99.9190841,122.671422 99.9590365,122.925176 100,123.178075 C100.338811,125.269809 100.957248,126.854591 101.794313,127.980815 C108.326323,143.198218 124.129949,153.931123 142.588235,153.931123 C166.888764,153.931123 188,135.32885 188,112.381784 C188,100.766698 181.442586,81.3904715 171.207721,74.5028649 C162.055931,68.3441197 153.075721,70.7138487 138.362562,73.6826771 Z M39.7743265,73.7515538 C45.3060789,47.5696396 82.875,22.9345703 82.875,22.9345703 C82.875,22.9345703 76.3553908,0.407048211 72.8547794,0.0861995046 C64.8842605,-0.644338796 33.2423357,21.8274741 17.3216912,49.273104 C5.15005815,70.2558058 0.353055576,90.433047 0.24971403,107.915147 C0.0852933963,109.375103 0,110.88663 0,112.45066 C0,115.91075 0.447893575,119.272054 1.29191865,122.485695 C1.33084878,122.740299 1.37080125,122.994053 1.41176471,123.246951 C1.75057591,125.338686 2.36901301,126.923468 3.20607728,128.049691 C9.73808811,143.267094 25.5417138,154 44,154 C68.300529,154 89.4117647,135.397727 89.4117647,112.45066 C89.4117647,100.835575 82.8543504,81.4593482 72.6194853,74.5717416 C63.4676955,68.4129963 54.4874852,70.7827254 39.7743265,73.7515538 Z" id="Combined-Shape"></path>
            </g>
        </g>
    </g>
</svg>
    </div>
    <div class="col-md-2 col-md-offset-8 text-center buttons">
      
      <a href="https://twitter.com/share" id="tweet-btn" target="_blank">
        <button type="button" class="btn btn-default">Tweet</button>
      </a>
      
      <button id="new-btn" type="button" class="btn btn-default">New</button>
    </div>
         
  </div> <!-- end row-->
  <div class="row">
    <div class="col-md-10 col-md-offset-1 text-center">
      <h1 id="quote">
        
      </h1>
      <!-- test -->
    </div>  <!-- end column-->
  </div> <!-- end row-->
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <h3 id="name" class="text-right credit">
        
      </h3>
      <!-- test -->
    </div>  <!-- end column-->
  </div> <!-- end row-->
  <div class="row quote-icon">
    <div class="col-md-1 col-md-offset-10 text-right">
      <svg width="109px" height="89px" viewBox="0 0 188 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>right-quote</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Custom-Preset" transform="translate(-603.000000, -143.000000)" fill="#FF6060">
            <g id="right-quote" transform="translate(697.000000, 220.000000) rotate(-180.000000) translate(-697.000000, -220.000000) translate(603.000000, 143.000000)">
                <path d="M138.362562,73.6826771 C143.894314,47.5007629 181.463235,22.8656936 181.463235,22.8656936 C181.463235,22.8656936 174.943626,0.338171534 171.443015,0.0173228271 C163.472496,-0.713215473 131.830571,21.7585974 115.909926,49.2042274 C103.738293,70.1869292 98.9412909,90.3641703 98.8379493,107.84627 C98.6735287,109.306226 98.5882353,110.817754 98.5882353,112.381784 C98.5882353,115.841873 99.0361289,119.203178 99.8801539,122.416819 C99.9190841,122.671422 99.9590365,122.925176 100,123.178075 C100.338811,125.269809 100.957248,126.854591 101.794313,127.980815 C108.326323,143.198218 124.129949,153.931123 142.588235,153.931123 C166.888764,153.931123 188,135.32885 188,112.381784 C188,100.766698 181.442586,81.3904715 171.207721,74.5028649 C162.055931,68.3441197 153.075721,70.7138487 138.362562,73.6826771 Z M39.7743265,73.7515538 C45.3060789,47.5696396 82.875,22.9345703 82.875,22.9345703 C82.875,22.9345703 76.3553908,0.407048211 72.8547794,0.0861995046 C64.8842605,-0.644338796 33.2423357,21.8274741 17.3216912,49.273104 C5.15005815,70.2558058 0.353055576,90.433047 0.24971403,107.915147 C0.0852933963,109.375103 0,110.88663 0,112.45066 C0,115.91075 0.447893575,119.272054 1.29191865,122.485695 C1.33084878,122.740299 1.37080125,122.994053 1.41176471,123.246951 C1.75057591,125.338686 2.36901301,126.923468 3.20607728,128.049691 C9.73808811,143.267094 25.5417138,154 44,154 C68.300529,154 89.4117647,135.397727 89.4117647,112.45066 C89.4117647,100.835575 82.8543504,81.4593482 72.6194853,74.5717416 C63.4676955,68.4129963 54.4874852,70.7827254 39.7743265,73.7515538 Z" id="Combined-Shape"></path>
            </g>
        </g>
    </g>
</svg>
    </div>
  </div> <!-- end row-->
  <div class="row"> <!-- end row-->
    
  </div>


 </div> <!--end outer-container -->

 <footer class="footer">
   <div class="container text-center footer-content">
     <p>
       Designed by Jayce Rudig-Leathers - Quotes courtesy of <a href="https://quotesondesign.com">quotesondesign.com</a>
    </p>
   </div>
 </footer>
            
          
!
            
              body {
/*   background-color: #C47575; */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  background-color: #f5f5f5;
}

.footer-content {
  padding-top: 15px;
}


#quote {
  font-family: cursive;
}
.credit {
  font-family: serif;
}
.buttons {
  padding-top: 30px;
}
#quote {
    font-size: 20px;
  }
  #name {
    font-size: 20px;
  }
/* #left-quote, #right-quote {
  fill:red;
} */

@media (min-height: 350px) {
  .container-center {
  margin-top: 5%;
  }
  @media (min-width: 580px) {
      /* CSS stuff */

    body > .container {
/*     padding-top: 60px; */
  }

    #quote {
      font-size: 30px;
    }
    #name {
      font-size: 30px;
    }
  }
}

            
          
!
            
              $(document).ready( function() {
  getRandQuote();

  $("#new-btn").click(function() {
    getRandQuote();
    shiftColor();
});

  $("#tweet-btn").click(function() {
    $(this).attr("href", 'https://twitter.com/intent/tweet?text=' + $('#quote').text() + "- " + $('#name').text());
  });

});

function mycallback(quotes) {
  var post = quotes.shift(); // The data is an array of posts. Grab the first one.
  $('#name').text("- " + post.title);
  $('#quote').html(post.content);
}

function getRandQuote() {
  //JSONP workaround for Cross-origin error
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback&?callback=?");
}

function shiftColor() {
  var left = $('#left-quote');
  var right = $('#right-quote');
  //svg css properties not supported by default
  jQuery.Color.hook("fill color");
  left.animate({fill: $.Color(left.css('fill')).hue('+=30')}, 3000);
  right.animate({fill: $.Color(right.css('fill')).hue('+=30')}, 3000);
}

            
          
!
999px
🕑 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.

Console