Skip to content
OverviewSolutions
7
Comments
7
Martina
@PastoreMartina

All comments

  • Julieta•60
    @julietaxccSubmitted over 1 year ago

    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.

    Stats preview card component

    2
    Martina•150
    @PastoreMartinaPosted over 1 year ago

    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
  • Martina•150
    @PastoreMartinaPosted over 1 year ago

    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
  • Martina•150
    @PastoreMartinaPosted over 1 year ago

    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
  • Martina•150
    @PastoreMartinaPosted over 1 year ago

    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
    @NadaSabrySubmitted over 1 year ago

    how to make project suitable to all screen

    card Test

    1
    Martina•150
    @PastoreMartinaPosted over 1 year ago

    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
  • Martina•150
    @PastoreMartinaPosted over 1 year ago

    Congratulations on completing the challenge! 🎉

    To display the image properly, use this url in the src attribute: ./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
  • Martina•150
    @PastoreMartinaPosted almost 2 years ago

    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