Fully Functional and Accurate - Mobile and Desktop Design.

Excellent job, my friend! Would love to see the card centered vertically as well as horizontally -- the solution provided by Daniel above will work well.

Would also love to see a hover state on the button, as Mudassar suggests.

To make the solution more accessible, please use a label instead of a paragraph for the form elements. The label should have a for attribute that matches the id attribute of the input it's paired with.

Also, your alt attribute is empty for the button. I suggest filling that in with "Calculate Age" or something to that effect. That will also help with accessibility.

Hello @vcgmuse!

Your project looks great!

I see that you already got help here, but there's something that is yet to cover:

I noticed that you used margin to place the card in the middle of the page. That's not the best way and depending on the screen size, your card won't be centered. So here's a very efficient way to center the card:

• You can apply this to the body (in order to work properly, you can't use position or margins):

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, you did an excellent job!

Yes, your solution is perfect, the logic building is perfect, but I would suggest giving specific width and height of the card for PC and laptop users because on my browser it's taking full width and the card looks a bit un-natural. You can Improve it further i.e. setting width and height to 600px and 400px, further you can add cursor:pointer; when we hover over the SVG, and you can set the opacity of the SVG to 70%, when we hover it should be set to 100% using CSS with a smooth transition to give it a feel of a button.