social links card using html and css (flexbox and grid)

Community feedback

• 

  LelloX-Dev•110

  @LelloX-Dev

  Posted about 2 months ago

  ✅ What’s Working Well

  1. 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. ✅

  2. Responsiveness You’ve kept widths relative (rem units) and used margin-left/right: auto for centering, which supports responsive design. ✅

  3. Border Radius & Spacing Use of border-radius (2ch, 3rem) adds nice rounded visuals.

  Padding and margin usage is generally well-balanced.

  4. Hover Effects .socials :hover changes background and text color, providing a clear visual cue. ✅

  ❌ What Needs Improvement

  1. 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)

  2. 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.

  3. 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.

  4. 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.

  00