Skip to content
Submitted about 3 years ago

Stats Preview Component

Malik Suleman Aslam•115
@maliksulemanaslam
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi programmers I have completed this challenge but as a newbie I am unable to add some features

  1. Purple overlay on image
  2. In original challenge image is on right but as I put it on right when it goes to mobile width the image goes downward instead of keeping its place upward so I put image on left now it makes its place upward but this is not as same as actual challenge I have used cards here
    3.In starter files two images are given one for desktop and one for mobile width but I am unable to make it responsive like when it goes to mobile width it should pick that image which is for mobile please let me know how to do it using css without JS you can check my code if there is something difficult to understand in code please tell me also if there is any other thing I am doing wrong let me know looking forward to learn from you thanks

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted about 3 years ago

    Greetings

    • you alt values must be descriptive to allow assistive technology users to visualize the message that is being put across. For decorative images use an empty alt value. <img src="images/image-header-desktop.jpg" class="card-img-top" alt="..."> . This alt value does not benefit anyone.
    • your first heading has to be an h1 , heading elements must ascend in order without skipping . That is h1, h2, h3 etc. use css for font sizes
    • write using small letters <p class="card-text stats-heading">COMPANIES</p>. Words written in uppercase will be read letter by letter with screen readers.

    Good lucky

    Marked as helpful
    1
    Malik Suleman Aslam•115
    @maliksulemanaslamPosted about 3 years ago

    @ChamuMutezva Thanks man for helping me out to learn something new appreciated also that heading it was preadded h5 in starter code given to me in this challenge so that's why i used that as h1 is larger in size as compare to h5 we don't want that much bigger heading but yeah we can use font size as well thanks good luck you too 😀 👍

    1
  • Jullierme Rodrigues Gomes•95
    @jullierme-rPosted about 3 years ago

    Hey, Malik. I'm a newbie just like you, but I can offer what worked for me.

    1. You should see about mix-blend-mode here
    2. Since you're using flexbox, you can use the order property in the flex items. By default the items have the same order (which is 0), using a -1 value on the card, or a value higher than 0 for the img should resolve this.
    3. You can take a look at the HTML tag <picture>
    Marked as helpful
    1
    Malik Suleman Aslam•115
    @maliksulemanaslamPosted about 3 years ago

    @jullierme-r Thank you so much man! I am glad that you helped me and your all solutions worked for me now you can check my site again Updated Site pretty much similar to the original design thanks again! have nice day

    1

Please log in to post a comment

Log in with GitHub

Join 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