feat: add Piet Mondriaan intermediate CSS project

[Sboonny]

Checklist:

• [x] I have read freeCodeCamp's contribution guidelines.
• [x] My pull request has a descriptive title (not a vague title like Update index.md)

[scissorsneedfoodtoo]

Hey @Sboonny, thanks for your patience.

Like we mentioned in chat, this project looks great, and is quite a faithful reproduction of the original painting.

I took a look and the main issue is that the code currently uses CSS Grid to place the different lines.

Looking at the project-based curriculum spreadsheet, this project should ideally cover as many of the concepts that the current Picasso project does (column Q), and not introduce concepts that are covered in future projects.

The things that stand out to me are that CSS Grid is introduced in the CSS Grid Magazine project a little later. Also, the Picasso project this is replacing is the first time that Font Awesome and the i element are introduced.

I don't think it's necessary to introduce Font Awesome and the i element here . If you can think of a way to add in an FA icon that feels natural, we can go with that. Otherwise, I think it's fine to move the introductions of those things to the CSS Grid project where they're currently reviewed.

Whatever the case, we want to make as few changes as possible to other projects in the RWD cert.

I played around with some your code and came up with a simple example of a few lines from the painting in a small frame that's centered on the screen. I did that so the whole painting is visible in the preview pane on desktop screens, but we could also use the full width and height of the view like you are currently.

I'll leave the HTML and CSS as a barebones example that might help with refactoring later.

[naomi-lgbt]

Just leaving a quick note from our curriculum meeting - we are considering something a little different like painting a cat, so it's more engaging than placing divs (we can tie in borders and border radii to create shapes without transform)

[QuincyLarson]

To confirm, I think we should replace the Picasso project with 2 projects: the Mondrian project, and the cat project. This way we can cover everything, and we can give learners additional practice at applying these concepts.

[naomi-lgbt]

The only new concepts in this project are positioning elements, I don't see a need for a full second project.

[Ksound22]

@naomi-lgbt do you think the cat painting would be enough to replace the Picasso painting? A bunch of what we covered in the Picasso painting project is there: https://codepen.io/vcmg/pen/OVYpWN

[naomi-lgbt]

I would think so, yes.