Responsive Web Design Projects - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<html>
    <head>
        <title>
            A Tribute To Martin Luther
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </head>
    <body>
        <div id="main">
            <h1 id="title"> Martin Luther </h1>
            <h2 id="subtitle"> The Spark Of The Reformation </h2>
            <div id="img-div">
                <img src="https://www-images.christianitytoday.com/images/67500.jpg?w=700"> 
                <div id="image">
img                </div>
                <div id="img-caption">Martin Luther 1483-1546</div>
            </div>
            <div id="content">
                <div id="tribute-info"><p>1483: November 10 - Luther is born, his parents were Hans and Margerethe Luther (also called Luder)</p>
                                    <p> 1484: The family moves to the village of Mansfeld-Lutherstadt.</p>
                                    <p> 1498: Martin Luther starts school in Eisenach.</p>
                                    <p> 1501: Luther goes to study law at the University of Erfurt.</p>
                                    <p> 1505: Caught in a terrible storm in Stotternheim, Luther vows to become a monk if St. Anne saves him. Surviving the storm, he gives up his career as a lawyer and joins the Augustinian order at the monastery in Erfurt.</p>
                                    <p> 1517: October 31 - Luther nails the 95 Theses to the door of Wittenberg's Castle Church.</p>
                                    <p> 1518: Luther is charged with heresy in Rome. He has to flee, returning to Wittenberg under the protection of Frederick the Wise</p>
                                    <p> 1521: Luther is excommunicated and summoned to appear before the Diet of Worms.</p>
                                    <p> 1523: Katharina von Bora flees to Wittenberg and meets Luther.</p>
                                    <p> 1525: Luther marries Katharina von Bora.</p>
                                    <p> 1529: Luther publishes The Large Catechism.</p>
                                    <p> 1546: Luther dies in Eisleben. His coffin is carried to Wittenberg, where he is buried at the Castle Church</p>
            </div>
                <div id="quote">
                    "I cannot and will not recant anything, for to go against conscience is neither right nor safe. Here I stand, I can do no other, so help me God. Amen."
                    </br> - Martin Luther
                </div>
            </div>
            <div id="footer">
                <p>To read a more in depth look at Martin Luther's life check out his <a href="https://en.wikipedia.org/wiki/Martin_Luther" target="_blank" id="tribute-link">Wikipedia Page</a>.</p>
            </div>
        </div>
    </body>
</html>
  
/* file: styles.css */
#tribute-info {
    background: grey;
}
#tribute-info p {
    line-height: 2;
}
body {
    background: lightgrey;
    
}

img {
    display: block;
    height: auto;
    margin-left:auto;
    margin-right:auto;
max-width: 100%;
  
}

#title {
    text-align: center;
    text-transform: uppercase;
}

#subtitle {
    text-align:center;
    font-style: italic;
}

#img-caption {
    font-style:italic;
    margin-top: 0;
    text-align: center;

}

#quote {
    font-style: italic;
}

#image {
  position: center;
max-width: 100%;

}


Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

I have three challenges
(1) how to set #image to max-width of 100%
(2) how to create an image element with an id of image
(3) how to create a main element with id of main

How to create an element…

Simply put the name of the element inside angled brackets.
So main?
<main></main>
Body?
<body></body>
Image? (Trickier because that one is img actually and is self-closing)
<img>

How to an an attribute called id

All attributes are added to their respective element’s opening tags.
Examples?
src is added to the img tag
href is added to the anchor tag
id is added to any opening tag

Then you need to follow the attribute name with an equal sign. After that give the attribute its value with double quotes.
Example?
<a href=“www.google.com”>click me</a>
Etc…

#image is referring to the element whose id is “image”
So I can make a div for example whose id is image like this:
<div id=“image”></div>

So to target it use the id “image” with the hash in front #image in the css.
Then use curly braces as usual to add some styling to it.

it is still throwing errors.
let me rephrase the three errors
(1) You should have a main element with an id of main .
(2) You should have an img element with an id of image .
(3) Your #image should have a max-width of 100% .
please I need assistance

If you have changed your code, you need to post your updated code if you want us to help you with it.

<html>
    <head>
        <title>
            A Tribute To Martin Luther
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </head>
    <body>
        <div id="main">
            <h1 id="title"> Martin Luther </h1>
            <h2 id="subtitle"> The Spark Of The Reformation </h2>
            <div id="img-div">
                <img src="https://www-images.christianitytoday.com/images/67500.jpg?w=700"> 
                <div id="image">
