I will be glad by your suggestion .
Nice Work! Your project looks good to me. Just remove the animation effect on form. and clean your css code.There are some rules that are not applied.
Hi @nabila, your form looks okay on desktop. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in HTML. (No need to include the body tags). For anything you want to add to the
<head>element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
- Run your HTML code through the W3C validator.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- There are HTML coding errors you should address.
- Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
- The one for HTML misses things which is why I recommend W3C
- The one for CSS is good. Use it, there’s something to clean up.
- Don’t use
<br>to force line breaks or add spacing. That’s what CSS is for.
- Make your form responsive. On smaller screens everything falls out of the container.
I need your idea about my project please!
You have done a pretty good job!!
I am not a full on designer but I have noted few things on your project that can be improved design wise:
- Main background can be set to cover so that background image doesn’t repeat to cover the width
- Max width of the form container can be set to make it look more contained
- Little bit of left padding would be nice
- Border radius of of input is different for normal and focus mode.
Hello , Nabila. nice job, additionally I can recommend you to add hover effect to submit button. Good luck!