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 Section | HTML, SCSS, Flexbox

@DarKaRor

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


Feedback is appreciated. Second project using SCSS, I added custom hover effects on the cards and its images. This was a fun challenge!

Community feedback

@AgataLiberska

Posted

Hi @DarKaRor! this looks awesome, I am obsessed with how much attention you paid to the details. The hover effects are fantastic - enough to grab attention, but not so much that they would distract from the content itself. Chef's kiss

I also like how you structured your html, putting the two cards in a div is simple but clever :)

Two things I would slightly amend - I'd love to see some padding/margin on the container - on smaller mobiles the cards are reaching both edges of the screen and it looks off - plenty of people use phones that are at or around 320px wide still :) Another thing is that you could use some more semantic html - you could maybe include a <h1>, a <header>, use <article> tags for the cards.

Overall though, I love it!

Marked as helpful

1

@DarKaRor

Posted

@AgataLiberska Thanks for the feedback! I've applied all the changes and some other small details, I hope it looks better on smaller screens now and that the tags are correct!

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