All comments

• 

  P

  Jeff Lang• 280

  @jefflangtech

  Submitted over 1 year ago

  I used the CSS property clip-path like so:

  clip-path: ellipse(60% 55% at 50% 45%);
  

  to create the curves at the bottom of the hero and main sections. Any other ideas of ways to do that? It reminded me of making an layering shapes in the canvas, so it wasn't totally out there, but also not as easy as I anticipated.

  And what about grid vs flexbox for the numbered cards section? If I did it again I'd probably used grid to have more control over the layout but I ended up sticking with flex even though at some screen widths it does things I don't like as much.

  

  Workit landing page with HTML & CSS

  2

  70

  

  Dor Shani• 150

  @dors001

  Posted about 1 year ago

  At first i used clip-path as well, but then i had to fiddle with the other elements a lot to make it work. finally i just used border-radius

  .block__rounded {
  border-bottom-left-radius: 100% 30%;
  border-bottom-right-radius: 100% 30%;
  }  
  

  got a pretty good results with a lot less fiddling. hope this helps, have fun!!

  1