Huddle landing page with curved sections HTML CSS

Community feedback

• 

  Mahesh Yadav•1,220

  @Mahesh-yadavPosted over 4 years ago

  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

  3