Testimonial Grid Section

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello MIHIR, congratulations for your new solution!

  I know how hard is to setup this grid layout, but I can tell that you've paid a lot of attention for each detail. You can improve here the shadows that are too strong and also the html markup.Here’s some tips to improve your component design and html markup:

  You've missed the color for the background, in this case is background-color: #EDF2F8 and add it to the body and to improve your box-shadow, you’ve to have in mind two things that make a good shadow, blur and low opacity for smooth shadows. To improve your current shadow, decrease the opacity and increase the blur, try this value instead: box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);

  If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with <main> or section, about the cards you can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/testimonials-grid-section-vanilla-css-focus-effect-custom-design-e5bIzU3vZN

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  2

  ---

  

  MIHIR KUMAR•70

  @MIHI-botPosted about 2 years ago

  @correlucas Hello Sir! I am really grateful for your helpful guide. You have made me think twice about my work and way of doing it, I am really thankful for your attention and I will be doing my future projects keeping your words in mind.

  I will try to improve myself with better results on every works. Thank You !

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @MIHI-bot I'm happy to hear that Mihir, keep it up!

  1

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted about 2 years ago

  @MIHI-bot Hello, congrats on your successful completion of this challenge. Don't forget to generate a new report after making the necessary changes . Generating a new report would clear the accessibility issues.

  1