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

Insure landing page with - Vanilla JS, HTML and CSS

@krebeDev

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I've had to use two empty divs to display the curly background patterns in the intro section. I feel this approach is not effective. Any ideas on a better way to achieve the design that's in line with best design practices? You're welcome.

Community feedback

@krebeDev

Posted

Thanks for the feedback @mattstuddert. I didn't know I could use url() as content for ::before and ::after pseudo-elements until today. I'll definitely give it a try.

0

P
Matt Studdert 13,611

@mattstuddert

Posted

@krebeDev yeah you can use both of them as regular elements, which is perfect for decorative details like this.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

Your solution looks really good, Solomon. Nice work! To answer your question about the div elements, there are two possible solutions:

  • Instead of empty div elements in your HTML you could use pseudo-elements, like ::before and ::after to add those patterns. This would mean you don't have extra elements in your HTML.
  • Another approach would be to add multiple background-images to the introductory section.

Let me know if you have any questions. Keep up the great work!

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