I think this is a turning point for me, i finally embraced the dark-side. And what can i say, it's liberating. My code feels cleaner, simpler and more legible. It might be due to the design but i'm definitely converted 👀
I took the time at the start of the project to really understand how to work with min-width instead of max-width and it paid off. I also got a bit unnecessarily carried away with @keyframe animations at the end and changing them up per breakpoint 😂
Anyway, your feedback would be greatly appreciated!
I didn't really know what you meant by '- Mobile: 375px - Desktop: 1440px' , so I just made it center in the middle of the body. Feedback about that would really helpful.
You can use overflow: hidden for the card’s border-radius to work without setting it on the image as well,
The box shadow is really big on the button, a subtle 0 2px 5px #00000033 should work,
You can apply that shadow on the card as well,
Use more em and rem, especially rem for font-sizes. If you set a font-size on body and then rem on children, you could change all your font-sizes by just changing the body font-size and the children will scale accordingly.
Seems like there is a little gap between the image and the body of the card but its nice that way also.
The body is too big on mobile, the reason is, you set the width of the body, I guess for background positioning ? background-size: cover should do the trick.
Tested it on Safari iOS, nice work on the card itself, the positioning is off on both portrait and landscape orientation.
Also the box-shadow on the card is off and its values looks random, 0 2px 5px #00000033 is usually enough for a card
Tested it on Safari iOS, looks good overall although:
Centering is kinda off on first and third section,
The hamburger menu’s items breaks on landscape mode
Now about the code:
The use of !important is not recommended, if you need it that much, surely something is wrong with your code and using it shouldn’t be your first resort,
5 media queries are too much, look for ways to make it more responsive « on its own » like grid, responsive font-sizes with the use of clamp(), not setting fixed sizes, using em and rem etc..
I have just stated with web design, so any suggestion or feedback is valuable to me.
My background image is going out of the main body and it does not look good.
and I could not figure our how to do it?
If you can hep out that would be great;
Good job 👍 Looking at your code, here are some advices:
Try working with margin and padding instead of relative position
Using em or rem instead of pixels is a good practice
Try to keep your code DRY (dont repeat yourself), for instance the cards have a lot of styling in common, By giving them 2 classes you could make a general styling for the cards and the use the other class for specificities.
