Motivational Quote Generator

index.html

//
  Google Fonts link:
  https://developers.google.com/fonts/docs/getting_started
  Twitter button:
  https://about.twitter.com/resources/buttons
  Share codes:
  https://simplesharebuttons.com/html-share-buttons/

link(href='https://fonts.googleapis.com/css?family=Tangerine:700|Dancing+Script|Lora|Alegreya', rel='stylesheet', type='text/css')

html
  head
    title Motivational Quote Generator
    
  body
    h1 Motivational Quote Generator
          p#pTop
            | The following quotes have helped many move forward in one way or another.
          p
            | Repetition improves memory. Hence, I have set a limited number of quotes that will be randomly displayed.
          p#pBottom
            | Come back to this generator daily, to get the inspiration necessary to make the changes you want in your life.
          button.btn.btn-success.btn-lg(type='button') New Quote
          .quote
            span.saying
            br
            span.author
          hr.intro-divider
          p Share this page with the world:
          .col-sm-12
            ul.list-inline.intro-social-buttons
              li
                a.twitter-share-button(href='https://twitter.com/share', {count}='', data-url='http://codepen.io/Jean13/full/qbOvEe/', data-text='Daily Motivational Quotes!', data-hashtags='motivational') Tweet
                script.
                  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
              li
                a(href='http://www.facebook.com/sharer.php?u=http://codepen.io/Jean13/full/qbOvEe/', target='_blank')
                  img.img-responsive(src='http://www.giftingnest.com/skin/frontend/shoptimize/default/images/facebook-share.png')
              li
                a(href='http://www.linkedin.com/shareArticle?mini=true&url=http://codepen.io/Jean13/full/qbOvEe/', target='_blank')
                  img.img-responsive(src='http://letslunch.com/images/linkedin-small.png')
              li
                a.btn.btn-block.btn-social-icon.btn-reddit(href='http://reddit.com/submit?url=http://codepen.io/Jean13/full/qbOvEe/', role='button')
                  span.fa.fa-reddit
                  

Motivational Quote Generator.markdown

Motivational Quote Generator

A random quote generator with multiple sharing functions.

A Pen by Jean on CodePen.

License.

script.js

$(document).ready(function() {
  generate();

  function generate() {
    var quotes = ["Doubt kills more dreams than failure ever will.@~Suzy Kassem", "Fear profits a man nothing.@~The 13th Warrior", "Things may come to those who wait, but only the things left by those who hustle.@~Abraham Lincoln", "Let your rapidity be that of the wind, your compactness that of the forest. In raiding and plundering be like fire, in immovability like a mountain. Let your plans be dark and impenetrable as night, and when you move, fall like a thunderbolt.@~Sun Tzu", "I attribute my good condition to my almost reckless independence in determining for myself what to do and the rigid adhering to regulations which give me the maximum of rest and quiet and leisure, and I am being richly paid for it every day.@~John D. Rockefeller", "Intensity is the price of excellence.@~Warren Buffett", "He that is good for making excuses is seldom good for anything else.@~Benjamin Franklin", "A penny saved is a penny earned.@~Benjamin Franklin", "I do not think that there is any other quality so essential to success of any kind as the quality of perseverance. It overcomes almost everything, even nature.@John D. Rockefeller", "There is nothing impossible to him who will try.@~Alexander The Great", "Every man is the artisan of his own fortune.@~Appius Claudius Caecus", "Courage is the first of human qualities because it is the quality which guarantees the others.@~Aristotle", "History is made by those who have dreams and the courage and determination to realize them.@~Jean Gonzalez (that's me!)", "If you stumble, make it part of the dance.@~Unknown"];

    randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
    quoteAuthor = randomQuote.split("@");
    $('.saying').text(quoteAuthor[0]);
    $('.author').text(quoteAuthor[1]);
  }

  $(".btn").on("click", function() {
    generate();
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitterlib.js/1.0.8/twitterlib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/oj.TwitterButton/0.0.4/oj.TwitterButton.min.js"></script>

style.css

body {
  text-align: center;
  width: 800px;
  margin: 0px auto;
}

h1 {
  font-family: 'Tangerine', cursive;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

p {
  font-family: 'Lora', seriff;
  font-size: 14px;
  text-shadow: 0px 0px 0px;
  
}

#pTop {
  margin-top: 3%;
}

#pBottom {
  margin-bottom: 3%;
}

.btn {
  font-family: 'Alegreya';
  text-align: center;
  font-size: 30px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  margin-bottom: 2%;
}

.quote {
  font-family: 'Dancing Script';
  font-size: 22px;
  width: 800px;
  height: auto;
  margin: 0 auto;
  padding: 20px;
  border-radius: 20px;
  box-shadow: -10px 10px 10px rgba(100, 100, 100, .8);
}

.author {
  font-family: 'Lora';
  font-size: 20px;
  font-style: italic;
}

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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/css-social-buttons/1.1.1/css/zocial.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />