Submitted

Solution stats preview Card

@fbonilla02

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

1

Accessibility Issues

0

HTML Issues

View Report

Francisco Bonilla’s questions for the community

I have no idea how to change the color of the image

Community Feedback

@Leandroooh

Posted

you can use a property filter

0

@ChenchoDev

Posted

Try with

background:linear-gradient

0

Byron 750

@byronbyron

Posted

It needs to be a background image instead and it needs background-blend-mode: multiply;, so might look something like this:

<div class="image-container" style="background-image: url('images/image-header-mobile.jpg')"></div>
.image-container {
    background-size: cover;
    background-position: center;
    background-color: hsl(277deg 64% 64%);
    background-blend-mode: multiply;
    width: 100%;
    height: 100%;
}

Then add overflow: hidden; to the .main-container class to make sure it rounds off the corners.

Hope that helps!

0

Give some feedback to @fbonilla02 about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!