@correlucas
Posted
👾Hello @AliMahmoud21, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
1.Add <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.
2.Add the correct font for the main heading of this component. First of all you need to choose the font using Google Fonts https://fonts.google.com/ and import the code to drop on your CSS/HTML:
This is the font for the H1: font-family: 'Fraunces', serif;. There's two ways to import the font:
- Using the html and inserting it to the
<head>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap" rel="stylesheet">
</head>
- Using the CSS and adding to the first line of the CSS sheet:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap');
3.Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.
Check the link for the official documentation for <picture> in W3 SCHOOLS:
https://www.w3schools.com/tags/tag_picture.asp
See the example below:
<picture>
<source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
<img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
✌️ I hope this helps you and happy coding!
Marked as helpful
@AliMahmoud21
Posted
@correlucas Thanks a lot This Is Really Helpful....
