P
@DanielDantas0921
Posted
Congratulations on your code. I did this challenge and used 8 media. You only used 3. Then I'll stop to study your code to improve my skill.
0
Design comparison
Solution retrospective
What challenges did you encounter, and how did you overcome them?
This was my first time using Figma, so understanding the program and how to asses dimensions was challenging. Also, the curves in the design were tricky. I didn't see any SVG files for the curves, so I made my own using Illustrator and attached them using the::after pseudoelement. Feedback is always appreciated. Thanks!
Community feedback
P
Steve Xero• 210
@stevexero
Posted
Very nice! Did you use Chrome during your development? I read on here in the past that FireFox, for whatever reason, actually gets the site closer to the design and reflects in the above design/solution slider.
For the curves at the bottom of the sections, I used the clip-path CSS property. 'clip-path: ellipse(120% 100% at 50% 0%);'
I had to adjust only the horizontal radius <rx> (the first number) during the responsive development. It basically adjusts the width and will smooth out the curve depending on what you need.
It's definitely something (along with SVG design) that I'll be diving deeper into!
Cheers!
0
@stevexero, thanks! I did use Chrome Developer. I tend to use that the most, but I will check out Firefox. Thanks for the tip. I'm still finding it tricky to get the exact dimensions. I never considered the clip-path property, but that's another great way of doing it. I'm going to consider that in the future. Your design came out well—pretty much a pixel perfect match. Good job.
1
P
Steve Xero• 210
@stevexero
Posted
@nn-code80 Yeah I have no idea why Chrome and Firefox would be different during development, it's something I'm going to look into!
I typically use Figma to get my dimensions by drawing rectangles all over the place lol. It helps me see which are related so I can then group them under common variables.
It's been interesting to see how different developers approach the curve and I've learned that there are so many ways to tackle any one thing!
Thanks so much for the reply and kind words!
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