css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

              <main id="main">

  <header id="tribute-info">
    <h1 id="title">David Bowie <br> 1947 - 2016</h1>
  </header> <!-- End Header -->

  <div id="content">

    <blockquote class="row" cite="https://pitchfork.com/features/afterword/9786-david-bowie/">
      <p>"David Bowie was the ultimate cultural connector, envisioning pop not
        as a closed loop but rather an infinite network of intellectual curiosities
        that spanned underground music, avant-garde art, and left-field literature."
      <footer>— Stuart Berman</footer>
    </blockquote> <!-- End Blockquote-->

    <section class="timeline row">
      <div class="container">
        <h2>David Bowie's career highlights</h2>
        <p>Bowie's birth name was David Robert Jones and he was born on January 8,
          1947 in Brixton, South London. He renamed himself in 1966 to avoid
          confusion with the lead singer of U.S. rock band, The Monkees.</p>
        <p>Bowie adopted the persona of Ziggy Stardust in the 1970s. The alter ego
          proved an instant classic and the one for which he is most remembered.
          "The Rise and Fall of Ziggy Stardust and The Spiders from Mars" came to
          define the glam rock era in the U.K. and launched Bowie into the
          global spotlight. Bowie was at the time signed to RCA records and had
          made his first trip to the U.S.</p>
        <p>The rock legend's music became increasingly soulful and by the
          mid-1970s he had established himself in the U.S., bolstered by his
          world tours. His single "Fame" in 1975 became his first
          number one single in the States.</p>
        <h3>The Thin White Duke</h3>
        <p>His next persona had Bowie impeccably dressed in a white shirt,
          black trousers and waistcoat. After recording his "Station to Station"
          album as The Thin White Duke, his drug use and deteriorating health saw
          him relocate from Los Angeles to West Berlin. The following years of
          isolation saw him collaborate with legendary producers Brian Eno and
          Tony Visconti, and rock singer Iggy Pop, and spawned the smash
          hit "Heroes."</p>

        <figure id="img-div" class="">
          <img src="http://i0.kym-cdn.com/photos/images/original/001/064/295/b01.jpg" alt="David Bowie in late 70s" id="image">
          <figcaption id="img-caption">A modelesque Bowie during his "Heroes" era in 1977</figcaption>

        <p>Bowie embraced the movie industry and starred alongside
          Jennifer Connelly in Jim Henson's "Labyrinth" in 1986. He also appeared
          and sometimes starred in movies like "The Last Temptation of Christ",
          "The Man Who Fell To Earth", "Merry Christmas, Mr. Lawrence" and David
          Lynch's "Twin Peaks: Fire Walk with Me."</p>
        <h3>Tin Machine</h3>
        <p>Bowie continued to reinvent himself during the 1980s. His music
          video for "Ashes to Ashes" in 1980 became one of the most iconic of
          the decade and he teamed up with producer Nile Rogers for 1983's
          "Let's Dance."
          By the end of the decade, he had joined English-American hard rock band
          Tin Machine, which released two studio albums.</p>
        <p>The 1990s saw yet more incarnations that included a brief flirt with
          "drum and bass" music. In 1997, he invented Bowie Bonds, which allowed
          people to invest in his future earnings. It raised $55 million for
          Bowie, according to reports at the time. He performed at the Freddie
          Mercury Tribute Concert for AIDS Awareness in London, in 1992.</p>
        <h3>Latest album</h3>
        <p>After a quiet patch in the 2000s, Bowie released his first new studio
          album in 10 years in 2013, called "The Next Day." It was hailed as a
          return to form by music critics and saw the singer return to the top of
        the charts. Bowie's last album, "Blackstar" was released
        on the artist's 69th birthday, on January 8, 2016. Two days later David passed away.</p>
    </section><!-- End Timeline-->

    <section class="discography row">
      <h2>Studio albums</h2>

      <ul class=columns>
        <div class="column">
          <li>David Bowie (1967)</li>
          <li>Space Oddity (1969)</li>
          <li>The Man Who Sold the World (1970)</li>
          <li>Hunky Dory (1971)</li>
          <li>The Rise and Fall of Ziggy Stardust and <br> the Spiders from Mars
          <li>Aladdin Sane (1973)</li>
          <li>Pin Ups (1973)</li>
          <li>Diamond Dogs (1974)</li>
          <li>Young Americans (1975)</li>
          <li>Station to Station (1967)</li>
          <li>Low (1977) </li>
          <li>"Heroes" (1977)</li>
          <li>Lodger (1979)</li>
        <div class="column">
          <li>Scary Monsters (And Super Creeps) (1980)</li>
          <li>Let's Dance (1983)</li>
          <li>Tonight (1984)</li>
          <li>Never Let Me Down (1987)</li>
          <li>Tin Machine (1989)</li>
          <li>Tin Machine II (1991)</li>
          <li>Black Tie White Noise (1993)</li>
          <li>1. Outside (1995)</li>
          <li>Earthling (1997)</li>
          <li>Hours (1999)</li>
          <li>Heathen (2002)</li>
          <li>Reality (2003)</li>
          <li>The Next Day (2013)</li>
          <li>Blackstar (2016)</li>

    </section> <!-- End Discography-->

  </div> <!-- End Content-->

  <footer id="footer">
    <img src="https://res.cloudinary.com/boniverski/image/upload/v1471473082/bolt_q60m3t.png">
    <h2>Interested for more insights?</h2>
    <a id="tribute-link" class="text-center" href="https://en.wikipedia.org/wiki/David_Bowie" target="_blank">Wikipedia</a>
  </footer> <!-- End Footer-->
