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

Data-storage component [Mobile first + Flexbox ]

SHMITEnZ 80

@SHMITEnZ

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


Greetings community,

Here's my solution for the [Fylo data storage component] challenge

It was my first junior challenge and I hope I did good. Feel free to leave a feedback ⭐️

I made this using a mobile first workflow and added 2 media queries for larger screens.

Breakdown points are:

  • min-width: 900px (desktop version)
  • min-width: 376px (switch to the desktop bg image but keeps the vertical mobile layout)

Everything is positioned and aligned with flexbox except the alert message for which I used the property position:absolute. The speech bubble shape for the desktop layout is made with the ::before pseudo element.

Please let me know if there's anything broken or not working as it should. **Thanks a lot! **😎

Community feedback

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