Submitted 6 months ago

Responsive page using CSS Grid and Flexbox

FranciscoDavidCampuzanoMelgarejo•130

@FranciscoDavidCampuzanoMelgarejo

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

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

I think the page is looking good and responsive. Just a few lines of HTML and CSS. I am proud of doing it in just a few hours. Next time, maybe I'll try to use areas for CSS Grid, but I just thought that they were not necessary this for this project.

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

The main problem was changing the order of the cards for desktop design. I just followed a mobile first design, so this part was easy. The desktop design was a bit tricky, but not very difficult. So, overall it wasnt' as harda as I thougth.

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

I would say the shadows were not enough good if they are compared with the design, so a bit of help in how to make the shadows perfect according with the design.

Code

Please log in to post a comment

Community feedback

P
Carl•1,235
@CarlHumm
Posted 6 months ago
Hi there

Good job on the solution. It can be very tricky to eyeball shadows and get the perfect value. I think you've done well with your solution, it responds well. From a glance it looks like the design shadow has a wider spread, is more offcenter and a different hue.

Much easier to guess when you have a design file to work from :)
```
box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.5);
```
You may also want to give your cards a white background to help them stand apart from the neutral gray background.

Hope this helps and good luck with future challenges!

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