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.

            
              <head>
  <title>Random Quote Machine - Free Code Camp</title>
</head>

<body>
<div class="container text-center">
	  <h1>Your Daily Dose of Inspiration</h1>
	
   <div class="btn btn-blue text-centre" id="tweetBtn" target="_blank"><span class="fa fa-twitter"></span> Tweet
 </div>
		
		<div class="btn btn-blue text-centre" id="new-quote" target="_blank"><span class="fa fa-chevron-right"></span> Get inspired
  </div>
</div> 

<div class="quotes text-center">
			<span class="quote"></span><br>
  <div class="divider text-center"></div>
      <span class="author"></span>
</div>	

 <footer class="navbar-fixed-bottom text-center">
		  <div class="fixfooter">
			<p> A CodePen by Linda Kovacs 2017</p>
           <!--<div class="btn btn-blue text-centre" id="footer">By Linda Kovacs 2017</div> -->
   </div>
    </footer>

</body>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');
* {
    margin: 0px;
    padding: 2px;
}

.container{
  text-align:center;
}

h1{
  font-size: 40px;
  font-family: 'Great Vibes', cursive;
  color: #ffffff;
  display:block;
  text-align: center;
  width: 80%;
  margin: 0px auto;
  padding: 30px 0;
  }
a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}
p{
  font-weight: bold;
  color: #ffffff;
}
.a {
    text-decoration:none;
}

.btn-blue {
	background-color: #3861EC;
	color: #fff;
	border: none;
	text-decoration:none;
}