img                </div>
                <div id="img-caption">Martin Luther 1483-1546</div>
            </div>
            <div id="content">
                <div id="tribute-info"><p>1483: November 10 - Luther is born, his parents were Hans and Margerethe Luther (also called Luder)</p>
                                    <p> 1484: The family moves to the village of Mansfeld-Lutherstadt.</p>
                                    <p> 1498: Martin Luther starts school in Eisenach.</p>
                                    <p> 1501: Luther goes to study law at the University of Erfurt.</p>
                                    <p> 1505: Caught in a terrible storm in Stotternheim, Luther vows to become a monk if St. Anne saves him. Surviving the storm, he gives up his career as a lawyer and joins the Augustinian order at the monastery in Erfurt.</p>
                                    <p> 1517: October 31 - Luther nails the 95 Theses to the door of Wittenberg's Castle Church.</p>
                                    <p> 1518: Luther is charged with heresy in Rome. He has to flee, returning to Wittenberg under the protection of Frederick the Wise</p>
                                    <p> 1521: Luther is excommunicated and summoned to appear before the Diet of Worms.</p>
                                    <p> 1523: Katharina von Bora flees to Wittenberg and meets Luther.</p>
                                    <p> 1525: Luther marries Katharina von Bora.</p>
                                    <p> 1529: Luther publishes The Large Catechism.</p>
                                    <p> 1546: Luther dies in Eisleben. His coffin is carried to Wittenberg, where he is buried at the Castle Church</p>
            </div>
                <div id="quote">
                    "I cannot and will not recant anything, for to go against conscience is neither right nor safe. Here I stand, I can do no other, so help me God. Amen."
                    </br> - Martin Luther
                </div>
            </div>
            <div id="footer">
                <p>To read a more in depth look at Martin Luther's life check out his <a href="https://en.wikipedia.org/wiki/Martin_Luther" target="_blank" id="tribute-link">Wikipedia Page</a>.</p>
            </div>
        </div>
    </body>
</html>

You quoted your original post? Did you change nothing? If you don’t fix anything after receiving advice, then those issues will continue to exist. If you have questions about the advice you were given, then you should ask specific questions.

The three errors now is
(1) Your img element should have a display of block
(2) Your #image should have a max-width of 100%
(3) Your #image should be centered within its parent.
please I need assistance

hi Osita,
I guess these are all problems in your css.

it would be better to post your most up-to-date code though so we can view it in the test area. (both css and html)

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<html>
    <head>
         
        <title>
            A Tribute To Martin Luther
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </head>
    
    
    <body>
       
        <main id="main">
            <h1 id="title"> Martin Luther </h1>

                       <img id="image"> 
            <h2 id="subtitle"> The Spark Of The Reformation </h2>
            <div id="img-div">
                <img src="https://www-images.christianitytoday.com/images/67500.jpg?w=700"> 
                <div id="image">
                </div>
                <div id="img-caption">Martin Luther 1483-1546</div>
            </div>
            <div id="content">
                <div id="tribute-info"><p>1483: November 10 - Luther is born, his parents were Hans and Margerethe Luther (also called Luder)</p>
                                    <p> 1484: The family moves to the village of Mansfeld-Lutherstadt.</p>
                                    <p> 1498: Martin Luther starts school in Eisenach.</p>
                                    <p> 1501: Luther goes to study law at the University of Erfurt.</p>
                                    <p> 1505: Caught in a terrible storm in Stotternheim, Luther vows to become a monk if St. Anne saves him. Surviving the storm, he gives up his career as a lawyer and joins the Augustinian order at the monastery in Erfurt.</p>
                                    <p> 1517: October 31 - Luther nails the 95 Theses to the door of Wittenberg's Castle Church.</p>
                                    <p> 1518: Luther is charged with heresy in Rome. He has to flee, returning to Wittenberg under the protection of Frederick the Wise</p>
                                    <p> 1521: Luther is excommunicated and summoned to appear before the Diet of Worms.</p>
                                    <p> 1523: Katharina von Bora flees to Wittenberg and meets Luther.</p>
                                    <p> 1525: Luther marries Katharina von Bora.</p>
                                    <p> 1529: Luther publishes The Large Catechism.</p>
                                    <p> 1546: Luther dies in Eisleben. His coffin is carried to Wittenberg, where he is buried at the Castle Church</p>
            </div>
                <div id="quote">
                    "I cannot and will not recant anything, for to go against conscience is neither right nor safe. Here I stand, I can do no other, so help me God. Amen."
                    </br> - Martin Luther
                </div>
            </div>
            <div id="footer">
                <p>To read a more in depth look at Martin Luther's life check out his <a href="https://en.wikipedia.org/wiki/Martin_Luther" target="_blank" id="tribute-link">Wikipedia Page</a>.</p>
            </div>
        </main>
    </body>
</html>
  
/* file: styles.css */
#tribute-info {
    background: grey;
}
#tribute-info p {
    line-height: 2;
}
body {
    background: lightgrey;
    
}

img {
    max-width: 100%;
    display: block;
    height:auto;
    margin-left: auto;
    margin-right: auto; 
}
 



#title {
    text-align: center;
    text-transform: uppercase;
}

#subtitle {
    text-align:center;
    font-style: italic;
}

#img-caption {
    font-style:italic;
    margin-top: 0;
    text-align: center;

}

#quote {
    font-style: italic;
}

#image {
align-content: center;
max-width: 100%;
display: block;
height: auto;

	}





Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

if you fix your link element to point to styles.css instead of style.css then you should pass the tests.

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