Anmol Kapil• 655
@anmolkapil
Posted
It looks good. Just fix your button width and text alignment as suggested by Ahmed Faisal
Marked as helpful
3
Design comparison
Solution retrospective
This simple work, to my surprise, took me several hours to complete and honestly speaking, most of it was achieved through trial-and-error method.
I'm just starting out and I'm a bit proud but I NEED HELP and suggestions so next time, i can build a simple task in record time and with lesser code.
Community feedback
Hafizan Adli• 1,190
@hafizanadli
Posted
Hi there, Congratulation for completing your first challenge!
Here are a few things, I'd like to suggest,
- if you're using vs code editor, you could do the code formatting with option+shift+F (if you're mac user) or alt+shift+F (for windows). It would be more easier to read the code
- the annual plan part seems a bit different from design. according to your code, I suggest that you wrap the icon and text(annual plan and price) with one div. So there will be 2 div inside "price-container" instead of 3.
- to make the component in the middle of screen. translate -50% to top and to left. or instead of using absolute position, you can use flexbox
- for button you can set width to 100% and when hover the payment button, you can set the opacity instead of set color to purple
Hope these could be helpful
Keep up the great work!
Marked as helpful
0
Ahmed Faisal• 5,095
@afrussel
Posted
- overall output is good. There is text alignment issue. Use text align left on annual plan text
Marked as helpful
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