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

              
                <body>
  <img id="logorhcp" src="https://1000marcas.net/wp-content/uploads/2020/03/Red-hot-chili-peppers-logo.png" alt="red hot chili peppers logo" width="350">
  <hr class="1">
  <ul> <br><li><a href="#membersh2">Members</a></li><br>
    <li><a href="#historyh2">History</a></li><br>
    <li><a href="#disco">Discography</a></li><br>
   </ul>
  <hr>
  <h2 id="membersh2">MEMBERS</h2>
   <p ><strong id="members">ANTHONY KIEDIS</strong></p>
  <a target="_blank" href="https://en.wikipedia.org/wiki/Anthony_Kiedis"><img class="members" src="https://www.elheraldo.co/sites/default/files/styles/width_1180/public/articulo/2016/05/16/anthony_kiedis_0.jpg?itok=Ogde5u8N" alt="anthony in concert" width="200"></a>  
 <p class="AK"> Born on November 1, 1962, A.K. never thought that he was going to be the <strong><em>volalist</em></strong> of one of the greatest bands all over the world.<br> He grew up in Grand Rapids, Michigan until the age of twelve when his parents got divorced. His father moved to Hollywood, California to pursue an acting career.<br> After years of spending his summers with his father in Hollywood, Anthony definitely moved with him. It was there, at the school, when he met who it was going to be his friend and bandmate until today, Michael Balzary also known as Flea. <br>
   To view the full Anthony´s biography, click on his image.
 </p> 
  <p><strong id="membersflea">FLEA</strong></p>
  <a target="_blank" href="https://en.wikipedia.org/wiki/Flea_(musician)"><img class="membersflea" src="https://www.mondosonoro.com/wp-content/uploads/2021/03/Flea-libro-autobiografico.jpg" alt="flea playing the bass" width="200"></a>
    <p class="flea">Michael Peter Balzary, an australian boy who had an early typical middle-class life. Due to his father´s job, the Balzary family moved to New York and their parents got divorced there. Her mother met a jazz musician, Walter Urban, whom she married.<br> Michael´s life changed completely to a dysfunctional one. <br>
    The new family moved to Hollywood. Michael started playing the trumpet for the school band. During his last years of school, he met Anthony. He found in him a trusted best friend. He became <strong><em>bassist</em></strong> thanks to Hillel Slovak, the guitarist of Anthym and the founder red hot chili peppers guitarist.<br>
