Responsive Four Cards Grid Layout using HTML and Vanilla CSS

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Nice one 😀

  If you are curious how you can do this straight lines on the top of each card here is my tip:

  Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  Hamza Naeem•260

  @hamzafrontendPosted 3 months ago

  @MikDra1 Hi, thank you for your detailed explanation, but I think the top border is the simplest one, what do you say?

  0

  

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  @hamzafrontend

  Yeah of course, but at the design the top line is straight. On the border-top property you have applied the border-radius and if you create another element without the border radius that is the look that we want to achieve 😄😄😄

  1

  

  Hamza Naeem•260

  @hamzafrontendPosted 3 months ago

  @MikDra1 now I got your point, thank you for your valueable feedback.

  0

  

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  @hamzafrontend

  I am glad I could help 😊

  0
• 

  Virshree Desai•110

  @VirshreePosted 3 months ago

  Hi @@hamzafrontend, Great job!! Looks exactly similar as design requirements.Keep it up...

  2

  ---

  

  Hamza Naeem•260

  @hamzafrontendPosted 3 months ago

  @Virshree Thank you so much!!

  0