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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<html>
<main id="main">
  <h1 id="title">The Velvet Underground tribute page</h1>
  <div id="img-div">
    <img id="image" src="https://www.yaconic.com/wp-content/uploads/2019/09/velvet-underground-2-1024x525.jpg" class="responsive-image" alt="members of the band against a blue sky">
    <figcaption id="img-caption"><i>From left to right: Sterling Morrison, Lou Reed, Nico, Maureen Tucker, John Cale</i></figcaption>
  </div>
  <p id="tribute-info">
    The Velvet Underground was founded in 1966 by John Cale, Lou Reed, Sterling Morrison and Angus MacLise on percussion. MacLise was later replaced in drums by Maureen Tucker, who became a permanent member of the band. MacLise argued that he couldn't play when someone told him when to start and when to end!</p>
  <p id="more-info">When discovered by artist Andy Warhol, he decided to produce them an album, add a female singer, the German Nico, and promote the band in his happenings. Commercialy a failure in their time despite Warhol, they are recognized today as one of the most influential bands in rock history.
  </p>
  <h2 id="first-album"><i>The first album: The Velvet Underground and Nico</i></h2>
  <img id="banana" src="https://graffica.info/wp-content/uploads/2015/04/00-warhol-The-banana-album.png" alt="album the velvet underground and nico cover">
  <p id="first-album-review">1967 was the year. The "banana album" as it was later known, was released then. The sound of the band was something like never was heard before. 
    <p id="banana-review-two"> Lou Reed on guitar, John Cale on piano, bass guitar and an electric viola that became the trademark of the band, Sterling Morrison on rhythm guitar, Maureen Tucker on drums and Nico lending her dark, low-key voice for three songs.</p>
  <p id="banana-album-review-two">The sound ranged from delicate to epic to extremely noisy. "Venus in Furs" was paradigmatic of this album, the subject matter being a sadomasochism novel Reed was reading at the time, he said the title was perfect for a song so he had to write the song to accompany the title. The viola by Cale here is a key element, with Reed's voice like in most of the album, seeming like a deranged Bob Dylan. "Heroin" (Reed wrote all the lyrics) was a quiet song which becomes more and more noisy as the drug comes to effect, making a perfect account, in music, of what it was like to be an heroin addict and it's not precisely pleasant. Nico lent her profound voice for three songs: "Femme Fatale", the epic "All Tomorrow's Parties" and the sweet "I'll Be Your Mirror". The emblematic cover was designed by Warhol.
  </p>
  <h2 id="second-album"><i>White Light/White Heat</i></h2>
  <img id="second-album-cover" src="https://i.pinimg.com/originals/20/93/7a/20937a27df03a5f99ab0f11a970a0fe9.jpg" alt="a black cover with black lettering"><br />
  <p id="white-review">Badly understood by the label Verve, the publicity for the first album didn't work. Nico went on to proceed with a solo career that ended up being brilliant and Andy Warhol was fired by Reed after the artist asked him if they were going to play museums their whole career. So they seized the second album, black-on-black photo cover of a tattoo with white lettering, and burned the ship. </p>
  <p id="white-review-two">"White Light/White Heat", the opener, ends with a bass line with such distortion you can barely guess what it is. In "The Gift" Cale narrates a story written by Reed in his college years in one channel (remember this was stereo) while in the other the band plays an instrumental. You could turn the balance in the old vinyl players and you could hear one, the other or both. But it was "Sister Ray" the real deal here. Eighteen minutes of a sonic battle between Reed and Cale, playing here the organ, in such a way that it drowns even the drums. Cale paid dearly for this, being expelled of the band by Reed, who was concentrating on the lyrics and wanted the next album to be less noisy.</p>
  <h2 id="the-third-album"><i>The Self-Titled Third Album</i></h2>
  <img id="third-album-cover" src="https://i.etsystatic.com/17191315/r/il/0e9f91/1994152559/il_570xN.1994152559_865i.jpg" alt="members of the band sitting in a couch">
  <p id="third-album-review">So they lacked a bass-player and brought in Doug Yule. The new formation worked really fine, Reed's composing talents not only made for great lyrics but for some insightful, well-crafted songs with even the long excentricity called "The Murder Mystery" with voices overlapping and crazy instrumentation. The closer was "Afterhours", a beautiful piece sang by Maureen in an almost childlike voice, with lines such as "if you close the door the night could last forever". Another gem is "I'm set free" with a beautifully played solo by Morrison or "Candy Says" about the transgender Warhol star Candy Darling. Again, the album didn't sell.</p>
  <h2 id="loaded"><i>"Loaded" and the demise of the band</i></h2>
  <img id="loaded-cover" src="https://img.discogs.com/luFExrm3X2WnkxlsaB6MzXNGNm4=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/R-2325963-1277089241.jpeg.jpg" alt="drawing of an underground train stairs with pink smoke coming out">
  <p id="loaded-finish">Doug Yule, with a funny personality and charisma began eclipsing the hieratic Lou Reed on stage. Morrison didn't talk to Reed after Cale's way out so the final album saw Reed distanced and indifferent production-wise. He did pen some of the most famous titles of the band like "Sweet Jane" or "Rock and Roll" but the band lacked that something special that set it apart from other rock bands. Today this is the most widely known Velvet album, and ironically after Reed's departure the album was a success.</p>
  <div id="coda">Coda</div>
  <p id="final-words">Brian Eno said once that only a few people knew the Velvets during their life, but all of them formed bands. Their influence goes from elaborate pop like David Bowie or Roxy Music to punk, post-punk, art-rock, noise, and is probably the band most cited as a major influence after maybe only The Beatles or Bob Dylan. I hope this page sparks your curiosity if you haven't heard them yet!</p>
