I like it a lot. The picture looks good. Also, nice choice of colors.
Thank you.
Itās not as flashy as some of the tribute pages. I guess itās pretty simple.
Iām not a designer.
To pass the final test you can change the css for your image class to
#image{
margin: auto;
display: block;
max-width: 370px;
border-radius: 90px;
}
Thank you that solution worked. I had tried max-width: 370px;, but some how pairing it with margin auto and display block made it workā¦ i would hit the solution tab, but I donāt see it.
Thanks again.
I like your choice of a person to write about. As for the media queries, there is a typo (max-with) + lack of units (600px, perhaps?), I do not know if it would fix the issue, but it might be part of it!
From a designerās point of view, you picked really nice, subtle, matching colours and a good picture!
I would suggest watching out for little details like space on both sides of a hypnen (ā1929- Aprilā), and I have one more suggestion: if you limit the max width of the page, the text will be a little easier to read on big screens!
Donāt knock your work, simple is often better. The flashier a page, the more distracting from its content. I like the color choices, I like the simplicity, and I like the content itself. Very well done.
Of course, I usually try to poke folks to go a little beyond what theyāre already doing to consider how to improve. I noticed you used the <footer>
on the page exactly as one ought. Good start to using semantic HTML. Also, I saw you had a <figcaption>
tag in there, which is nice, but consider its container ā why use a <div>
tag when its content is an image, and its caption?
And one other note, as you have a <footer>
, why not have a <header>
?
<header>
<h1 id="title"><strong>Dr. Martin Luther King Jr.</h1>
<h2 id="subtitle">January 15, 1929- April 4, 1968</h2>
<figure id="img-div">
<img id="image" src="..." alt="Martin Luther King Jr, Minister and Civil Rights Leader">
<figcaption id="img-caption">Minister and Civil Rights Leader</figcaption>
</figure>
</header>
As I was editing that, there were two things I saw: First, IDās are unique. You should avoid using title
for both the <h1>
and the <h2>
. Second, the <img>
tag is self-closing, you donāt need to (and shouldnāt) close it after the <figcaption>
.
Thank you for the tips. Iāll revisit later.
Thank you.
I thought it would be simpler. Ran into some problems with padding causing my paragraph text to over lap. Iām not at all sure why, but when I removed the padding the text was fine.
Html is simple at first glace until one starts using it.
Hiā¦ I really liked your Tribute page , the design and specially the background colorā¦
Some things I would do:
Use @media to reduce the margins on small screens. I tried it out on your code and it looks nice:
@media screen and (max-width: 600px) {
p {
margin: 5px;
}
}
And as per the example, maybe play around with a UL / LI to create a timeline of his life, rather than just a big block of text which you have now. It would add some visual flair without having to do too much to the site.
Apart from that - good job.
I made the changes you suggested.
Thank you,
Helen
So close
You have spelled āwidthā as āwithā in your media query and you need a space between āandā & (max-width:
Youāll see the difference once you change that.
Thank you, I totally missed that error. It solved the problem.
Than you. Iāll go back and put in an in order list for his education, but not the whole page. The king center has a time line, and I have to be careful not to plagiarize that site. Thatās why I donāt have quotes or pictures.
Yup yup! Just revisited your page, very well done! Keep up the good work, looking forward to more!
Thank you. I appreciate your feedback.