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.

            
              <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flea : A Funky Rock Legend on the Bass</title>
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
  </head>
  <body>
  <main id="main">

    <h1 id="title">Michael "Flea" Peter Balzary</h1>
    <h2 id="subtitle"><em>A Funky Rock Legend on the Bass</em></h2>

    <div id="img-div">
      <img
        id="image" src="https://www.telegraph.co.uk/content/dam/music/2016/06/17/red-hot-chili-peppers-flea_trans_NvBQzQNjv4BqgsaO8O78rhmZrDxTlQBjdGtT0gK_6EfZT336f62EI5U.jpg?imwidth=1400"
        alt="Flea playing the bass"
      />
      <div id="img-caption"> Flea playing one of his signature Fender bass guitars. </div>
    </div>


<div id="tribute-info">

  <h2>The Life of Flea</h2>
<div class="tribute-info-flex-grid">
  <div class="tribute-info-flex-item">

  <h3>Early Life</h3>
    <ul>
      <li><strong>1964</strong> - Flea was born as Michael Peter Balzary on 16 October 1962 in Melbourne, Victoria.</li>
      <li><strong>1968</strong> - He moved to New York at the age of 4 with his family.</li>
      <li><strong>1979</strong> - Flea meets Anthony Kiedis during his years at Fairfax High School and the two become best friends and virtually inseparable.</li>
    </ul>
  </div>

  <div class="tribute-info-flex-item">
    <img src="https://i.ibb.co/ThqD2kg/young-flea.jpg" alt="young-flea">
  </div>

</div>

<div id="fun-fact">
  <h3><em><strong>Fun Fact</strong></em></h3>
  <p>"Flea" received his nickname as a child for his seeming inability to sit still, and the name stuck.</p>
</div>

<div class="tribute-info-flex-grid">
  <div class="tribute-info-flex-item">
  <h3>Starting the Red Hot Chili Peppers</h3>
    <ul>
      <li>
        <strong>1983</strong> - Kiedis (vocalist) & Flea (bass) form the original band under the name "Tony Flow & the Miraculously Majestic Masters of Mayhem" together with guitarist Hillel Slovak and drummer Jack Irons. Soon after the name was changed to Red Hot Chili Peppers.</li>
      <li>
        <strong>1984</strong> - While various temporary members replaced Slovak and Irons (who very comitted to other projects) the band produced their first studio album under their own name.
      </li>
      <li>
        <strong>1983</strong> - Kiedis (vocalist) & Flea (bass) form the original band under the name "Tony Flow & the Miraculously Majestic Masters of Mayhem" together with guitarist Hillel Slovak and drummer Jack Irons. Soon after the name was changed to Red Hot Chili Peppers.
      </li>
      <li>
        <strong>1983</strong> - After publishing the first album, Kiedis’ clean stint ended completely and he and Slovak would often disappear for days feeding their addictions. On July 25, Slovak died of an overdose, prompting Irons to quit the band for good. The band went into a hiatus as a result.
      </li>
      <li>
        <strong>1989-90</strong> - As a tribute to Slovak, Flea and Kiedis decided to continue their music and got a new band together, with 18-year old John Frusciante as guitarist and Chad Smith on the drums. Work began on a new, more introspective album entitled <em>Mother’s Milk</em>, which climbed to 52 on the US <em>Billboard</em> charts, leading to their first commercial success.
      </li>
    </ul>
  </div>

  <div class="tribute-info-flex-item">
    <img src="https://i.ibb.co/nR8nPJg/original-chili-peppers.jpg" alt="original-chili-peppers">
  </div>

<div class="tribute-info-flex-item">
  <h3>Mainstream Success</h3>
  <ul>
    <li>
      <strong>1991</strong> - The band released <em>Blood Sugar Sex Magic</em> which received positive critical resposes and reached number 3 on the <em>Billdboard</em> charts. Their concerts largely grew in size.
    </li>
    <li>
      <strong>1993</strong> - Flea was diagnosed with chronic fatigue syndrom and had to rest for a year.
    </li>
    <li>
      <strong>1995</strong> - The album <em>One Hot Minute</em> was significantly less successful than <em>Blood Sugar Sex Magic</em> and various injuries led to the tour being cut short. Due to health and personal reasons, the band consequently went on a hiatus. Flea started to reduce his marijuana consumption and began practicing meditation and yoga.
    </li>
    <li>
      <strong>1998</strong> - Red Hot Chili Peppers got back to record music in Flea's garage.
    </li>
    <li>
      <strong>1999</strong> - Their biggest album hit so far <em>Californication</em> was released and brought the band back into the charts. Flea made himself a name on the <em>Californication</em> tour by playing completely naked.
    </li>
    <li>
      <strong>2002</strong> - The 8th studio album <em>By the Way</em> was released which was more melodic and textured than its precessors. Frusciante took a leading role in creating the record which drove Flea nearly to quit the band as he was feeling no longer important.
    </li>
    <li>
      <strong>2006</strong> - <em>Stadium Arcadium</em> became their first album to top the <em>Billboard</em> 200 with three number one hits. Flea and Frusciante were more musically conjoined, when writing the record.
    </li>
  </ul>
