Перейти к содержимому

Criando o site do Papai Noel com HTML, CSS e JavaScript

Leo Vargas

0:00 / 0:00

Criando o site do Papai Noel com HTML, CSS e JavaScript

1 273 просмотра · 2 г. назад
Leo Vargas
5,32 тыс. подписчиков
1 273 просмотра · 2 г. назад
Neste tutorial, vamos criar o site oficial do Papai Noel utilizando HTML, CSS e JavaScript! 🎅✨ Descubra passo a passo como desenvolvemos uma encantadora landing page que destaca a venda da misteriosa box do Papai Noel. 🎁💻 Durante o processo de construção, exploramos duas poderosas bibliotecas: AOS para animações de carregamento de página e a Particles.JS para adicionar um toque mágico com partículas dinâmicas ao criar o efeito de confetti. 🚀🌟 Se você é um entusiasta do desenvolvimento web ou apenas quer adicionar um toque festivo ao seu portfólio, este tutorial é para você! Acompanhe cada linha de código e veja como transformamos conceitos simples em uma experiência online envolvente. Não se esqueça de deixar seus comentários, dúvidas e sugestões abaixo. Inscreva-se para mais conteúdo incrível de desenvolvimento web e fique ligado para futuros tutoriais. 🔗 𝗟𝗜𝗡𝗞 𝗗𝗢 𝗡𝗢𝗧𝗜𝗢𝗡 https://leovargas.notion.site/Projeto... 🎥 𝗢𝗨𝗧𝗥𝗢𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 • Criando um portfólio do zero    • CRIANDO UM SITE DE PORTFÓLIO DO ZERO   • Projetos de frontend para o portfólio    • Criação de sites para portfólio - Frontend   • Configurando o ambiente de programação (linux, terminal, vscode)    • Configurando ambiente de programação - Lin...   ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗   / discord   ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦 ⮞ Twitch:   / leovargasdev   ⮞ Instagram:   / leuvargas   ⮞ Twitter:   / leovargasdev   ⮞ Github: https://www.github.com/leovargasdev ⮞ Linkedin:   / leonardo-luis-de-vargas   ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 💻 𝗦𝗘𝗧𝗨𝗣 Notebook Dell (https://amzn.to/48080ra) Tela 1: Monitor AOC(https://amzn.to/3NAJq8L) Suporte Ergonômico ELG (https://amzn.to/3t0i1G5) Hub USB C p/ usar na 2ª tela (https://amzn.to/3uI2jjs) Webcam Logitech BRIO (https://amzn.to/3RDm4BP) Microfone Blue Yeticaster (https://amzn.to/3sW32wW) Teclado Redragon Varuna (https://amzn.to/3T8Dkji) Mouse Logitech G300s (https://amzn.to/3Rtnfn4) Mouse Pad (https://amzn.to/3Rtnfn4) Estante (https://amzn.to/46KgVfr) ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 📑 𝗦𝗨𝗠𝗔𝗥𝗜𝗢 𝗗𝗢 𝗩𝗜́𝗗𝗘𝗢 00:00 Introdução 00:43 Estruturando o html do header 02:35 Estilizando o body 03:46 Adicionando CSS no arquivo header.css 08:50 Estruturando o html da main 10:30 Estilizando a main e a imagem do Papai Noel 12:43 Adicionando CSS no arquivo section.css 15:32 Adicionando CSS no arquivo buy.css 20:00 Criando o evento de contagem no carrinho 23:22 Adicionando efeitos sonoros no evento do contador 25:30 Criando animação do confetti com a biblioteca Particles.js 29:28 Criando animações de carregamento com a biblioteca AOS 33:20 Responsividade do site 43:00 Encerramento #desenvolvimentoweb #html #css #javascript #SiteNatalino #tutorialWeb