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=Alegreya|Amatic+SC|Dancing+Script|Gochi+Hand|Homemade+Apple|IM+Fell+English+SC|Rock+Salt|Sigmar+One" rel="stylesheet">
<body>
  <div class="main">
<div class="fluid">
    <h2 class="text-center">Frida Kahlo</h2>
  </div>
  <div class="quote1">
    <p>"At the end of the day, we can endure much more than we think we can.”</p>
    </div>
    <div class="essay">
      <div class="firstS">
<img class="bandage" src="https://3.bp.blogspot.com/-HOCCcv_7pW4/UpOyAsfphgI/AAAAAAAAAKk/LNac7ALOzAE/s1600/fkahlo-broken_column.jpg">
<p class="firstP">Frida Kahlo was a female Mexican painter of mixed heritage, born on July 6, 1907 and lived 47 painful years before passing away on July 13, 1954. Within her short life, Frida was slightly crippled from polio, suffered from a serious streetcar accident that left her infertile, married famous muralist Diego Rivera, divorced, remarried Rivera, became a political activist and rose to fame through her oil paintings all before succumbing to her poor health. </p>
</div>
<div class="secondS">      
     <img class="monkeys" src="https://upload.wikimedia.org/wikipedia/en/1/1e/Frida_Kahlo_(self_portrait).jpg">
     <p class="secondP">She was an intelligent female in a society that wanted women to be pretty, submissive wives and mothers. She struggled with cultural demands of her gender in a time when women were demanding a change in their role. All these aspects of her life, and more, affected her art. She was a modern woman but her art had an indigenous background. Her most common genre was self-portrait and through a dramatic views of herself, she was capable of showing her view of the world. </p>
</div>
<div class="thirdS"> 
  <img class="tree" src="http://1vze7o2h8a2b2tyahl3i0t68.wpengine.netdna-cdn.com/wp-content/uploads/2014/07/07_14_FE_Frida_Tree_of_Life_350.jpg">
    <p class="thirdP">Frida was an active member of global society and was a powerful speaker for her beliefs through her art. Her art was controversial and attracted attention. She gained global recognition of her work because it’s complex and provocative, demanding discussion.She often depicted her physical pain and struggle with graphic self-portraits. She “usually located narrative impact . . . directly onto her own body.” (Zavala, 2010)</p>
      </div>
      <div class="fourthS">
<img class="hairCut" src="http://c300221.r21.cf1.rackcdn.com/frida-kahlo-inspired-haircuts-for-boyish-and-masculine-inspired-looks-1363037936_b.jpg">
<p class="fourthP">Frida Kahlo’s harsh life produced provocative images that challenged society. She was wise beyond her years and was a fiery, rebellious spirit. She was a member of las pelonas in college, a group of young, Mexican women who cut their hair, learned how to drive cars and wore androgynous clothing. While consulting a specialist on another serious spinal surgery, she told her physicians to write him letters describing her character, so he would understand that she’s a fighter.</p> 
      </div>
      <div class="fifthS">
<img class="mask" src="http://www.fridakahlo.org/images/paintings/girl-with-death-mask.jpg">
<p class="fifthP">She taught painting to youth across Mexico, affecting hundreds of lives with her mentorship. In her final days she left the hospital, despite doctors’ orders, to participate in a political protest. She was in a wheelchair, having lost a leg to gangrene, sickly thin, with colorful yarn tied into her hair. The things she saw and experienced led to the dramatic works that flowed from her brush.She never let her health stop her from her work.</p>
        </div>
<div class="sixthS">
<img class="flowers" src="http://www.themasterpiececards.com/hs-fs/hub/40667/file-14021152-jpg/images/kahlo_photo_by_nikolas_muray-resized-600.jpg?t=1483038599012">      
  <p class="sixthP">She hadn’t planned to follow in the artistic footsteps of her photographer father and grandfather. Yet, look at the silver lining of the tragedy of her accident. Instead of becoming a doctor, she painted pictures that made people talk and discuss. She is now recognizable worldwide for her unique work.</p>
  <p class="quote2">"Really, I do not know whether my paintings are surrealist or not, but I do know that they are the frankest expression of myself."</p> <p class="quote2">Frida Kahlo</p>
</div>
    </div>
  <div class="slides"><
  <img class="mySlides" id="scene" src="https://images.artnet.com/images_us/magazine/reviews/davis/davis8-28-08-10.jpg">
  <img class="mySlides" id="fridas" src="https://s-media-cache-ak0.pinimg.com/originals/d5/d0/7f/d5d07f7bd6fe394e578089d1bcd77c69.jpg">
<img class="mySlides" id="deer"
src="https://userscontent2.emaze.com/images/d940222d-244b-4d27-ae79-dcd9cfdfd4a9/fe309302-de4d-4eb9-a22d-6df9efe71d79.jpg">
<img class="mySlides" id="baby" src="https://d36tnp772eyphs.cloudfront.net/blogs/1/2015/04/henry-ford-hospital-600x473-1.jpg">
    <img class="mySlides" id="fruit" src="http://www.ranchocalypso.com/blogf/Fridas_the_bride.JPG">
