Skip to content
Submitted over 2 years ago

Storage Component using Flexbox

Dan Kant•310
@Dan-Kant
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

The only thing I couldn't tackle is the triangle descending from 185 GB Left block. I set border-bottom-left-radius: 100%; but it seems that it doesn't flatten the bottom left corner fully. So, are there any best practices to make a sharp triangle like in this challenge.

Community feedback

  • Fluffy Kas•7,715
    @FluffyKasPosted over 2 years ago

    Hi,

    Your solution looks good, there's just a small problem with responsiveness (check it between 830 and 955px). I'd also wrap the images in button element, I assume they're meant to be clickable buttons with some functions. And perhaps remove the cursor: pointer from the "chart-circle". This isn't an actual slider but a display of how much data the user have left, so I doubt it's supposed to be clicked on!

    Check out this useful article, it has all sorts of shapes that can be achieved with using CSS, including that small triangle. ^^

    1
    Dan Kant•310
    @Dan-KantPosted over 2 years ago

    @FluffyKas Thanks for your feedback. I will change media queries to a larger break point then. As for icons, I thought they were just for decorative purposes, but it is nothing to change some tags in my HTML. I will also remove cursor: pointer; and a special thanks for sharing the article.

    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