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

Landing page using css grid

P
Mikhail 400

@mkostrikov

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I will use a more modern image format

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

There were no serious difficulties

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

bem

Community feedback

@alberto-rj

Posted

👋 Hi, @mkostrikov! Congratulations on investing your time and leveling up with the challenge, Product preview card component

On line 76 of your internal style

You could just specify border-radius from the upper corners instead of all corners of the image to match the design on mobile device.

👎 Don't

border-radius: 1rem;

👍 Do

border-radius: 1rem 1rem 0 0;

Learn more here

On line 218 to 220 of your index.html file:

Instead of using the h2 tag, you could use the h1 tag because in this case it is in the correct hierarchical order.

Titles are in the correct hierarchical order when:

  • h1 is the main title;
    • h2 is just the subtitle of h1;
      • h3 is just the subtitle of h2;
        • h4 is just the subtitle of h3;
          • h5 is just the subtitle of h4;
            • h6 is just the subtitle of h5;

Learn more here

Keep learning, coding and sharing! 🌟

Happy coding! 🚀

Marked as helpful

1

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