I tried to use the BEM methodology, would appreciate some feedback if I'm using it correctly.
Don't know if there's a better regular expression for the email format. Any remarks are welcome.
A more elegant way of centering the first and last cards, currently I'm just eyeballing it with margins.
Tips on how to do this without media queries.
Added animations on mobile to simulate the hover styles on desktop
What specific areas of your project would you like help with?Code optimization and use of a system
Nicely done, looks good 👍
Hi there, I have a few suggestions that could improve the design.
"rem" instead of percentage for the "max-width"."ul" with the "::before" pseudo-element, you can directly change the list style of the "ul" by using list-style-image: url(url to image).display: flex them.Not sure if the last point made sense, but hope it this helps.
Hi there, I noticed that the responsiveness breaks at 712px. I would suggest changing the flex direction to column instead of row so that it doesn't look weird. Also I see you are using absolute units (px), it is best practice to use relative units like rem to avoid sizing issues on different screens, also it is the standard for responsive design. Hope this helps!
Hi there, your responsiveness breaks on tablet sized screens, the image reaches its maximum width and can't take up more space. This is easily fixable if you apply max-width to the parent container. The background color is not the same as in the design, the colors are all described in the style-guide.md file. Hope this helps :)
Hi ✌️ I made this project with HTML and CSS and used mainly flexbox
What I am proud of is that I was able to finish this under 1and half hour almost without much trouble
What challenges did you encounter, and how did you overcome them?What I had trouble is when I styled the perfume I did not really have an idea on how to do it so I ended up using span hope I am right would love a review on this 😊
What specific areas of your project would you like help with?I would like help with how to style the perfume text line I used span to it is there any better way?
Thanks 😊
Hi, in response to your question you asked on my solution, I'm not sure I can give you proper feedback, however I can tell you what I did.
Basically what I did was have one parent div in which I have two children divs, one for the image and one for the text content. I set the container to 45rem (for desktop) and the height to 100%, that way I let the content inside the parent container dictate the height. And of course I'm using flexbox for the layout. So basically for the whole size thing, I just have a fixed width for desktop and mobile and the height is dictated by the content, so the margins, font sizes, etc all play a part in the height.
Dunno if I made sense but hope this helps.
P.S. You can style the spacing in the "perfume" text without using <span> by using letter-spacing: :)
Looks good!
