While creating this component, I learned about using max-inline-size, a useful new way to create responsive wrapper elements
.wrapper { max-inline-size: 600px; margin-inline: auto; padding-inline: 1rem; }
Great! You could add in .product-card__description { font-size: 14px; line-height: 23px; }
Thank you for your feedback, the footer was outside screen view, I changed property top: 100%; to 95% to eliminate scroll.
I think i'm proud to do it relatively quickly, (faster doesn't mean better, but i wanted to test myself and how much time takes me to do the design), and the thing i would do different is using less positions and using more flex or grid, whichever makes a good design with less lines in my CSS.
What challenges did you encounter, and how did you overcome them?As i said, the positions of the elements, when i did the card i noticed that there was a lot of white space between the elements, i tried changing widths, heights, etc but neither of that changed how the card was looking, so i used a lot of position(i don't know if it's bad, but i used in every tag) to solve that problem, i think using flex or grid you can make a cleaner code but right know i don't know how to do it.
What specific areas of your project would you like help with?With positions, i would love to change how i did the code in CSS, i want to change it to flex so it looks cleaner when you open the CSS, i used a lot of positions so that's why i want a change or get help on how to do it using a modern tool as flex.
Good Job, You should change in .informative-card{ top: 50%; } and add transform: translate(0%, -50%); for center the card.
[Source]
(https://www.cssportal.com/css-properties/transform.php).
im proud of being able to fisnish this by only using pure css.
What challenges did you encounter, and how did you overcome them?just some little problems with paddings and spacings.
What specific areas of your project would you like help with?i think i just need some more practice.
Practice more on the semantics of html
What challenges did you encounter, and how did you overcome them?Read libraries and practice examples on how to use css properties in a more efficient manner
What specific areas of your project would you like help with?Application of css properties
The card is big. You only modify in .container { max-width: 375px; }
I'm not proud of this at all. Next time, I'll try to make it faster. It took me around an hour to make just this.
What challenges did you encounter, and how did you overcome them?I'm just struggling with Flexbox and spacing items. I'm watching some videos and practicing.
What specific areas of your project would you like help with?flexbox/ spacing items in general.
Great!
Only left to add in the class .containerF, the border property border: 2px solid black ;
