Skip to content
Submitted almost 2 years ago

Fylo Data #2

Kevin Koziol•390
@Lozzek
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

So I came back to this project to just get most of it done and I got the bar working. The only thing that I want to go back and do better whenever I fully attempt this again is to make the desktop text bubble have the little bottom right triangle instead of it just being square as well as fix the 185 gb left bubble, I used position relative and im sure there is a better way to position this but this project was just giving me a hard time so it seems like I gotta go back and do some easier projects for now.

Community feedback

  • Swing95•180
    @Swing95Posted almost 2 years ago

    Hello Kevin,

    My solution for the white card with storage left was that I put that under div alongside with whole right card. Then I set position: absolute; for the right card div and position: relative; for white card div. Then I could set position to the right and up.

    You should set bar width to 100% of right card div so you have it aligned with white card in the end. It will also stay when resizing window.

    For white triangle I used pseudo-element after for div of white-card. See below:

    .storage-left::after {
    content: "";
    position: absolute;
    border-top: 30px solid white;
    border-left: 35px solid transparent;
    bottom: -1.3rem;
    right: 0;
}

    You can find my solution here: GitHub

    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