Skip to content
Submitted over 2 years ago

Huddle Landing Page With Curved Sections

Nhan Pham•620
@NhanPhamTrong
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, this challenge is not too hard but I have some problems with the curved background image. I create a space by using padding and add background images into it using

background-size: contain

but when I change the screen width, the background images aren't fit the initial paddings.

Sorry for my bad description. Any suggestion are appreciated. Thank you.

Community feedback

  • jay•210
    @Jay-0331Posted over 2 years ago

    Hello, for that wave thing you can just use two div with those wave svg in top and bottom.

    Hope this helps

    0
    selehadin cyber•90
    @selehadin-cyberPosted over 2 years ago

    @Jay-0331 isn't it better to use pseudo elements for the curved sections with ::above and ::below for the curve svgs?

    1
    jay•210
    @Jay-0331Posted over 2 years ago

    @selehadin-cyber yes

    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