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

Status bar animated with keyFrame

Sven 295

@Sven72

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


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. :)

Community feedback

Guy Ezra 615

@ezraguy

Posted

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;
0

Sven 295

@Sven72

Posted

@ezraguy thank you for your feedback. When I remove align-items: baseline the divs are centered but not on one line. Best, Sven

0
Guy Ezra 615

@ezraguy

Posted

@Sven72 yeah i see the problem and to fix it you can use these changes to these 2 classes:

.flex-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-image: url(./images/bg-desktop.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 4em;
    align-items: center;
}
.icon-container {
    margin-right: 2em;
    width: 50%;
    margin-bottom: 5em;
}

that way the 2 divs will be on the same line and in the middle of the page

1
Sven 295

@Sven72

Posted

@ezraguy Thank you margin-bottom: 5em; did the trick. :)

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