FreeCodeCamp tribute page
A Pen by John Gootee on CodePen.
Created
May 21, 2019 18:08
-
-
Save gootee/b46bed71eac0e7b2720e0fb7279fcce2 to your computer and use it in GitHub Desktop.
Paul McCartney Tribute
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> | |
| </head> | |
| <main> | |
| <div id="main"> | |
| <h1 id="title">Paul McCartney</h1> | |
| <div>One of the most successful composers and performers of all time</div> | |
| <div id="img-div"> | |
| <img id="image" src="https://ksassets.timeincuk.net/wp/uploads/sites/55/2019/01/paul-mccartney-auto-tune-get-enough-1220x775.jpg"/> | |
| <div id="img-caption"> | |
| McCartney was inducted into the Rock and Roll Hall of Fame in 1988 as a member of the Beatles and again as a solo artist in 1999. | |
| </div> | |
| </div> | |
| <div id="tribute-info"> | |
| <h3 id="fact-head">Some Paul facts:</h3> | |
| <ul id="fact-list"> | |
| <li> | |
| His songwriting partnership with John Lennon remains the most successful in history | |
| </li> | |
| <li> | |
| More than 2,200 artists have covered his Beatles song "Yesterday", making it one of the most covered songs in popular music history | |
| </li> | |
| <li> | |
| McCartney has written, or co-written, 32 songs that have reached number one on the Billboard Hot 100 | |
| </li> | |
| <li> | |
| McCartney is also one of the wealthiest musicians in the world, with an estimated net worth of US$1.2 billion | |
| </li> | |
| </ul> | |
| <blockquote> | |
| <p>"I don't work at being ordinary."</p> | |
| <div>Paul McCartney</div> | |
| </blockquote> | |
| </div> | |
| <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Paul_McCartney">Learn more about Paul</a> | |
| </div> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #tribute-info h3 { | |
| display: block; | |
| font-size: 1.17em; | |
| /* margin-block-start: 1em; | |
| margin-block-end: 1em; | |
| margin-inline-start: 0px; | |
| margin-inline-end: 0px; */ | |
| font-weight: bold; | |
| } | |
| #tribute-link { | |
| } | |
| #fact-head { | |
| margin-top: 50px; | |
| } | |
| #fact-list { | |
| margin: 0 auto; | |
| list-style-position: inside; | |
| width: 500px; | |
| text-align: left; | |
| } | |
| #fact-list li { | |
| padding: 5px; | |
| } | |
| main { | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| font-family: "Trebuchet MS", Helvetica, sans-serif; | |
| margin: 30px auto; | |
| padding: 15px; | |
| border: 0px solid; | |
| border-radius: 5px; | |
| background: #eee; | |
| } | |
| #img-div { | |
| margin: -5px; | |
| margin-top: 20px; | |
| width: 100%; | |
| border: 5px solid white; | |
| background: white; | |
| } | |
| #image { | |
| display: block; | |
| height: auto; | |
| margin: 0 auto; | |
| max-width: 60%; | |
| } | |
| #img-caption { | |
| margin: 15px; | |
| } | |
| blockquote { | |
| font-style: italic; | |
| margin: 45px; | |
| } | |
| #title { | |
| display: block; | |
| font-size: 3em; | |
| font-weight: bold; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment