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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container-fluid">
  <link href="https://fonts.googleapis.com/css?family=Great Vibes" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

  <h1 class="title margin-top"><b>Gloria Steinem</b></h1>
  <img src="http://jewishcurrents.org/wp-content/uploads/2013/03/gloria-steinem-author-publicity-photo-hi-res.jpg" alt="Gloria Steinem smiling at the camera." class="img-responsive blue-border title-image"></img>

  <p class="whosheis text-center">Gloria Steiner is an American feminist organizer, political activist, writer, editor and lecturer. She is particularly interested in the shared origins of sex and race caste systems, gender roles and child abuse as roots of violence, non-violent conflict
    resolution, the cultures of indigenous peoples, and organizing across boundaries for peace and justice.
  </p>

  <p class="quote text-center">"A woman without a man is like a fish without a bicycle".</p>

  <div class="row">
    <div class="col-xs-4">
      <h2 class="title-paragraph text-center">Early life</h2>
    </div>
    <div class="col-xs-4">
      <h2 class="title-paragraph text-center">Journalism career</h2>
    </div>
    <div class="col-xs-4">
      <h2 class="title-paragraph text-center">Activism</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-4">
      <p class="text-paragraph text-center">Gloria Steiner was born on March 25th 1934, in Toledo, Ohio. She spent some time of her childhood travelling with her parents in a trailer. They divorced when Gloria was ten mostly because of her mom's illness. After it, in 1946, she stayed with
        her mom in Toledo and attended school on a regular basis for the first time. During those years, she struggled financially and cared for her mother. Through her senior year of high school, Gloria moved to Washington D.C. to live with her older
        sister. She went to Smith College where she studied government. After obtaining her degree, Gloria received a fellowship to study in India, an experience that broadened her horizons. There she participated in nonviolent protests against government
        policy. She returned from India with a strong sense of social injustice and embarked on a journalist career. </p>
    </div>
    <div class="col-xs-4">
      <p class="text-paragraph text-center">In 1960, Gloria started working as a writer and freelance journalist for popular magazines in New York city. Although at first she did not cover challenging stories as a “girl reporter” among mostly men. Things started to change with the publishing
        of one her most famous article "A Bunny's Tale" for Show magazine. She recount her experience as an undercover bunny waitress at the New York city’s Playboy club and the poor working conditions and meager wages of the women who worked in those
        kinds of clubs. Gloria joined the founding staff of New York magazine in 1968 and became a contributing editor. She created a column "The City Politic", in which, she wrote in support of causes on the American left. During the following years,
        she moved more into politics, by working directly for Democrats candidates.
      </p>
    </div>
    <div class="col-xs-4">
      <p class="text-paragraph text-center">Her first feminist concerns were sparked when she went to a meeting of the Redstockings, a New York women’s liberation group. Gloria went there as a journalist, but found herself deeply moved by the women's stories, especially the ones about the
        danger of illegal abortions. In 1971, Gloria and other prominent feminists created the National Women’s Political Caucus, which worked on behalf of women’s issues. She also took the lead in launching the pioneering, feminist Ms magazine. In addition,
        she helped to found the Women's Action Alliance, Choice USA, the Ms foundation for women, Take Our Daughters to Work Day, the Women's Media Center and GreeStone Media. Over the years, Gloria received many awards and recognitions for all of her
        achievements, in 2013, she was awarded the Presidential Medal of Freedom by Barack Obama.</p>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      <h2 class="title-paragraph text-center">Personal life</h2>
    </div>
    <div class="col-xs-6">
      <h2 class="title-paragraph text-center">Critics</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      <p class="text-paragraph text-center">Gloria was diagnosed with breast cancer in 1986. She was able to beat it with treatment. In 2000, Gloria decided to get married, something she said that she would never do. She wed David Bale, an environmental and animal rights activist. However,
        their marriage did not last long, as in 2003, David died of a brain cancer. </p>
    </div>
    <div class="col-xs-6">
      <p class="text-paragraph text-center"> Over the years, Gloria Steinem has been the target of criticism including from feminists. One critic actually came from the Redstockings, for her ties with the CIA-backed Independent Research Service. Her commitment to the feminist was also challenged
        due to her glamorous image. Later on, her marriage was also non only criticized but also misunderstood by many. Gloria, though, never let any of it affected her, and carried on her work, speaking out, lecturing widely, and organizing various women's
        functions.</p>
    </div>
  </div>


  <p class="quote2 text-center">"I have yet to hear a man ask for advice on how to combine marriage and a career."</p>

  <img src="http://rosierespect.org.au/wp-content/uploads/2016/05/steinem.jpg" alt="Gloria Steinem holding a sign." class="img-responsive image2"></img>

  <h2 class="title-list">Her works</h2>
  <ul class="list">
    <li>1957: The Thousands Indias</li>
    <li>1963: The Beach Book</li>
    <li>1983: Outrageous Acts and Everyday Rebellions</li>
    <li>1986: Marylin: Norma Jean</li>
    <li>1992: Revolution from Within</li>
    <li>1993: Moving beyond Words</li>
    <li>2006: Doing Sixty & Seventy</li>
    <li>2015: My Life on the Road</li>
  </ul>

  <p class="quote3">" We've begun to raise daughters more like sons... but few have the courage to raise our sons more like our daughters."</p>

  <p class="text-link text-center">To know more about Gloria Steinem visit the
    <a href="https://en.wikipedia.org/wiki/Gloria_Steinem#Works"><b>Wikipedia</b></a> page about her or <a rel="nofollow" href="http://www.gloriasteinem.com" target="_blank"><b> her website</b></p>

</div>
              
            
!

CSS

              
                .title {
  text-align: center;
  margin-top: 20px;
  font-family: Great Vibes;
  font-size: 50px;
  color: rgb(0, 0, 128);
}

.title-image {
  width: 400px;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
}

.blue-border {
  border-color: rgb(25, 25, 112);
  border-width: 10px;
  border-style: solid;
  border-radius: 25px;
  margin-right: 30px;
}

.whosheis {
  font-size: 25px;
  font-family: Inconsolata;
  margin-top: 125px;
  margin-right: 30px;
  float: center;
}

.quote {
  font-size: 45px;
  font-family: Great Vibes;
  margin-top: 150px;
  margin-bottom: 25px;
}

.title-paragraph {
  font-size: 40px;
  font-family: Great Vibes;
  color: rgb(0, 0, 128);
}

.text-paragraph {
  margin-left: 10px;
  font-size: 20px;
  font-family: Inconsolata;
}

.quote2 {
  font-size: 45px;
  font-family: Great Vibes;
  margin-top: 20px;
  margin-bottom: 20px;
}

.image2 {
  float: right;
  margin-top: 15px;
  margin-left: 15px;
  width: 450px;
  padding-left: 30px;
}

.title-list {
  text-align: center;
  font-size: 40px;
  font-family: Great Vibes;
  color: rgb(0, 0, 128);
}

.list {
  font-size: 20px;
  font-family: Inconsolata;
}

.quote3 {
  font-size: 35px;
  font-family: Great Vibes;
  margin-top: 20px;
  text-align: center;
}

.text-link {
  font-size: 20px;
  font-family: Inconsolata;
  margin-top: 150px;
}

              
            
!

JS

              
                
              
            
!
999px

Console