To view the full Flea´s biography, click on his image.
    </p>
  <p> <strong id="memberschad"> CHAD SMITH</strong></p>
  <a target="_blank" href="https://en.wikipedia.org/wiki/Chad_Smith"><img class="memberschad" src="https://townsquare.media/site/366/files/2013/11/IMG_7283b-L.jpg?w=980&q=75" alt="chad playing drums" width="200"></a>
  <p class="chad">Chad Gaylord Smith was from Michigan. He was born the 25<sup>th</sup> of October of 1962. He started playing drums at 7 years old and he learned mainly by playing it in the school bands at Lahser High School.<br>
    His first drum style was influenced by listening Rush, The Rolling Stones, The Who, Led Zeppelin and other bands.<br>
    He played with several bands during his childhood. But it was the former percussionist bandmate, Larry Flatangelo who taught Chad how to play R&B and funk; before that he considered himself just a rock <strong><em>drummer</em></strong> and then a musician.<br>
    To view the full Chad´s biography, click on his image.
  </p>
  <p> <strong id="membersjohn"> JOHN FRUSCIANTE</strong></p>
  <a target="_blank" href="https://en.wikipedia.org/wiki/John_Frusciante"><img class="membersjohn" src="https://www.latercera.com/resizer/16PIb8buX8FaBzAazsyd0w2fVLQ=/900x600/smart/arc-anglerfish-arc2-prod-copesa.s3.amazonaws.com/public/3NZ7MSD6GRD7HPCE3SN6HWP624.jpg" alt="john playing the guitar" width="200"></a>
   
    <p class="john">John Anthony Frusciante from Queens, New York was born the 5<sup>th</sup> of March of 1970. Due to his father´s job, his family moved to Arizona and then to Florida. Then, when their parents got divorced, he moved to Los Angeles alongside his mother. <br>He started playing <strong><em>guitar</em></strong> at the age of 10, influenced by guitarists like Jeff Beck, David Gilmour, Jimmy Page, Frank Zappa, and his best influence Jimi Hendrix. He spent a lot of time listening to and studying them. At the age of 16, he left school, and with the permission of their parents, he moved to Hollywood to develop his guitar musicianship.<br>
  To view the full John´s biography, click on his image.</p>
   
  <h2 id="historyh2">HISTORY</h2>
  <p class="history">The beginning of Red Hot Chili Peppers was in 1983. Before that, Flea, <a href="https://es.wikipedia.org/wiki/Hillel_Slovak">Hillel Slovack</a> and <a href="https://es.wikipedia.org/wiki/Jack_Irons">Jack Irons</a> played together in a band called Anthym. The four original members of RHCP met at Fairfax High School. Before the chili peppers were named like that, the band´s name were Tony Flow and the Miraculously Majestic Masters of Mayhem. By that time, Jack and Hillel were also playing in another band called What is this?, the RHCP recruited the guitarist and drummer from the band Weirdos: <a href="https://en.wikipedia.org/wiki/Cliff_Martinez">Cliff Martinez</a> and <a href="https://en.wikipedia.org/wiki/Jack_Sherman">Jack Sherman</a> with whom they recorded their first LP "The Red Hot Chili Peppers" in 1984. <br>
    In 1985, they got the chance to record their second album "Freaky Styley", produced by George Clinton who made the band incorporated other styles like punk and funk. The album was released on August 16 of that year and despite of the little success that it had in the charts, the band was pleased with the result. For the third album, Slovak rejoined the band. But as Martinez was not pleased with the band´s drug abuse, Flea and Kiedis fired him and made Irons rejoin the band.
    Around 1988, for the recording of their third album, Kiedis was briefly fired because of his increasing drug problems. As the band was named "band of the year" by LA weekly, Kiedis decided to rehabilitate himself. "The Uplift Mofo Party Plan" was released on September of 1988 and peaked at No. 148 on the Billboard 200. To celebrate that, Kiedis celebrated his new music by taking drugs.<br>
      Drugs were a big problem. Even though Anthony left drugs aside to focus on the band, Slovak couldn´t do it. He died from heroin overdose in June of 1988. Due to this reason, Irons couldn´t handle his friend death and left the band. To fill their places, DeWayne McKnight in the guitar and D. H. Peligro as a drummer joined the band. But the first one was fired because of a lack of musical connection with the band. Peligro brought Frusciante who gave the band another feeling to the music. With no more places to fill, the new lineup went out on tour. But despite being writing new material and being on tour, Peligro was also fired because of his drug and alcohol problems.  <br>
    Auditions for the drummer position were opened and the last who did it was the one who took the position, Chad Smith. From that time, the band performed and recorded with this lineup except of Frunsciante´s comings and goings. The fourth album of the band, like the previous one, was produced by Michael Beinhorn. With this album, the RHCP escalated quite positions in the charts. "Mother´s milk" had hits like Higher ground and Knock me down that charted at the eleventh and sixth positions in different charts. <br>
    The band made its breakthrough with the fifth album "Blood Sugar Sex Magik." Rick Rubin who rejected to produce The Uplift Mojo Party plan, took the production of this one, claiming that the band was healthier than previous years. "Give it away" the ninth song in the album became the band's first number-one single on the Modern Rock chart and "Under the bridge" went up to the second position on the Billboard Hot 100 chart.<br>
    Due to the fame that the band was achieving, Frusciante left the band. He didn´t like seeing himself with that much exposure. A good amount of guitarists went through the band, until Dave Navarro, who just quit Jane´s Addiction. With Navarro,  they recorded "One Hot minute" in 1995, an album that had a lot of problems to be done including a relapse in Anthony´s heroin abuse. They also didn´t feel so good playing with Navarro. In fact, Navarro claimed that he wasn´t very involved in jamming nor funk music. Later on, in 1998, Navarro finally left the band due to creative differences, it was also said that what finally made his departure was that he attended totally stoned to one of the bands´s rehearsals.  
    The return of Frusciante came after his rehabilitation of heroin. Flea asked him to rejoin the band, so Frusciante didn´t doubt it. It was the containment that he needed to finally recover. <br>
    The following album has become the band´s most successful album with 16 million copies sold. "californication" integrates more textured and melodic guitar riffs, vocals and basslines than the raps that the band used to do. It was not only said that the album had that huge reception thanks to Frusciante´s return but also to Kiedis vocals improvement. This album was listed at number 399 on the Rolling Stone magazine list of the 500 Greatest Albums of All Time. Right after the ending of the Californication tour the band started recording "By The Way" that it was released on July 2002. Frusciante and Kiedis worked together better than before as John was healthier. This album produced four singles: "By the Way", "The Zephyr Song", "Can't Stop" and "Universally Speaking" and is more focused on melodic ballads. With "Stadium Arcadium" finished the second era with Frusciante playing the guitar. The album saw the light in 2006 and its first single "Dani California" was the band's fastest-selling single. "Snow (hey oh)" became their eleventh number-one single, giving the band a cumulative total of 81 weeks at number one. The tour included <a href="https://es.wikipedia.org/wiki/Josh_Klinghoffer">Josh Klinghoffer</a>, a friend and music collaborator of John, who was going to be John´s replacement after he left in 2009.<br>
    After years of hardworking since 1999, the band decided to take a break and focus on their own projects. The comeback was in 2011 with the album "I´m With You", this time with Klinghoffer as the leading guitar. It was also produced by Rick Rubin and received positive reviews and topped the charts in 18 countries. The song "the adventures of rain dance maggie" became the 12<sup>th</sup> number one single. In April 2012, RHCP was inducted into the Rock & Roll Hall of Fame. The following album "The Gateway" was released on 2015. This time without Rick Rubin producing them. The album made its debut at number 2 on the Billboard 200 chart and has had two singles: "Dark necessities" and "Go Robot."    <br>
    Once again, Frusciante returned to the band. Klinghoffer was replaced by him in 2019. John claimed to be very happy about that and that the guitarist role of the RHCP was absolutely John´s place. Nowadays, the band is working on new material. </p>
      <h2 id="disco">DISCOGRAPHY</h2>
  <div class="flexbox">
    <div class="container">
