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

              
                <head>
  <title> A Tribute Page For - Red Hot Chili Pappers </title>

  <meta charset="UTF-8">

</head>

<body>

  <header>

    <div class="container-fluid">
      <div class="row">
        <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Red_Hot_Chili_Peppers_2012-07-02_001.jpg" alt="Red Hot Chili Pappers - Main tribut picture">

        <div class="container-fluid row">
          <div class="headline-box">
            <img class="logo" src="https://seeklogo.com/images/R/red-hot-chili-peppers-logo-A543BC87F8-seeklogo.com.png" alt="Red Hot Chili Pappers's Logo">

            <div id="title">
              <h1> Red Hot Chili Pappers </h1>
              <h2> A papper flavor tribute </h2>

            </div>
            </div>
          </div>
        </div>

        <!--closing id-main -->
      </div>

      </section>

  </header>

  <main id="main">

    <div id="tribute-info">
    <h3> This Days Band Members</h3>
     <p> Red Hot Chili Peppers are an American funk rock band formed in Los Angeles in 1983. The group's musical style primarily consists of rock with an emphasis on funk, as well as elements from other genres such as punk rock and psychedelic rock.</p><br>
 <p>When played live, their music incorporates elements of jam band due to the improvised nature of many of their performances. Currently, the band consists of founding members vocalist Anthony Kiedis and bassist Flea, longtime drummer Chad Smith, and former touring guitarist Josh Klinghoffer. </p>
    </div>
    
    <!-- Anthony Kiedis -->
    
    <section>

   <div class="container-fluid">
     <h4>Anthony Kiedis</h4>
     
        <img id="img-div" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Anthony_Kiedis_at_Prudential_Center.jpg/220px-Anthony_Kiedis_at_Prudential_Center.jpg" alt="Anthony Kiedis picture from 2012">

     
        <p> Kiedis was born in Grand Rapids, Michigan, to Margaret "Peggy" (Noble) and actor John Michael Kiedis, known professionally as Blackie Dammett. His paternal grandfather's family emigrated from Lithuania in the early 1900s; the remainder of his ancestry includes English, French, Dutch, and Mohican. In 1966, when he was three years old, his parents divorced. He was raised by his mother in Grand Rapids, later his mother remarried and had two more children- Anthony’s half sisters. Eachsummer, he would visit his father in Hollywood for two weeks, a time during which the two would bond. He idolized his father, and recalled, "Those trips to California were the happiest, most carefree, the-world-is-a-beautiful-oyster times I'd ever experienced." In 1974, when Kiedis was twelve years old, he moved to Hollywood to live with his father full-time. His father was a struggling actor who sold drugs, which had a significant impact on Kiedis, as the two would often use marijuana and cocaine together. Kiedis accidentally tried heroin for the first time at age 14, mistaking the substance for cocaine. Through his father Blackie, Kiedis, who worked under the stage name of Cole Dammett, landed his first acting role appearing as Sylvester Stallone's character's son in the 1978 film, F.I.S.T. That same year he would land two more acting jobs, one being on an ABC Afterschool Special and the other an appearance in the film, Jokes My Folks Never Told Me.</p><br>

        <p>
Kiedis attended Fairfax High School in Los Angeles, where he struggled to find friends as he had recently transferred to a new school district. However, he soon met Flea, and after a brief confrontation, the two became best friends and bonded while sitting next to each other in driver's ed class. Kiedis recalled, "We were drawn to each other by the forces of mischief, love, and The Grateful Dead. We became virtually inseparable. We were both social outcasts. We found each other and it turned out to be the longest-lasting friendship of my life." Kiedis became a significant influence on Flea, exposing him to rock music, particularly punk rock. Kiedis and Flea began jumping into swimming pools from buildings as a hobby. At age 15, Kiedis        broke his back attempting to jump into a swimming pool from a five-story building, missing the pool by a few inches. His back has since improved, although he still has occasional problems.</p><br>

        <p>
After Kiedis began working with Flea and Jack Irons, he was described as a "manic master of ceremonies" before he even began singing for the group. Irons and Hillel Slovak had begun playing together in high school while performing in a band called Chain Reaction. The group included then bassist Tom Strasman and Chilean-born vocalist and guitarist Alain Johannes. With Strasman set on becoming a lawyer, he quit the band to keep his grades up and focus on college. At this point, Flea was brought into the mix. Shortly after hanging out with the band, and attending a few shows, Kiedis was offered a position in the band by Flea. He began as a "hype man", going out in front of the band blurting out jokes to the audience and getting them pumped up."</p><br>

        <p>