</main> <!-- End Main-->
              /*** BASE ***/
body {
  box-sizing: border-box;
  margin: 0;
  font-family: "Droid Serif", serif;
  color: #333;

body * {padding: 0;}
section {text-align: center;}
ul li {list-style: none;}

.container {max-width: 700px; margin: auto;}
.row {padding: 1.5rem 1rem;}

#content {margin: auto;}
#title, #footer {color: #fdfdfd;}

hr {
  margin: 3rem auto;
  border: 0.5px solid #333;
  width: 200px;

#tribute-info {
  background-image: url(http://cdn4.pitchfork.com/longform/299/DavidBowieAfterward.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;

#title {
  font-size: 2.2rem;
  padding-left: 10rem;

@media (max-width: 600px) {
  #tribute-info {justify-content: center}
  #title {padding-left: 0;}

/*** BLOCKQUTE ***/
blockquote {
  margin: 2rem auto;
  max-width: 600px;
  color: gray;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.2rem;

blockquote * {
  margin: 0;
  padding: 0.5rem 1rem;

.timeline {
  background: #ff6e7f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #bfe9ff, #ff6e7f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-bottom: 3rem;

.timeline #img-div {
  margin: 0;
  padding: 0;

.timeline #img-div #image {
  display: block;
  max-width: 300px;
  margin: auto;
  box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.2);

.timeline #img-div figcaption {
  margin-top: 1rem;
  font-size: 0.7rem;
  font-family: Helvetica, Arial, sans-serif;

.discography .columns {
  display: flex;
  justify-content: center;
  margin: 2rem;

.discography .columns .column {width: 50%;}
.discography .columns .column li {line-height: 2;}

@media (max-width: 600px) {
  .discography .columns {
    flex-direction: column;
    align-items: center;
  .discography .columns .column {width: 100%;}

/*** FOOTER ***/
#footer {
  background-color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 3rem;

#tribute-link {
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  color: white;
  margin-top: 1rem;
  padding: 0.3rem 2.5rem;
  line-height: 2;
  background: #ff6e7f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #bfe9ff, #ff6e7f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 2px;
  transition: all ease 0.3s;

#tribute-link:hover {transform: scale(1.1);}

#footer img {width: 80px;}
              /* Free Code Camp:
* Applied Responsive Web Design Projects
* January 2018
🕑 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.
Loading ..................