Submitted almost 3 years ago

Flyo Data Card using CSS Flexbox & CSS positioning

Sky• 945

@Skyz03

Preview site View code

This is a solution for...

Fylo data storage component

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Couldn't make the bottom box in mobile and tab version responsive but updated the solution to make it more better. Any feedback is highly appreciated. Thanks in advance.✌

Community feedback

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Sky! 👋

Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:

For your progressbar use just a div element with two pseudo-elements since it is not interactive. Give barckground-color to this div, and your ::after element can be a progress (just give it like a 80% width and different background-color) and your ::before element can be a circle dot at the end of the bar.

Good luck with that, have fun coding! 💪

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko Thanks for the great suggestion, need to work a lot on this site bit more and make it perfect. Will surely update this up and let you know. Thanks again. 👍

Account Deleted

I think you don't need input for progressbar. It's not interactive element.

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