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

Responsive landing page CSS and HTML only

Leopoldini 180

@LShiznit

Desktop design screenshot for the Suite landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Difficult to rely only by responsive means. Using grid gets complicated when you revisit it. Fixing images with absolute was also tedious, as well as the typography.

I feel the code could have been simplified if I had strategized for responsiveness. Padding was a little inconsistent.

Couldn't get that first curve to stay fixed relative to the phrase. I'm not sure how to do that.

Community feedback

@Drrecommended

Posted

Hi your solution looks great! I did notice that your <p> spills over the image. I would suggest setting a max width on this. I would also suggest fixing your typography. You can also use opacity to slightly lighten up the <p>. If you look at the bottom of your page it looks like there is a margin that you don't want. Try setting the margin bottom to 0 on that element. Also look more into margins and paddings. You can also use grid to space things out in your header as needed. Cheer!

1

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