Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

stats-preview-card-component

Filip 110

@fica25

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It was a little hard to center a image into a div and take the other side of the main section but I managed this at the end. Any tips to center a img into a div and take a full space , except my example.? And can someone answer how I can adjust length of paragraph , that is, determine where my words stand? Also I know that there is a small error in paragraph, but I made it as close as I could like original.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Filip, congratulations for your solution!

Answering your question:

To make the paragraph have the length you want you can define it with max-width: 340px to hsvr this maximum size or define a limit of characters using max-width: 30ch if you want maximum 30 characters as an example.

To add the exact same purple overlay effect for the image, matching the design files you can use, filter or mix-blend-mode. See the code below

img {
mix-blend-mode: multiply;
opacity: 0.75 ;}

Hope it helps, happy coding!

1
Bryan 130

@MamieNorris

Posted

Hi Filip,

First of all, great job man for this project ! Tried to have a closer look on your design to really match the paddings. Try not to use fixed units (px) for your margins, paddings, heights and widths but try instead using rem or em (you can find a "px to rem convertor" online ;) ).

Once you think you're done read your whole code once more to see if you made mistakes or forgot stuffs. For exemple, in your css for the h1 your forgot to add the unit for the line-height.

Tiny feedback from a fellow beginner ! Keep on going Filip :D

0

@NationsAnarchy

Posted

Hi Filip! Good job on the solution :D

Personally for this challenge, I used the CSS properties called max-width to adjust how all of the texts would spread out/go down.

Let me know if that helps you out, and as always - happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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