UI/UX Design - Como fazer uma LANDING PAGE responsiva e animada | HTML, CSS e JavaScript (JQUERY)

Olá, pessoal! Neste vídeo, vou te mostrar como criar uma landing page responsiva e com animações usando HTML, CSS e JavaScript, com foco em JQuery. Vamos explorar o uso da biblioteca Scroll Reveal para adicionar animações de rolagem à nossa página, tornando-a mais dinâmica e atrativa para os usuários. Além disso, vou ensinar como implementar um menu com troca de abas que se ajusta conforme você rola pela página, facilitando a navegação entre as seções. E, é claro, vou demonstrar como utilizar o Flexbox para garantir que nossa landing page seja totalmente responsiva em diferentes dispositivos, desde desktops até smartphones. Links usados no vídeo: Ícones: https://fontawesome.com/ Gerar wave: https://www.softr.io/tools/svg-wave-generator Biblioteca de Animações: https://scrollrevealjs.org/api/reveal.html Repositório GitHub: https://github.com/Larissakich/landing-page-food-theme PRODUTOS que uso no meu SETUP: TECLADO: https://amzn.to/4kPr170 MOUSE: https://amzn.to/4iPMwTs MICROFONE: https://amzn.to/4hAzc4h NOTEBOOK: https://amzn.to/4ivj0Td MOUSEPAD RGB: https://amzn.to/4hvaCBT MONITOR: https://amzn.to/4iNbXoz SUPORTE PARA NOTEBOOK E MONITOR: https://amzn.to/4iPNyyO LED RGB: https://amzn.to/4kNP8TB LUZ COLORIDA PARA VÍDEOS: https://amzn.to/4huaDG4 SOFTBOX: https://amzn.to/41TmqIk Redes sociais: LinkedIn: https://www.linkedin.com/in/larissakich/ Instagram: @dev_em_dev Capítulos: 00:00:00 - Introdução 00:01:00 - Criação do projeto 00:03:00 - Header - HTML 00:08:08 - Configurando estilos padrões 00:10:35 - Header - CSS 00:16:00 - Header - Responsividade 00:22:36 - Home - HTML 00:28:25 - Home - CSS 00:39:25 - Home - Responsividade 00:42:55 - Menu - HTML 00:47:25 - Menu - CSS 00:53:50 - Menu - Responsividade 00:57:27 - Fixando o Header 00:58:32 - Testimonials - HTML 01:02:40 - Testimonials - CSS 01:06:50 - Testimonials - Responsividade 01:11:00 - Footer - HTML 01:14:05 - Footer - CSS 01:16:52 - Footer - Responsividade 01:17:40 - Criando variáveis 01:25:00 - Animações no header 01:33:38 - Animações - ScrollReveal 01:37:54 - Conclusão