P
@amix74
What specific areas of your project would you like help with?
Any suggestions on how I can improve are welcome!
Latest solutions
Latest comments
- @LelloX-Dev
perfect, only thing i can see a little off is the gap between the title and the description but is really identical, good job
- P@Josu-s12@LelloX-Dev
perfect, only thing i can notice is the font size that made the overall grid look a little to big
- @mustafasen97What are you most proud of, and what would you do differently next time?
There could be even cleaner coding.
@LelloX-Devreally good, only things to adjust spacing, card width and bg-color of body
- @Zivi793150What are you most proud of, and what would you do differently next time?
Next time, I would use a Stylus for CSS.
@LelloX-DevGood Job!!
only thing is the spacing of P E R F U M E and the the product title, exept that is perfect
Marked as helpful - @maxcooper91092What specific areas of your project would you like help with?
I would appreciate any suggestions for my code.
@LelloX-DevGood job!!
the only few things i can notice is the headers that are a bit too bold and the padding-left on the lists wich is not quite right.
but aside those little things, it looks very good
- @Andrew-003@LelloX-Dev
✅ What’s Working Well
- Layout & Structure body using display: grid with align-items: center is a clean and effective way to vertically center content. ✅
.container uses flex with flex-direction: column and align-items: center, which works well for stacking profile content. ✅
-
Responsiveness You’ve kept widths relative (rem units) and used margin-left/right: auto for centering, which supports responsive design. ✅
-
Border Radius & Spacing Use of border-radius (2ch, 3rem) adds nice rounded visuals.
Padding and margin usage is generally well-balanced.
- Hover Effects .socials :hover changes background and text color, providing a clear visual cue. ✅
❌ What Needs Improvement
- Color Palette You're using custom rgba() values instead of the specified colors from the style guide. Replace with the following for consistency:
✅ Replace rgba(4, 4, 4, 0.95) with hsl(0, 0%, 8%) (--Grey-900)
✅ Replace rgba(22, 22, 22, 0.9) with hsl(0, 0%, 12%) (--Grey-800)
✅ Replace rgba(46, 46, 46, 0.8) with hsl(0, 0%, 20%) (--Grey-700)
✅ Replace rgb(129, 220, 38) with hsl(75, 94%, 57%) (the official Green)
- Typography You’re using Arial, Helvetica, sans-serif, but the challenge specifies the Inter font family.
❗ Replace with:
css Copia Modifica font-family: "Inter", sans-serif; Set a base font-size: 14px in the body to align with the style guide.
- Selector Issues .socials :hover has a space, meaning it targets any element inside .socials on hover. This could lead to unexpected behavior.
✅ Change to .socials a:hover for correct targeting.
- Code Consistency / Cleanup Some redundancy in margin-right: auto; margin-left: auto; inside .container, which is already horizontally centering via flexbox and width.
Consider grouping shared font-family rules to avoid repetition.
💡 Suggestions for Enhancement Add media queries for smaller viewports (320px–375px) to truly meet the design spec and be mobile-friendly.
Consider using CSS variables (--color-name) for the color palette to improve maintainability and theming.
