Skip to content
Submitted about 2 years ago

Stats preview card component

John Geddis•190
@JGedd
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 feel free to share your opinion on my latest solution

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey @JGedd, adding to what was said above/below:

    • To make your content Semantically Correct and give it Structure, your HTML code has be set up in the following manner.
    
    <body>
        <main>
            <article class="card">
               <div class="card-text"></div>
               <picture class="card-images">
               </picture>
            </article>
        </main>
    </body>

    Since this card can stand on its own and its reusable, the Article Element is the best choice to wrap your card in.

    • For headings, you always start with <h1> Heading. If this in a larger site with more cards, then the <h2> or <h3> Heading might be the better option.

    • For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images NOT images that add value and serve a purpose.

    Picture Element will allow your to switch between images in different breakpoints and makes your site load faster by saving bandwidth.

    Syntax:

      <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

    Source:

    https://www.w3schools.com/html/html_images_picture.asp

    https://web.dev/learn/design/picture-element/

    Happy Coding!

    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @JGedd, congratulations on your solution!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

    img {
mix-blend-mode: multiply;
opacity: 80%;
}

    ✌️ I hope this helps you and happy coding!

    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