Fylo Storage Component ft Flex

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has not been centered correctly. So let me explain, How you can correct it.

• You don't used the Grid wisely, so that the component has not been centered, Just add the following CSS rules.

body {
    display: grid;
    place-items: center;
    min-height: 100vh
}

• Now remove these styles, after removing you can able to see the changes

body {
   place-content: center;
   margin: 10% 0;
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Congratulations on taking up this challenge!

I could help you with the part you struggled the most.

HTML

 <div class="progress-bar">
        <div class="progress">
          <div class="round"></div>
        </div>
      </div>

CSS

.progress-bar {
    background-color: var(--Very-Dark-Blue);
    width: 100%;
    height: 18px;
    border-radius: 50px;
    padding: 0px 2px;
}

.progress {
    background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    width: 75%;
    height: 16px;
    border-radius: 50px;
    position:relative;
    }

.round {
    position: absolute;
    background-color: white;
    width: 15px;
    height: 15px;
    right: 0px;
    border-radius: 100%;
}

Or you can use this one too!

.progress-bar {
  background-color:  var(--Very-Dark-Blue);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 2px;
  display: flex;
  height: 18px;
  width: 100%;
}

.progress {
  border-radius: 100px;
  background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
  height: 16px;
  width: 75%;
  position:relative;
}

.round {
    position: absolute;
    background-color: white;
    width: 15px;
    height: 15px;
    right: 0px;
    border-radius: 100%;
}

There may be mistakes as I am a self-learner, you could add to it if you get better suggestions.

Hoping this would be helpful for you!

Happy Coding Journey!