Order Summary challenge - Flexbox and Grid

Hi Francisco, great work on this challenge! 😉

Here are a few tips for improve your code:

• for fix the top image in the background just put more specific background properties to the body:

background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;

• use p not the h3 tag for the text of card
• instead of using px use relative units of measurement like rem -> read here

Overall you did well 😁 Hope this help!

Hi! 👋

These are the tools that you can use to make pixel-perfect versions:

• Pixel Perfect Pro - This helps me to display a screenshot on top of the webpage to easily check if dimensions were accurate. This is super useful is you need to create pixel perfect work.
• PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.

Other tools:

• Figma - This helps me create a rapid mockup to get dimensions of components.

Cheers

@FranciscoPrado04 Hi!

Congratulations on completing this challenge.

Here I have some suggestions to improve:

First, in HTML at line 25, you have a closing tag </h2> which doesn't have a starting tag. So you can remove that or you can use h2 instead of h3 in .tittle-text. It should also remove the accessibility issue.

Second don't use the <br> tag repeatedly instead just make the width of .tittle-text as width: 100%; this will adjust the text like in the design. And in the future too it's better to not break lines using the <br> repeatedly tag rather use padding to adjust the way you want.

hope this helps

happy coding😃!

You can use perfect pixels. It's a google chrome extension. first, learn how it works on youtube!!!

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think your card is missing a subtle box shadow using box-shadow.

In terms of accessibility issues simply wrap all your content between main tags

I hope that helps

Cheers Happy coding 👍