Como fazer uma LANDING PAGE responsiva e animada | HTML, CSS e JavaScript (JQUERY)
Вставка
- Опубліковано 1 лип 2024
- 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: fontawesome.com/
Gerar wave: www.softr.io/tools/svg-wave-g...
Biblioteca de Animações: scrollrevealjs.org/api/reveal...
Repositório GitHub:
github.com/Larissakich/landin...
Redes sociais:
LinkedIn: / 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 - Наука та технологія
Vendo esse vídeo n precisa nem fazer curso de html e css kkk, muito bom.
Todo mundo da minha sala falava de uma tal de Lari que é uma diva e está salvando todo mundo!!
Tenho que reconhecer os elogios, você me ajudou demais!
ótima didática, não passa rápido e o processo de escrever o código com você foi muito produtivo, Parabéns Larissa, continue com esse tipo de conteúdo por aqui
Mais um projeto finalizado! Ficou muito toop, parabéns pelo conteúdo. 👏🏻
Nunca pensei que criar animações fosse assim tão radial. Muito obrigado.
Conheci seu canal agora e achei incrível! Continue postando vídeos
Muito legal. Sua fluência é linda. Parabéns.
Finalizei aqui o projeto seguindo os passos da Lari, cara ficou muito top. valeu Lari pelo conteúdo
Perfeito! Faça mais.
Muito bom, parabéns!
Caramba Larissa... muito massa. Obrigado por compartilhar...
Esse video ta MUITO bom, muito mesmo!! Obrigada
Parabéns pelo excelente trabalho! A cada vídeo que assisto me sinto mais motivado a desenvolver sites. Obrigado!😊
Eu quem agradeço, bons estudos! ☺
Ótimo conteúdo. Parabéns.
O projeto foi todo bem explicado, dá pra usar de base pra fazer muitas landing page diferentes, Muito obrigado, Lari!
Muitoo obrigada! Quero trazer aqui pro canal mais landing pages nesse estilo 😁
como que um video incrivel desse so teve 11 mil visualizações?
Amei essas animações! Muito bom, parabéns 👏👏
Muito obrigada, fico feliz que tenha gostado, 😊
Muito bom, não se tem muitos vídeos ensinando a criar landing pages animadas, ainda mais com uma didática tão boa! 👏🏻👏🏻
Muitoo obrigada 😊
Perfeito!! Muito bom como sempre
Muitooo obrigada ☺️
Caraca, ta muito lindo!!!
ótimo conteúdo 👏👏👏
ainda nao estou nesse nivel, parabens.
É tão bom ver alguém que ama o que faz e que tem talento pra explicar
Muito obrigada 😊
Te sigo já faz alguns dias e amei esse projeto,usei a base dele para fazer uma landing page para a doceria de uma amiga,muita boa sua forma de apresentar o conteúdo parabéns e muito obrigado
Muito obrigada! Fico muito feliz em poder ajudar ☺
Ficou top demais!!
Muito obrigada 😊
Conteúdo top 😊
brigadão guria, ajudou muitoo, didatica unica +1 inscrito
Eu quem agradeço haha ☺
parabens, conhece de mais.
Mana, Muitissimo agradecida por esta iniciativa sen-sa-ci-o-nal. Desde 2023 estou na tentativa de fazer uma landing page similiar como está, tenho falhado mi-se-ra-vel-men-te.
Eu quem agradeço! Espero conseguir te ajudar, muito sucesso pra você ☺️
@@larissakich Por mais profissionais iguais a você Larissa 👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽
Amém, a menina e um prodígio
Obrigado pelo seu trabalho! estou aprendendo muito.. s2
Eu quem agradeço, fico muito feliz em poder te ajudar 😊
Não manjo muito de front por ser desenvolvedor .Net no back-end, mas estou estudando o Blazor pra mostrar algo para os usuários, esse projeto vai ser bom pra eu converter pra razor. Vlw!
Ficou massa, assistindo aqui 👏🏻💪🏻
Muito obrigada!! 😊
adorei parabéns @larissakich
Estou refazendo esse projeto aos poucos, esse é o segundo de sua lista;
O primeiro foi o do menu sidebar com o Avatar.
Como sou iniciante, tem me ajudado bastante, com certeza, e obrigado.
Conversando com o professor UA-cam rsrsrs,
encontrei uma função show, e sinceramente, todos os meus projetos
serão baseados nela.
Nos permite a responsividade, sem tanta necessidade do @media
Eu só testei, texto e imagem. Eles vão redimensionando, conforme o tamanho do navegador.
Até certo ponto né!, conforme projeto.
propriedade: min(0px, 0vw);
a unidade (vw) precisa permanecer,
já a (px), pode trocar por "rem", "em". Não testei outras. "rem" tá de bom tamanho.
exemplos:
font-size: min(4rem, 4.8vw);
line-height: min(4.1rem, 4.5vw);
width: min(700px, 46vw)
height: min(400px, 4.8vw);
tem o max(0px, 0vw)
mas parece que não funciona bem. kkk
Show demais!
Muiito obrigada 😁
As animações de entrada ficaram muito boa, vou tentar reproduzir no meu projetinho kkkkk Obrigado! vídeo incrível!
Muiito obrigada 😊
Muito bom!
Muito obrigado ! ❤
Tô tão acostumado com React e Next que é até nostálgico fazer um projeto com JS vanilla ❤ Obrigado!
Muito obrigada! Quero trazer aqui pro canal alguns projetos em React também 😁
Parabéns pelo projeto... e ensinamento, ficou muito top e acompanhando da pra aprender muita coisa boa.
Parabéns pela aula! A cada vídeo que assisto me sinto mais motivado a me torna programador. Obrigado! o vídeo de vinheta, esta no seu e-mail
Muito obrigada! ☺
Este projecto está ótimo. Para a escolha da imagem gostaria de saber qual tem que ser o tamanho
Muito boa aula, always grateful, 💜.
Muito obrigada ☺️
@@larissakich Ok Larissa.
ficou legal
Um dia chegarei nesse seu nivel de trabalhar com front end. Parabéns
Muito obrigada 😊
Oii Lari, tudo bom?
Não vi a dica aqui sobre o menu mobile, então... Deixa um unico menu e o mobile menu btn, e ai vai trabalhar com as media query, onde, se for pelo mobile first, as Li vao estar com o display flex, flex direction column, e o btn vai estar aparecendo, e o navbar vai estar oculto fixo e tal do jeito que fez, e a partir de uma tela de 980px por exemplo, vai denifir outros estados para o navbar, menu e li, onde a navbar ja vai estar visible, o btn menu vai estar disabled, hidden e invisible, e as li, vao estar com o flex direction row.
Recomendo muito ir pelo principio do mobile first e usar a nomeclatura BEM, vai dar um upgrade top nos teus projetos.
Parabens pelos videos, ta ajudando muita gente 🥰
Oii, muito muito obrigada pela sujestão, vai me ajudar muito
Video ensinando a criar landing pages animadas, e ainda de GRAÇA???? Estou no paraíso e não percebi? E ainda ensinando direto...
Que didática incrível, aprendo muito contigo. Você poderia ensinar a fazer a mesma landing page em react né ?
Oii, muito obrigada! Posso fazer sim, assim que der trago aqui pro canal 😁
Oi Larissa, muito bom o vídeo! Sobre o navBar eu particularmente uso uma forma diferente. Eu coloco a estrutura inteira do navBar dentro dele no HTML e uso @midia para transformar "menu" que é a lista em Position Absolute e refaço o style dele, sem a necessidade de criar outro HTML para o mobile pois quando chega a um determinado tamanho de tela Ele sai do fluxo do HTML e fica posicionado fora da tela, coloco o botão de menu como Display flex tornando ele visível, assim some a lista e aparece o botão de menu. Com isso só preciso mudar o style da lista com @midia para ele ficar como eu quero para a versão mobile e JS para ele sair da posição Right - 300px (varia de acordo com o tamanho do elemento de Menu) para a posição Right 0px (aqui ele passa a ficar visível) quando o botão menu e pressionado. Sou iniciante, mas uso este método para fazer o menu hamburguer espero estar certo kkkkk
Oii, muito obrigada pela dica, vou tentar fazer assim das próximas vezes
Ai voce poderia colocar o #home usando flex-direction colum reverse para quando for para o responsivo em 1170 a imagem ficasse no início ou seja no top focaria lega. Eu fiz assim
Larissa, onde vc consegue essas imagens com resoluções boas pra treinar front end
Monta um sistema de carrinho de compras interligado nesse projeto aí😁❤️
Eu aprendi a fazer sites com o professor Gustavo Guanabara do curso em vídeo. O único problema é q até hj eu crio sites por um Cll 😢 ent as possibilidades de sites profissionais são baixas
É, meus irmão, estamos sofrendo aqui. Perdi meu PC faz uns dias e estou na mesma luta que você. 😢
Ta lindo
Larissa, me tiraa uma duvida, você coda direto ou vc aantes faz o designer no Figma ou em outro programa ?
Baixa o plugin no visual ( live server ) instale
La perto do relogio do computador vai aparecer o ( Go live ) clique nele .
Pronto tudo que vc fizer ela te mostra em tempo real
Qual seria a nota de desempenho desse site no page speed do google?
Só perguntando ela é responsiva em telas com resolução maiores como qwd 4k 8k?
top
Sensacional seu conteúdo! esta cada vez mais difícil encontrar algo sem estar relacionado React
Muito obrigada! ☺
Estou aqui so sonhando com esses projeto que tenho na minha cabeça. Como faço para chegar nesse nivel?
pq meu mobile menu não some quando coloco none no css
Oi Lari, eu vi aqui, porque você não criou no css para colocar a imagem no responsivo com o #cta
essa LANDING PAGE tem um painel de gerenciamento ?
Pra mim não está dando certo o meu botão menu, mesmo colocando Jquery e o codigo script ele continua estático, não abre ou fecha
top estou inciando ao 50 anos programção estou amando, há procurei a estação movel, mas não achei qual é nome dela.
Mobile simulator - responsive testing tool
Lari, pode me dizer que ferramenta foi essa de simular tela em celular
?
Mobile simulator - responsive testing tool
Quando vc vai lançar um cruso?
49:18 quando eu coloquei o display flex, os elementos não se alinharam em uma linha mas sim ficou um em cima do outro e não sei como arrumar, como faço isso???
tem que ver se quando vc linkou foi certo, eu fiquei ontem o dia todo dai descobri que linkei errado
normalmente utilizo o javascript para trocar entre as páginas...
Larissa, simplesmente não consigo exportar as fontes :(
é alguma extenção que tu usa no chrome para visualizar os modelos moveis ?
Oii, sim é simulador de celular o nome, se não me engano
gnt, alguem me ajuda!! Na hora que ela coloca no style.css para sumir e deixar apenas pro mobile, o meu não esta sumindo!! Tem algo que eu possa fazer?
O meu também. Não está sumindo o mobile_menu.
Qual ou como bota a "visualização movel da pagina" que você mostrou no inicio do video 00:11, valeu pelo ensinamento.
42:20
valeu mano
Na parte do Js não funcionou no meu
No meu tbm não, vou fazer a função de outra forma pra ver se dá certo.
Como você escolhe a paleta de cores para algum projeto?
Eu normalmente vou testando as cores da minha cabeça mesmo, mas gosto de me inspirar nas cores do tailwind
E projeto de PokeDex, tem alguma previsão de fazer?
Oii, ainda não tenho previsão, mas posso trazer sim ☺
Você usou algum site pra usar como inspiração? Tem algum que a gente possa pegar como inspiração?
Oii, gosto de pesquisar no Figma Community exemplos de projetos relacionados com o tema que estou procurando, lá tem vários projetos gratuitos que você pode usar para se inspirar
Obrigado @@larissakich
Como coloca imagem em vez do logo?
dentro da tag "a" vc pode colocar uma nas aspas vc passa o caminho da sua imagem
E depois como faço para hospedar?
usa o vercel
Olá! Como posso entrar em contato com você?
Oii, você pode mandar um e-mail para larissakich04@gmail.com
@@larissakich Ok! Mandei lá...
estou tendo problemas na parte mobile... não sei pq o negocio não quer funcionar.
Em fim, vida de programador
comigo tbm não #mobile_menu {
display: none;
}
ele não some
@@natansantos4280 Nossa estou com o mesmo problema!! Vocês conseguiram resolver???
O meu também. Mesmo problema. Alguém sabe informar pq?
@@jamersongomesdasilva6373 cara volta no HTML e olha se as DIV estão fechadas corretamente, qualquer coisa vai no codigo que ela deixou na descrição e vê se esta parecido
o header, por ser um elemento de bloco, seria necssario mesmo assim colocar o width: 100% ? sempre foi me dito que elementos de bloco tem todo o width da tela, entao pra mim não faz tanto sentido assim botar o width 100% kkk
Oii, é costume meu colocar isso em tudo ksksk mas acho que não precisa não
#alura está perdendo essa professora
coloquem na min-heigth 1070 o seguinte bloco de codigo no css para colocar a imagem como background e transparente:
#home::before{
content: "";
position: absolute;
inset: 0;
background: url(/src/images/hero.png) center no-repeat;
background-size: contain;
background-position: center;
z-index: -1;
opacity: 0.4;
}
very goood !!
Boa noite Larissa, Tudo bem?
Poderia me informar a extensão que usa no chrome de layouts de aparelhos?
Desde já agradeço obrigado.
ótimo vídeo.
Qual é o nome dessa ferramenta de visualização móvel? Que tem vários dispositivos.
Vai em extensão Google e pesquisa mobile simulator
meu amigo, ela falou no vídeo o nome da extensão.