Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

the no.19 test in the tribute page ion understand.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main id="main">
        <h1 id="title">Dr. Norman Borlaug</h1>

        <figure id="img-div">
            <img id="image" src="borlaug-image.jpg" alt="Dr. Norman Borlaug">
            <!-- Figcaption element with the required ID -->
            <figcaption id="img-caption">Dr. Norman Borlaug, often called the "Father of the Green Revolution," helped develop high-yielding crop varieties to combat global hunger.</figcaption>
        </figure>

        <div id="tribute-info">
            <p>Dr. Norman Borlaug was an American agronomist who won the Nobel Peace Prize for his contributions to world food production. His work in plant breeding and crop development saved millions from starvation.</p>
        </div>

        <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Learn more about Dr. Norman Borlaug</a>
    </main>
</body>

</html>

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Main container styling */
#main {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    text-align: center;
}

/* Title Styling */
#title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
}

/* Image container styling */
#img-div {
    margin: 20px 0;
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically (if necessary) */
}

/* Image styling */
#image {
    display: block; /* Ensures the image is treated as a block element */
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain the aspect ratio */
    margin: 0 auto; /* Ensures the image is centered in case of any extra space */
}

/* Caption for image */
#img-caption {
    margin-top: 10px;
    font-size: 1em;
    color: #666;
    text-align: center; /* Ensures the caption is centered under the image */
}

/* Tribute information */
#tribute-info {
    font-size: 1.2em;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Link Styling */
#tribute-link {
    font-size: 1.2em;
    color: #007BFF;
    text-decoration: none;
}

#tribute-link:hover {
    text-decoration: underline;
}
#img-caption {
    margin-top: 10px;
    font-size: 1em;
    color: #666;
    text-align: center; /* Ensures the caption is centered under the image */
}
#img-div {
    display: flex;               /* Enables flexbox */
    justify-content: center;     /* Centers the image horizontally */
    align-items: center;         /* Centers the image vertically */
    margin: 20px 0;
}

/* Image styling */
#image {
    display: block;              /* Removes any inline spacing */
    max-width: 100%;             /* Makes the image responsive */
    height: auto;                /* Maintains the aspect ratio */
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

the test says

  1. Your #image should be centered within its parent.

what have you tried to solve this?

like, have you tried using an actual image instead of a broken link?