Skip to content
Submitted over 5 years ago

Insure landing page with - Vanilla JS, HTML and CSS

Solomon Ekrebe•610
@krebeDev
A solution to the Insure landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Solomon Ekrebe•610
    @krebeDev

    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.

  • Matt Studdert•13,611
    @mattstuddert

    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!

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