Problem in Tribute page

HTML-CSS
1

I have been facing problem where my code couldn’t pass the test even if it is right.

2

Welcome to the forum!

Please post your complete code (both the HTML and CSS) using three ``` back ticks before and after each complete set of code?

As well, please explain, in your own words, the problem, and include the error messages your are receiving, please?

This will allow the community to assist you properly in guidance to a resolution to the problem or problems.

Keep up the good progress! :sun_with_face:

3 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cristiano Ronaldo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="container">
    <header>
        <h1 id="title">Cristiano Ronaldo</h1>
        <h2>The man who defies physics</h2>
    </header>
    <main id="main">
        <figure id="img-div">
            <img src="download.jpeg" alt="cristiano ronaldo" id="image">
            <figcaption id="img-caption">Cristiano doing his all time best 
                celebration.</figcaption>
       </figure>
        <div class="content">
            <p id="tribute-info">Cristiano the goat</p>
        </div>

        <div class="timeline">
            <h2>How Ronaldo became the best footballer in the world.</h2>
            <ul >
                <li><b>1914</b> - Born in portugal</li>
                <li><b>2005 </b> - Played for Manchester United</li>
                 <li><b>2008</b> - Joined Real Madrid</li>
                 <li><b>2019</b> - Joined Juventus</li>
                 
                 <li><b>2021</b> -J oined Manchester United again</li>
                 <li><b>2005-2023</b> - Conquered Europe </li>
                 <li><b>2023</b> - Joined Al-nassar</li>
            </ul>

        
        </div>
   
    

      <p>You can know more about him in his 
         <a href="" id="tribute-link" target="_blank" >Wikepedia Entry</a></p>
    
    </main>
    

</section>
</body>
</html>
``` *{
    margin: 0;
    box-sizing: border-box;
}

#image{
max-width: 100%;
height: auto;
margin: auto;
}

img{
   display: block;
}

footer a{
    text-decoration: none;
     
}

.container{
 width: 80%;
 max-width: 80%;
 height: 100%;
 min-height: 100vh;
 background-color: rgb(225, 208, 208);
 margin: auto;
 margin-top: 10px;
padding: 20px 20px 20px 20px ;
margin-bottom: 10px;

}
.img-div{
width: 70%;
height: 50vh;
background-color: red;
margin: auto;
}

So the problem is in the test part there is a instruction to make img element display as block and put max-width of #image 100% even after I do so I couldn’t pass the test.

1 Like
4

Thank you for posting our code for us to be able to better assist you @warhunter2053 !

I will see what I can figure out to offer guidance.

5

Sure and Thank you for reviewing my problem.

8

Thank you so much your suggestions, they worked and helped me solve problem. I appreciate your effort to make us learn CSS and HTML. Thank you so much :smiling_face:

1 Like
10

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