Tribute page feedback, not much in terms of style suggestions welcoome

Tribute page feedback, not much in terms of style suggestions welcoome
0

#1

#2

I like it a lot. The picture looks good. Also, nice choice of colors.


#3

Thank you.

It’s not as flashy as some of the tribute pages. I guess it’s pretty simple.

I’m not a designer.


#4

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;
}

#5

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.


#6

I like your choice of a person to write about. :slight_smile: 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!


#7

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>.


#8

Thank you for the tips. I’ll revisit later.


#9

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.


#10

Hi… I really liked your Tribute page , the design and specially the background color…


#11

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.


#12

I made the changes you suggested.

Thank you,
Helen


#13

So close :slight_smile:

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.


#14

Thank you, I totally missed that error. It solved the problem.


#15

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.


#16

Yup yup! Just revisited your page, very well done! Keep up the good work, looking forward to more! :wink:


#17

Thank you. I appreciate your feedback.