Responsive four card feature section using HTML and CSS

Community feedback

• 

  ValenBytes•160

  @valen-webdPosted 3 days ago

  Great job! Your solution looks really close to the original design, and the responsiveness works well across different screen sizes. 😊

  Now this is personal preference, but I'd prefer to not be able to scroll on desktop. If you remove the height: 120vh; at line 31 and instead use margin or padding to center the cards, everything is on screen without needing to scroll.

  This would make it look weird on mobile though, because of the larger margin-top at line 143 and 149. If you adjust those, it should look better on mobile.

  Other than that, your solution looks really nice!

  Marked as helpful

  1

  ---

  

  Prezz World•80

  @PrezzworldPosted 3 days ago

  @valen-webd Thanks a lot. I came up with another way of doing it

  1
• 

  NAKUL RAJA K C•100

  @Nakul460Posted 3 days ago

  nice work. How did you give the box shadow like that?

  1

  ---

  

  Prezz World•80

  @PrezzworldPosted 3 days ago

  @Nakul460 I set my horizontal offset (x axis) to 0px this way, the shadow doesn't shift making it directly aligned with the element on the x-axis.

  The vertical offset (y-axis) is set to 10px, shifting the shadow 10px downwards and giving the card a lifted appearance.

  The bur radius is set to 15px, making the shadow blurred by 15px an creating a soft and diffused edge.

  Then the color is a very light grey color which is set to hsl(212, 10%, 85%).

  0