</div>
  <div class="tribute-info-flex-item">
    <img src="https://i.ibb.co/Jn50yPT/californication-flea.jpg" alt="californication-flea"/>
  </div>

<div class="tribute-info-flex-item">
  <h3>Recent Years</h3>
  <ul>
    <li>
      <strong>2008</strong> - Following a hiatus of the Red Hot Chili Peppersm Flea starting taking music classes at the University of Southern California where he studied music theory, composition and jazz trumpet.
    </li>
    <li>
      <strong>2008</strong> - The band got back together without Frusciante who had quit the band to pursue his own projects. He was replaced by Josh Klinghoffer.
    </li>
    <li>
      <strong>2011</strong> - Their 10th studio album <em>I'm with You</em> was released.
    </li>
    <li>
      <strong>2014</strong> - Flea returned to acting and started working on his personal memoir <em>Acid for the Children</em>.
    </li>
    <li>
      <strong>2016</strong> - The Chili Peppers released their eleventh studio album named <em>The Getaway</em>.
    </li>
  </ul>
</div>
  <div class="tribute-info-flex-item">
<img src="https://i.ibb.co/cvXvHTG/rhcp-with-klinghoffer-jumping.jpg" alt="rhcp-with-klinghoffer-jumping" />
</div>

  <div class="tribute-info-flex-item">
  <h3>Personal Musical Style</h3>
    <p id="personal">
      Flea is considered to be one of the best rock bass players of all time. His signature use of slapping and popping to more traditional methods make him stand out and give the Chili Peppers their signature sound. He is known for his intense and emotional play, fully emerging himself in his sound and music.
      <br>
      <strong>Listen to his signature slapping style in this video!</strong>
    </p>
</div>

  <div class="tribute-info-flex-item">
    <div class="iframe-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/af6yZZn-9i8?start=19" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  </div>

</div>

  <div id="quote">
  <p><em>"Anything worth doing good takes a little chaos."</em></p>
  <p>-Flea</p>

</div>

<div id="video">
  <h2>Watch Flea in Action</h2>
  <div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/Bp1O06J-0e8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

<div id="footer">
  <a id="tribute-link" href="https://en.wikipedia.org/wiki/Flea_(musician)" target="_blank" >Read more about Flea on Wikipedia.</a>
  <br/>
  <p>
    This website was created by Michelle Liebheit.
  </p>

</div>
    </main>
  </body>
</html>

            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Ubuntu|Abril+Fatface&display=swap');

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #e8e7e3;
  text-align: center;
  font-size: 15px;
  display: block;
  max-width: 1440px;
  font-family: "Ubuntu";
}

h1, h2 {
  color: #CA1B62;
  font-family: "Abril Fatface";
}

h3 {
  color: #1F1A23;
  font-family: "Ubuntu";
  padding: 5px 0px;
}

p {
  color: #1F1A23;
  font-family: "Ubuntu";
}

a {
  color: #4E4FB9;
  font-family: "Ubuntu";
  text-decoration: none;
}

a:hover {
  color: #CA1B62;
  text-decoration: underline;
}

a:visited {
  color: #46527C;
  text-decoration: none;
}

#title {
  font-size: 2.5em;
  margin-bottom: 5px;
}

#subtitle {
  font-size: 1.5em;
  font-family: "Ubuntu";
  color: #1F1A23;
}

#img-div {
  padding: 5px 0px 15px 0px;
}

#image {
  width: 100%;
  object-fit: contain;
}

#img-caption {
  text-align: right;
  padding: 15px 0px 0px 0px;
}

#fun-fact {
  background-color: #DCA792;
  padding: 20px 50px 20px 50px;
  margin: auto;
}

#quote {
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  padding: 20px 10px 30px 10px;
  background-color: #DCA792;
  color: #00000;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

#video h2 {
  padding: 40px 0px;
}

#tribute-info h2 {
  margin: 10px auto 5px auto;
}

.tribute-info-flex-grid {
  display: flex;
  flex-flow: row wrap;
}

.tribute-info-flex-item{
  width: 45%;
  margin: 2.5%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}

@media screen and (max-width: 499px) {
  .tribute-info-flex-grid {
    display: flex;
    flex-flow: column nowrap;
  }
  .tribute-info-flex-item{
    width: 95%;
    margin: 2.5%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    }
  }

img {
  max-width: 100%;
  height: auto;
}

ul {
  text-align: left;
  padding-left:0;
  line-height: 1.6;
  list-style-type: none;
}

strong {
  font-weight: bold;
  font-size: 16px;
}

#personal {
  text-align: left;
  line-height: 1.6;
}

#footer {
  padding: 30px 0px 10px 0px;
  background-color: #DCA792;
}

            
          
!
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