Hey @Drougnov lovely job here! The page looks great!! π₯³. Here's some things to think about:
-
Personally, I never worry too much about pixel perfection. I go for "pixel pretty close" here's a great article about this: https://www.joshwcomeau.com/css/pixel-perfection/
-
The quote should be on top of the review section? It is on my screen - can you clarify the issue there? Sorry if I'm missing something obvious!
-
And again for the animation - which 'bottom part' would you like to animate? You can do most things without a library, but in some cases it might be a lot of work!
Lastly, you might want to think about stopping the page from spreading too wide a very large screens. There are many ways to do this but I set a grid on the body element, with three columns, using a class selector as follows:
.center-content {
display: grid;
grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);
}
.center-content > * {
grid-column: 2;
}
The 1440px is the max-width you want the main content to be, and the 1rem value is the smallest spacing you want on either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).
The second part positions all direct children of the body in this nicely sized middle column. In my case, mostly, my header, main, and footer are the middle column and stops them from going wider than 1440px. Itβs also pretty easy to βbreakβ elements out of this constraint if you need to.
Other people use container classes to do the same thing. This article has a good run down of alternative approaches https://css-tricks.com/the-inside-problem/ You will note I am actually using the approach the author doesn't like!
Either way, it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.
Cheers
Dave
Marked as helpful
@Drougnov
Posted
Hi @dwhenson, thank you for all this valuable information and your valuable time :)
These blogs are very helpful and informative.
About the quote: I wanted the quote SVG under the review section with z-index. However, I found a solution to that as @vanzasetia mentioned.
Again, thanks a lot, and have a good day my friend <3