Skip to content
Submitted 5 months ago

Four card feature section built with Astro and Tailwind CSS

SmartAce•170
@Smart-Ace-Designs
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

What are you most proud of, and what would you do differently next time?

Completing the design nearly completely on my own. I did have to consult Bing Co-Pilot to see how to arrange the cards in the desktop design specification (outer grid/inner flex) - however I am not sure if that it correct way to do it.

What challenges did you encounter, and how did you overcome them?

Arranging the desktop card layout. I knew I wanted to use a grid of 3 columns...but the inner column threw me. After consulting Bing Co-Pilot, it suggested using flex for the inner column to stack the cards.

I am guessing most newbies like me struggled with this as well...

What specific areas of your project would you like help with?

I would like someone to review my desktop card layout and let me know if I should have done it a better way.

Community feedback

  • Vanessa•150
    @petrihcourPosted 4 months ago

    I like how you used a mixture of flex and grid for your desktop version. I ended up using flex only, but mixing w/ grid definitely looks to be more dynamic based on your code and the live site. Awesome job.

    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