Conheça o projeto
Neste desafio, você vai desenvolver uma Landing Page de um clube de assinatura literário, chamada Encantos Literários. O objetivo é criar uma página atrativa que apresente os benefícios do clube, mostre um exemplo de livro surpresa que o assinante recebe e destaque os planos de assinatura. Além da estrutura em HTML, a proposta é trabalhar animações em CSS para dar mais vida à página como transições suaves, efeitos de destaque em elementos e interações que deixem a experiência mais envolvente.
Recursos
Materiais para você usar como base para o desenvolvimento
Instruções
Estrutura, regras e requisitos do projeto
1. Estrutura inicial
- Crie o arquivo base
index.htmlcom a estrutura HTML padrão; - Crie o arquivo
style.csspara os estilos da página; - Linke o
style.cssnoindex.htmle configure a estrutura de seções principais.
2. Requisitos
Seção inicial
- Adicione o logo no canto superior esquerdo;
- Adicione o botão de chamada no canto superior direito;
- Crie o título principal e o texto complementar centralizados;
- Adicione a ilustração do livro aberto e elementos decorativos.
Seção kit do mês
- Crie a seção de kit do mês;
- Adicione a imagem do livro em destaque;
- Adicione os textos laterais;
- Crie setas/linhas ligando os textos aos itens correspondentes;
- Aplique animações para exibir cada item lateral em sequência;
Seção de assinaturas
- Crie 3 cards para os planos: Mensal, Semestral e Anual. Cada card deve conter:
- Nome do plano;
- Preço em destaque;
- Valor equivalente por ano;
- Lista de benefícios inclusos;
- Botão de ação para assinar.
Rodapé (footer)
- Adicione a logo no canto esquerdo;
- Inclua ícones clicáveis para redes sociais;
- Adicione links de navegação no cando direito:
- Kits passados;
- Clube de membros;
- Blog;
- Central de ajuda;
- Regulamentos;
- Suporte.
3. Animações
Como este desafio tem foco em animações e existem vários detalhes de movimento, o ideal é que você confira o protótipo animado disponível nos Recursos. Assim, você poderá se guiar visualmente e entender exatamente onde cada animação acontece e como ela deve se comportar na página. 💜
4. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀
5. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
6. Considerações finais
Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!
E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!
Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜
Feito com 💜 por Rocketseat 👋
1. Estrutura inicial
- Crie o arquivo base
index.htmlcom a estrutura HTML padrão; - Crie o arquivo
style.csspara os estilos da página; - Linke o
style.cssnoindex.htmle configure a estrutura de seções principais.
2. Requisitos
Seção inicial
- Adicione o logo no canto superior esquerdo;
- Adicione o botão de chamada no canto superior direito;
- Crie o título principal e o texto complementar centralizados;
- Adicione a ilustração do livro aberto e elementos decorativos.
Seção kit do mês
- Crie a seção de kit do mês;
- Adicione a imagem do livro em destaque;
- Adicione os textos laterais;
- Crie setas/linhas ligando os textos aos itens correspondentes;
- Aplique animações para exibir cada item lateral em sequência;
Seção de assinaturas
- Crie 3 cards para os planos: Mensal, Semestral e Anual. Cada card deve conter:
- Nome do plano;
- Preço em destaque;
- Valor equivalente por ano;
- Lista de benefícios inclusos;
- Botão de ação para assinar.
Rodapé (footer)
- Adicione a logo no canto esquerdo;
- Inclua ícones clicáveis para redes sociais;
- Adicione links de navegação no cando direito:
- Kits passados;
- Clube de membros;
- Blog;
- Central de ajuda;
- Regulamentos;
- Suporte.
3. Animações
Como este desafio tem foco em animações e existem vários detalhes de movimento, o ideal é que você confira o protótipo animado disponível nos Recursos. Assim, você poderá se guiar visualmente e entender exatamente onde cada animação acontece e como ela deve se comportar na página. 💜
4. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀
5. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
6. Considerações finais
Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!
E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!
Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜
Feito com 💜 por Rocketseat 👋
Tarefas
Use este checklist para ajudar a organizar a sua entrega