<div class="discographyrhcp">
  <div class="TRHCP"><h1>1984</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=VcIHnnoJqPA&list=PL50021C34438B5C79"><img src="https://www.jotdown.es/wp-content/uploads/2014/10/Rhcp1.jpg" width="150"></a></div>
  <div class="FS"><h1>1985</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=05n6iPB2Le8&list=PLxzqJf_WSOQwFU7QH6OqHcCM4FWIhBUFH"><img src="https://i.ebayimg.com/images/g/3YoAAOSwQpZgNpk9/s-l1600.jpg" width="150"></a></div>
 <div class="TUMPP"> <h1>1987</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=9Fn1SXuzazg"><img src="https://i.ebayimg.com/images/g/3GIAAOSwzgBY2FpA/s-l1600.jpg" width="150"></a></div>
  <div class="MMilk"><h1>1989</h1><a target="_blank" href="https://www.youtube.com/watch?v=iDF-bfHVsa8&list=PL206D02801CF1B3A4"><img src="https://i.ebayimg.com/images/g/npAAAOSw-IheFJVx/s-l1600.jpg" width="150"></a>
  </div>
  <div class="BSSM"><h1>1991</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=H3tdhMazGC8&list=PLvsYXqtYjMYdmFlm1d089cGjPo5yy3-kj"><img src="https://img.discogs.com/cflFomqbPTcEiNHBfj26ZRpwjJY=/fit-in/600x594/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-2891664-1377292833-3885.jpeg.jpg" width="150"></a></div>
   <div class="OHM"><h1>1995</h1><a target="_blank" href="https://www.youtube.com/watch?v=h3GWAF_MG6Y&list=PLGK9cQwEH-6v5z7gMZz7I4nrqMvblBza2"><img src="https://img.discogs.com/4K4JEUnETQkTHbcYmqxPUZrYqgg=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-2037064-1309553353.jpeg.jpg" width="150">
     </a></div>
  <div class="Californication">
  <h1>1999</h1><a target="_blank" href="https://www.youtube.com/watch?v=iiupU-K_TKE&list=PLiN-7mukU_RGm3gXXR0MXtZ5ynTioL05I"><img src="https://img.discogs.com/7888IdJxwRZXiuHNjWIuEpzMG64=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-367220-1204955140.jpeg.jpg" width="150"></a>
  </div>
  <div class="BTW"><h1>2002</h1><a target="_blank" href="https://www.youtube.com/watch?v=6GMKYueN4mM&list=PLfUV806q_Ri44JlEw_CTexB8X9FuF8yBz"><img src="https://img.discogs.com/ec2fzmbKNmZ_HTInsIzX7XgABkY=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-1162737-1197254678.jpeg.jpg" width="150">
    </a></div>
  <div class="SArcadium"><h1>2006</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=4FkfyssnHqU&list=PLwgJr-cqDzUFoQtIxl3ZeVnPzgvDyma8r"><img src="https://images-na.ssl-images-amazon.com/images/I/81lOFvmn6tL._SL1500_.jpg" width="150"></a></div>
  <div class="IMWY"><h1>2011</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=q4SBIuqZ4lc&list=PLblmHacuAL2sSq_yENDwGlZ8n-jcn-gYQ"><img src="https://img.discogs.com/UJQPra2R0Bh4y9TB3pG_Dbca4e8=/fit-in/600x545/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-3073711-1315252087.jpeg.jpg" width="150"></a></div>
  <div class="TGateway"><h1>2016</h1>
  <a target="_blank" href="https://www.youtube.com/watch?v=r2TUch2JqVI&list=PLygnHCqOrLc9TF980BWWJ4yeW53Gg-Vof"><img src="https://bloximages.newyork1.vip.townnews.com/heraldstandard.com/content/tncms/assets/v3/editorial/9/d9/9d976ef4-a6ff-5362-8ee0-f056c197c399/576aa73fe9462.image.jpg?resize=1200%2C1111" width="150"></a></div><br><p class="artwork">Check out its music by clicking on the album artworks</p>
      </div></div></div>