<img class="mySlides" id="new-york" src="https://d36tnp772eyphs.cloudfront.net/blogs/1/2015/04/frontera-mex-y-eua-600x516-1.jpeg">
    <img class="mySlides" id="nursing" src="https://3.bp.blogspot.com/--y7f0IgCzis/UL4FuaosvnI/AAAAAAAABAw/qqai7smxAaA/s1600/La+nutridota+o+Mi+Nana+y+Yo+(1937).jpg">
    <img class="mySlides" id="bed" src="https://4.bp.blogspot.com/-KX46LulxJ6E/TVia7x7jdRI/AAAAAAAAAA8/h_XMNAEB7Sw/s1600/Frida-Kahlo_The-Dream.jpg">
 </div>
    <div class="row" id="linkFrida">
      <div class="col-med-8">
        <p id="want">Want more Frida?</p>
        <p><a href="http://www.fridakahlo.org/">Explore The world of Frida Kahlo</a></p>
        <p><a href="http://www.museofridakahlo.org.mx/">Visit The Frida Kahlo Museum</a></p>
        </div>
    </div>
 <footer>Designed and Coded by Ve Vanderpool (2017)</footer>
  </div>
  </div>
</body>
            
          
!
            
              body
{
  background:url("https://static-wp.lonewolfmag.com/140717134225-frida-kahlo-photo-horizontal-large-gallery.jpg");
background-attachment:fixed;
background-size:cover;
background-repeat: no-repeat;
  }
h2
{
  font-size:75pt;
  margin:50px 80px 5px 80px;
  background-color:#5F7690;
  color:dark grey;
 font-family: 'Rock Salt', cursive;
}
.quote1
{
  margin:-5px 80px 100px 80px;
  text-align:center;
  font-size:24pt;
  font-family:'IM Fell English SC', serif; 
  color: dark grey;
  background-color: #5F7690;
}
.essay
{
  margin:80px;
 font-family:'IM Fell English SC', serif; 
  font-size: 20pt;
  color: #839DA8;
  background:rgba(0,0,0,0.6);
  padding:16px;
}
.firstS
{
  margin:10px 20px 20px 20px;
  padding:20px;
}
.bandage
{
    float: left;
    margin-right: 10px;
    clear:both;
  height:300px;
}
.firstP 
{
    margin-left: 0px;
    overflow:auto;
    display:block;
}
.secondS
{
  margin:10px 20px 20px 20px;
  padding:20px;
}
.monkeys
{
    float: right;
    margin-left: 10px;
    clear:both;
  height:300px;
}
.secondP 
{
    margin-right: 0px;
    overflow:auto;
    display:block;
  text-align:left;

}
.thirdS
{
  margin:10px 20px 20px 20px;
  padding:20px;
}
.tree
{
    float: left;
    margin-right: 10px;
    clear:both;
  height:300px;
}
.thirdP 
{
    margin-left: 0px;
    overflow:auto;
    display:block;
}
.fourthS
{
  margin:10px 20px 20px 20px;
  padding:20px;
}
.hairCut
{
    float: right;
    margin-left: 10px;
    clear:both;
  height:300px;
}
.fourthP 
{
    margin-right: 0px;
    overflow:auto;
    display:block;
}
.fifthS
{
  margin:20px 20px 30px 20px;
  padding:20px;
}
.mask
{
    float: left;
    margin-right: 10px;
    clear:both;
  height:300px;
}
.fifthP 
{
    margin-left: 0px;
    overflow:auto;
    display:block;
}
.sixthS
{
  margin:20px 20px 20px 20px;
  padding:20px;
}
.flowers
{
    float: right;
    margin-left: 10px;
    clear:both;
    height:300px;
}
.sixthP 
{
    margin-right: 0px;
    overflow:auto;
    display:block;
}
.quote2
{
  font-style:italic;
  text-align:center;
  }
.slides
{
  display:block;
  margin:auto;
  width:50%;
 }
#scene
{
  height:500px;
}
#fridas
{
  height:500px;
}
#deer
{
  height:500px;
}
#baby
{
  height:500px;
}
#fruit
{
  height:500px;
}
#new-york
{
  height:500px;
}
#nursing
{
  height:500px;
}
#bed
{
  height:500px;
}

footer
{
  color:dark grey;
  background-color:#5F7690;
  text-align:center;
  margin-top:70px;
  font-size:18pt;
  font-family:'IM Fell English SC', serif; 
  }
#linkFrida
{
  text-align:center;
  color:white;
  background-image:url("http://www.oceansbridge.com/paintings/artists/k/frida-kahlo/big/four-inhabitants-of-mexico-city-1938.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  font-size: 20pt;
  font-family: 'Rock Salt', cursive;
  padding:25px;
  margin:80px 100px 0px 100px;
  }
#want
{
  font-size:24pt;
  color:#CA0735;
}
a:link {
    color:#8A2A40;
    background-color: transparent;
    text-decoration: arrows;
}
a:visited {
    color:#8A2A40;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color:white;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
            
          
!
            
              var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 4000); // Change image every 2 seconds
}
            
          
!
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