Submitted almost 2 years ago

Stats preview card component

Ralph•190

@delacruzralph

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

For this project, I had a bit of trouble with media queries and sometimes the styles didn't work. This was especially problematic for when I was trying to use flexbox to change the layout between mobile and desktop views. Any advice on setting media queries and different styles up are welcome (things like if there are certain style properties that are better to change over other ones). Thanks!

Community feedback

👾 Ekaterine Mitagvaria 👾•7,600

@catherineisonlinePosted almost 2 years ago

For the image, I did something like this, I hope that helps:

            <div class="image-container">
                <img class="main-image" src="images/image-header-mobile.jpg" alt="">
            </div>

.image-container {
  display: inherit;
  position: relative;
  width: 100%;
  border-radius: 0 10px 10px 0;
  background-color: hsl(277, 64%, 61%);
}
.main-image {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  border-radius: 0 10px 10px 0;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

Please log in to post a comment

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