Tribute Page - Build a Tribute Page

HTML-CSS
1

How do I make the #image go within the parent. This is the error I keep encountering:
“Your #image` should be centered within its parent.”

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>The Secret Life of Walter Mitty Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main id="main">
        <h1 id="title">The Secret Life of Walter Mitty</h1>

        <!-- Image Section -->
        <div id="img-div">
<img id="image" src="https://lumiere-a.akamaihd.net/v1/images/image_b49633a4.jpeg?region=0%2C0%2C1400%2C2100">

<div id="img-caption">

<p id="p1-a1">"The Secret Life of Walter Mitty" is a film that revolves around the character Walter Mitty, portrayed by Ben Stiller. Walter Mitty is an ordinary and reserved man who works as a negative assets manager at Life magazine. He daydreams vividly, escaping his mundane reality by imagining himself in heroic and adventurous situations.</p>

<p id="p2-a2">In the movie, Walter embarks on a real-life adventure, traveling across the globe in pursuit of a missing negative that is crucial for the final print issue of Life magazine. As he navigates through various breathtaking landscapes and experiences, Walter undergoes a transformative journey. The film explores themes of self-discovery, courage, and the pursuit of dreams, blending elements of fantasy and reality.</p>

<p id="p3-a3">Walter Mitty's character is characterized by his transition from a passive, daydreaming individual to someone who actively engages with life, takes risks, and discovers his own strengths. The film offers a visually stunning and emotionally resonant exploration of the power of imagination and the importance of embracing life's opportunities.</p>
</div>

        <!-- Tribute Information -->
        <div id="tribute-info" name="tribute-info">
            <p id="p3-a3"><bold>Walter Mitty</bold></p>
        </div>

        <!-- Tribute Link -->
        <a id="tribute-link" href="https://www.20thcenturystudios.com/movies/the-secret-life-of-walter-mitty" target="_blank">Learn more about "The Secret Life of Walter Mitty"</a>
    </main>
</body>

</html>


/* file: styles.css */
* {
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px
}

h1 {
  text-align: center;
  
}

#img-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

img {
  max-width: 100%;
  max-height: 500px;
  display: block;
  height: auto;
  text-align: center;
  margin: 0 auto;
}

.parent-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin: 0 auto;
}

div {
  text-align: center;
}

.background {
  color: rgb(200, 300, 550);
}

Challenge Information:

Tribute Page - Build a Tribute Page

2

HTML Validator
Opening and ending tags mismatch…
check your code…

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.