Fully Functional and Accurate - Mobile and Desktop Design.

Community feedback

• 

  Narciso Lobo•20

  @narcisoloboPosted 11 months ago

  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.

  Marked as helpful

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  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!

  Marked as helpful

  0
• 

  Mudassar Majeed•160

  @mudasarmajeed5Posted 11 months ago

  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.

  Marked as helpful

  0

  ---

  

  vcgmuse•70

  @vcgmusePosted 11 months ago

  @mudasarmajeed5 Thank you, I will take a look at that today. Which browser are you using so that I may try it out on my end? Thank you for making my code better.

  1

  

  Mudassar Majeed•160

  @mudasarmajeed5Posted 10 months ago

  I am using microsoft edge@vcgmuse

  0