Skip to content
Submitted about 2 years ago

Custom 3-Column Preview Cards with Glow Effects

Mahmoud Attia•330
@attia-mahmoud
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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,400
    @denieldenPosted about 2 years ago

    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
    Mahmoud Attia•330
    @attia-mahmoudPosted about 2 years ago

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

    1
    Travolgi 🍕•31,400
    @denieldenPosted about 2 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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