Skip to content
Submitted almost 3 years ago

Stats Preview Card Component

imen dhaoui•130
@imendh02
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

Please provide feedback

Community feedback

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

    Hi Imen,

    Nice work on this one, well done!

    Try background-blend-mode: multiply; on .card-image and remove the opacity in the colour background: linear-gradient( 0deg,hsla(277, 64%, 61%) 0%,hsla(277, 64%, 61%) 100%),url(./images/image-header-desktop.jpg); to match the purple in the design to the challenge!

    Hope that helps!

    Marked as helpful
    1
    imen dhaoui•130
    @imendh02Posted almost 3 years ago

    @darryncodes thank u

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

    Hello @imendh02 , I have some suggestions, to tackle the accessibility issues:

    • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).

    • Make the card a<main>and use divs for the two halves inside it.

    • In this challenge , it is much easier if you put the image in the html instead of using background image. If you do that, you would use mix-blend-mode instead of background blend mode .You don't need an extra div you can have the one div with a background image.

    • Use an unordered list with 3 items for the stats .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).

    <ul>
 <li><strong class="numbers">10k+</strong> companies</li>
 <li><strong class="numbers">314</strong > templates</li>
 <li><strong  class="numbers">12m+</strong >queries</li>
  </ul>

    • Make the<body>a flex container and min-height: 100vh; to center the component. (no need for position).

    • You don't need the code below

       position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);

    • You can apply border radius, overflow hidden to the component (<main>). So you don't have to set it to individual corners.

    • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

    Hopefully this feedback 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