as much as possible i try to design the real solution for desktop and mobile devise
What challenges did you encounter, and how did you overcome them?to be scale the real design
What specific areas of your project would you like help with?using the precise mesurement for padding ,margins ,font-size , font-weight
I love the fact that you personalized the page a bit by using (I assume) your own name and location! :)
It's nice to see the alt text set correctly (i.e. empty) for decorative images.
Are you developing on a mobile device by any chance? I see that the mobile version of the site is a lot closer to the reference. I think that most (if not all) of the sizes are just a bit too small on the desktop version, making it very hard to read. You can look at the automatic screenshot to get a sense of what it looks like on a desktop device.
A couple of other things I noticed that might be helpful:
a for the buttons instead of div would probably be a better choice.width of .container to 280px which leaves white bands on either side of the screen if the screen is wider than that. You can work around this by either getting rid of the explicit setting of width altogether (from what I can tell that doesn't break anything) or by setting the background-color on body to match the background-color of .container (currently it is set to white by default which is what is visible on the sides).I hope that these tips are helpful.
If you want to get values for the sizes (e.g. font size, paddings, etc.) you can take a look at my stylesheet for this solution. I can't guarantee that all of the values are correct, but they represent my best guesstimate and seem to match pretty well with the reference images.
If you are developing on a mobile device, hats off to you. This is very nice and better than what I could do using a small mobile device! :)
This was fun to create and I am feeling more confident in my css and html skills.
What challenges did you encounter, and how did you overcome them?A bit of research was needed for the border shadows and for placing the content on the page.
What specific areas of your project would you like help with?Some feedback on the way the content is centred on the page.
Great job matching the box shadow and rounded edges!
A couple of things I noticed that make your implementation differ from the reference:
margin-bottom to it. (Or use some other approach to add some spacing there.)color value than the main paragraph in the reference but your implementation uses the same for both, making that section a bit too light.font-size used for the title is significantly larger in your implementation.line-height to space the lines a bit further apart..container are set explicitly to the full dimensions of the card in the reference. The reason for this discrepancy has to do with the way borders and padding are handled. The default behavior adds padding and border size to the defined width and height. You can read more about this in MDN's documentation for the box-sizing CSS property. By playing around with this property you can get the browser to take padding and borders into account when you specify the size.Related to the last point about sizing: you can leave the height unspecified and if you get the font sizes and spacing right the automatically determined height (based on the content height) should match the reference.
Additionally, if you wanted to play around with making the card width responsive, reading about min-width and max-width is probably a good starting point.
Looking at the Figma files provided with these Free+ challenges is a great way to see what the actual font sizes, colors and spacing values are which takes a lot of guess work out of getting your implementation looking pixel-perfect. Unfortunately the style-guide.md doesn't quite give you all of the information.
I hope that the linked resources are helpful and not (too) overwhelming.
Good luck on the rest of your frontend development journey!
I noticed that you have given the .qrText element a height of 131px, which matches the reference Figma file, but because you have box-sizing set to box-sizing: border-box; the specified height also includes padding given to this element. This causes the content of .qrText (h1 and p elements) to overflow the container as the inner height of the container is only 99px.
This could be fixed by either increasing the element height by 32px to account for padding or by getting rid of the explicit height setting and relying on automatic sizing of the flexbox based on its contents.