body {
      background: url('http://www.nyantler-outdoors.com/images/aged-parchment.jpg') no-repeat center center fixed;  
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.quotes {
	font-family: 'Alex Brush', cursive;
    font-size: 30px;
    font-weight: bold;
    margin: 30px auto;
    position: relative;
    width: 40%;
}

.author {
	font-family: 'Alex Brush', cursive;
    font-size: 25px;
    font-weight: bold;
    margin: 50px auto; 
    width: 40%;
    position: relative;
}

.divider {
  height: 0.5px;
  width: 10%;
  margin: 0 auto;
  margin-top: 10px;
  opacity: 0.5;
  position: relative;
  background-color: #000000;
}
            
          
!
            
                $(document).ready(function() {
	generate();

  function generate(){
    var quotes = [
	'If you want to achieve greatness stop asking and for permission. - Anonymous',
	'Things work out best for those who make the best of how things work out. - John Wooden',
	'To live a creative life, we must lose our fear of being wrong. - Anonymous',
	'If you are not willing to risk the usual you will have to settle for the ordinary. - Jim Rohn',
	'Trust because you are willing to accept the risk, not because it\'s safe or certain. - Anonymous',
	'Take up one idea. Make that one idea your life: think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. - Swami Vivekananda',
	'All our dreams can come true if we have the courage to pursue them. - Walt Disney',
	'Good things come to people who wait, but better things come to those who go out and get them. - Anonymous',
	'If you do what you always did, you will get what you always got. - Anonymous',
	'Success is walking from failure to failure with no loss of enthusiasm. - Winston Churchill',
	'Just when the caterpillar thought the world was ending, he turned into a butterfly. - Proverb',
	'Successful entrepreneurs are givers and not takers of positive energy. - Anonymous',
	'Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them. - Vaibhav Shah',
	'Opportunities don\'t happen, you create them. - Chris Grosser',
	'Try not to become a person of success, but rather try to become a person of value. - Albert Einstein',
	'Great minds discuss ideas; average minds discuss events; small minds discuss people. - Eleanor Roosevelt',
	'I have not failed. I\'ve just found 10,000 ways that won\'t work. - Thomas A. Edison',
	'If you don\'t value your time, neither will others. Stop giving away your time and talents: start charging for it. - Kim Garst',
	'A successful man is one who can lay a firm foundation with the bricks others have thrown at him. - David Brinkley',
	'No one can make you feel inferior without your consent. - Eleanor Roosevelt',
	'The whole secret of a successful life is to find out what is one\'s destiny to do, and then do it. - Henry Ford',
	'If you\'re going through hell keep going. - Winston Churchill',
	'The ones who are crazy enough to think they can change the world, are the ones who do. - Anonymous',
	'Don\'t raise your voice, improve your argument. - Anonymous',
	'What seems to us as bitter trials are often blessings in disguise. - Oscar Wilde',
	'The meaning of life is to find your gift. The purpose of life is to give it away. - Anonymous',
	'The distance between insanity and genius is measured only by success. - Bruce Feirstein',
	'When you stop chasing the wrong things, you give the right things a chance to catch you. - Lolly Daskal',
	'I believe that the only courage anybody ever needs is the courage to follow your own dreams. - Oprah Winfrey',
	'No masterpiece was ever created by a lazy artist. - Anonymous',
	'Happiness is a butterfly, which when pursued, is always beyond your grasp, but which, if you will sit down quietly, may alight upon you. - Nathaniel Hawthorne',
	'If you can\'t explain it simply, you don\'t understand it well enough. - Albert Einstein',
	'Blessed are those who can give without remembering and take without forgetting. - Anonymous',
	'Do one thing every day that scares you. - Anonymous',
	'What\'s the point of being alive if you don\'t at least try to do something remarkable. - Anonymous',
	'Life is not about finding yourself. Life is about creating yourself. - Lolly Daskal',
	'Nothing in the world is more common than unsuccessful people with talent. - Anonymous',
	'Knowledge is being aware of what you can do. Wisdom is knowing when not to do it. - Anonymous',
	'Your problem isn\'t the problem. Your reaction is the problem. - Anonymous',
	'You can do anything, but not everything. - Anonymous',
	'Innovation distinguishes between a leader and a follower. - Steve Jobs',
	'There are two types of people who will tell you that you cannot make a difference in this world: those who are afraid to try and those who are afraid you will succeed. - Ray Goforth',
	'Thinking should become your capital asset, no matter whatever ups and downs you come across in your life. - A.P.J. Abdul Kalam',
	'I find that the harder I work, the more luck I seem to have. - Thomas Jefferson',
	'The starting point of all achievement is desire. - Napoleon Hill',
	'Success is the sum of small efforts, repeated day in and day out. - Robert Collier',
	'If you want to achieve excellence, you can get there today. As of this second, quit doing less than excellent work. - Thomas J. Watson',
	'All progress takes place outside the comfort zone. - Michael John Bobak',
	'You may only succeed if you desire succeeding; you may only fail if you do not mind failing. - Philippos',
	'Courage is resistance to fear, mastery of fear: not absence of fear. - Mark Twain',
	'Only put off until tomorrow what you are willing to die having left undone. - Pablo Picasso',
	'People often say that motivation doesn\'t last. Well, neither does bathing: that\'s why we recommend it daily. - Zig Ziglar',
	'We become what we think about most of the time, and that\'s the strangest secret. - Earl Nightingale',
	'The only place where success comes before work is in the dictionary. - Vidal Sassoon',
	'Too many of us are not living our dreams because we are living our fears. - Les Brown',
	'I find that when you have a real interest in life and a curious life, that sleep is not the most important thing. - Martha Stewart',
	'It\'s not what you look at that matters, it\'s what you see. - Anonymous',
	'The road to success and the road to failure are almost exactly the same. - Colin R. Davis',
	'The function of leadership is to produce more leaders, not more followers. - Ralph Nader',
	'Success is liking yourself, liking what you do, and liking how you do it. - Maya Angelou',
	'As we look ahead into the next century, leaders will be those who empower others. - Bill Gates',
	'A real entrepreneur is somebody who has no safety net underneath them. - Henry Kravis',
	'The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself. - Mark Caine',
	'People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self fulfilling prophecy. - Tony Robbins',
	'When I dare to be powerful, to use my strength in the service of my vision, then it becomes less and less important whether I am afraid. - Audre Lorde',
	'Whenever you find yourself on the side of the majority, it is time to pause and reflect. - Mark Twain',
	'The successful warrior is the average man, with laser like focus. - Bruce Lee',
	'There is no traffic jam along the extra mile. - Roger Staubach',
	'Develop success from failures. Discouragement and failure are two of the surest stepping stones to success. - Dale Carnegie',
	'If you don\'t design your own life plan, chances are you\'ll fall into someone else\'s plan. And guess what they have planned for you? Not much. - Jim Rohn',
	'If you genuinely want something, don\'t wait for it: teach yourself to be impatient. - Gurbaksh Chahal',
	'Don\'t let the fear of losing be greater than the excitement of winning. - Robert Kiyosaki',
	'If you want to make a permanent change, stop focusing on the size of your problems and start focusing on the size of you! - T. Harv Eker',
	'You can\'t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something: your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life. - Steve Jobs',
	'Two roads diverged in a wood and I  took the one less traveled by, and that made all the difference. - Robert Frost',
	'The number one reason people fail in life is because they listen to their friends, family, and neighbors. - Napoleon Hill',
	'The reason most people never reach their goals is that they don\'t define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them. - Denis Waitley',
	'In my experience, there is only one motivation, and that is desire. No reasons or principle contain it or stand against it. - Jane Smiley',
	'Success does not consist in never making mistakes but in never making the same one a second time. - George Bernard Shaw',
	'I don\'t want to get to the end of my life and find that I lived just the length of it. I want to have lived the width of it as well. - Diane Ackerman',
	'You must expect great things of yourself before you can do them. - Michael Jordan',
	'Motivation is what gets you started. Habit is what keeps you going. - Jim Ryun',
	'People rarely succeed unless they have fun in what they are doing. - Dale Carnegie',
	'There is no chance, no destiny, no fate, that can hinder or control the firm resolve of a determined soul. - Ella Wheeler Wilcox',
	'Our greatest fear should not be of failure but of succeeding at things in life that don\'t really matter. - Francis Chan',
	'You\'ve got to get up every morning with determination if you\'re going to go to bed with satisfaction. - George Lorimer',
	'A goal is not always meant to be reached; it often serves simply as something to aim at. - Bruce Lee',
	'Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others. - John C. Maxwell',
	'Be miserable. Or motivate yourself. Whatever has to be done, it\'s always your choice. - Wayne Dyer',
	'To accomplish great things, we must not only act, but also dream, not only plan, but also believe. - Anatole France',
	'Most of the important things in the world have been accomplished by people who have kept on trying when there seemed to be no help at all. - Dale Carnegie',
	'You measure the size of the accomplishment by the obstacles you had to overcome to reach your goals. - Booker T. Washington',
	'Real difficulties can be overcome; it is only the imaginary ones that are unconquerable. - Theodore N. Vail',
	'It is better to fail in originality than to succeed in imitation. - Herman Melville',
	'What would you do if you weren\'t afraid. - Spencer Johnson',
	'Little minds are tamed and subdued by misfortune; but great minds rise above it. - Washington Irving',
	'Failure is the condiment that gives success its flavor. - Truman Capote',
	'Don\'t let what you cannot do interfere with what you can do. - John R. Wooden',
	'You may have to fight a battle more than once to win it. - Margaret Thatcher',
	'A man can be as great as he wants to be. If you believe in yourself and have the courage, the determination, the dedication, the competitive drive and if you are willing to sacrifice the little things in life and pay the price for the things that are worthwhile, it can be done. - Vince Lombardi'
	];
	    
	randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
	
    quoteAuthor=randomQuote.split("-");
		quote = $('.quote').text(quoteAuthor[0]);
		author = $('.author').text(quoteAuthor[1]);
}
   
 $('#tweetBtn').on('click', function(){    window.open('https://twitter.com/intent/tweet?text='+ randomQuote + ' | A CoDePen by LindaKovacs 2017', 'Share', 'width=700, height=500, toolbar=0, scrollbars=1, location=0, statusbar=0, menubar=0, resizable=1');
 });
   
	$("#new-quote").on("click", function() {
		generate();
	});  
	  
});
	  

            
          
!
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