</main>
<footer id="footer">
  <a href="http://olivier.landemaine.free.fr/vu/" id="tribute-link" target="_blank">For merchandising on the band, books, vinyls, whatever you want! Click here</a>
</footer>

</html>
              
            
!

CSS

              
                main {
  background-color: black;
  color: white;
  padding-bottom: 30px;
}
body {
  background-color: black;
}
html {
  scroll-behavior: smooth;
}
::-webkit-scrollbar {
  display: none;
}
#title {
  font-size: 50px;
  text-align: center;
}
p {
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: black;
  margin-left: 20px;
  margin-right: 20px;
}
#tribute-info {
  font-size: 25px;
  text-align: justify;
}
#more-info {
  font-size: 25px;
  text-align: justify;
}
#img-div {
  display: block;
}
#img-caption {
  margin-left: 50px;
}
#image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 20px;
}
#first-album {
  text-align: center;
  font-size: 30px;
  padding-bottom: 20px;
}
#second-album {
  text-align: center;
  font-size: 30px;
  padding-bottom: 20px;
}
#first-album-review {
  text-align: justify;
  font-size: 25px;
  margin-left: 20px;
  margin-right: 20px;
}
#banana-review-two {
  text-align: justify;
  font-size: 25px;
  padding-bottom: 20px;
}
#banana-album-review-two {
  text-align: justify;
  font-size: 25px;
  margin-left: 20px;
  margin-right: 20px;
  padding-bottom: 20px;
}
#banana {
  width: 400px;
  height: auto;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-width: 5px;
  border-color: white;
  border-radius: 10px;
}
#second-album-cover {
  width: 400px;
  height: auto;
  margin-left: 50px;
  margin-top: 10px;
  border-width: 10px;
  border-color: black;
  border-radius: 10px;
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
#third-album-cover {
  width: 400px;
  height: auto;
  margin-left: 50px;
  margin-top: 10px;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-width: 10px;
  border-color: white;
  border-radius: 10px;
}
#loaded-cover {
  width: 400px;
  height: auto;
  margin-left: 50px;
  margin-top: 10px;
  border-width: 10px;
  border-color: white;
  border-radius: 10px;
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
#white-review {
  text-align: justify;
  font-size: 25px;
  padding-bottom: 20px;
}
#white-review-two {
  text-align: justify;
  font-size: 25px;
  padding-bottom: 20px;
}
#the-third-album {
  text-align: center;
  font-size: 30px;
}
#third-album-review {
  text-align: justify;
  font-size: 25px;
  margin-left: 30px;
  margin-right: 30px;
}
#loaded {
  text-align: center;
  font-size: 30px;
}
#loaded-finish {
  text-align: justify;
  font-size: 25px;
  margin-left: 25px;
  margin-right: 25px;
  padding-bottom: 20px;
}
#coda {
  text-align: center;
  font-size: 30px;
}
#final-words {
  text-align: center;
  font-size: 25px;
  padding: 30px;
  border-width: 10px;
  border-style: solid;
  border-radius: 10px;
  border-color: white;
}
#footer {
  background-color: black;
  padding: 30px;
  text-align: center;
  font-size: 25px;
  border-width: 10px;
  border-color: white;
  border-style: solid;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
#tribute-link {
  color: white;
  text-decoration: none;
}
#tribute-link:hover {
  cursor: pointer;
  color: violet;
}
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console