Skip to content
Submitted over 4 years ago

Status bar animated with keyFrame

Sven•295
@Sven72
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

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
    @ezraguyPosted 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;
    0
    Sven•295
    @Sven72Posted over 4 years ago

    @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
    @ezraguyPosted over 4 years ago

    @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
    @Sven72Posted over 4 years ago

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

    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