Tribute Page - Build a Tribute Page

HTML-CSS
22 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Tribute Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
  <div id="img-div"><img id="image"></div><div id="img-caption">The Caption is king</div></div>
  <!-- <img id="image">  -->
  <!-- <div id="img-caption">Derrick Similien</div> -->
  <div id="tribute-info">Derrick is from Florida</div>
  <!-- <div id="tribute-link"></div> -->
  <title id="title">Title</title>
  <a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>
</body>
</html>
23

it should be styles.css not style.csss

24

Here is my updated code! I just added it!

25

Now check for other tests.

26

My #9n & my #19 are not passing, am I missing something?

  1. Your #img-caption should be a descendant of #img-div .
  2. Your #image should be centered within its parent.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Tribute Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
  <div id="img-div"><img id="image"></div><div id="img-caption">The Caption is king</div></div>
  <!-- <img id="image">  -->
  <!-- <div id="img-caption">Derrick Similien</div> -->
  <div id="tribute-info">Derrick is from Florida</div>
  <!-- <div id="tribute-link"></div> -->
  <title id="title">Title</title>
  <a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>
</body>
</html>```

#image {
  max-width: 100%;
  height: auto;
  align-items: center;
  display: block;
}
27

you have an excess div which prevents the image caption from being the child of the img-div.

28

Your image caption div element isn’t within the img-div div element. It should after img element, also you have a extra closing div tag

29

Fixed it!! My #19 is the only test that needs to pass

  1. Your #image should be centered within its parent.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Tribute Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
  <div id="img-div"><img id="image"><div id="img-caption">The Caption is king</div></div>
  <!-- <img id="image">  -->
  <!-- <div id="img-caption">Derrick Similien</div> -->
  <div id="tribute-info">Derrick is from Florida</div>
  <!-- <div id="tribute-link"></div> -->
  <title id="title">Title</title>
  <a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>
</body>
</html>

#image {
max-width: 100%;
height: auto;
align-items: center;
display: block;
}

1 Like
30

Remove align-items property and it’s value, and add margin top and bottom property with 0 value and left right margin auto.

1 Like
31

I passed!! Thank you both very much for your help!!!

2 Likes
32

that’s niceee!! keep learning, @1Prokingg ! :smiling_face_with_three_hearts:

33

That’s good you passed the project. But the title for a page goes on top of the page. It should be added after opening main tag.

1 Like