Any feedback welcome, thanks!
Its good, very well made. the colors are great, your inputs look good too. i really like your form-element class it looks very unique. The page is pretty responsive but when your screen width is less than 992 it looks a little weird, i would suggest changing the form-body width to 95% instead of 100%
Not bad, I like it. Here are some ideas.
-
I would set the body font size to something like 18px.
-
I would disable the default outline on focus.
.form-input > input, textarea {
outline: none;
}
You can make your own focus styles, here are some examples.
.form-input > input:focus {
background: #dbdba2;
transition: background .5s ease;
}
.form-input > input:focus::placeholder {
color: brown;
transition: color .5s ease;
}
- I think i would drop the border on button hover, maybe use a box-shadow.
button:hover {
background-color: brown;
color: beige;
/* border: 3px solid beige; */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49);
}
You can also add an active style to make the button move down a bit when you click it.
button:active {
transform: translateY(2px);
}
- I would make a second media query so the form doesn’t go as wide so fast. Also, remove the padding when it is 100%.
@media screen and (max-width: 992px) {
.form-body {
width: 70%;
}
}
@media screen and (max-width: 680px) {
.form-body {
width: 100%; /* or 95% if you like that */
padding: 0;
}
}