Kiedis also met future bandmate Slovak after seeing him perform with his band Anthym. After the show, Slovak invited Kiedis to his house for a snack. Kiedis later described the experience in his autobiography Scar Tissue: "Within a few minutes of hanging out with Hillel, I sensed that he was absolutely different from most of the people I'd spent time with...He understood a lot about music, he was a great visual artist, and he had a sense of self and a calm about him that were just riveting." Slovak, Kiedis, and Flea became best friends and often used LSD, heroin, cocaine, and speed recreationally. Despite his frequent drug use, he excelled in school, often receiving straight A grades. In June 1980, Kiedis graduated with honors from
high school. That August, he enrolled at the University of California, Los Angeles to study writing. However, he dropped out at the beginning of his second year due to his worsening addiction to cocaine and heroin. </p><br>
        
            </div>  
    </section>
    
<!-- Flea  -->
    <section>

   <div class="container-fluid">
     <h4>Flea </h4>
     
        <img id="img-div"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/2016_RiP_Red_Hot_Chili_Peppers_-_Michael_Flea_Balzary_-_by_2eight_-_DSC0041.jpg/220px-2016_RiP_Red_Hot_Chili_Peppers_-_Michael_Flea_Balzary_-_by_2eight_-_DSC0041.jpg" alt="Flea - Bass Guitar - image">

 <p>Michael Peter Balzary was born on October 16, 1962 in the Melbourne suburb of Mount Waverley, Victoria. He is of Hungarian and Irish descent. His father, Mick Balzary, an avid fisherman, often took him fishing. When Flea was seven, his family moved to Larchmont, New York for his father's career. In 1971, his parents divorced and his father returned to Australia. Flea and his siblings stayed with their mother Patricia, who soon remarried a jazz musician. Decades later, Flea would receive American citizenship. He was first called "Flea" as a child for his seeming inability to sit still, and the nickname stuck ever since.</p><br>
<p>
Flea's stepfather, Walter Abdul Urban (1941–2011), frequently invited musicians to his house, where jam sessions would often take place. The family moved again to Los Angeles, California, where Flea became fascinated with the trumpet. He had no interest in rock music at the time; he idolized jazz musicians like Miles Davis, Louis Armstrong and Dizzy Gillespie. His stepfather was an "aggressive alcoholic", who eventually became involved in shoot-outs with police. "I was raised in a very violent, alcoholic household", Flea later said, "I grew up being terrified of my parents, particularly my father figures. It caused me a lot of trouble later in life."To cope, Flea began smoking cannabis at 13, and became a daily user.</p><br>
<p>
Flea, who was then nicknamed Mike B. the Flea, attended Fairfax High School, and was somewhat of an outcast due to his taste in music. However, he soon met Anthony Kiedis, and after a brief confrontation, the two became best friends. Kiedis recalled: "We were drawn to each other by the forces of mischief and love and we became virtually inseparable. We were both social outcasts. We found each other and it turned out to be the longest-lasting friendship of my life." Flea was turned on to rock music by Hillel Slovak, and particularly punk rock by Anthony Kiedis. Originally a jazz trumpet player, Flea learned to play bass from Slovak, who shortly after asked him to be a bassist in his band, Anthym. Flea soon developed his own style and joined the group, but quit several months later in order to play for the punk rock outfit Fear. He then rejoined Slovak to form an intended one-off band: Tony Flow and the Miraculously Majestic Masters of Mayhem along with Kiedis and Jack Irons, all of them at the time inspired by the free funk band Defunkt and the hip hop act Grandmaster Flash and The Furious Five.</p><br>
     
      </div>
    </section>  
    
   <!-- Chad Smith -->
    
    <section>

   <div class="container-fluid">
     <h4>Chad Smiths</h4>
     
        <img id="img-div" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/2016_RiP_Red_Hot_Chili_Peppers_-_Chad_Smith_-_by_2eight_-_DSC0184.jpg/220px-2016_RiP_Red_Hot_Chili_Peppers_-_Chad_Smith_-_by_2eight_-_DSC0184.jpg" alt="Chad Smith - Red hot chili pappers - drummer">
     
  <p>Chadwick Gaylord Smith was born in Saint Paul, Minnesota, the third child of Joan and Curtis Smith. He spent most of his childhood in Bloomfield Hills, Michigan, where he graduated from Lahser High School in 1980. He started to play drums at age seven and grew up listening mainly to bands such as Rush, The Rolling Stones, Humble Pie, Pink Floyd, Black Sabbath, Led Zeppelin, Deep Purple, The Who, The Jimi Hendrix Experience, and Kiss. He also cites Ian Paice, Mitch Mitchell, Bill Ward, John Bonham, Keith Moon, Stewart Copeland, and Neil Peart as early influences on his drumming. </p><br>
     
