Julieta• 60
@julietaxcc
Submitted
It's my first time using the filter, I tried to get closer to the color but it cost me. Any comments or suggestions are highly appreciated.
Martina
@PastoreMartina
All comments
- Martina• 150
@PastoreMartina
Posted
Congratulations on completing the challenge!! 🎉
You can use the
<picture>HTML element to use different pictures with different screen sizes. More about it here.For the purple color, you can create a new div as image container and set its background to the violet accent, then set this for the image:
img { mix-blend-mode: multiply; opacity: 0.75; }You can read more about this property here.
I hope you find this helpful!
Above all, good job 💪🏻
0 - Suivez• 370
@Suivez
Submitted
Martina• 150@PastoreMartina
Posted
Congratulations on completing the challenge!! 🎉
You can use the
<picture>HTML element to use different pictures with different screen sizes. More about it here.In typography, you should use relative sizing (em/rem) instead of pixels to help accessibility. You can read more about it here.
I hope my comment was helpful 😁
Above all, good job 💪🏻
Marked as helpful
0 - gyuri91• 90
@gyuri91
Submitted
Martina• 150@PastoreMartina
Posted
Congratulations on completing the challenge!! 🎉
Something I noticed:
When declaring a
font-family, you should always provide a fallback option in case the user's browser doesn't support what you provided. You can list as many options as you want, divided by a comma.Ex:
font-family: 'Outfit', sans-serif;More about it here.
I hope my comment was helpful 😁
Above all, good job 💪🏻
Marked as helpful
0 - Yaseen Omeira• 40
@yaseenomeira
Submitted
I can't make it responsive, any tips?
Martina• 150@PastoreMartina
Posted
Congratulations on completing the challenge! 🎉
To make your page responsive to different screen sizes, you should implement media queries. Here you can find a resource to start learning about them.
Keep an eye on the automatic accessibility and HTML validation report. You should use more sematic HTML in your code; you can read more about it here.
Above all, good job 💪🏻💪🏻
I hope my comment was helpful 😊
0 - Nada Sabry• 120
@NadaSabry
Submitted
how to make project suitable to all screen
Martina• 150@PastoreMartina
Posted
Congratulations on completing the challenge! 🎉
To make your page responsive to different screen sizes, you should implement media queries. Here you can find a resource to start learning about them.
Keep an eye on the automatic accessibility and HTML validation report. You shoul use more sematic HTML in your code; you can read more about it here.
Above all, good job 💪🏻💪🏻
I hope my comment was helpful 😊
Marked as helpful
0 - WEconomicForum• 40
@WEconomicForum
Submitted
Martina• 150@PastoreMartina
Posted
Congratulations on completing the challenge! 🎉
To display the image properly, use this url in the
srcattribute:./images/image-qr-code.png. I just added the.dot in front.Alternatively, this also works:
images/image-qr-code.png.Without the
/and./both mean the same thing: that the file is in the current path. In your project, the directory "images" is at the same level of your index.html.Try to implement more semantic html instead of only using generic
<div>. Resource here.Above all, good job in challenging yourself 💪🏻💪🏻
I hope my comment was helpful 😊
Marked as helpful
0 - atharvaghare100• 10
@atharvaghare100
Submitted
I have done my best for this webpage but I want to know that the code that I have written is right or I need to write the code in some other way?
Martina• 150@PastoreMartina
Posted
It looks good! :)
One difference is that you didn't use the same font as the design.
I think you should link the stylesheet in the head of the HTML file (in your code, I see it in the body, line 11).
You could try reading the resources linked by Frontend Mentor in your solution's report to improve the accessibility.
0
