Submitted almost 4 years agoA solution to the Order summary component challenge
Purely HTML and CSS
@AdaezeIkemefuna
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.
Code
Couldn’t fetch repository
Please log in to post a comment
Log in with GitHubCommunity feedback
- @anmolkapil
It looks good. Just fix your button width and text alignment as suggested by Ahmed Faisal
Marked as helpful - @hafizanadli
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 - @afrussel
- overall output is good. There is text alignment issue. Use text align left on annual plan text
Marked as helpful
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