<p>
Chad did not receive formal drum lessons, and gained drumming experience by playing in school bands.</p><br>
     
<p>
Smith ran away from home when he was 15, but returned home after a summer.</p><br>
          
<p>
Smith spent his early years in various rock bands, Starting in high school with a band called Paradise, where they won the battle of the bands in Birmingham Mi., 1977. That first band included members, Jay Yang (bass), Scott Porter (lead guitar) and Tom Auch (rodie). Future bands included Pharroh and Michigan-based band Toby Redd. Pharroh's percussionist Larry Fratangelo, who also worked with Parliament-Funkadelic, introduced Smith to R&B and funk music and taught him how to play funk. Smith said, "I think up until then, I was a drummer. Once I studied with Larry, I turned into a musician." Funk drummers like David Garibaldi, Jabo Starks, Clyde Stubblefield, and Greg Errico caught his attention and influenced his style a lot. Later, Smith decided to move to California to pursue his musical aspirations. </p><br>
     
      </div>
    </section>
    
       <!-- Josh Klinghoffer -->
    
    <section>

   <div class="container-fluid">
     <h4>Josh Klinghoffer</h4>
     
        <img id="img-div" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/2016_RiP_Red_Hot_Chili_Peppers_-_Josh_Klinghoffer_-_by_2eight_-_DSC0327.jpg/220px-2016_RiP_Red_Hot_Chili_Peppers_-_Josh_Klinghoffer_-_by_2eight_-_DSC0327.jpg" alt="Josh Klinghoffer - Red hot chili pappers -Lead Guitar">
     
  <p>Klinghoffer was born on 3 October 1979 in Los Angeles, California. Klinghoffer took drum lessons when he was nine, and taught himself guitar and keyboards.</p><br>
     
<p>Dropping out of formal education at the age of 15, Klinghoffer became involved in performing and recording music in Los Angeles at an early age. Klinghoffer describes himself at this time as "the little music dork who lived around the corner, dropped out of high school, and was just playing guitar all day long." In 1997, at the age of seventeen, Klinghoffer joined The Bicycle Thief, the then-current project from former Thelonious Monster frontman Bob Forrest. Red Hot Chili Peppers vocalist Anthony Kiedis noted that "Bob [Forrest] has always had a very keen sensibility about finding extremely talented and down-to-earth people who just want to get to a kitchen and write a song." The band's subsequent studio album, You Come and Go Like a Pop Song, marked Klinghoffer's first recording experience. Regarding bandmate Forrest's notorious drug addiction, which arguably stalled Thelonious Monster's commercial success, Klinghoffer stated at this time that he: "Pretty much had enough confidence in myself to know that I wasn't gonna be 'the next Bob Forrest'." It was during the recording of Bicycle Thief album that Josh first met John Frusciante, who came in to record a guitar solo. The two eventually began to hang out and listen to music together at Frusciante's home.</p><br>
     
<p style="margin-bottom: 80px;">
In 2000, The Bicycle Thief opened for Red Hot Chili Peppers, as the latter toured in support of their seventh studio album, Californication.</p>
     
     </div>
    </section>
    
  
  </main>

<footer>  

  <div id="tribute-link">
  <h2> For more and fun info about the band <a href="https://www.facebook.com/ChiliPeppers/" target="_blank"> click here </a><h2>
    </div>  
    
</footer>


</body>

</html>
              
            
!

CSS

              
                @import url( <link href="https://fonts.googleapis.com/css?family=Raleway:800,700,  600,500, 400|Roboto" rel="stylesheet">);

