Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Site using HTML and CSS

Raj Mhatre 215

@RajMhatre20

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Anything which will optimize my code? Or any way to arrange cards other than using grid?

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

**Hi Raj, **

Well Done :D

I have checked mainly your HTML structure, a few tips from me:

  • instead of div main_heading you can also use the header tag;
  • the text two paragraphs can be the the h1 with two span inside (main-heading Reliable, efficient delivery, and sub-heading Powered by Technology);
  • you an use only one h1 on a page;
  • instead of div class="sub_heading" use the p tag;
  • instead of div class="cards_container" use can use the main tag here because this the main part of your component in this challenge;
  • I 'd suggest to check your project by the inspector in your browser: first, go from one column, then tablets: two rows with two boxes each and finally desktop design pattern.

Greetings :D

1

Raj Mhatre 215

@RajMhatre20

Posted

I did not understand the last point could you explain to me once more I'm using chrome developer tools. Thankyou for the feedback it helped me a lot :)

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@RajMhatre20

Hi Raj, of course, you can create layout for tablets => two rows with two boxes each, it will be better visually (the component will not be so tight on smaller screens) and then you can implement this desktop design pattern.

Greetings :D

0

Please log in to post a comment

Log in with GitHub
Discord logo

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