nothing.
What challenges did you encounter, and how did you overcome them?Getting the size and font-size.
What specific areas of your project would you like help with?The width and height of the elements.
Great job, your card looks identical! HTML looks nice and tidy with semantic tags 👍 You forgot about the hover/levitate effect though :)
Let me know if you update this!
I quickly pulled out the design, but next time I'll examine the figma content in more detail.
What challenges did you encounter, and how did you overcome them?I had a hard time finding the font family value in Figma, but I learned how to find it by doing some research.
What specific areas of your project would you like help with?There is no place I can ask for help.
Hey there Aysen!
Great job! This is very close to the original 👍 I read you were struggling finding the right font-family. Have another look in the project folder. There is a style-guide in there that gives you the font-family.
Another small improvement you could keep in mind for the next challenge is more semantic HTML tags. Instead of the span tags rather use h1 and p and maybe even mainfor the main div. It seems irrelevant for tiny challenges like this but I think it's good practice to do it even for small projects :)
Hope this helped!
Not sure if I got close to the real result, but i should study more tags and elements from css.
What challenges did you encounter, and how did you overcome them?Confused on how to center the elements on to the screen. But i overcame them by googling possible tags and properties in both html and css.
What specific areas of your project would you like help with?Definitely when you're supposed to move the element somewhere specific on the screen. In this case, i feel like it was way too difficult to center the card exactly in the middle of the site.
Hey Allan!
Nice work! I saw you were struggling with the positioning and ended up using absolute positioning. One way I like to use when dealing with these big one page designs with something centered in the middle is setting the section or div elements' height: 100vh.
This gives you a full-screen to place your element in. You could then center it using
display: flex, justify-content: center, align-items: center for example.
Try it out if you want. :)
One other tiny thing I noticed was your alt tag in the img element. I know this is just a challenge but you could make it more descriptive than just saying "qr-code". I like to imagine a screen reader reading the alt tag back to me and then ask myself "Would I understand what is on the picture?".
I hope this was helpful! Happy coding!
