Skip to content
Submitted over 3 years ago

Flyo Data Card using CSS Flexbox & CSS positioning

Skyz Walker•1,045
@Skyz03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

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,680
    @tedikoPosted over 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! 💪

    1
    Skyz Walker•1,045
    @Skyz03Posted over 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. 👍

    0
  • Account deleted

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

    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