Submitted over 4 years ago

Status bar animated with keyFrame

Sven•295

@Sven72

A solution to the Fylo data storage component challenge

Solution retrospective

While coding this challenge, I found a video by Kevin Powell about aimating gradients – which fits perfectly to this challenge. It's applied at .load-used. I had issues to center the boxes in te desktop view. I applied flex-basis, so that both boxes are on one line. But the align-items: center does not work anymore. I solved this with adding a padding-top: 25% – but this does not feel good. :)

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Guy Ezra•615
@ezraguy
Posted over 4 years ago
Hello Sven, the site looks great and I really like the animated gradients. About the centering for the main div I think all u need to change in the flex-container class is removing these 2 lines:
```
    padding-top: 25%; 
     align-items: baseline;
```

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