Skip to content
Submitted almost 3 years ago

Css grid & CSS Flex

Vasile Cosmin•160
@VasileCosmin
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

Feel free to tell me what i did wrong. Thank you!

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Vasile,

    Awesome work on this one, nice and responsive - well done!

    You could add mix-blend-mode: multiply; to your .layer class and remove the opacity from background-color: hsl(277, 64%, 61%); to closer match the purple in the challenge!

    Hope that helps!

    Marked as helpful
    0
  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    hello @VasileCosmin , I have few suggestions:

    • Document should have one main landmark, so wrap the <body> content in <main> landmark. READ MORE ABOUT LANDAMRKS

    • For any decorative images, each img tag should have emptyalt=""and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images,

    • It's good practice to use a css reset at the start of css every time. That would do things like change images to display block instead of inline block. That will fix the slight gap I see under the image on mobile.

          <div class="accomplish">/* no need foe a <Div>*/
          <ul> 
            <li>
              <h2>10k+</h2>/*Numbers don't make sense as h2s.  */
              <p>companies</p> /* The number and word have to be read together to make sense so need to be in the same meaningful element.  so only a< span >or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class)*/ 
            </li>
            <li>
              <h2>314</h2>
              <p>templates</p>
            </li>
            <li>
              <h2>12M+</h2>
              <p>queries</p>
            </li>
          </ul>
        </div>
      </div>

    • you can use <footer> instead <div class="attribution">.

    • No need for any heights on this at all. That's causing big problems at the moment. All you need is a min-height on the half of the card containing the image. It's rarely ever a good practice to set heights on elements . Let the content dictate how tall something needs to be.

    • It's better not nest css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors

    Hopefully this helps.

    0

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