<div id="linea"><hr></div>
  <div id="linea1"><hr></div>
    
    </body> 
              
            
!

CSS

              
                body {background: rgb(148, 5, 5);} 
hr {width: 259px;}
#linea{ position: relative; bottom: 2225px; right: 10px;}
#linea1 {position: relative; bottom: 3469px; right: 10px;}
ul {
  border: 3px solid rgb(0, 0, 0); background-color: rgb(217, 67, 67);
  border-radius: 5px; padding-right: 15px;
  bottom: 60px;
  left: 70px;
  margin: 60px 120px ;  
  width: 7%; 
  font-family: "Oswald", sans-serif; font-size: 18px; letter-spacing: 0.7px;
}
#logorhcp {position: absolute;
  margin: 55px 500px;
border-radius: 10%}

#membersh2 {text-align:center;
  font-family: sans-serif;
  margin: 30px 555px;}
.members {border-radius: 5px; position: absolute;
top: 450px;
left: 106px;
height: 133px}
.membersflea {border-radius: 5px; position: absolute;
top: 450px;
left: 405px;}
.memberschad {border-radius: 5px; position: absolute;
top: 450px;
right: 428px;}
.membersjohn {border-radius: 5px; position: absolute;
top: 450px;
right: 120px;}
#members {position: absolute; left: 130px;
  top: 410px;
font-family: sans-serif;
text-decoration: underline;}
#membersflea {position: absolute; left: 478px;
  top: 410px; font-family: sans-serif;
text-decoration: underline;}
#memberschad {position: absolute; left: 768px;
  top: 410px;font-family: sans-serif;
text-decoration: underline;}
#membersjohn {position: absolute; left: 1054px;
  top: 410px;
font-family: sans-serif;
text-decoration: underline;}
p.AK {width: 15%;  height: 120%; overflow: auto; font-family: "Oswald", sans-serif; 
background: rgb(217, 67, 67); border: 2px solid black; padding: 13px;
  line-height: 1.5em;
  letter-spacing: 0.7px;
  position: relative;
  top: 190px;
  left: 80px;
  right: 4px;
  
}
p.flea {width: 15%; height: 80%; font-family: "Oswald", sans-serif;
background: rgb(217, 67, 67); border: 2px solid black; padding: 13px;
  line-height: 1.5em;
  letter-spacing: 0.7px;
  overflow: hidden;
  position: relative;
  left: 380px;
  right: 4px;
  bottom: 384px;
  
}
p.chad {width: 15%; height: 80%; overflow: auto; font-family: "Oswald",sans-serif; 
background: rgb(217, 67, 67); border: 2px solid black; padding: 13px;
  letter-spacing: 0.7px;
  line-height: 1.5em;
  position: relative;
  bottom: 1031px;
  left: 698px;
}
p.john {width: 15%;  height: 80%; overflow: auto; font-family: "Oswald", sans-serif; line-height: 1.5em;
  letter-spacing: 0.7px; position: relative;
  bottom: 1610px;
  left: 1005px; 
background: rgb(217, 67, 67); border: 2px solid black; padding: 13px;
  line-height: 1.5em;
  letter-spacing: 0.7px;
 }


 #historyh2 {text-align: center;
  font-family: sans-serif;
margin: 460px 610px;
position: absolute;
top: 850px; 
}
.history {width: 80%;  height: 80%; overflow: auto; font-family: "Oswald", sans-serif;
  position: relative;
  bottom: 1430px;
  left: 110px;
background: rgb(217, 67, 67); border: 2px solid black; padding: 13px; 
  line-height: 1.5em;
  letter-spacing: 0.7px;
  
}

#disco {text-align: center;
  font-family: sans-serif; position: relative; bottom: 1350px; right: 10px; }
.flexbox {position: relative; bottom: 1330px; right: 20px;}
.container {display: flex;
  flex-wrap: wrap; width: 700px; border: 2px solid  rgb(0, 0, 0);  background-color: rgb(217, 67, 67); border-radius: 1%; font-family: "Oswald", sans-serif; line-height: 1.5em;
  letter-spacing: 0.7px; margin: auto;
  }
.discographyrhcp {
  display: flex;
  flex-wrap: wrap; justify-content: space-around; text-align: center; padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px; 
}
.artwork {font-size: 23px; position: relative; right: 20px; }

              
            
!

JS

              
                
              
            
!
999px

Console