Survey Form feedback comments

Project Feedback
#1

Hello everyone! So I finished the survey form project from the Responsive Web Design section.
Hope you all like and can leave some comments or feedback.
Happy coding!

link and screenshot below :point_down:

Survey Form

49
491926×1266 535 KB

#2

I like the design.

Maybe add a light box shadow to move the form forward? The bottom muddies up the trees just a little.

1 Like
#3

Looks great!
Did you try slightly changing the opacity of the form-box background? That way the trees would be more noticeable in mobile mode.

2 Likes
#4

maybe leave a codepen link so we can learn from you. Good stuff.

#6

hi thanks for the input :grinning: , yeah i thought about it by the end but since I had been grinding all day I was tired and wanted to upload it, everything is contained within that black rectangle so if i applied an opacity to it everything turned transparent, any ideas on how to solve that issue?

#7

hi ! thank you very much ! that is a great idea, makes the form box pop a little bit more :raised_hands:

#8

hi! i didn’t use codepen but here is the github repo https://github.com/nachoorihuela/fcc_survey_form and i will try to answer any question you may have :slightly_smiling_face:

1 Like
#9

Very nice, looks great.

  1. I would add resize: vertical; to the textarea so the user can only make the input taller and not wider, so it doesn’t overflow the form.

  2. I would move the background image to the body, set it to 100vh and then remove the height: 100%; from #survey. That should make the background image fill the full height.

body {
  font-family: "Raleway", sans-serif;
  line-height: 1.5;
  color: #aaa;
  height: 100vh;
  background: url(../img/showcase.jpg) no-repeat center center/cover;
}

#survey {
  /* background: url(../img/showcase.jpg) no-repeat center center/cover; */
  /* height: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
}
  1. I might change the first option elements content to some other than a single dash, it looks a bit off to me.

Again, great job.

#11

I didn’t know about the resize property , it’s great to know ! and i will certainly try moving the image to the body.
Thanks a lot for your kind words and your comments I appreciate it :grinning:

#12

I was thinking, for the box, something like background: rgba(0, 0, 0, 0.7);

1 Like
#13

Looks awesome! :sunglasses: I have a suggestion: maybe make that black box in the middle a bit transparent by setting the background of it to rgba(29, 29, 29, 0.88)

1 Like
#14

I like it so much more now, thanks for the input !

14
141112×1426 233 KB
14
142880×1426 825 KB

1 Like
#15

I left the opacity at .9 , but yeah it looks so much better now
!

14
141112×1426 233 KB

#16