Build Tribute Page

HTML-CSS
1

Can anyone help me with this please. I have built the tribute page and there are 3 that I am just not winning with -

Screenshot 2022-10-05 at 14.18.21
Screenshot 2022-10-05 at 14.18.211046×502 135 KB

My index.html code looks like this

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href= "style.css"
  </head>
  <body>
    <main id= "main">
      <h1 id="title">Kelly Grewar Test Page</h1>
      <p>The girl who couldn't code</p>
      <figure id="img-div">
        <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Girls who Code">
      <figcaption id="img-caption">Huge News! I Sold a Book! You Can Learn How to CODE a Sandcastle! </figcaption>
    </figure>
    <section id="tribute-info">
      <h3 id="headline"> Things to learn as a girl who codes</h3>
      <ul>
        <li>How to resolve Bugs</li>
        <li>Documentation 101</li>
        <li> exclusive content and more</li>
     </ul>
   <blockquote cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
   <p> We are the lucky ones</p>
   <cite> -- Kelly Grewar </cite>
   </blockquote>
 <h3> Thank you for coming to my page
   <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank"> WIKILINK </a>
   </h3>
   </section>
   </main>
   </body>
    </html>

And my style.css looks like this

html {

  font-size: 10px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

#img{
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

#img-div {
  background: white;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#headline {
  margin: 50px 0;
  text-align: center;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}

Please help me find out where I am going wrong

2

try adding the missing > to the end of the link line and rerun the test

3

hi @kelly.grewar there are some typos resulting tests to fail.

  1. link to stylesheet
    <link rel="stylesheet" href= "style.css"

//should be
    <link rel="stylesheet" href= "styles.css" />
  1. Image element has id=‘image’ but styles are defined for #img 
<img id="image" src="https://cdn.freecodecamp.org />
1 Like