Skip to main content

Command Palette

Search for a command to run...

Design a Product Card -Challenge 4

Published
β€’1 min read
Design a Product Card -Challenge 4
A
Software engineer and developer educator with over four years of experience building production-grade digital products for platforms serving millions of developers globally. Software engineer at Hashnode & Bug0

Hi friends πŸ‘‹, welcome to the 4th challenge of the unclebigbay and friends series, in this series we are going to design the product card from the image below.

image.png


Colors πŸ‘‡


 color-1: #AEDAA7;
 color-2: #C1BDBA;
 color-3: #FFFFFF;

Mode of submission:

When you're done with the challenge, proceed to share your design on the series WhatsApp group and also attach your final design screenshot in the comment section for documentation and reference for new members.

Conclusion

Kindly note that there is no good or bad outcome of design, this is a learning process, so endeavor to do what you can, take your time, and feel free to ask questions when you have difficulties

#unclebigbayandfriends #challengeyourself



If you found this helpful and want to support my blog, you can also buy me a coffee below.

N

Desktop View

Challenge-4 (Desktop View).png

Mobile View

Challenge-4 (Mobile view).png

20
A

mama dee mama Nasifah Alalade

Kudos!!!

K

Desktop version

plant.png

Mobile version

plantmobile.png

10
A

this is a nice solution Kirsten Nancy

well-one Nancy

I love your consistency

M

Desktop

product-card-desktop-view.png

Mobile

product-card-mobile-view-2.png

20
A

Mobile view

Screenshot (16).png Desktop view

Screenshot (17).png

20
A

this really looks amazing Adesola Modinat Adenike

how the process of building this like?

A

Quite interesting, this challenge makes me work more on my layout and responsiveness Ayodele Samuel Adebayo

E

Mobile View Screenshot (24).png

Tablet View Screenshot (25).png

Desktop View Screenshot (26).png

15
A

#Mobile view product Card mobile.png

#Desktop View product Card Desktop.png

GitHub page: https://github.com/seniorteck/ProductCard-Challenge- LivePage: https://seniorteck.github.io/ProductCard-Challenge-/

11
J

This is so cool that there are such events, I hope designers will like it!

20
A

thanks for the feedback James Hackett

I hope it helps too πŸ€—

More from this blog

U

Unclebigbay's πŸš€ Blog

101 posts

Software Engineer | Open-Source Contributor | Developer Educator