Skip to content
Submitted 8 months ago

Four Cards Using HTML And CSS

Shahzaib Ur Rehman•370
@Shahzaib-ur-Rehman
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?

Through this experience, I've gained the understanding of effectively utilizing both flexbox and grid layouts in combination. Now, I'm filled with confidence in my ability to construct various layouts.

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

Initially, I found myself puzzled about constructing the layout. However, I'm grateful to my seniors who provided guidance, enabling me to overcome this challenge.

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

please provides fonts for headings and some tips in spacing

Community feedback

  • Grace•31,270
    @grace-snowPosted 8 months ago

    Hi

    I had a quick glance at the html code and it's a real shame you've gone for flexbox on such a perfect fit css grid challenge. I recommend you refactor this to try and use grid only for the page layout. It's the perfect practice project for grid and you're missing that opportunity.

    Also, note there is no header in this design. The header landmark has a very specific purpose and must nit contain any headings or page-specific content. It is designed only to hold primary repeating content that sits on every page of a site (like logo and navigation).

    Marked as helpful
    1
    Shahzaib Ur Rehman•370
    @Shahzaib-ur-RehmanPosted 8 months ago

    Thank you so much for investing your valuable time and offering your insightful suggestions. I've incorporated them into the code by transitioning from flex to grid layout. Much appreciation to @grace-snow for the guidance!

    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