Skip to content
Submitted 11 months ago

Four Card Feature __ #GRID __ #SASS __ #ResponsiveDesign

Dilhan Bocaā€¢220
@dboca93
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there šŸ‘‹, Iā€™m Dilhan Boca, and this is my solution for this challenge. šŸš€

šŸŽ Features:

  • A mixture of Grid, Flexbox and Position.
  • Progressive Web App (PWA) support. šŸ“±šŸŒ
  • Codebase is well-maintained and formatted using Prettier. šŸ’»
  • Resemblance with the original design. šŸŽØ
  • Media queries were used. šŸ“±
  • Responsive heights for cards used. āœØ

Please advise on: I have not been able to get the box-shadow to go around the curved corners on the cards. I tried to achive this with pseudo-elements, but to no avail. If someone could show me how to do this or where I could learn I would be grateful.

Community feedback

  • Rupaliā€¢780
    @rupali317Posted 11 months ago

    Hi @dboca93

    Great work on completing the challenge! Neat code!

    As for the box shadow, can you try this:

    section article {
    box-shadow: 0 0 0.625rem 0.625rem rgba(0, 0, 0, 5%);
}

    The above should take care of box-shadow to go around the curved corners on the cards, all thanks to the spread property and positioning of the shadow via x-axis and y-axis.

    Note: box-shadow: <x-axis>, <y-axis>, <blur value>, <spread value>, <color value>

    If you want to see if it really goes around the curve, you can make the blur value as 0 and you will see the result.

    Therefore, you can avoid your original box-shadow definition of box-shadow: 0.625rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.3), -0.625rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.3), 0 0.625rem 0.625rem -0.3125rem rgba(0, 0, 0, 0.3) as it is redundant and complex.

    Hope this helps. Let me know if it addresses your query!

    Marked as helpful
    1
    Dilhan Bocaā€¢220
    @dboca93Posted 11 months ago

    Hey @rupali317,

    Thanks so much for your feedback, I really appreciate it. The only issue is, it appears to still have some box-shadow on the top-side, which the design (from what I can see) doesn't really have ---- any other thoughts you might have ?

    All the best !

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord