123

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.

            
              
<!-- open content container -->
<div class="container-fluid">
<!-- open quote div (row) -->
<div class="row background">
  <div class="col-md-6 col-xs-8">
<!-- h2 --><h2>My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion, some humor, and some style. <h3>- Dr. Maya Angelou</h3>
</h2><!-- h2 -->
 </div>
<!-- close quote div -->
</div>

<!-- open younglife div (row) -->
<div class="row match-my-cols">
<!-- open 1/4 img div -->
<div class="col col-xs-6 col-md-4">  
<!-- img --><img src="http://files.mom.me/photos/2014/05/28/135-69566-gal-angelou-10-jpg-1401296526.jpg" class="img-responsive"><!-- /img -->
<!-- close 1/4 img div -->
</div>  
<!-- open 3/4 p div -->
<div class="col-xs-12 col-sm-6 col-md-8" id="hover1">
<!-- p -->
<p>Marguerite Annie Johnson was born in St. Louis, Missouri, on April 4, 1928. At the age of eight, while living with her mother, Angelou was sexually abused and raped by her mother's boyfriend. She told her brother, who told the rest of their family. Freeman was found guilty but was jailed for only one day. Four days after his release, he was murdered, probably by Angelou's uncles. Angelou became mute for almost five years, believing, as she stated, "I thought, my voice killed him; I killed that man, because I told his name. And then I thought I would never speak again, because my voice would kill anyone ..." It was during this period of silence when Angelou developed her extraordinary memory, her love for books and literature, and her ability to listen and observe the world.</p><!-- /p --> 
<!-- close 3/4 p div -->
</div>
<!-- close younglife div -->
</div>  
<!-- open midlife div (row) -->
<div class="row match-my-cols">
<!-- open 1/4 img div -->
<div class="col col-xs-6 col-md-4">  
<!-- img --><img src="https://thereturntosalone.files.wordpress.com/2016/11/27-maya-angelou-006-w529-h352.jpg?w=685" class="img-responsive"><!-- /img -->
<!-- close 1/4 img div -->
</div>  
<!-- open 3/4 p div -->
<div class="col-xs-12 col-sm-6 col-md-8" id="hover2">  
<!-- p --><p>In 1951, Angelou married Greek electrician, former sailor, and aspiring musician Tosh Angelos, despite the condemnation of interracial relationships at the time and the disapproval of her mother. After Angelou's marriage ended in 1954, she danced professionally in clubs around San Francisco, including the nightclub the Purple Onion, where she sang and danced to calypso music. Angelou met novelist John Oliver Killens in 1959 and, at his urging, moved to New York to concentrate on her writing career. She joined the Harlem Writers Guild. Despite having almost no experience, she wrote, produced, and narrated Blacks, Blues, Black!, a ten-part series of documentaries about the connection between blues music and black Americans' African heritage, and what Angelou called the "Africanisms still current in the U.S." </p><!-- /p -->
<!-- close 3/4 p div -->
</div>  
<!-- close midlife div -->
</div>
<!-- open endlife div (row)-->
<div class="row match-my-cols">
<!-- open 1/4 img div -->
<div class="col col-xs-6 col-md-4">
<!-- img --><img src="http://www.newsamericasnow.com/wp-content/uploads/2014/05/maya-angelou.jpg" class="img-responsive"><!-- /img -->
<!-- close 1/4 img div -->
</div>
<!-- open 3/4 p div -->
<div class="col-xs-12 col-sm-6 col-md-8" id="hover3">  
<!-- p --><p>In 1977, Angelou appeared in a supporting role in the television mini-series Roots. She was given a multitude of awards during this period, including over thirty honorary degrees from colleges and universities from all over the world. In the late 1970s, Angelou met Oprah Winfrey when Winfrey was a TV anchor in Baltimore, Maryland; Angelou would later become Winfrey's close friend and mentor. In 1993, Angelou recited her poem "On the Pulse of Morning" at the inauguration of President Bill Clinton, becoming the first poet to make an inaugural recitation since Robert Frost at President John F. Kennedy's inauguration in 1961. In late 2010, Angelou donated her personal papers and career memorabilia to the Schomburg Center for Research in Black Culture in Harlem. She passed in May 2014. </p><!-- /p -->
<!-- close 3/4 p div -->
</div>  
<!-- close endlife div -->
</div>
<!-- open footer div (row)-->
<div class="row footer">
  <!-- a --><!-- h tag --><a href="http://mayaangelou.com/"><h4 class="text-center" target="_blank">MayaAngelou.com</h4></a><!-- /h tag --><!-- /a -->


<!-- h tag --><h4 class="text-center">©2017 <!-- a --><a href="https://github.com/nottalent" target="_blank">Not Talent</a><!-- /a -->. FreeCodeCamp Build a Tribute Page Project.</h4><!-- /h tag -->
<!-- close footer div -->
</div>
<!-- close content container -->
</div>

            
          
!
            
              .background{
  background-image :url("http://www.indiewire.com/wp-content/uploads/2014/05/maya-angelou.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position: 50%;
  min-height:650px;
}

h2, h3 {
  font-family:Monospace;
  color:white;
  padding: 10%;
}
h4{
  font-family:Monospace;
}

#hover1:hover{
  background-color: rgb(110, 147, 165);
  color:white;
}

p {
  padding: 2% 0 0 2%;
}

#hover2:hover{
  background-color: #AE4A85;
  color:white;
}

#hover3:hover{
  background-color: rgb(204, 63, 46);
  color:white;
}

.col {
  padding-right:0px;
  padding-left:0px;
}

.match-my-cols {
    overflow: hidden; 
}

.match-my-cols [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.footer{
  background-color:black;
  color:white;
  height:100px;
}

a{
  text-decoration:none;
}
            
          
!
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