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. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                 <div class="hero-image">
   
  <div class="hero-text">
    <h1 class="display-1">Dave Grohl</h1>
    <h3>The man. The legend</h3>
    <a class="button" href="https://en.wikipedia.org/wiki/Dave_Grohl">Find out more</a>
  </div>
</div>

<div id="quote">
  <div class="row text-center">
   <div class="col-sm-12".
        <blockquote class="blockquote text-center">
  <p class="mb-0" style="font-size: 20px;">TV talent shows make everyone sound like fucking Christina Aguilera.</p>
  <footer class="blockquote-footer" style="font-size: 16px;">Dave Grohl</footer>
</blockquote>
   </div> 
  </div>
</div>

<div id="el">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
  <h1>Early Life</h1>
  <p>David Eric Grohl was born on January 14, 1969 in Warren, Ohio, the son of Virginia Jean (née Hanlon), a teacher, and James Harper Grohl (1938-2015), at the time a newswriter.[3] He has Slovak, German, and Irish ancestry. When he was a child, Grohl's family moved from Warren, to Springfield, Virginia. When Grohl was seven, his parents divorced, and he subsequently grew up with his mother.</p>
  
  <p>At the age of twelve, Grohl began learning to play guitar. He grew tired of lessons and instead taught himself, and he eventually began playing in bands with friends. A year later, Grohl and his sister spent the summer in Evanston, Illinois, at their cousin Tracy's house. Tracy introduced them to punk rock by taking the pair to shows by a variety of punk bands. His first concert was Naked Raygun at The Cubby Bear in Chicago in 1982 when he was 13 years old. "From then on we were totally punk", Grohl recalled. "We went home and bought Maximumrocknroll and tried to figure it all out".</p>
  
  <p>While in high school, Grohl played in several local bands, including a stint as guitarist in a band called Freak Baby. It was during this period that Grohl taught himself to play drums. When Freak Baby kicked out its bass player, Grohl decided to switch to drums, and the reconstituted band renamed themselves Mission Impossible. During his developing years as a drummer, Grohl cited John Bonham as his greatest influence, and eventually had Bonham's three-rings symbol tattooed on his wrist. Mission Impossible later rebranded themselves Fast before breaking up, after which Grohl joined the post-punk-influenced hardcore punk band Dain Bramage.</p>
    </div>    

  

  
    
    <div class="col-sm-6">
        <iframe class="embed-responsive-item"  width="100%" height="100%" src="https://www.youtube.com/embed/98yQiEtSshs" frameborder="0" allowfullscreen></iframe>
</div>
    </div>
</div>
</div>
<div id="career">
<div class="container">
<div class="row">
  <div class="col-sm-12">
    <h1 class="text-center"><u>Career</u></h2>
    <h3>Scream</h3>
    <p>At the age of seventeen, Grohl auditioned for the Washington D.C. punk band Scream to fill the spot of departed drummer Kent Stax. In order to audition, Grohl had lied about his age and had claimed that he was 20. After auditioning, the band asked him if he would like to join. Grohl accepted their offer. Grohl dropped out of high school in his junior year and for the next four years toured extensively with the band. Grohl played on two studio albums, No More Censorship and Fumble.

While playing in Scream, Grohl became a fan of the band The Melvins and eventually befriended the band. During a 1990 tour stop on the West Coast, The Melvins' vocalist and guitarist Buzz Osborne took Kurt Cobain and Krist Novoselic, to see the band. </p>
    
    <h3>Nirvana</h3>
    <p>A few months later, Scream unexpectedly disbanded following the departure of its bass player, and Grohl placed a phone call to Osborne for advice. Knowing how much Cobain and Novoselic liked Grohl's drumming, Osborne gave Novoselic's phone number to Grohl. Novoselic invited Grohl up to Seattle, where Grohl attended Nirvana's infamous show at the Motor Sports Garage, the one Nirvana show that featured Dan Peters on drums. (Grohl admitted to Rolling Stone in 2005 that he spent most of Nirvana's set outside talking to a friend.)
</p>
    
    <h3>Foo Fighters</h3>
    <p>Following Cobain's death in April 1994, Grohl retreated, unsure of where to go and what to do with himself. In October 1994, Grohl scheduled studio time, again at Robert Lang Studios, and quickly recorded a fifteen-track demo. With the exception of a single guitar part on "X-Static" played by Greg Dulli of the Afghan Whigs, Grohl performed all of the instruments himself.

