css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              
<link href='https://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Trirong' rel='stylesheet' type='text/css'>

<div class="container">
      <h1 class="title"><em>
      Inspirational Quotes by Women</em></h1>
  
  <img class="center-block wise-woman" src="http://letgoletgoddess.com/wp-content/uploads/2015/04/woman_moon.jpg"/>
  
    <div class="row">
      <div class ="col-sm-12">
    <div class="quote-box"><p id="quote">"When women reassert their relationship with the wildish nature, they are gifted with a permanent and internal watcher, a knower, a visionary, an oracle, an inspiratrice, an intuitive, a maker, a creator, an inventor, and a listener who guide, suggest, and urge vibrant life in the inner and outer world."                      - Clarissa Pinkola Estes</p>
    </div>  
  </div>
  </div>
    
     
    <div><button class="new-quote btn btn-secondary btn-lg" onclick="getQuote();">New Quote</button>
      <br>
      <br>
        <a href="#" class="tweet btn btn-secondary" id="twitter">Tweet</a>
  </div>
      <div class="footer">coded by Mimi</div>
  </div>

            
          
!
            
              .quote-box {
  height: 450px;
  width: 700px;
  margin: auto;
  margin-top: 10px;
  font-family: 'Trirong', serif;
  
}
.new-quote {  
  
  width: 160px; 
    height: 40px;;    
    background-color: #ffccff;
  font-family: Verdana;  
  text-align: center;
  font-size: 17px;
  top: 80%;
  left: 30%;
  opacity: 1;
  padding-bottom: 20px;
     
 }
.tweet {
  background-color: #ffccff;
  
  font-family: Verdana;
  color: black;
}

.btn:hover {
  background-color: #ffddff;
}
  
h1 {
  text-align: center;
  padding: 40px;
  
}

.title {
  font-family: Bad Script;
  font-size: 60px;
}
#quote {
  font-size: 30px;
}
.footer {
  float: right;
  color: #ffffff;
  font-size: 15px;
  margin-top: 50px;
}
.wise-woman {
  opacity: .5;
    /* Set rules to fill background */
  min-height: 100%;
  min-width: 1000px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index:-10;/*to put the background img behind the link tag to get the link to work*/
}

