Submitted almost 2 years ago

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

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

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

@ArslanAmeer

Posted 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

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted 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

Manny Verma• 230

@mverma45

Posted 5 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?

Vishnuprakash• 60

@Awizp

Posted over 1 year ago

This is Awesome!

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

@Awizp Tamizhano..?

Vishnuprakash• 60

@Awizp

Posted over 1 year ago

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

Ava Christine• 20

@avaChristine

Posted almost 2 years ago

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

Please log in to post a comment

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