At the same time, Grohl wondered if his future might be in drumming for other bands. In November, Grohl took a brief turn with Tom Petty and the Heartbreakers, including a performance on Saturday Night Live. Petty asked him to join permanently, but Grohl declined. He was also rumored as a possible replacement for Pearl Jam drummer Dave Abbruzzese and even performed with the band for a song or two at three shows during Pearl Jam's March 1995 Australian tour. However, by then, Pearl Jam had already settled on ex-Red Hot Chili Peppers drummer Jack Irons, and Grohl had other solo plans in the works.
</p>
    
    <h3>Queens of the Stone Age</h3>
    <p>Near the end of 2001, Foo Fighters returned to the studio to work on their fourth album. After four months in the studio, with the sessions finished, Grohl accepted an invitation to join Queens of the Stone Age and helped them to record their 2002 album Songs for the Deaf. (Grohl can be seen drumming for the band in the video for the song "No One Knows".) After a brief tour through North America, Britain and Japan with the band and feeling rejuvenated by the effort, Grohl recalled the other band members to completely re-record their album at his studio in Virginia. The effort became their fourth album, One by One. While initially pleased with the results, in another 2005 Rolling Stone interview, Dave Grohl admitted to not liking the record: "Four of the songs were good, and the other seven I never played again in my life. We rushed into it, and we rushed out of it".
</p>
    
    <h3>Them Crooked Vultures</h3>
    <p>In July 2009, it was revealed that Grohl was recording with Josh Homme and John Paul Jones as Them Crooked Vultures. The trio performed their first show together on August 9, 2009, at Metro in Chicago. The band played their first UK gig on August 26, 2009, with a surprise appearance at Brixton Academy in London, supporting the Arctic Monkeys. The band released their debut album Them Crooked Vultures on November 16, 2009 in the UK and November 17, 2009 in the US.

On February 6, 2010, Grohl performed with his band Them Crooked Vultures the songs "Mind Eraser, No Chaser" and "New Fang" as musical guests on Saturday Night Live Dave Grohl appeared as an old punk rock drummer reuniting the group "Crisis of Conformity" after 25 years in a skit later on in the episode.
</p>
  </div>
</div>
</div>
</div>

<div id="bands" style="height: 100%;" class="row">
  <div id="db" class="col-md-4"></div>
  
  <div id="nirvana" class="col-md-4"></div>
  
  <div id="scream" class="col-md-4"></div>
  
  <div id="foos" class="col-md-4"></div>
  
  <div id="qotsa" class="col-md-4"></div>
  
  <div id="tcv" class="col-md-4"></div>
  
  
</div>



              
            
!

CSS

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

.hero-image {
    background-image: url("http://media.socastsrm.com/wordpress/wp-content/blogs.dir/106/files/2017/10/GettyImages-866876956-1.jpg");
  height: 100%;
  width:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; 
}

.hero-text h3{
  margin-bottom: 30px;
}

.button{
  
  text-decoration: none;
  border: 1px solid white;
  padding: 10px;
  color: white;
  font-weight: bold;
   -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover{
  text-decoration: none;
  color:white;
  background-color: #c0392b;
}

#quote{
  padding: 30px 0px 30px 0px;
  background-color: #c0392b;
  
}

#timeline{
  padding: 30px 0px 30px 0px;
}
#el{
  
  padding: 30px 0px 30px 0px;
}

#career {
  padding: 30px 0px 30px 0px;
  background-color:#ecf0f1;
}

#bands{
   border-top: 2px solid #95a5a6;
  margin: 0px;
}

#bands .col-md-4{
   border-right: 1px solid #95a5a6;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 476px;
}

#db{
background-image: url("https://i.ytimg.com/vi/aEHblf-TfzE/hqdefault.jpg");
}

#nirvana{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Nirvana_album_cover.jpg/600px-Nirvana_album_cover.jpg");
}

#scream{
background-image: url("http://www.feelnumb.com/wp-content/uploads/2012/08/scream_band_dave_grohl_nirvana.jpg");
}

#foos{
background-image: url("https://cdn.shopify.com/s/files/1/1768/4595/products/FOO253a_FF_CIRCLE_PATCH_800X800_857ac11b-1125-4a46-a266-9d1708055f0a_large.png?v=1503422877");
}

#qotsa{
background-image: url("https://pbs.twimg.com/media/DCTnr3HXUAEl-t8.jpg");
}

#tcv{
background-image: url("https://images-na.ssl-images-amazon.com/images/I/91Suf8N%2BpJL._SY450_.jpg");
}
              
            
!

JS

              
                
              
            
!
999px

Console