four card feature section using html and css (full responsive)

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted almost 2 years ago

  Hey Yathish, well done! The effort you put into it is really impressive. Your web page is well designed.

  There are few changes that could be made

  • You can use flexbox and grid for the page to be responsive at different widths.
  • The card will not resize itself at different sizes if both height and width are set, so use relative units here .

  hope this helps you, happy coding✌️.

  Marked as helpful

  1

  ---

  

  Yathish•50

  @yathishgPosted almost 2 years ago

  @thisisharsh7 thanks for reply

  1
• 

  Hussain Hussain•410

  @LysitheaDarkKnightPosted almost 2 years ago

  Hello, how are you? Good job on completing the challenge!

  In order to match the layout shown in the exercise, you would need to use Grid. To do that, create a div that covers all the cards and apply display: grid to that div. You would then need to apply grid properties accordingly to acheive the layout. You can look at my solution on how I did it or study the Grid component and how it works.

  Happy coding!

  Marked as helpful

  0

  ---

  

  Yathish•50

  @yathishgPosted almost 2 years ago

  @LysitheaDarkKnight thanks for reply

  1
• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Yathish, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  The most appropriate in this case would be just an h1 tag! containing the two contents, to make them break a line, we can use a max-width, and for the styling we can use a span element with the content that will be changed!

  <h1 style="font-weight: lighter;">Reliable, efficient delivery</h1>
  <h1>Powered by Technology</h1>
  

  The remainder is excellent.

  I hope it's useful. 👍

  0