Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four-Card Feature Section Layout

@Ashutosh-Neupane

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I’m most proud of effectively aligning the card content with responsive design. Next time, I’d use display: grid for more precise control over layout and positioning.

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

The main challenge was aligning the image to the bottom and left side of the card. I overcame this by using CSS properties like position: absolute and adjusting margins, ensuring the image was correctly positioned within its container.

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

I would like help with creating a responsive layout using CSS Grid for better alignment and distribution of content.

Community feedback

P

@AdamullaOsas

Posted

Your mobile version looks great and I don't see any bad things about it. On desktop version CSS grid is way better option. Look up in my profile my code. I used grid, created 2 rows and 3 columns, and got 6 positions like this:

1 | 2 | 3

4 | 5 | 6

Later I stretch out first box to take 1 and 4, and last item to take 3 and 6 positions and finally centered them and added gap. I am sure there is a lot of better solutions but mine works as well. I recommend to search for CSS grid and read articles about it or watch some films on youtube to better understand commands. I used CSS Grid Garden (little online game) and it helped me a lot. When you're finished adjust icons using position: absolute and maybe add some max-width to these cards.

If you found that feedback useful, please mark it as helpful

Good luck!!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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