Hello Iryna,
Just checked your work, it looks kind of cool. I like the colour scheme, good theming.
It has some small issues you may fix.
Age input
comes without label
tag, please fix.
Same two radio buttons come without label
, the first radio has one wrong label associated, please fix.
You may not place a non label content inside label tag, check line 72 as following
<label for="interest">Your interests:</label >
No need to host this text with a label since it’s not a label.
Page layout is broken for mobile device, check:
This is becasue you set
min-width: 320px;
for your body
tag, please remove it.
For mobile I think the padding/margin for the form is a little too much. Give it less padding/margin to utilize more space for page content.
The combobox, I suggest you add one disable/hidden as default element.
Adding some more space between checkbox buttons in mobile view could be great.
I think the border you gave to the checkbox buttons is out of page design.
I also suggest make the submit button more sharp. Give it a sharp background colour(like background colour of the page), and maybe bold text.
I think if you place radio buttons vertically(each in line) rather horizontally(next to each other) could be better.
Also giving some padding for text field, textarea and combobox would be great.
I also see you set the global font-size
as 20px
, please don’t. Don’t use px for font-size.
It’s better using absolute/absolute-relative unit like em/px for border-radius
. When you set border-radius:5%
, it takes 5% of width for top radius, and 5% for height radius, so it looks broken(weird) when screen is wide or tall. what about border-radius:1em
?
You may have a quick read on this survey form challenge walkthrough article for more tips and better explanation of things I mentioned.
Overall good work, like the design.
keep going on great work, happy coding.