Skip to content
Submitted over 3 years ago

Flexbox stats preview card component

Cody•170
@Cod-Bigg
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

*Edited Made changes to have the color on the background image, and made changes so the 314 and 12M+ text were aligned over the other text correctly

Code

Please log in to post a comment

Log in

Community feedback

  • Edgar Meza•140
    @Edgar-Meza

    1- you could create a parent element and with the attribute 'background-image: url (path)' place the image in the background, then you create an empty child element and assign a height and width of 100%, and with the Attribute 'background-color' you set the purple color either with rgba or a solid color and you use the 'opacity' property or with 'filter: opacity (1)' to make it transparent.

    2- You can assign the parent element (in your case the text and text2 classes) a width of 100% and the child elements (p tags) distribute it with 30% because they are 3.

    Sorry if there are spelling mistakes as I don't know much English, use a translator.

  • MordenWebDev•500
    @MordenWebDev
    1. you can fix the color of the image by making image as background for the second column. and use css blend mode to get that effect.

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