CodePen Embed - A Tribute Page to Freddie Mercury

<header id="main">
  <h1 id="title"> Freddie Mercury </h1>
  <br></header>
  <h2 id="title1"><i>"Regarded as one of the greatest lead singers in the history of rock music, he was known for his flamboyant stage persona and four-octave vocal range."</i></h2>
<br>
<br>

<body>
  <div id="img-div">
    <div id="image"><img src="https://media.them.us/photos/5afc954001bb27001030e020/master/w_1280,c_limit/GettyImages-75509443.jpg" alt="Photo of Freddie Mercury Singing on Stage" class="center">
      
      <div id="img-caption"> Freddie Performing on Stage with Flamboyant Attire. </div>
    </div>
    <br>
    <br>
    <hr>
    <p>
      <div id="tribute-info"> The life of Freddie Mercury:</div>
    </p>
    <p1>
      <u1>
      <li><b><i> 1946</i></b> - Born in Stown Town, Sultanate of Zanzibar on 5 September 1946 with the name of Farrokh Bulsara.</li>
      <li><b><i>1964</i></b> - His family fled the Zanzibar Revolution and they moved to Middlesex, England.</li>
      <li><b><i>1970</i></b> - After years of art and musical studies he formed the band 'Queen' with guitarist Brian May and drummer Roger Taylor.</li>
      <li><b><i>1976</i></b> - In December he informed his long-term relationship partner, Mary Austin of his sexuality which ended their romantic relationship.</li>
      <li><b><i>1985</i></b> - Freddy began another long-term relationship with a hairdresser, Jim Hutton. He also released his first solo album, Mr. Bad Guy, which debuted in the top ten of the UK Album Charts.</li>
      <li><b><i>1986</i></b> - Queen played behind 'Iron Curtain' when they performed to a crowd of 80 000 in Budapest.
        <li><b><i>1987</i></b> - Freddy was diagnosed with AIDS in late April.
          <li><b><i>1988</i></b> - Released his second solo album, Barcelona, which combines elements of popular music and opera. It was referred to as the "most bizarre CD of the year".</li>
          <li><b><i>1991</i></b> - After years of success he unfortuanetly passed away at the age of 45 due to complications from AIDS.</li>
          <li><b><i>1992</i></b> - A tribute concert, the Freddie Mercury Tribute Concert for AIDS Awareness, was a benefit concert held on 20 April 1992 at Wembley Stadium in London, England for an audience of 72,000.</li>
    </u1>
      </p>
    <br>
    <br>
    <div class="morefreddie"><a id="tribute-link" href="https://en.wikipedia.org/wiki/Freddie_Mercury" target="_blank"><i>Click here to read more on the wonderful life of Freddie Mercury!</i></a></div>
  </div>
</body>
<br>

   <footer class="social">
 <div class="socialfooter">
  <div class="socialimages"><a class="left" id="left" href="https://www.linkedin.com/in/ruan-moolman-0b2677149/">
    <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-social-media/256/Linkedin.png"
         srcset="https://cdn4.iconfinder.com/data/icons/flat-icon-social-media/256/Linkedin.png 4000w"
                 "https://cdn4.iconfinder.com/data/icons/flat-icon-social-media/256/Linkedin.png 2000w" alt="Image of LinkedIn logo containing the link to Ruan Moolman's profile"
         sizes="(min-width: 960px) 60vw,
                100vw"</div>
  
  <div class="socialimages"><a class="left" id="left" href="https://codepen.io/ruanmool/" target="_blank">
    <img src="https://mainframe.ghost.io/content/images/2018/09/codepen.png"
         srcset="https://mainframe.ghost.io/content/images/2018/09/codepen.png 9000w"
                 "https://mainframe.ghost.io/content/images/2018/09/codepen.png 1000w" alt="Image of Codepen logo containing the link to Ruan Moolman's profile" sizes="(min-width: 960px) 60vw, 100vw"</div>
    </div>
   
  <div class="left"><a class: "left" id="left" href="https://codepen.io/ruanmool/" target="_blank">Website Designed and Maintained by Ruan Moolman</a>
</footer>

</div>

body {
  font-family: Tahoma !important;
  max-width: 100%;
  width: 97.5vw;
}

html {
  background: url("https://a.1stdibscdn.com/archivesE/upload/a_560/a_25988211520231050412/ac6gb477_master.jpg?width=768");
  background-size: cover;
  background-repeat: no-repeat;
}
header {
  margin: auto;
  max-width: 90%;
  width: 97.5vw;
  border-radius: 2vw;
}
footer {
  background-color: black;
  font-size: 1.3vw;
  width: 97.5vw;
  margin: auto;
  display: grid;
  background-color: grey;
  color: hsl(47, 100%, 53%);
  max-width: 75%;
  height: auto;
  border: 1.3vw solid white;
  border-radius: 2vw;
  padding: 1.5vw;
  text-align: center;
}
footer:hover {
  background-color: rgba(0,0,0,0.3);
}
u1 {
  margin: auto;
}
  a:link {
  color: white;
}
a:hover {
  color: pink;
}
p1 {
  font-size: 1.4vw;
}
#title {
  text-align: center;
  postion: relative;
  font-family: Brush Script MT !important;
  font-size: 11vw;
  color: hsl(47, 100%, 53%);
  margin: auto;
  width: 97.5%;
  max-width: 100%;
  max-height: auto;
  margin: auto;
  border-radius: 2vw;
}


#title1 {
  font-size: 2.2vw;
  margin: auto;
  background-color: grey;
  width: 97.5vw;
  max-width: 75%;
  max-height: auto;
  padding: 1.5vw;
  color: white;
  border: 1.3vw solid white;
  border-radius: 2vw;
  text-align: right;
  font-family: Florence, cursive;
}
#title1:hover {
background-color: rgba(0,0,0,0.3);
}  
#image {
  border: 0.3vw dotted white;
  padding: 1.9vw;
}
#img-div {
  text-size: 55vw;
  display: grid;
  margin: auto;
  background-color: grey;
  color: hsl(47, 100%, 53%);
  opacity: 1;
  max-width: 75%;
  height: auto;
  border: 1.3vw solid white;
  border-radius: 2vw;
  padding: 1.5vw;
  width: 97.5vw;
}
#img-div:hover {
  background-color: rgba(0,0,0,0.3);
}
#img-caption {
  color: hsl(47, 100%, 53%);
  padding: 1.5vw;
  font-size: 1.8vw;
  text-align: center;
 
}
#image {
  position: relative;
  max-width: 100%;
}
#tribute-info {
  text-align: left;
  position: relative;
  font-size: 4vw;
  text-align: center;
}
div {
  position: relative;
}
li {
  text-align: center;
  position: relative;
  line-height: 3;
}
.center {
  display: block;
  margin: auto;
  width: 50%;
}
.linkedin {
  float: right;
}
a:link {
  text-decoration: none;
}
.socialfooter {
  text-align: right;
}
hr {
  width: 60vw;
}

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

View Compiled

This Pen is owned by Ruanmool on CodePen.

See more by @ruanmool on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.