pinge single

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

• To properly center the card on the page.

• USING FLEXBOX

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

• USING GRID

body{
min-height: 100vh;
display: grid;
place-items: center;
}

• For image like .svg are decorative which screen readers will not render it to be important and skip it, so it makes no sense to add alt and leave it blank.

<img src="images/logo.svg" alt="" id="logo-icon">

• Try to add accessibility features like aria, sr-only, title.

aria : link

.sr-only:link

I hope you find this helpful.

Happy coding😄

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

LABELS 🔖:

• input elements wants a label associated with it

• A aria-label is used to create a caption for a form control. The aria-label can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute

• Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users

• Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields.

• Example:

<input type="email" aria-label="Your email" placeholder="Your email address..." id="email-input" style="border-color: rgb(255, 82, 99);">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!