Tribute page CR 28-08-22

Hi all,

I have completed my tribute page now too. I tried using flexbox to get some practice in but struggled a bit with this. Link to work: CR Tribute page (codepen.io). Feedback appreciated.

Chris R.

Like use of linear gradient for background

Instead of these 3 props, you can use just one margin prop. Search on MDN how to write margin prop.

margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;

I think you get general idea how to use flex, but you can experiment a bit more:

Thank you for the feedback. I’ll have another look at my code. I did try to get them to align correctly but knew someone would pick up on that! :slight_smile: I’ll change the margin prop too.

There are bunch of little things that can be done about your page. But in general it looks just fine.

As an option - go back to it from time to time and try to apply new knowledge which you will acquire from further parts of curriculum.

It should work with the “flex-start” property but for some reason it isn’t working! Very frustrating.

You know that your paragraphs are not actually flex-items, right?

Your sections are(I mean .quotes1, .quotes2… - these guys).

So maybe you want to do something about that.

And I think I saw some syntax mistakes in your html - double-check your code in validator before moving on with flex shenanigans.

Good point! That slipped my mind. I’ll come back again when I’ve got it sorted but thanks for your help.

Keep in mind, there are bunch of approaches here:

  • you can delete all these 5 sections, and try to deal with paragraphs as flex-items inside one single container

  • you can make all these 5 sections to be flex-containers

  • you can try to find a way to align p elems inside sections without flex.

  • you can even try to mess around grid, not flex