Submitted over 3 years ago

Four Card Feature Section HTML5 CSS3 Sass

Vanza Setia• 27,795

@vanzasetia

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

Hello Everyone! 👋

I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

Of course, any feedback is appreciated!

That's it! Happy coding everyone!

Community feedback

James Gascoigne• 130

@Gascoigne09

Posted over 3 years ago

This is an incredible effort if its something you've done on your phone.

There is one small detail I'd like to address, when the viewport hits its breakpoint, your karma and team builder containers are slightly smaller than the ones on left and the right, but as the viewport increases the problem is very quickly resolved.

It's a tiny detail i'm bringing up but again shows you've done a great job. :)

Vanza Setia• 27,795

@vanzasetia

Posted over 3 years ago

@Gascoigne09 Thanks you for your kind words and also the feedback! About the karma and team builder containers, the parent of all three cards, I used display: flex and also I made it the direct children to be flex: 1 1 100%, so that way it will have the same width. But unfortunately when it hits the breakpoints something a little weird happen. If you have any solution for this problem, I will be glad to know that!

bunee• 2,020

@buneeIsSlo

Posted over 3 years ago

@Vanza, This is Perfect! and completely responsive. I am amazed by the fact that you coded this on a phone. If you don't mind me asking, Can you please share some resources that you used to achieve this? By that I mean, How you went about making this site perfectly responsive on a phone and apps that you used to code etc.... Looking forward to your next solution :)

Vanza Setia• 27,795

@vanzasetia

Posted over 3 years ago

@buneeIsSlo Thank you for your kind words! I really appreciate it!😊 And about the apps that I used, I use Acode as my code or text editor (which is a really nice 👍 code editor for Android) and to compile my Sass to CSS I need a terminal to install nodejs then install Sass and other things. So the terminal that I currently use is Termux and the browser that I use is Chrome. And last but not least, for the resources I usually take a look on documentation whether it's on W3Schools and MDN. That's it! Hopefully this answer your question 😉!

bunee• 2,020

@buneeIsSlo

Posted over 3 years ago

@vanzasetia Thank you SO much for sharing these resources. Happy Coding! :)

Vanza Setia• 27,795

@vanzasetia

Posted over 3 years ago

@buneeIsSlo You're welcome! And also if you still have any questions, feel free to ask me! I will be very happy to answer them!

Happy Coding Too!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hi, Vanza Setia! 👋

I just wanted to drop in and check out another challenge of yours that you have completed! 😀 This one's looking great, as well (and is better than a lot of solutions for this challenge I've seen which have probably been coded on a regular laptop or desktop computer)! 👏 I like how you nicely organize your code, too. 🙌

The only small suggestion I have is to use a single <h1> tag for the heading of the page (since it is really just a single heading, not two separate headings). You can easily style each part of the heading differently by wrapping one part in a <span> tag. 😉

You're doing a wonderful job—keep it up! 👍

And of course, keep coding (and happy coding, too)! 😁

Vanza Setia• 27,795

@vanzasetia

Posted over 3 years ago

@ApplePieGiraffe Thank you for your kind words and your suggestion!

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