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

Responsive Four Card Feature Section using HTML5 & CSS3

#accessibility

@KaydenGiang2512

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


If anyone have any suggestions on how to achieve the cross-section layout for this challenge much easier/more efficient, please don't hesitate to let me know (I struggled with this part for quite some time) :D

Community feedback

P

@12Kentos

Posted

Hey @KaydenGiang2512

Nice job on finishing this challenge! I thought your solution on how to get the cross section to work was really interesting, and not something I probably would have thought of. :) the way I did it was really similar to what you did, but instead of this code

grid-template-rows: repeat(2, auto);

I had it repeat 4 instead of 2. That way I could get the first box to span with the following code

grid-area: 2 / 1 / 4 / 2;

without having to translate it. If you need any help with getting used to grid, here is a great interactive site I used that really helped me get the basics down.

css grid garden

Let me know if you have any other questions!

0

@KaydenGiang2512

Posted

@12Kentos thank you so much for your quick feedback. This was my first time using CSS grid in almost a year, so this was the only solution that came to mind at the time :D. By the way, your solution looks ways simpler so I'll definitely be using that for my future challenges. Thanks again and happy coding!

1

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