Tribute Page - Build a Tribute Page

I think everything right but when I hit run test I get: Your img element should have a display of block. Your #image should have a max-width of 100%. Your #image should be centered within its parent. What am I doing wrong?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles1.css">
        <title>Saluting an MMA Legend - Khabib Nurmagomedov</title>
    </head>
    <body>
        <main id="main">
                <h1 id="title">Saluting an MMA Legend - 
                    Khabib Nurmagomedov</h1>
                    <div class="outer-container">
                        <div id="img-div">
                            <img id="image" src="khabib.jpg">
                            <div id="img-caption">
                            <p><em>"Khabib Nurmagomedov retires as a legend"</em></p>
                            </div>
                        </div>
                    </div>
                <div id="tribute-info">
                        <h3>Introduction:</h3>
                        <p>
                        Khabib Nurmagomedov was one of the greatest mixed martial artists of all time. 
                        Over the course of his storied career, he became the longest-reigning UFC Lightweight Champion and compiled an astounding record of 29 wins and 0 losses.
                        His impact went far beyond the octagon, as he served as an inspiration and hero to many around the world. 
                        Though retired since 2020, his legacy lives on. This page celebrates the phenomenal career and spirit of a true MMA legend. 
                        </p>
                        <h3>About Khabib:</h3>
                        <p>
                        Born in 1988 in the village of Sil'di, Dagestan, Russia, Khabib began training in judo and wrestling at a very young age under the tutelage of his father Abdulmanap. 
                        He quickly excelled in sambo and transitioned to MMA, making his professional debut in 2008.
                        Khabib joined the UFC in 2012 and proceeded to dominate the lightweight division, defeating elite opponents like Conor McGregor, Dustin Poirier, and Justin Gaethje.
                        He combined tenacious wrestling skills with ruthless ground-and-pound to overwhelm rivals. His professional record stands at 29 victories, 8 by KO, 11 by submission, and 10 by decision.
                        </p>
                        <h3>Impact and Legacy:</h3>
                        <p>
                        Khabib will forever be remembered for his ferocity in the octagon but also his humility outside of it. 
                        He approached his sport and life with respect, honor and dedication to hard work. After each victory, he pointed to his upbringing and relationship with his late father as the source of his strength.
                         Though retiring in 2020, Khabib remains one of MMA's most popular figures. He inspired many young athletes to pursue their dreams with discipline and determination. His career will live on as one of greatest ever in combat sports.
                        </p>
                        <h3>Conclusion:</h3>
                        <p>
                        Khabib Nurmagomedov embodied the true spirit of a champion - toughness, perseverance, honor and respect.
                        He dazzled fans with his skill and thrilled us with his class. This page celebrates the extraordinary legacy Khabib leaves, both in and out of the octagon.
                        Though retired, his mark on MMA will never be forgotten. Thank you for the inspiration, Khabib.
                        </p>
                </div>
                <div class="border"></div>
                <h2 id="collage-text">Khabib Nurmagomedov Collage<h2>
                <div id="collage">
                    <img class="collage-img" src="khabibtheeagle.jpg" alt="khabib the eagle">
                    <img  class="collage-img"  src="khabibVconnor.webp" alt="khabib VS connor">
                    <img  class="collage-img"  src="khabibandfather.jpg" alt="khabib with his father">
                    <img class="collage-img"  src="khabib3.webp" alt="khabib portait">
                    <img class="collage-img"  src="kahbib2.jpg" alt="khabib portait">
                    <br>
                    <img  class="collage-img" src="khabibdua.jpg" alt="khabib making dua">
                    <img class="collage-img"  src="khabib1.jpg" alt="khabib with lighting background">
                    <img class="collage-img"  src="kahbibportait.jpg" alt="khabib portait">
                    <img class="collage-img"  src="khabib4.jpg" alt="khabib portait">
                    <img class="collage-img"  src="khabib5.webp" alt="khabib portait">
                </div>
                <blockquote id="quote">"True champions need no belt to identify them. Their humility, discipline and values mark them at every moment - in public and in private."</blockquote>
                <p class="read-more">If you have time, you should read more about the "Eagle" with this
                <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Khabib_Nurmagomedov">Wikipedia entry</a>
                </p>
        </main>
    </body>
</html>
h1{
    font-size: 36px;
    font-weight: bold;
    font-family: Georgia, serif;
    text-shadow: 1px 1px 1px #aaa;
    text-align: center;
}
img{
    display: block;
}
#image{
    height: auto;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    padding-top: 10px;
}
#img-caption{
    font-family: Georgia, serif;
    font-size: 16px;
    text-align: center;
    padding-bottom: 10px;
}
#tribute-info{
    max-width: 70%;
    border: 1px solid #fff;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    font-size: 16px;
    font-family: Georgia, serif;
}
h2{
    text-align: center;
    font-family: Georgia, serif;
    font-size: 28px;
}
.border{
    border-bottom: 1px solid black;
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
}
.collage{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.collage-img{
    width: 18%;
    margin-bottom: 10px;
    height: 400px;
}
blockquote{
    font-family: Georgia, serif;
    font-size: 16px;
    text-align: center;
}
.read-more{
    font-family: Georgia, serif;
    font-size: 20px;
    text-align: center;
    font-weight: normal;
    padding-top: 10px;
}
body{
    background-color: rgb(255,255,255);
}
.outer-container{
    background-color: whitesmoke;
    border-radius: 5px;
}

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

You have two issues.

Issue no.1

You are using the incorrect href value here

Make sure to reference the correct filename.

Issue no.2

You need to have your images hosted somewhere so they will correctly show up on the page.

It looks like you are building this out locally which is fine.
But you will need to host all of your images and use the image url when you submit it to freeCodeCamp.

Once you fix those issues, then it will pass

1 Like

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