Tribute Page - Luis Suarez Football Player Extraordinaire

Hi all! Today I made my first bit of HTML for the tribute page project and I’d LOVE to get some feedback from the forum.

I came across many issues when trying to format things, the biggest being the unordered list in the middle of the page. I wanted to center everything so the bullet points and the hyphens (separating date from event details) both lined up, but found it difficult. So I lined up the bullet points and used   to try lining up the hyphens. Doesn’t look great.

The other issue is viewing it on mobile. Making the img-responsive was great but again that pesky list looks terrible. Not sure what to do.

Anyhow thanks if you take a look! In case you don’t know, for background, Suarez is a famous football player notorious for some unique acts of…aggression.

It looks fine overall. Here are some of my thoughts:

  1. The ‘Open Wide’ button doesn’t match the color scheme of the rest of the page
  2. The ‘Open Wide’ button doesn’t seem to land on a page (I just got a white screen)
  3. The ‘Open Wide’ button doesn’t really tell the user what to expect when the push it
  4. The alignment of the items in the timeline are not the same

Nice work

Thanks for the feedback! Being new to HTML, I couldn’t really find anything but do you have any thoughts on how to improve the timeline item alignment? So that bullet points align (they do now) but also the hyphens? I couldn’t get   to match perfectly - which is where you see the slight differences which I agree looks bad.

While I’m not certain that it is worth your time to fix, one solution would be to utilize the ‘row’ and ‘col’ classes of bootstrap. For example: <div class="row"><div class="col-md-4"><i> January 11, 2017</i> </div><div class="col-md-8"><b> Scores 100th goal for FC Barcelona</b> </div></div>