
Design comparison
Solution retrospective
when I finished my Media Querie
What challenges did you encounter, and how did you overcome them?the right positioning of all elements
What specific areas of your project would you like help with?Just have a look at my code and if you have any suggestions I'm here.
Community feedback
- @TomekWojakPosted 1 day ago
Hello, Really nice job! I have one, I think, usefull suggestion for you. Use object fit: cover; directly for your img. Thanks to it, it will stretch proportionally which will make it look better.
1 - @KuvashneeNaidooPosted 1 day ago
Hi @PxMach
You did very well creating the product preview card! It includes most of the key elements of the design 👏👏👏
There is one aspect that I noticed: Based on the design provided, the
<h1>Gabrielle Essence Eau De Parfum</h1>
and<p class="reduction">$149.99</p>
should have the font-family "Fraunces"(https://fonts.google.com/specimen/Fraunces) but this is not reflecting on the page.You can import the "Fraunces" font into your stylesheet:
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&display=swap");
You can then apply the "Fraunces" font-family to the <h1> and <p class="reduction"> elements such as:
h1, .reduction { font-family: 'Fraunces', serif; }
This is just something to try to make the different fonts stand out a bit more and to align more closely with the original design.
Otherwise, excellent effort!🚀🚀🚀
Happy coding :)
1
Please log in to post a comment
Log in with GitHubJoin 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