Huddle landing page with curved sections HTML CSS

Hi

Good attempt. To create curves, you can use background property. When you look at the design, you see that grow-together section has a light blue bg color, top and bottom curves.

// to create top curve, set background image on the section above `grow-together` section and place it at the bottom like following:
.intro-section {
    background: url(./images/bg-section-top-mobile-1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
} 

.section-grow-together{
      background-color: var(--very-pale-blue);
}

// to create bottom curve, set background image on the section below `grow-together` section and place it at the top like following
.section-flowing-conversation{
     background: url(./images/bg-section-bottom-mobile-1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
}

Similarly, you can create other curved sections