Skip to content
Submitted over 5 years ago

Bookmark landing page with FlexBox and JavaScript

gomezlucas•1,115
@gomezlucas
A solution to the Bookmark landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'd like to ask about the background figures. What i did was set up a div with an absolute position, and then moved it around. Like this: .header-figure { background: var(--softBlue); position: absolute; bottom: -18px; right: 0; width: 40%; height: 55%; border-top-left-radius: 40%; border-bottom-left-radius: 40%; z-index: -1;

any other or better option? thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Hey Lucas, great work on this solution! The way that you've done the background pattern is fine. Another way, which would reduce the HTML would be to use a pseudo-element, like ::before to do the same. For the border-radius you can also set a really high pixel value, instead of a percentage to make sure the corners are fully rounded e.g. border-bottom-left-radius: 500px;.

    I hope that helps!

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