HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
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; }
Also see: Tab Triggers