Skip to content
Submitted almost 2 years ago

stat preview card component(Not finished need some advice)

Cookiemonsterhxc•200
@Cookiemonsterhxc
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

How to fit the image how to put overlay background color on image i cant figure out how to remove the bottom space between 10k+ and companies and weird the outcome suddenly change when I upload it to netlify the image suddenly become smaller

Community feedback

  • Szilvia Horvath•190
    @hszilviPosted almost 2 years ago

    For overlay you can add an overlay div to your image

    <div class="right__section"> <img src="/images/image-header-desktop.jpg" alt="image-header-desktop"> <div class="overlay"></div> </div>

    css .right__section { position: relative; overflow: hidden; background-size: cover; } .overlay { position: absolute; top: 0; width: 100%; height: 100%; bachground: #550885; opacity: 0.6; }

    Marked as helpful
    0
    Cookiemonsterhxc•200
    @CookiemonsterhxcPosted almost 2 years ago

    @hszilvi Thank you

    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