Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo data storage component

@Procodx

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


had difficulty in creating the card which says 185GB left....anyone with suggestions on how to do it would be very appreciated.

Community feedback

Frank Ruiz 410

@fruizotero

Posted

@Procodx good job on finishing the challenge.

Regarding what is missing in the card you could add it with the pseudoclass "before" or "after", you would only have to put the positioning "relative" to the element that you are going to apply the pseudoclass, since the content that you will add will have an "absolute" position. In the following way you could solve it:

.last {
    position: relative;
}

.last::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 1.5vw solid #fff;
    border-left: 1.5vw solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0%, 95%);
}
0

Please log in to post a comment

Log in with GitHub
Discord logo

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