Pen Settings

HTML

CSS

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

JavaScript

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

Packages

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.

Behavior

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.

HTML

              
                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Inspired Women Quotes</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body background="http://www.themesrefinery.net/wp-content/uploads/2014/06/website-background-images-for-287671.jpg">
  <div id="container">
    <h2>Get Inspired</h2>
     <div id="buttonContainer">
      <a href="#" id="quoteButton">Inspire Me</a>
    </div>
    <div id="quoteContainer">
      <p></p>
      <p id="quoteInspire"></p>
    </div>

   


  </div>
</body>

</html>
              
            
!

CSS

              
                <style> 

#container {
  width: 500px;
  margin: 70px auto;
  padding: 1px;
  width: 100%;
}

#container h2 {
  text-align: center;
  color: #FFFFFF;
  font: italic small-caps bolder 100px cursive;
}

#quoteContainer {
  width: 75%;
  background: #ffff;
  padding: 10px;
  margin: 50px auto;
  text-align: center;
  height: 90px;
}

#buttonContainer {
  text-align: center;
  font-size: 30px ;
}

#quoteButton {
  width: 200px;
  margin-top: 1px;
  border: 2px solid #FFF;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: bold;
  padding: 1px;
  text-decoration: none;
  text-align: center;
}

p{
  color:white;
  text-align:center;
  font-size:20px;
}
#quoteButton:hover {
  cursor: pointer;
  background: #87CEFA;
  color: white;
}

#quoteButton:active {
  cursor: pointer;
}

#quoteButton {
  display: inline-block;
}

#quoteInspire {
  text-align: center;
}

</style>
              
            
!

JS

              
                $(document).ready(function() {
  var quoteSource = [{
      quote: "No one can make you feel inferior without your consent.",
      name: "Eleanor Roosevelt, former First Lady"
    }, {
      quote: "You are more powerful than you know; you are beautiful just as you are.",
      name: "Melissa Etheridge"
    }, {
      quote: "A woman is the full circle. Within her is the power to create, nurture and transform.",
      name: "Diane Mariechild"
    }, {
      quote: "Don’t be afraid to speak up for yourself. Keep fighting for your dreams!",
      name: "Gabby Douglas"
    }, {
      quote: "The most effective way to do it, is to do it.",
      name: "Amelia Earhart"
    }, {
      quote: "The power you have is to be the best version of yourself you can be, so you can create a better world.",
      name: "Ashley Rickards"
    }, {
      quote: "It took me quite a long time to develop a voice, and now that I have it, I am not going to be silent.",
      name: "Madeleine Albright"
    }, {
      quote: "Forget about the fast lane. If you really want to fly, just harness your power to your passion",
      name: "Oprah Winfrey"
    }, {
      quote: "Life is not measured by the number of breaths we take, but by the moments that take our breath away.",
      name: "Maya Angelou"
    }, {
      quote: "Courage is like a muscle. We strengthen it by use.",
      name: "Ruth Gordo"
    }, {
      quote: "Power is not given to you. You have to take it.",
      name: "Beyonce Knowles"
    }, {
      quote: "We can do no great things, only small things with great love.",
      name: "Mother Teresa"
    }, {
      quote: "Don’t be intimidated by what you don’t know. That can be your greatest strength and ensure that you do things differently from everyone else.",
      name: "Sara Blakely"
    }, {
      quote: "You have what it takes to be a victorious, independent, fearless woman.",
      name: "Tyra Banks"
    }, {
      quote: "Do you want to meet the love of your life? Look in the mirror.",
      name: "Byron Katie"
    }, {
      quote: "The question isn’t who’s going to let me; it’s who is going to stop me.",
      name: "Ayn Rand"
    }, {
      quote: "Success is getting what you want, happiness is wanting what you get.",
      name: "Ingrid Bergman"
    }, {
      quote: "The most common way people give up their power is by thinking they don’t have any.",
      name: "Alice Walker"
    }, {
      quote: "No matter what you look like or think you look like you’re special and loved and perfect just the way you are.",
      name: "Ariel Winter"
    }, {
      quote: "And the trouble is, if you don’t risk anything, you risk more.",
      name: "Erica Jong"
    }, {
      quote: "I never dreamed about success. I worked for it.",
      name: "Estée Lauder"
    }, {
      quote: "Hapiness is not something ready made. It comes from your own actions.",
      name: "Dalai Lama"
    }, {
      quote: "Yes, I’m a feminist, because I see all women as smart, gifted, and tough.",
      name: "Zaha Hadid"
    }, {
      quote: "I’m not afraid of storms, for I’m learning to sail my ship.",
      name: "Louisa May Alcott"
    }, {
      quote: "Don’t be the girl who fell. Be the girl who got back up.",
      name: "Jenette Stanley"
    },{
      quote:"Option A is not available. So let’s kick the sh** out of option B.",
      name:"Facebook COO Sheryl Sandberg"
    },{
      quote:"Aerodynamically the bumblebee shouldn’t be able to fly, but the bumblebee doesn’t know that so it goes on flying anyway.",
      name:"Mary Kay Ash"
    },{
      quote:"The difference between successful people and others is how long they spend time feeling sorry for themselves.",
      name:"Barbara Corcoran, real estate magnate and ‘Shark Tank’ investor"
    },{
      quote:"We need to accept that we won’t always make the right decisions, that we’ll screw up royally sometimes -- understanding that failure is not the opposite of success, it’s part of success.",
      name:"Arianna Huffington"
    },{
      quote:"Far away there in the sunshine are my highest aspirations. I may not reach them, but I can look up and see their beauty, believe in them, and try to follow where they lead.",
      name:"Louisa May Alcott"
    },{
      quote:"Don't compromise yourself. You are all you've got.",
      name:"Janis Joplin"
    },{
      quote:"Something which we think is impossible now is not impossible in another decade.",
      name:"Constance Baker Motley, The First Black Woman in the U.S. to become a Federal Judge"
    },{
      quote:"It is only when we truly know and understand that we have a limited time on Earth and that we have no way of knowing when our time is up that we will begin to live each day to the fullest, as if it were the only one we had.",
      name:"Elisabeth Kubler-Ross"
    },{
      quote:"Everyone has inside of her a piece of good news. The good news is that you don’t know how great you can be! How much you can love! What you can accomplish! And what your potential is!",
      name:"Anne Frank"
    },{
      quote:"Always concentrate on how far you have come, rather than how far you have left to go. The difference in how easy it seems will amaze you.",
      name:"Heidi Johnson"
    }                 

  ];
  $('#quoteButton').click(function(evt){
			
			var quote = $('#quoteContainer p').text();
			var quoteInspire = $('#quoteInspire').text();
			
			evt.preventDefault();
			
			var sourceLength = quoteSource.length;
			var randomNumber= Math.floor(Math.random()*sourceLength);
			
			for(i=0;i<=sourceLength;i+=1){
			var newQuoteText = quoteSource[randomNumber].quote;
			var newQuoteInspire = quoteSource[randomNumber].name;
	
      var timeAnimation = 500;
      var quoteContainer = $('#quoteContainer');
      quoteContainer.fadeOut(timeAnimation, function(){
        quoteContainer.html('');
				quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'-								'+newQuoteInspire+'</p>');
        
        quoteContainer.fadeIn(timeAnimation);
      });  
			
			break;
		};
	
	});
		
		
});



              
            
!
999px

Console