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

Blog Preview Card: A responsive page crafted using Flexbox

@Flavio-sv

Desktop design screenshot for the Blog preview card 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?

What I am most proud of is learning how to import external fonts and use variables. For now, I wouldn't change a thing.

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

I faced a challenge in importing external fonts, along with user tips on using variables, but I managed to overcome this obstacle through my old friend Google.

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

I would appreciate it if you could analyze my HTML and CSS code and provide feedback on how I could further improve it.

Community feedback

@sumedhakoranga

Posted

Nice, learned a lot from your code. One thing that you missed is the functionality where the card becomes active upon hovering.

2

@0xabdulkhaliq

Posted

Yeah @sumedhakoranga, you said it right!

Hi there @Flavio-sv 👋,

  • Your solution would be perfectly finished if you add the hover effect as a finishing touch!
  • Just add the following css rules
main {
  transition: box-shadow .3s;
}
main:hover {
  box-shadow: 12px 13px 0px 1px #000;
}
  • Now your component's hover shadows has been set properly with subtle transition to present it smoother.

Hope this suggestion helpful to you!

1

@Flavio-sv

Posted

Hi, @sumedhakoranga

Thank you for notifying me; I had completely forgotten to implement that section.

0

@Flavio-sv

Posted

Hi, @0xabdulkhalid

Thank you for the suggestion; I wouldn't have thought to use transition: box-shadow .3s;.

1

@0xabdulkhaliq

Posted

You're welcome @Flavio-sv !

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