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

Base Apparel coming soon page

@JesusAtao96

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone, I am doing these challenges with css grid, flexbox and BEM, any feedback is appreciated. :D

Community feedback

Sunny 525

@statanasova

Posted

Hey Jesús, I think your BEM is just fine, the layout is responsive, so good work!

It is very interesting how you use the body to define the Grid, I didn't even know that was possible :)

For the mobile version, you can remove the SVG background and use a gradient.

And for the desktop version, use background-size: cover to make the SVG cover the whole width and height of the screen, because I see some large white spaces on high resolutions. Another way to do the background - in my solution, I added an extra div with the SVG as a background and put it behind the left column only (divs and other containers can overlap in the same Grid rows/columns). I think that's how it is in the original design.

One more thing... Please, fix the submit button that hangs below the input field :D Just add top: 0. And maybe give the input field a transparent background.

Keep it up! PS. Upvote if any of this was helpful :)

1

@JesusAtao96

Posted

Hello statanasova

I was thinking of redoing this project and making it much better, thanks for the feedback :D

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