Build a Tribute Page

HTML-CSS
1

Hi!
I’m getting the following errors when checking my code and I can’t figure it out at all.
Any help is much appreciated.

  • Failed:Your #img-caption should be a descendant of #img-div .
  • Failed:You should have an a element with an id of tribute-link.
  • Failed:Your #tribute-link should have an href attribute and value.
  • Failed:Your #tribute-link should have a target attribute set to _blank.
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport">
<meta content="width=device-width, initial-scale=1.0">
<meta name="description" content="jane goodall tribute">
<link href="styles.css" rel="stylesheet">
<html lang="en">
<title id="title">Jane Goodall Tribute Page</title>
<body>
<main id="main">

<h1>Dame Jane Goodall</h1>
<h2>primatologist and anthropologist</h2>
<p></p>
<div id="img-div">
  <img src="https://web.uri.edu/hc/wp-content/uploads/sites/935/janegoodall.jpg" id="image" alt="jane goodall with chimp" width="800" height="auto" id="img-div"></div>
<p></p>
  <div class="img-caption" id="img-caption">Jane Goodall pictured with a chimpanzee rescued and cared for by the Tchimpounga Chimpanzee Rehabilitation Center.
  </div>
<p></p>
<hr class="solid">

<div id="tribute-info">
Equipped with little more than a notebook, binoculars, and her fascination with wildlife, Jane Goodall braved a realm of unknowns to give the world a remarkable window into humankind’s closest living relatives. Through nearly 60 years of groundbreaking work, Dr. Jane Goodall has not only shown us the urgent need to protect chimpanzees from extinction; she has also redefined species conservation to include the needs of local people and the environment. Today she travels the world, speaking about the threats facing chimpanzees and environmental crises, urging each of us to take action on behalf of all living things and planet we share.
<p></p>
<h3>1960</h3>  After arriving at Gombe Stream Chimpanzee Reserve in Tanzania at the of age 26, Jane and the team make two notable discoveries; chimpanzees hunt and eat meat and make and use tools. 
<p></p>
  <h3>1963</h3>  National Geographic publishes a story about Jane and her research and therefore bringing her work to public attention.
  <p></p>
<h3>1977</h3>  The Jane Goodall Institute is founded allowing her to continue research, protection, conservation and environmental education.  
<p></p>
<h3>1991</h3>  Roots & Shoots is founded; a group started by Jane and a group of students to discuss ways young people can improve the world.
The Tchimpounga Chimpanzee Rehabilitation Center was also founded this year to provide a home for chimps orphaned by the illegal bushmeat and pet trades.
<p></p>
<h3>2001</h3>  The Jane Goodall Institute's conservation science program provides information to improve decision making regarding conservation and design human land to promote protection of chimps.
<p></p>
<h3>2004</h3>  Jane is named a UN Messenger of Peace by then Secretary-General Kofi Annan for her work with Roots & Shoots.
<p></p>
<h3>2005</h3> Focusing on the landscape surrounding Gombe Stream National Park, The JGI plans to protect the wider ecosystem, reestablish degrading habitats and improve the lives of people living nearby.
<p><p></p></p>
<div id="cont">The Jane Goodall Institute continues her amazing work to this day, expanding her vision into a global mission to empower people to make a difference for all living things.</div>
</div>
<p></p><br>
<hr class="solid">
<div id="tribute-link">To find out more about the life and work of Jane Goodall, click below to visit the JGI website & social media
  <p><a href="https://janegoodall.org/our-story/about-jane" class="fadein" value="jgweb" id="tribute-link" target="_blank"><img src="https://janegoodall.org.uk/wp-content/uploads/2022/07/chimpanzee-black-225090_800x.jpg" href="https://janegoodall.org/our-story/about-jane/" value="jgweb" id="tribute-link" target="_blank">
  </a></p>
    
<div class="container"><a href="https://twitter.com/janegoodallinst?lang=en" class="fadein" value="jgtwit" id="jgtwit" target="_blank"><img src="https://cdn-icons-png.flaticon.com/512/124/124021.png"  value="jgtwit" id="jgtwit" target="_blank"></a>

  <a href="https://www.facebook.com/janegoodall/?locale=en_GB" class="fadein" value="jgfb" id="jgfb" target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_facebook-512.png"  value="jgfb" id="jgfb" target="_blank"></a>
   
   <a href="https://www.instagram.com/janegoodallinst/?hl=en" class="fadein" value="jgins" id="jgins" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png"  value="jgins" id="jgins" target="_blank"></a>
   
   <a href="https://www.threads.net/@janegoodallinst?hl=en-gb" class="fadein" value="jgthr" id="jgthr" target="_blank"><img src="https://www.edigitalagency.com.au/wp-content/uploads/Threads-app-white-logo-black-background.png"  value="jgthr" id="jgthr" target="_blank"></a></div>
</div>
</main>
</body>
</html>

main {
  border-left: 8rem solid;
  border-right: 8rem solid;
  color: #0b473c;
  margin: -10px;
}


h1 {
  text-align: center;
  padding: 60px 0px 0px 0px;
  font-family: "Helvetica", sans-serif;
  color: #000000;
}

h2 {
  text-align: center;
  font-family: "Helvetica", sans-serif;
  font-size: 20px;
  padding-bottom: 40px;
  color: #000000;
}

h3 {
  font-family: "Helvetica", sans-serif;
  font-size: 25px;
  padding-bottom: 0px;
  padding-right: 5px;
  color: #0b473c;
  display: inline;
}

div img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-right: auto;
  margin-left: auto;
  filter: grayscale(100%);

}

.img-caption {
text-align: center;
  font-style: italic;
  font-size: 18px;
  font-family: "Helvetica", sans-serif;
  max-width: 50%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 20px;
  color: #000000;
}

#tribute-info {
  font-size: 20px;
  padding-top: 40px;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  max-width: 80%;
   margin-right: auto;
  margin-left: auto;
  color: #000000;
}

#cont {
  font-size: 20px;
  padding-top: 40px;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  max-width: 80%;
   margin-right: auto;
  margin-left: auto;
  color: #000000;
}

#tribute-link {
  font-size: 20px;
  padding-top: 20px;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  font-style: italic;
  max-width: 60%;
  margin-right: auto;
  margin-left: auto;
  color: #000000;
}


.fadein img {
opacity:0.6;
transition: 1s ease;
max-width: 100%;
height: 60px;
display: inline;
overflow: none;
filter: none;
padding-bottom: 10px;
}

.fadein img:hover {
opacity:1;
transition: 1s ease;
}

.container {
  align-items: center; 
  max-height: 50px;
  max-width: auto;
  float: center;
  padding-bottom: 60px;
}

hr.solid {
  border-top: 2px solid #0b473c;
  width: 100%;
  max-width: 400px;
2

For the first issue: ids should be unique but you have two elements with the same id here.

This one is not what they were expecting as they want the tribute-link to have an href and a value so it should be an anchor to satisfy these conditions.

1 Like
3

Fixed - thanks so much!

1 Like