Skip to content
Submitted almost 2 years ago

Stats-preview-card using HTML and CSS

Selvedin•150
@SelvedinFrontEnd
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

I get very frustrated with this one, didn't finished it but I learned a lot, first of all you need to carefully observe the project and what will you do with it, so you don't get into troubles like me.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    For the color of the image, wrap the picture in a div give it class and give the img a width of 100%, height of 100%, object fit: cover; mix-blend-mode: multiply and opacity of 0.8

    in the html
<div class=" image"><picture><img></picture></div>
in the css
.image{
 background-color: hsl();
}

img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

    In the media query give .stats-card a width value, e.g: width:1100px; and give .imat and .content a width of 50%.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    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