30 dias de CSS, é um desafio que visa ajudá-lo a melhorar suas habilidades como desenvolvedor fazendo pequenos projetos diários utilizando HTML5 e CSS3. Iniciei meu desafio no dia 1 de Agosto de 2020. Para saber mais sobre este desafio, acesse: 30 dias de CSS
- Realizar um projeto por dia.
- Compartilhe seu progresso nas redes sociais (Linkedin, Instagram, Twitter, etc.) usando a hashtag #30diasDeCSS.
- O projeto deve ser concluído até 23:59.
Online Tutorials - Creative Creations - DarkCode - Codegrid
- Dia 01 | Ícones de mídias sociais em camadas
- Dia 02 | Tela de loading animado
- Dia 03 | Checkbox de modo noturno
- Dia 04 | Animação com efeito maquina de escrever
- Dia 05 | Animação usando caixa de pesquisa
- Dia 06 | Ferramenta de avaliação de 5 estrelas
- Dia 07 | Card com barra de progresso circular
- Dia 08 | Animação usando texto
- Dia 09 | Animação indicando rolagem para baixo
- Dia 10 | Animação indicando setas de anterior/proximo
- Dia 11 | Animação de loading circular
- Dia 12 | Hambúrguer Menu com sobreposição na tela
- Dia 13 | Animação em botões de paginação
- Dia 14 | Animação de card girando
- Dia 15 | Animação em card de informações para contato
- Dia 16 | Efeito de apresentação de imagens com botões de navegação
- Dia 17 | Efeito de botões brilhando e alternando a cor
- Dia 18 | Animação usando barra de progresso
- Dia 19 | Animação de uma barra de navegação
- Dia 20 | Formulário de tela de login
- Dia 21 | Animação usando card de produto
- Dia 22 | Animação usando sublinhado em links
- Dia 23 | Botão de voltar ao topo e scrollbar customizada
- Dia 24 | Animação em cards de planos/serviços
- Dia 25 | Mudando o cursor usando hover
- Dia 26 | Animação de tela de carregamento usando efeito líquido
- Dia 27 | Página de erro personalizada
- Dia 28 | Animação na tela de fundo da página
- Dia 29 | Checkbox brilhando e mudando a cor quando selecionados
- Dia 30 | Animação "That's all Folks" usando camadas com divs e texto
- Confira no CodePen: Projeto 1: Camadas 3D
- Confira no CodePen: Projeto 2: Tela de loading animada
- Confira no CodePen: Projeto 3: Checkbox de modo noturno
- Confira no CodePen: Projeto 4: Animação com efeito maquina de escrever
- Confira no CodePen: Projeto 5: Animação usando caixa de pesquisar
- Confira no CodePen: Projeto 6: Ferramenta de avaliação de 5 estrelas
- Confira no CodePen: Projeto 7: Card de barra de progresso circular
- Confira no CodePen: Projeto 8: Animação utilizando texto
- Confira no CodePen: Projeto 9: Animação de indicador scrolldown
- Confira no CodePen: Projeto 10: Setas indiando anterior/proximo
- Confira no CodePen: Projeto 11: animação de loading circular
- Confira no CodePen: Projeto 12: Hamburguer menu
- Confira no CodePen: Projeto 13: Botões de paginação
- Confira no CodePen: Projeto 14: Card girando
- Confira no CodePen: Projeto 15: Cards de informações para contato
- Confira no CodePen: [Projeto 16: Apresentação de imagens com botões de navegação]
- Confira no CodePen: [Projeto 17: Botões brilhando e alternando a cor]
- Confira no CodePen: [Projeto 18: Barra de progresso animada]
- Confira no CodePen: [Projeto 19: Animação em barra de navegação]
- Confira no CodePen: [Projeto 20: Form de tela de login]
- Confira no CodePen: [Projeto 21: Animação em card de produto]
- Confira no CodePen: [Projeto 22: Animação com sublinhado em links]
- Confira no CodePen: [Projeto 23: Botão de voltar ao topo e scrollbar customizada]
- Confira no CodePen: [Projeto 24: Efeito bolha em cards de planos]
- Confira no CodePen: [Projeto 25: Mudando o cursor usando hover]
- Confira no CodePen: [Projeto 26: Tela de carregamento com efeito liquido]
- Confira no CodePen: [Projeto 27: Página 404 personalizada]
- Confira no CodePen: [Projeto 28: Animação no background da página]
- Confira no CodePen: [Projeto 29: Checkbox brilhando e mudando de cor]
- Confira no CodePen: Projeto 30: Isso é tudo, pessoal
- Faça um fork desse repositório;
- Cria uma branch com a sua feature:
git checkout -b minha-feature; - Faça commit das suas alterações:
git commit -m 'feat: Minha nova feature'; - Faça push para a sua branch:
git push origin minha-feature.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
< Desenvolvido por @leandrorangel94 /> 👋