Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
I need help on #1 and #2 of the tests.

Where do I put to make #img-div, #image, #img-caption, #tribute-info, and #tribute-link decedents of main? I don’t understand what to do.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
      <title>Tribute Page: Eddie Van Halen</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body> 
    <div>
   
        <h1 id="title">Eddie Van Halen</h1>
          <p id="tribute-info" >Virtuoso of the Rock guitar</p>
            <figure id="img-div" >
               <img id="image" src="https://deadline.com/wp-content/uploads/2020/10/Eddie-Van-Halen-2.jpg?crop=0px%2C122px%2C2400px%2C1345px&resize=681%2C383">
                 <figcaption id="img-caption" >Van Halen, shredding the guitar with incredible talent.</figcaption>   
            </figure>
      
      </div>
       <div>
     
    <h3>Timeline of Van Halens Life</h3>
    </div>
    <div>
      <ul> 
        <li><strong>1955</strong> - Born on January 26, 1955 in Amsterdam, Netherlands.</li>
        <li><strong>1964</strong> - Eddie Van Halen begins playing guitar.</li>
      <li><strong>1972</strong> - Rock band <em>Van Halen</em> is formed, with members Mark Stone on bass guitar, Alex Van Halen on kit, and Eddie Van halen on guitar, keyboard, and lead vocals.</li>
      <li><strong>1978</strong> - <em>Van Halen</em> releases first album; "Van Halen." </li>
      <li><strong>1978</strong> - <em>Van Halen</em>'s self titled ablum is labeled by fans and critics as one of rock and roll's greatest debut albums. </li>
       <li><strong>1983</strong> - Out of frustration, Eddie calls up Kiss's Lead vocalist/bassist Gene Simmons, asking to join Kiss. Gene Simmons advises Eddie to not Join .</li>
      <li><strong>1998</strong> - Eddie Van Halen releases his last album with <em>Van Halen</em></li>
      <li><strong>2020</strong> - Died on October 6, 2020 surrounded by his loved ones.</li>
      </ul>
    </div>
    <p> <em>"If you want to be a rock star or just be famous, then run down the street naked, you'll make the news or something"
      -- Eddie Van Halen</em></p>
     
    <p>Check out <a id="tribute-link"  href="https://en.wikipedia.org/wiki/Eddie_Van_Halen" target="_blank">Van Halen Wiki</a> for more information</p>
    
  </body>
  

/* file: styles.css */
#image {
max-width: 100%;
max-height: auto;
}
img {
  display: block;
}
h1, p, figcaption, h3, figure  {
  text-align: center;
}

body {
  padding: 30px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

If you have an "id=“smth” attribute in html code, it corresponds to ‘#smth’ selector in css code. For example:

If you want to add some style to the 'img' element: <img id="image" .....>  you will add a selector in css code that looks like: 
#image {
property: value;
}

id=“smth” (html code) → #smth {} (css code)
class=“smth” (html code) → .smth {} (css code)

3

That is not what I was asking, I need these id’s to be decedents of the id of main. But, I do not know how to complete this.

4

You don’t have a ‘main’ element. all 'id’s should be found between the opening and closing ‘main’ tags:

.
.
<body>
  <main id="main">

</main>
</body>
.
.

" The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms."

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.