User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .
I am having trouble implementing the above condition, otherwise my challenge is complete. I feel like my code is getting messy with all of the ids and divs that feel unnecessary, but I can’t seem to figure this one out. Could anyone help me figure out how to fulfill this component?
--CSS-
#title {
font-size: 44px;
margin-block: 0 0 0 0;
padding: 5px;
text-align: center;
}
#main {
font-family: 'Orelega One', cursive;
left-margin: 0;
}
h2 {
font-size: 18px;
background-color:rgb(251, 251, 251);
}
img {
max-width: 90%;
margin: 0 auto;
display: block;
}
--HTML--
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
<link rel="preconnect" href="https://fonts.gstatic.com">
</script>
<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">
<div id="main">
<div id="title">Grace Hopper</div>
<d id="img-div"> <id="img-caption" photo introducing grace></id>
<img id="image" src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/007/117/original/4fec947d58ebd54bb21eee948b665331.jpg?1618367098" alt="photo of grace with highlights of her life"></div>
<h2 id= "tribute-info">The woman who transformed how we use and operate computers </h2>
Life Timeline:
<ul>
<li>1906 - Born in New York City, New York, USA
</li>
<li>1924 - Grace graduated from Graham High School
</li>
<li>1925 - Attends Vassar College to study math and physics
</li>
<li>1928 - Grace graduates college and is accepted to a full scholership with Yale University
</li>
<li>1930 - Recieves a Masters degree in math and physics!
</li>
<li> 1931 - Grace begins her teaching career with Vassar, and continues to study with Yale
</li>
<li>1934 - Grace earns her PhD in math - the first woman to earn one in the US!
</li>
<li>1943 - Finally accepted into the Navy on her 3rd attempt, with a desire to serve her country. She is later assigned to the Bureau of Ordnance Project at Harvard, where she learns to program a Mark I computer
</li>
<li>1952 - Grace developes the first computer compiler called the A-o system, it is the first computer system to become more efficient reading code
</li>
<li> 1967 - Hopper retired from the Naval Reserve in 1966, but her pioneering computer work meant that she was recalled to active duty—at the age of 60—to tackle standardizing communication between different computer languages. She would remain with the Navy for 19 years.
</li>
<li>1969 - She wins the title of computer science Man of the Year by the data processing management association
</li>
<li>1973 - Becomes the only american or woman to be distinguised in the British Computer Society
</li>
<li>1983 - Grace's work was recognized by her promotion to the rank of Commodore
</li>
<li> 1985 - Grace is promoted to Rear Admiral of the US Navy
</li>
<li> 1986 - Grace retired from the Navy as the oldest serviing officer in office, as well as a Rear Admiral </li>
<li>1992 - Died in Arlington, Virginia, USA
</li>
<li> 2006 - Posthumously honored with the Presidential Medal of Freedom by Barack Obama
</li>
<img id="img-div"src="http://cdn.quotationof.com/images/grace-hoppers-quotes-3.jpg">
<br>
<footer> To learn more about this amazing woman, try her
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Grace_Hopper#See_also" target= "_blank" >wikipedia page</a>
</footer>
</div>
