Skip to content
OverviewSolutions
15
Comments
2
Bruno L L Oliveira
@BrunoleonardoDev

All comments

  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution to the Four Card Feature Section.

    😎 I had a lots of fun doing the challenge and doing some custom design improvements.

    This is a solution that I've finished before but I decided to update it, when I saw a solution of guy Yefry Sanchez where he applied an hover effect on the card where the icon flips while hovered, so I tried to apply something similar to mine inspired on what he did. Here's is his profile @y25sanchez . Nice solution bro!

    👻 I added some features 💀

    • 🎨 Text Gradient on main heading.
    • 🥃 Glassmorphism on card hover.
    • 🎨 Custom background.

    Feel free to leave any feedback.

    4 Card Feature Section (Vanilla CSS + Custom Design + Glassmorphism)

    13
    Bruno L L Oliveira•180
    @BrunoleonardoDevPosted over 2 years ago

    Show ! 👏🏾👏🏾

    1
  • Azhar•600
    @azhar1038Submitted over 2 years ago

    Profile card component with a little bouncy entry animation and a dark mode.

    The most difficult part for me was to position the background image. I failed to do that with background-image, so ended up using pseudo element with overflow: hidden;. Please let me know if you have any better solution (modifying the image is a good option I believe 😅)

    I also failed to apply filter on the card top image to match it with dark mode. When I applied filter to it, it covered the profile picture. If you have any idea, how to darken that image without breaking other things, do let me know!

    Profile card with entry animation and dark mode

    3
    Bruno L L Oliveira•180
    @BrunoleonardoDevPosted over 2 years ago

    Por essa eu não esperava, parabéns pela ideia do dark mode! 👏🏾

    1