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 - using basic HTML and CSS

P
Daveā€¢ 5,245

@dwhenson

Desktop design screenshot for the Project tracking intro component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I feel like I've done OK here, but any feedback on how things could be better would be highly appreciated.

One big question, is what is the approach for adding the shape in the background? I've Googled around but haven't found anything that works. I must be missing something!

Thanks in advance for any feedback - much appreciated.

Community feedback

P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

Hi Dave, great work on completing your second challenge! For the background pattern you could use a mixture of position: absolute; and a pseudo-element, like ::before to create that shape. It would look something like this:

body::before {
  content: "";
  position: absolute;
  /* other styles to create the shape */
}

If you have a look at the design again, you could see that the pattern could just be a rectangle with a curved corner.

Let me know if you have any questions!

0

P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

@Sampajanno glad to see you managed to get it working OK!

0
P
Daveā€¢ 5,245

@dwhenson

Posted

Thanks Matt. I applied the above and updated the design. Worked a treat. I was Googling totally the wrong terms which is why I couldn't get anywhere!

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