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

Custom 3-Column Preview Cards with Glow Effects

@attia-mahmoud

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I redid this challenge while implementing my take on an awesome glowing effect I found online 🌟.

Below are the effects I added:

  • 🔍 Glassmorphism on the cards
  • 🛸 Hover effect on each card background
  • 🔨 Modifications to the buttons and images
  • 🎨 New color gradients and background color

🧠 These are the websites I found helpful:

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Mahmoud, congratulations on completing the challenge! Great job, your style version is so cool 😁

Some little tips for optimizing your code:

  • remove the descriptive text in the alt attribute of the icons because there are only decorative in this case
  • remove all margin from main tag because with flex they are superfluous
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • add transition: all 05ms ease on the .background class to smooth the hover effect

Hope this help! Happy coding 😉

Marked as helpful

0

@attia-mahmoud

Posted

@denielden, I appreciate the feedback! I've applied your tips to my code 😊

1
Travolgi 🍕 31,420

@denielden

Posted

@attia-mahmoud You are welcome! Keep it up :)

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