Skip to content
Submitted almost 2 years ago

Four card feature - section, But slightly tweaked up..🚀

Abdul Khaliq 🚀•72,560
@0xabdulkhaliq
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Alhamdullilah, Hello everyone..👨‍💻

  • This was an excellent challenge to train and improve my knowledge with grid & flex layout.
  • As always, i gave a personal touch to this solution
  • I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!

Things i tweaked up..🚀

  • Added 3d parallax swipes effect with Swiper.js
  • Used scrollreveal.js on dom elements to animate them
  • Changed the four feature grid section into awesome looking 3d slider

Feel free to leave comments on how I can improve my code.

Peace be upon you..✨

Community feedback

  • Arslan Ameer•30
    @ArslanAmeerPosted over 1 year ago

    Hi Abdul Khalid,

    This looks great. But it is a bit glitchy. If you are on the last card (on the right most) and try to swipe by grabbing any card on the left it just shuffles all cards and when swiping by dragging and other card it wiggles and shuffle

    1
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Brother @ArslanAmeer, actually it was great during the time when it was build.

    The swiper.js cdn link is serving updated script, there's some dependancy issues with that.

    I'll will be fix it soon by adding the swiper.js as a dependancy with npm or yarn like package manager

    0
  • Manny Verma•230
    @mverma45Posted 7 months ago

    @0xabdulkhalid when I minimized the screen the code didn't adjust to a smaller screen? is the media queries not set up correctly?

    0
  • Vishnuprakash•60
    @AwizpPosted over 1 year ago

    This is Awesome!

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    @Awizp Tamizhano..?

    1
    Vishnuprakash•60
    @AwizpPosted over 1 year ago

    @0xAbdulKhalid Yes bro! Glad to meet you! Sry for late reply!

    0
  • Ava Christine•20
    @avaChristinePosted almost 2 years ago

    Wow, its amazing to see. can i know how you did that

    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