Tribute Page - Build a Tribute Page

HTML-CSS
21

if you made any changes, can you share the new code with us to try?

22

Hi there,

Your HTML code only has the main section, it’s not a full HTML document, with
<!DOCTYPE html>, html, head, body tags.

Please go back to previous lessons to see the structure of a HTML document.

The structure should look like this:

DOCTYPE declaring
html
    head
          title
          link to CSS files
    body
          main
23

Please share your CSS sheet as well.

24

ok im going to try this

25

You can post your updated code by put your code between 2 line of ``` (3 back ticks) (the back tick key is usuallyright under the Esc key on your keyboard), like this:

```
# your code here
```

or you can use the Preformatted Text button (the one with </> symbol) (or press Ctrl + E):

26

.img{
max-width: 100%;
height: 100%;
display: block;
margin: center;
}

27 
<html lang="en"><html>
  <head>
<main id="main">
 <title id="title">Tribute</title>
  <link rel="stylesheet" href="./styles.css">
  </head>
 <body>
 <div id="img-div" >
   <img id="image">
   <div id="img-caption">text</div>
 </div>
 <div id="tribute-info">text</div>
 <a id="tribute-link" href="www.regaliasfinery.com" target="_blank"></a>  
</main>
</body>```  ok! is this what you meant to do ?
28

Yes, that’s what I meant: A full structure with html, head, body tags.

BUT, the structure in your code is still messed up.

Let’s go back to Learn Typography by Building a Nutrition Label: Step 2 , for example, to see what a proper HTML structure look like:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
  </head>

  <body>
    <h1>Nutrition Facts</h1>  
  </body>
</html>

Now, the issues with your code:

You have 2 opening <html> tags, but you don’t have a closing tag </html>

The closing tag </html> must be right after the closing tag </body> like the example code above.

The opening main tag:

must be outside of head and inside of body. Like this:

<html>
    <head>
    </head>
    <body>
        <main>
        </main>
    </body>
</html>

You should indent your code to see the structure clearer to spot these type of mistakes easier.

29

There are also some issues with your CSS:

.img is the selector for a class named img
For example:

<p class="img">Hello</p>

This paragraph above also has .img selector.

The selector for an image element in general is just img without the dot .

The image must have auto height, not 100%

margin doesn’t have center value