body, html {
  height: 100%;
  margin: 0;
  background-color: #1a1a1a;
}
/* styles to make borders not take on extra space */ 
* {
  -moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}


html, body { 
  height: 100%;
  width: 100%;
  margin: 0;
  }

/* Browser style reset so they all play nice */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, time, mark, audio, video { 
	font-size: 100%; 
	margin: 0; 
	padding: 0; 
	outline: 0 none; 
	vertical-align: baseline; 
}


/* Now we Start coding */
h1 {
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 30pt;
  letter-spacing: 1px;
}
h2 {
  color: #ed1c24;
  font-family: "Roboto", sans-serif;
  font-size: 28pt;
  font-weight: 300;
  letter-spacing: 1px;
}

h3 {
  color: #595c5f;
  text-align: center;
  font-family: "anton", sans-serif;
  font-weight: 700;
  font-size: 30pt;
  letter-spacing: 3px;
  word-spacing: 4px;
  text-decoration: underline;
  margin: 120px 24px 48px 24px;
  
}

h4 {
  display: block;
  font-family: "anton", sans-serif;
  font-weight: 300;
  color: #ed1c24;
  font-size: 26pt;
  letter-spacing: 3px;
  word-spacing: 4px;
  
  margin-top: 80px;
  margin-left: 240px;
  margin-right: 240px;
  margin-bottom: 24px;
  
}

p {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 16pt;
  letter-spacing: 2px;
  word-spacing: 3px;
  line-height: 1.6;
  
  margin-left: 240px;
  margin-right: 240px;
  margin-top: -8px;
 
}

header {
  height: 100%;
  
 
}

.container-fluid {
  height: 100%;
  padding: 0;
}
.row {
  height: 100%;
  
}

#image {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  border-bottom: 1px solid #ed1c24;
  object-fit: cover;
}

.headline-box {
  display: block;
  background-color: rgba(26, 26, 26, 0.95);
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 750px;
  height: 250px;
}

.logo {
  display: block;

  position: absolute;
  top: 50%;
  left: 80px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
}

#title {
    position: absolute;
  top: 50%;
  left: 260px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#title h2 {
  position: relative;
  bottom: 4px;
}
/* ===== main article ===== */

#img-div {
  display: block;
  float: left;
  margin-bottom: 16px;
  margin-left: 240px;
  margin-right: 40px;
  border: 4px solid #595c5f;
  border-radius: 8px;
}

#tribute-info * {
  color: #C2C3C4;
}

footer {
  
  background-color: #595c5f;
  position: absolute;
  width: 100%;
  height: 100%;
   

  width: 100%;
  height: auto;
  text-align: center;
  }

#tribute-link h2 {
  font-family: "Raleway", sans-serif;
  color: #fff;
  margin: 40px 160px 40px 160px;
}

footer a {
  font-weight: bold;
}




/* ===== For mobiles ===== */


@media screen and (max-width: 1200px){
  
   #img-div {
  margin-left: 80px;
}
  
  h4 {
  margin-left: 80px;
  }
  p {
  margin-left: 80px;
  margin-right: 80px;
  }
  
}
@media screen and (max-width: 1000px) {
  
  h1 {
   font-size: 26pt;
  }
  h2 {
   font-size: 24pt;
  }
  
  h3 {
 text-align: center; 
 margin-bottom: 24px;
 margin-left: 40px;
 margin-right: 40px;
 font-size: 30pt;
  }
  
h4 {
    width: 100%;
    margin:0;
    padding-top: 80px;
    text-align: center;
  }
  
  p {
    margin-left: 80px;
    margin-right: 80px;
    font-size: 16pt;
    letter-spacing: 3px;
    text-align: justify;
  }
  
 #img-div {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 48px;
  float: none;
  } 
 }
    
@media screen and (max-width: 830px) {
  
   .headline-box {
   width: 100%; 
   height: 160px;
  }
  .logo {
    width: 100px;
    height: 100px;
  }
  
  #title {
  left: 196px;
  }
     
 h3 {
  font-size: 24pt;
  }
  
   h4 {
   text-align: center;
   font-size: 22pt;
  }
 }
  
  
              
            
!

JS

              
                
              
            
!
999px

Console