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

@hectorjbd

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


I didn't know how to make the white box

Community feedback

@talentlessDeveloper

Posted

Hi,

Nicely done project!

As for the white box, you can begin with adding these properties to your alert_info class. .alert_info { position: relative; background: #fff; border-bottom-right-radius: 0; }

Then you can create a new div inside or use the ::before pseudo element let's say you created a new div inside .alert__info, add these properties to the div.

position: absolute; width: 0; height: 0; border-top: 22px solid #fff; border-left: 22px solid transparent; right: 0px; bottom: -14px

You can adjust the values to fit your preference.

if you want to learn how to create shapes using css, here is a link Css shapes.

Marked as helpful

0

@hectorjbd

Posted

@talentlessDeveloper Thanks... Very helpful!

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