I have been trying to submit the Tribute Page assignment but the only error that reoccurs no matter what I change is …
Your #image should have a height of auto .
It was weird because it said that I had successfully coded the assignment but on the actually course page, I had not received a checkmark. When I tried to resubmit, that error is the only thing that pops up. I put both the HTML and CSS below and the specific issue with the image for the CSS is at the bottom of the code.
My code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<main id="main">
<header class="header">
<h1 id="title">Ada Lovelace</h1>
<p>The First Computer Programmer</p>
</header>
<figure id="img-div">
<img
src="img/Ada-Lovelace-1001-1600.png"
id="image"
alt="Ada Lovelace"
width="1001"
height="1600"
/>
<figcaption id="img-caption">A portrait of Ada Lovelace</figcaption>
</figure>
<section id="tribute-info">
<h3 id="headline" class="header">Timeline of Ada Lovelace:</h3>
<ul>
<li><strong class="bold">1815</strong> - Born in London, England</li>
<li>
<strong class="bold">1816</strong> - Her mother parted ways with
Lord Bryon becuase of his incessant drinking and womanizing
</li>
<li>
<strong class="bold">1819</strong> - Ada's mother wrote a poem
called "The Unnatural Mother" where she described her feelings of
guilt, shame, and resentment that she felt when she looked at her
daughter Ada
</li>
<li><strong class="bold">1824</strong> - Lord Bryon passed away</li>
<li>
<strong class="bold">1828</strong> - Wrote her first book
<em>Flyology</em> about dynamics in flight when she was 12 years old
</li>
<li>
<strong class="bold">1829</strong> - Ada was a frequently sick and
beridden child and was seen walking around on crutches by the time
she was in her early teens
</li>
<li>
<strong class="bold">1832</strong> - Received lessons from a young
tutor whom she soon fell in love
</li>
<li>
<strong class="bold">1833</strong> - Charles Babbage and the
Difference Engine
</li>
<li><strong class="bold">1835</strong> - Married William King</li>
<li>
<strong class="bold">1836</strong> - Gave birth to her first child,
a son named Byron
</li>
<li>
<strong class="bold">1837</strong> - Gave birth to her second child,
a daughter named Anne
</li>
<li>
<strong class="bold">1838</strong> - Became the Countess of Lovelace
and William King became the Earl of Lovelace
</li>
<li>
<strong class="bold">1839</strong> - Gave birth to her third child,
a son named Ralph Gordon
</li>
<li>
<strong class="bold">1837</strong> - Gave birth to her second child,
a daughter named Anne
</li>
<li>
<strong class="bold">1841</strong> - Translated Charles Babbage's
lecture about the new Analytical Engine, which was based on his
previous work on the Difference Engine
</li>
<li>
<strong class="bold">1843</strong> - Finished the translation of the
lecture and the Analytical Engine is seen as an early model of a
computer accrediting Ada Lovelace as the world's first computer
programmer
</li>
<li>
<strong class="bold">1851</strong> - Diagnosed with uterine cancer,
becoming beridden and extremely ill
</li>
<li><strong class="bold">1852</strong> - Died at the age of 36</li>
</ul>
</section>
<h3 id="tribute-more" class="header">
If you have time, please read more about
<span class="nowrap">Ara Lovelave</span> on her
<a
href="https://en.wikipedia.org/wiki/Ada_Lovelace"
id="tribute-link"
target="_blank"
>Wikipedia entry</a
>.
</h3>
</main>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Redressed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Redressed&family=Roboto:wght@100&display=swap");
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea {
font: inherit;
}
.nowrap {
white-space: nowrap;
}
/* || VARIABLES */
:root {
/* || FONTS */
--FF-TITLE: "Redressed", cursive;
--FF: "Roboto", sans-serif;
--FS: clamp(1rem, 2.2vh, 1.5rem);
/* || COLORS */
--BODY-BGCOLOR: #ffebcc;
--BGCOLOR: whitesmoke;
--IMG-BGCOLOR: hsla(155, 19%, 56%, 0.415);
--HD-BGCOLOR: #d38867;
--BORDER-COLOR: #79584a;
/* || BORDERS */
--BORDERS: 1px solid var(--BORDER-COLOR);
--BORDER-RADIUS: 15px;
}
/* || GENERAL STYLES */
html {
scroll-behavior: smooth;
font-size: var(--FS);
font-family: var(--FF);
background-color: var(--BGCOLOR);
}
body {
background-color: var(--BODY-BGCOLOR);
min-height: 100vh;
max-width: 800px;
margin: 0 auto;
border-right: var(--BORDERS);
border-left: var(--BORDERS);
box-shadow: 0 0 10px var(--BORDER-COLOR);
}
#img-div {
background-color: var(--BGCOLOR);
}
h1,
h3 {
font-family: var(--FF-TITLE);
letter-spacing: 0.2em;
padding-bottom: 15px;
}
/* || HEADER */
.header {
text-align: center;
background-color: var(--HD-BGCOLOR);
padding: 0.75rem 0;
}
/* || MAIN */
#tribute-info > ul {
padding: 30px 60px;
list-style-type: none;
}
#tribute-info > ul > li {
padding: 10px 0;
}
.bold {
font-family: var(--FF-TITLE);
}
/* || IMAGE */
#img-div {
background-color: var(--IMG-BGCOLOR);
}
#image {
height: auto;
width: 20rem;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 10px;
}
#img-caption {
padding-bottom: 10px;
text-align: center;
font-size: 0.9rem;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge:
