Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

im not sure what is missing from the second step. “Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main .” im rather sure that i have all of these things in my code, am i doing the descendants of the main part wrong because i know i really struggled with that the last form i did . Or is it something else?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<style>
    img {
 max-width: 100%;
 margin: 0 auto;
 display: block;}
 </style>
<main id="main">
    <h1 id="title"> The life of Clementine Churchill
        </h1>
<title id="title" class="title">
    The life of Clementine Churchill
    </title>

    <figure id="img-div">

<img id="image"  src="https://i.pinimg.com/736x/26/46/12/2646129ebf57acbfb35bde48ee778dd6.jpg">
<div id="img-caption">
    A portrait of Clementine Churchill.
    </div>
    </figure>

    <body id="tribute-info">
        <div>
        Clementine Churchill was the wife of Winston Churchill and served as a driving force for him.
        </div> 
        <div>
        Clementine came from a Noble lineage with both her father ,and mother being of considerable recognition. </div>
        <a      id="tribute-link" 
    href="https://en.wikipedia.org/wiki/Clementine_Churchill" 
target="_blank"> more on Clementine Churchill</a>
</main>
</html>

/* file: styles.css */
body {
        background-color: #E0C9AF;
      }

      h1, h4 {
        text-align: center;
        font-family: Quattrocento Sans;
      }

         .container {
    font-size: 40px;
    width: 100%;
    height: auto;
    background: White;
    padding-top: 20px;
    padding-bottom: 1px;
      }
      #img-div {
        width: 100%;
        margin: 0 auto;
      }

      .img {
        width: 400px;
        max-width: 100%;
        height: auto;
  display: block;
        margin: 5vw auto 0 auto; 
        
      }

    p {
      font-size: 18px;
      font-family: Quattrocento Sans;
      text-align: center;
    }

    ul {
      list-style-position: inside;
      font-family: Quattrocento Sans;
    }
    li {
      padding-bottom: 20px;
      margin-left: 30%;
    }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi

change the body tag into a div tag.

“body” is the main container of all other HTML elements and cannot be used randomly in the document.

3

I mean, you can’t just replace the body element. The document needs to be valid, it needs a body element.

I would make you understand how a starting document should look.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>My site</title>
</head>
<body>
<!--  Your site HTML -->
</body>
</html>

Validate your HTML along the way.

https://validator.w3.org/nu/#textarea

4

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