@media screen and (max-width: 1000px) { /* Specific to this particular image */
  /
img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
  
  
  
  
  
  
            
          
!
            
              $(document).ready(function() {
var randomQuote;
  var random;
function getQuote() {
  var quotes = ["\"When we do the best we can, we never know what miracle is wrought in our life, or in the life of another.\"        -Helen Keller",
"\"Numbing the pain for a while will only make it worse when you finally feel it\"                  -J. K. Rowling",
"\"Any woman who understands the problems of running a home will be nearer to understanding the problems of running a country.\”         – Margaret Thatcher",
"\“If you obey all the rules, you miss all the fun.\”                – Katharine Hepburn",
"\“Life is not measured by the number of breaths we take, but by the moments that take our breath away.\”                                  – Maya Angelou",
"\“Being an intellectual creates a lot of questions and no answers. You can fill your life up with ideas and still go home lonely. All you really have that really matters are feelings. That’s what music is to me.\”                                                          – Janis Joplin",
"\“Life shrinks or expands in proportion to one’s courage.\”          – Anais Nin",
"\“Whatever you do, be different – that was the advice my mother gave me, and I can’t think of better advice for an entrepreneur. If you’re different, you will stand out.\”                              – Anita Roddick",
"\“A lot of people are afraid to say what they want. That’s why they don’t get what they want.\”                                           – Madonna",
"\“A woman is like a tea bag – you never know how strong she is until she gets in hot water.\”                                      – Eleanor Roosevelt",
"\“I know God will not give me anything I can’t handle. I just wish that He didn’t trust me so much.\”                                  – Mother Teresa",
"\“Destiny is a name often given in retrospect to choices that had dramatic consequences.\”                                            – J. K. Rowling",
"\“I could not, at any age, be content to take my place by the fireside and simply look on. Life was meant to be lived. Curiosity must be kept alive. One must never, for whatever reason, turn his back on life.\”                                                     – Eleanor Roosevelt",
"\“The day will come when men will recognize woman as his peer, not only at the fireside, but in councils of the nation. Then, and not until then, will there be the perfect comradeship, the ideal union between the sexes that shall result in the highest development of the race.\”                                                           – Susan B. Anthony",
"\“We ask justice, we ask equality, we ask that all the civil and political rights that belong to citizens of the United States, be guaranteed to us and our daughters forever.\”                        – Susan B. Anthony",
"\“I’ve come to believe that each of us has a personal calling that’s as unique as a fingerprint – and that the best way to succeed is to discover what you love and then find a way to offer it to others in the form of service, working hard, and also allowing the energy of the universe to lead you.\”                                – Oprah Winfrey",
"\“It was we, the people; not we, the white male citizens; nor yet we, the male citizens; but we, the whole people, who formed the Union…. Men, their rights and nothing more; women, their rights and nothing less.\”                                                      – Susan B. Anthony",
"\“A strong woman understands that the gifts such as logic, decisiveness, and strength are just as feminine as intuition and emotional connection. She values and uses all of her gifts.\”        – Nancy Rathburn",
"\“A woman is the full circle. Within her is the power to create, nurture and transform.\”                                             – Diane Mariechild",
"\“I want to do it because I want to do it. Women must try to do things as men have tried. When they fail, their failure must be but a challenge to others.\”                                             – Amelia Earhart",
"\“Just watch, all of you men. I’ll show you what a woman can do…I’ll go across the country, I’ll race to the Moon… I’ll never look back.\”                                                             – Edna Gardner Whyte",
"\“The best protection any woman can have … is courage.\”             – Elizabeth Cady Stanton",
"\“We must believe that we are gifted for something, and that this thing, at whatever cost, must be attained.\”                         – Marie Curie", 
"\“Because I am a woman, I must make unusual efforts to succeed. If I fail, no one will say, “She doesn’t have what it takes.” They will say, “Women don’t have what it takes.\”                              – Clare Boothe Luce",
"\“The way in which we think of ourselves has everything to do with how our world see us and how we see ourselves successfully acknowledged by the world.\”                                         – Arlene Rankin",
"\“Love is anterior to Life, Posterior to Death, Initial of Creation, and The Exponent of Earth.\”                               – Emily Dickinson",
"\“The question isn’t who’s going to let me; it’s who is going to stop me.\”                                                            – Ayn Rand",
"\“People think at the end of the day that a man is the only answer [to fulfillment]. Actually a job is better for me.\”                  – Princess Diana",
"\“If you look at what you have in life, you’ll always have more. If you look at what you don’t have in life, you’ll never have enough.\”                                                                     – Oprah Winfrey",
"\“Whatever women do they must do twice as well as men to be thought half as good. Luckily, this is not difficult.\”                      – Charlotte Whitton",
"\“The most common way people give up their power is by thinking they don’t have any.\”                                              – Alice Walker",
"\“One likes people much better when they’re battered down by a prodigious siege of misfortune than when they triumph.\”             – Virginia Woolf",

"\“You may encounter many defeats, but you must not be defeated. In fact, it may be necessary to encounter the defeats, so you can know who you are, what you can rise from, how you can still come out of it.\”                                                               – Maya Angelou",
"\“Women are never stronger than when they arm themselves with their weaknesses.\”                                                        – Madame Marie du Deffand",
"\“When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us.\”                                                – Helen Keller",
"\“When you lose a couple of times, it makes you realize how difficult it is to win.\”                                           – Steffi Graf",
"\“You take your life in your own hands, and what happens? A terrible thing, no one to blame.\”                                    – Erica Jong",
"\“You move totally away from reality when you believe that there is a legitimate reason to suffer.\”                                      – Byron Katie",
"\“Courage is like a muscle. We strengthen it by use.\”                – Ruth Gordon",
"\“Always go with the choice that scares you the most, because that’s the one that is going to require the most from you.\”        – Caroline Myss",
"\“Stop wearing your wishbone where your backbone ought to be.\”     – Elizabeth Gilbert",
"\“One of the most courageous things you can do is identify yourself, know who you are, what you believe in and where you want to go.\”                                                             – Sheila Murray Bethel",
"\“It takes a great deal of courage to stand up to your enemies, but even more to stand up to your friends.\”                             – J. K. Rowling",
"\“Taking joy in living is a woman’s best cosmetic.\”                 – Rosalind Russell",
"\“Woman must not accept; she must challenge. She must not be awed by that which has been built up around her; she must reverence that woman in her which struggles for expression.\”                        – Margaret Sanger",

"\“A woman with a voice is by definition a strong woman. But the search to find that voice can be remarkably difficult.\”             – Melinda Gates",
"\“You can have unbelievable intelligence, you can have connections, you can have opportunities fall out of the sky. But in the end, hard work is the true, enduring characteristic of successful people.\”      – Marsha Evans",

"\“A man’s got to do what a man’s got to do. A woman must do what he can’t.\”                                                             – Rhonda Hansome",
"\“You have to have confidence in your ability, and then be tough enough to follow through.\”                                           – Rosalynn Carter",
"\“One is not born, but rather becomes, a woman.\”                   – Simone de Beauvoir",
"\"Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has.\"  - Margaret Mead",

"\"Every daring attempt to make a great change in existing conditions, every lofty vision of new possibilities for the human race, has been labeled Utopian.\"                                    - Emma Goldman",
"\"The most violent element in society is ignorance.\"                - Emma Goldman",
"\"I hope you will go out and let stories happen to you, and that you will work them, water them with your blood and tears and your laughter till they bloom, till you yourself burst into bloom.\"      - Clarissa Pinkola Estes",

"\"When women reassert their relationship with the wildish nature, they are gifted with a permanent and internal watcher, a knower, a visionary, an oracle, an inspiratrice, an intuitive, a maker, a creator, an inventor, and a listener who guide, suggest, and urge vibrant life in the inner and outer world.\"                        - Clarissa Pinkola Estes", 
 "\"Like trees who share the same root system, we are but individual expressions of the greater whole. When we raise a revolution in our personal psyche, we are serving the quickening of collective consciousness.\"                                                      - Toko-pa Turner",
"\"While others are anxious to see you arrive, I praise your vast withstanding of the uncertainty from which all meaning is born.\" <br>  - Toko-pa Turner",
 "\"It helps to think of more than ourselves. It helps to see the earth workers, the artists, the mothers, the lovers, the singers, the poets and dreamers as threads in a web. By ourselves we are fragile strands, songs with no listeners, but together we are a relentless network. Wherever there is depression, there is colour made vivid by the grey.\"                                            - Toko-pa Turner",
 "\“The seduction in the wake of betrayal is to take up a thicker armour, to practice at expecting less of others, or to punish one’s own naïveté. But these are the same refusals from which our world is dying. Never should a judgement be made against one’s willingness to open the heart.\”                                                     - Toko-pa Turner"];
  
   random = [Math.floor(Math.random() * quotes.length)];
   randomQuote = quotes[random];
  
  $("#quote").text(randomQuote);
  
}

/*function tweetWindow() {
    window.open("https://twitter.com/intent/tweet");
}*/

$('.new-quote').on("click", function() {
  getQuote();
});

  $('#twitter').on("click", function() {
    window.open("https://twitter.com/intent/tweet?text="+randomQuote);
      });
});

                  
             


            
          
!
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.
Loading ..................

Console