Preudorandom Quote Generator

index.html

<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss' rel='stylesheet' type='text/css'>
<div class="container-fluid nopadding">
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#quotegenerator"><span class="glyphicon glyphicon-comment" ></span> QUOTE GENERATOR</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/0c71b9850b9dc6820c75" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="quotegenerator"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-md-12">
        <h2 class="font-effect-emboss">						Pseudorandom Quote Generator					</h2>
        <p class="c-btn">
        <a href="#" onclick="generateQuote();" class="trigger font-effect-neon">
          <span class="glyphicon glyphicon-comment responsive-glyph" ><br> GENERATE NEW QUOTE</span>
        </a>
        </p>
        <p id="output">
          Quote text output
        </p>
        <p class="actions">
          <a class="tweet-it font-effect-neon" target=_blank href="https://twitter.com/intent/tweet?text="><span class="glyphicon glyphicon-send"></span><br>Tweet the Quote</a>
        </p>
        <span class="credits font-effect-emboss">licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

JavascriptPseudorandomQuoteGen.markdown

Pseudorandom quote generator

Generator options: tweet generated quote.

A Pen by V on CodePen.

License.

script.js

$(document).ready(function(){
  generateQuote();
});

function generateQuote(){
  $(".responsive-glyph").addClass("animated bounce");
  var quotesList =[];
  quotesList[0] = "The supreme art of war is to subdue the enemy without fighting.<br>-Sun Tzu";
  quotesList[1] = "If you know the enemy and know yourself you need not fear the results of a hundred battles.<br>-Sun Tzu";
  quotesList[2] = "Victorious warriors win first and then go to war, while defeated warriors go to war first and then seek to win.<br>-Sun Tzu";
  quotesList[3] = "Be extremely subtle, even to the point of formlessness. Be extremely mysterious, even to the point of soundlessness. Thereby you can be the director of the opponent's fate.<br>-Sun Tzu";
  quotesList[4] = "Regard your soldiers as your children, and they will follow you into the deepest valleys; look on them as your own beloved sons, and they will stand by you even unto death.<br>-Sun Tzu";
  quotesList[5] = "Thus, what is of supreme importance in war is to attack the enemy's strategy.<br>-Sun Tzu";
  quotesList[6] = "Invincibility lies in the defence; the possibility of victory in the attack.<br>-Sun Tzu";
  quotesList[7] = "A good commander is benevolent and unconcerned with fame.<br>-Sun Tzu";
  quotesList[8] = "He who knows when he can fight and when he cannot, will be victorious.<br>-Sun Tzu";
  quotesList[9] = "If your opponent is of choleric temper, irritate him.<br>-Sun Tzu";
  quotesList[10] = "If ignorant both of your enemy and yourself, you are certain to be in peril.<br>-Sun Tzu";
  quotesList[11] = "If we know that our own men are in a condition to attack, but are unaware that the enemy is not open to attack, we have gone only halfway towards victory.<br>-Sun Tzu";
  quotesList[12] = "To see victory only when it is within the ken of the common herd is not the acme of excellence.<br>-Sun Tzu";
  var randomNumber = Math.floor(Math.random()*(12-0+1)+0);
  var output = quotesList[randomNumber];
  $("#output").html(output);
  var tweetLink = "https://twitter.com/intent/tweet?text=";
  var tweetLink = tweetLink.concat(output.replace("<br>"," "));
  var urlVar = "&url=http://codepen.io/rfprod/pen/EVJQgb";
  var tweetLink = tweetLink.concat(urlVar);
  $(".tweet-it").attr("href",tweetLink);
  return output;
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.home {background: transparent url('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/1203/full/abstract-electric-lights-tileable-textures-3.jpg') fixed center top / cover;min-height: 100vh;height: auto !important;margin-top: 0.95em;}
.nopadding {padding: 0;}
body {font-family: 'Play', sans-serif;font-size: 2.4em;}
.navbar-brand {font-size: 1em;}
.img-border {border-radius: 50%;height: 40vh;}
.sect {padding-top: 1em;}
.social-btn-blk {background-color: #000000;}
.social-btn-wht {background-color: #ffffff;}
.portfolio-item a{text-decoration:none;}
.preview{display:none; position:absolute;width:auto !important;height:7em;z-idex:100;}
.portfolio-item a img:hover{background-color:yellow;opacity:0.9;}
.portfolio-item a:hover + .preview,.preview:hover{display:inline-block;position:absolute;}
.portfolio-img {display:inline-block;height: 7em;z-idex:1;}
.portfolio-hover:{width:100%;height:100%;background:grey;}
.img-fit{width:100%;}
.c-btn{text-align:center;}
.trigger{dispay:block;text-align:center;}
.actions{text-align:center;}
.actions a{text-decoration:none;}
h2{text-align:center;margin-top:4em;margin-bottom:4em;}
p{margin-top:5em;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />