Need help with this. I can’t solve this

i try to compleet tribute page. but when i do center the image its getting error pls help to compleet it thank you.

here is  the code which  is i  coding... 
index.html
<!DOCTYPE html>
<html>
<head>
link rel="stylesheet" href="styles.css">
<title>tribute info about louis braille</title>
  </head>
  <body>
<main id="main">
<h1 id="title">Louis Braille</h1>
<p id="description">a French inventor who revolutionized the lives of blind and visually impaired people.</p>
<figure id="img-div">
<img id="image" href="https://cdn.britannica.com/34/6834-004-9E362425/Louis-Braille-portrait-bust-artist.jpg" alt="Image of Louis braille" />
<figcaption id="img-caption">
a French inventor 
  </figcaption>
  </figure>
  <section id="tribute-info">
<h2 id="tribute-timeline">Timeline of Louis Braille: A Life Dedicated to Literacy</h2>
<ul>
<li>
  <strong>1809:</strong> January 4: Louis Braille is born in Coupvray, France, son of a leatherworker.
</li>
<li>
<strong>1812:</strong> Age 3: Louis loses his sight in an accident while playing in his father's workshop.
  </li>
  <li>
<strong>1819:</strong> Age 10: Louis enrolls at the Royal Institution for the Blind Youth in Paris, one of the first schools for the blind in the world.
    </li>
    <li>
<strong1821:</strong> Age 12: Louis is introduced to "night writing," a raised-dot communication system invented by Captain Charles Barbier for military use.
      </li>
      <li>
        <strong>1824:</strong> Age 15: Louis simplifies Barbier's system, replacing the 12-dot cells with 6-dot cells and developing the foundation of the braille code.
        </li>
        <li>
<strong>1829:</strong> Age 20: Louis publishes his system, titled "Method of Writing Words, Music, and Songs for the Use of the Blind, so that They Can be Read by Touch."
          </li>
          <li>
<strong>1837:</strong> Age 28: The Royal Institution officially adopts the braille code.
            </li>
            <li>
<strong>1842:</strong Age 33: Louis develops a musical notation system using braille.
              </li>
              <li>
<strong>1852:</strong> January 6: Louis dies in Paris at the age of 43.
                </li>
                <li>
                  <strong>1869:</strong> The braille code is adopted by the International Congress of Teachers for the Blind, becoming the standard system for blind literacy worldwide.
</li>
<li>
<strong>20th and 21st Centuries:</strong> Braille continues to evolve with the development of new adaptations for different languages and specialized fields.
  </li>
  <li>
    Technology advancements like braille displays and refreshable braille notetakers further enhance accessibility for blind individuals.
</li>
  </ul>
  <blockquote <cite="https://en.wikipedia.org/wiki/Louis_Braille" />
  <p>
Perhaps the most enduring honor to the memory of Louis Braille is the half-conscious honor we pay him by applying his name to the script he invented – and, in this country [England], adapting the pronunciation of his name to our own language. We honor Braille when we speak of braille. His memory has in this way a security greater than that of the memories of many men more famous in their day.
    </p>
    <cite> --T.S. Eliot a grate essay writer</cite>
    </blockquote>
    <h3>
If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Louis_Braille" target="_blank" />Wikipedia entry.
      </h3>
    </section>
  </main>
    </body>
  </html>

styles.css
html {
  font-size: 10px; 
}

body {
    font-family: -apple-system, BlinkMacSyste Font, '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;
  }
}

figure {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* Center the image within its parent */
}

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

#image {
  max-width: 100%;
  /* Add height: auto to ensure proper scaling */
  height: auto;
}

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

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

#tribute-timeline {
  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;
}

Hi @vileshBandekar

The link element is missing an opening angled bracket.

Happy coding

ok sir, thank you. as a blind person i mistake it thanks again

1 Like