Room Homepage with CSS Transitions and JS (GSAP) Animations

Your solution is amazing😍😍.

Can you please tell me How you managed to get this wonderful animations😅.

Hey APG, you've done a really great job on this challenge. Your solution is a good representation of the design, scales up/down very well, and the added extras with the animations and the transitions give it a beautifully polished feel 😍

I've only got two small suggestions on things to tweak:

• You don't actually need the second source inside your picture elements, as the img at the bottom will act as the fallback if the other conditions aren't met or the browser doesn't support the picture element.
• You've done a great job of thinking about accessibility and how people might use the keyboard to navigate the page. One thing you could add is the aria-live="polite" attribute to the .hero__text-wrapper element to make sure the content changes are announced to screen reader users. Here's the MDN page for aria-live for more information.

Keep up the amazing work! 👍

Apologies, as I have nothing constructive to say. Yet another fantastic job that I am bookmarking for reference! 👏

Wow, the animations are just amazing 🤩

Awesome work. Love the intro animation, so cool! Referencing your work was very helpful for me. Thank you.

Hey @ApplePieGiraffe, your solution is absolutely beautiful, WOW. very professional! great job!

Hey APG! Your site is awesome! Can I ask how you made the navbar close when you have it open on mobile/tablet size then expand to desktop size?

So let's say your window was 500px width, you open the navbar menu, then you expand the window passed the navbar menu limit (where the hamburger menu should disappear). How did you get the navbar to close automatically? I don't think I saw an event listener on window resize.

Hey there APG, I didn't realize you submitted a solution. Got to say it's pretty baller. High praise 🙌. Not sure if this is intentional on your part but when shrinking the browser width to 999px. The mobile nav appears prematurely and hides.

Great job 👍

Coming from your comment on my solution 😏 I really love your design on the scales up and down, it just looks amazing 👏! One little detail you can try next time, when using tab navigating on those buttons, you can add

:focus {
    outline: rgb(104, 190, 205) dotted 3px;
}

(This is how frontendmentor.io did on their buttons and input box 🤓)

I think your skills of HTML CSS and JavaScript are solid enough, you could try some frameworks (I highly recommend Svelte since it's not that different from no-framework) to help you manage your code, e.g. for this project, you can split the index.html into header, carousel, about etc components, and makes it a lot much easier to maintain when you keep adding details latter on 😎.

As always, keep coding 💪 and happy coding 🙌!!