Landing Page With CSS Animations, Vanilla JS Effects

I live for these animations. Gosh!!!!

Hey APG! This is really good! I really like the dashed outlines. Just a couple of things:

1. Missing email validation and...
2. (Nitpicky alert) The spacing of the hamburger looks a tiny bit off on the browser, there's a tiny jump when .disable-scroll is applied, and on ios, the X looks cut off on the right.

But it doesn't matter because I can't help but admire what you've done for the attribution 😄 I really like it when devs put their own spin, and this one's so you lol - fun and positive. You're one to follow when that feature goes live :-) 2 1/2 months?? I wish I had your energy 😅😅

Hey ApplePieGiraffe

Really nice solution. The animations are a little bit much for me, but maybe that's personal preference.

Looks like you're doing pretty well with your learning and have a nice semantic html Structure.

Minor suggestions from me:

• use type email for your email input
• consider moving the h2 for that contact form inside the form
• that email input needs an aria-label or an actual label in my opinion. Accessibility is as much about cognitive disability as any other and the form title (h2) doesn't make it clear enough that the intended input is an email address.
• I'd look again into BEM naming. In most places you're spot on, but others are nested incorrectly eg class="header__nav__list__item" There should only ever be one block, one element, so decide when to switch contexts. That could be header-nav__list on a ul, followed by header-nav__list-item. Or if you wanted it all to belong to the header as its block context it would be header__nav on the nav element, then header__nav-list then header__nav-list-item

Hope that's helpful ideas anyway. Keep going, you're doing a great job 👍

Hey APG! Happy Friday 😆🍻!

I saw your outlines of the elements for :focus, nice improvement 🙌!

The shaking animation of the two buttons on the hero are so cute 🤩!! The animation just changed the whole feeling when using the website. Love it so much!

Personally I would hide the tab border when :focus, then show the tab border when out of focus. Because from design perspective, both outline and border are served for the same purpose (to indicate focused or not). 🤔 So why would use two effects on one element at the same time. But this is just my personal opinion, hope it doesn't bother you 🤣.

I am also a big fan of the material design, although it has too many rules to follow 🤯 ( for example, by default Material uses capitalized button text, and avoid using two contained buttons next to one another etc.) For me those rules violate "happing coding", so I just won't use it in my code 🤣. But I'm happy to see your creativity on it 👍!

I noticed the new attribution you did and the sound effect to it! That's so cute hahahaha! Everyone should try it!

I was surprised how fast you've improved your skills through out building these amazing solutions, keep doing it 💪! Most importantly, happy coding 🙌!

Hello, ApplePieGiraffe! 👋

Hats off! The animations are subtle and fit perfectly into the design. Kudos for attribution idea! I take a lot of knowledge from your projects, thank you! May I ask how long have you been learning the front end?

• .cta__input placeholder isn't align center.
• What i would suggest is to add toggle tabs for faqs section. I mean, when one tab opens, the previous one closes. This is just a suggestion tho.

Good luck with that, have fun coding! 💪