Skip to content
Submitted 10 months ago

Workit Landing Page - Vanilla CSS

p-tam•170
@p-tam
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Workit landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Takeaways: This challenge involved dealing with different layers, positioning and curves - which was a new challenge for me.

The biggest takeaway was the curved sections. I went through a few different approaches including a large scaled circle and another method with the usage of the clip-path css field but ultimately ended up using a standard rectangular shaped div with an overlapping eclipse shaped div at the very bottom.

I felt this was the best route to take as setting width to 100% made it responsive from the get go.

Let me know any feedback or any different approaches that I may have missed!

Community feedback

  • Lo-Deck•2,650
    @Lo-DeckPosted 10 months ago

    Hi, well done for this challenge.

    It has a good behavior when you resize it, after for the curve I put it directly in the background properties.

    You need to use more HTML tag like header, main, section to structure your page instead a lot of div. It's better for the screen reader.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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