Animated Survey Form. Please Have a Look

Hello Campers,

I just finished my second challenge with some cool animation effects. Give your valuable feedbacks.

Please Have a Look :computer:

Thanks :slight_smile:


I noticed that if you put an age over 99, the animated “Age” word drops onto the inputed age value and the font color turns “white”. I don’t know how to fix it, I just noticed the issue.

But I loved how specific you were with the last two music genres, made me lol

I can see in the thumbnail for your project that the background image is black, but when I loaded it, the background image wouldnt load. So I couldnt see anything on the page since the background defaulted to white. Might be a good idea to have a backup if the image does not load to provide a plain black/darker background. I did also notice the issue that luccarizzi mentioned above.

But after I just added a black background, your form looks nice! I love the little animations with the text, and the glowing buttons! Good work.


1 Like

Hello @mahadi-devo! Great page with nice effects. When I am viewing your page on an iPhone and it doesn’t display well though. I noticed that you have @media but the page still doesn’t fit the screen.

I also noticed that you have 3 different sections in your css with @media for Max-width 768px. What is the reason for that?

Also you don’t have to write your css classes out in a ‘tree’ style list. I notice that you seem to list the parent class then the second, third fourth etc. If it’s a class then you can just list that class alone. That may be something that helps you though.

There is some contradictory things in the css because you are using the same @media several times. An example would be in your .container .header .title you are calling the font-size 50px and in the next `.container .header .title’ you are making it 40px. It will only accept one.

A couple things about CodePen also:

  1. The html box you type into the the <body> so you don’t need to have anything for the <head> section there. The head stuff goes in that section which is located under settings>html. You will see a block that says “stuff for head”.

  2. Since it is the <body> section you also don’t need <body> tags.

  3. I would recommend using the css and html analyze and format tools available in CodePen. They are locate at the top of each box via a drop down arrow. You will see you have some errors which can be fixed.

  4. The javascript stuff can go in the JS section if you wanted to keep things separate. the ` tags wouldn’t be required if you did do that.

Great job using some transitions and making the page your own. It looks really good and the input sections are a nice touch.

@jfirestorm4 Thank you so much for your valuable advice. I’m looking forward to do some changes in the page that you mentioned ::slightly_smiling_face:

@midnaVaria Thank you so much for your feedback and the tip :slightly_smiling_face:

1 Like

Thanks @luccarizzi for your valuable feedback🙂

1 Like

It looks good but you didn’t choose the most readable font! I would keep that font for the title but pick something else that’s easier on the eyes for the rest of the survey .

It’s really good but maybe you should add an option for 0-1 years in the question “How long have you been playing the guitar”