I finally finished project number 2. It took longer than expected however I’m glad I spent more time on it since the learning outcomes were probably 10x as well.
Shout out to @Sujith3021@AdityaVT@michaelnicol@lasjorg for sharing their valuable feedback on my Tribute page (Project 1). It helped me improve this project as well.
I look forward to any and every piece of feedback that I can possibly recieve. Heres the link:
Its been quite a short amount of time and just one more “simple” project but it feels right to say:
“I learned something new each day and that’s a win!” - @itxchy
Thank you guys!
Hope you all have an amazing day, week, month and year(s)!
Or you can give it a max-width of some fixed size. Or max-width 100% and let the parent container width be the limit of how wide it can get (i.e. how much it can be pulled by the user).
Your button hover transition is a bit slow for my taste, i would probably also use transform: scale(1.2) instead of width and height.
Have the changes mentioned by everyone above, it will make it look good.
Apart from those, i would like you to reduce the transition seconds, since it is making the transition to width and height, it looks soo shaky, i would suggest you to reduce all the seconds for ex: 0.15s, it will be smooth without any shakes. And also apply the same transition to the #submit:hover also, it makes it smooth.
Although another thing i wanted to do was have the labels and inputs show one below the other to make it a better flow like the one in the FCC survey sample :
You can stack the labels and inputs by giving the .row class flex-direction: column; you would need a media query for it. May also want to set align-items: start; in that query.