Skip to content
Submitted about 2 years ago

Stats preview card component

Kira Weizman Shapira•90
@kirawesh
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

Hello everyone!

My learning process:

I had trouble with creating a fitted image in flexbox layout and at the same time this would also be responsive. I solved it using the following code:

.image-content {
	width: 100%;
}

.image-content img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 10px 10px 0;
}

Coloring the picture was also not easy, and it seems that I still haven't hit the specific color according to the reference design. There was some ways to color the image, so I choose the following code, because it removes the need to use background images which make trouble in mobile view, and adding more div as overlay element:

.image-content {
	width: 100%;
	position: relative;
}

.image-content::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--accent);
	mix-blend-mode: overlay;
	border-radius: 0 10px 10px 0;
}

Community feedback

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

    Hey @kirawesh, some suggestions to improve you code:

    • The statistics have the incorrect font-family applied. You want to look at the “style-guide” to download the correct one.

    • The stat numbers are not headings. They should be wrapped in a Paragraph Element.

    • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

    • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

    • Apply the following code to have each side take up the equal amount.

    Code:

    .container > * {
        flex-basis: 50%
    }

    Happy Coding! 👻🎃

    Marked as helpful
    0
    Kira Weizman Shapira•90
    @kiraweshPosted about 2 years ago

    Hi @vcarames, good to hear from you! Thank you for your helpful suggestions.

    1. Fixed it.
    2. You're right - fixed.
    3. I will implement it in next version with mobile first approach.
    4. Interesting to know that, I thought that each image should have its alt description written down for accessibility.
    5. Applied it. This was a new thing I learned today :)
    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