Skip to content
Submitted about 1 month ago

Four Card Feature Section using Grid and Flexbox

Suraj Khatri•200
@SurajCasey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to this design quick as I was practicing it from time to time. I have learned more about grid and flexbox properties from this challenge.

What challenges did you encounter, and how did you overcome them?

I had challenge to fix the cards like in the design image for the desktop and mobile. I used grid method for the desktop and flexbox for the mobile screen. I found it easy to use both than using only one.

What specific areas of your project would you like help with?

I could not figure out the shadows exactly like the design images. It was difficult for me as I have no much experience with figma. I want help with box shadows properties to make it look exactly like the design. Also, I have use max width and max height properties so that it does not exactly match with the design. The box looks bigger than the actual design. How do I fix it?

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted about 1 month ago

    Hi Suraj Khatri, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

    <h1>Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1>

    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!

    The main tag must be present in every HTML document so that we can recognize the main content. To fix this, wrap the main content in the main tag. Users of assistive technology will have a better navigation experience on your site thanks to the use of HTML5 landmark elements.

    The rest is amazing.

    I hope this is helpful. 👍

    Marked as helpful
    1
    Suraj Khatri•200
    @SurajCaseyPosted 30 days ago

    Thanks, it was really helpful. I am using this idea for upcoming projects. @AdrianoEscarabote

    0
  • elijahraphael5•80
    @elijahraphael5Posted about 1 month ago

    yes it does yes it is accessible yes it does very well structured no just slightly readable and concise

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord