README.md
November 26, 2020 · View on GitHub
30diasDeCSS :calendar:
Sobre :memo:
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
Regras Gerais :warning:
- 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.
Referencias dos desafios - Canais do YouTube :arrow_forward:
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
Desafio dia 01 - Ícone de mídia social em camadas
- Confira no CodePen: Projeto 1: Camadas 3D
Desafio dia 02 - Tela de loading animado
- Confira no CodePen: Projeto 2: Tela de loading animada
Desafio dia 03 - Checkbox de modo noturno
- Confira no CodePen: Projeto 3: Checkbox de modo noturno
Desafio dia 04 - Animação com efeito typewriter (maquina de escrever)
- Confira no CodePen: Projeto 4: Animação com efeito maquina de escrever
Desafio dia 05 - Animação usando caixa de pesquisar
- Confira no CodePen: Projeto 5: Animação usando caixa de pesquisar
Desafio dia 06 - Ferramenta de avaliação de 5 estrelas
- Confira no CodePen: Projeto 6: Ferramenta de avaliação de 5 estrelas
Desafio dia 07 - Card com barra de progresso circular
- Confira no CodePen: Projeto 7: Card de barra de progresso circular
Desafio dia 08 - Animação utilizando texto
- Confira no CodePen: Projeto 8: Animação utilizando texto
Desafio dia 09 - Animação indicando rolagem para baixo
- Confira no CodePen: Projeto 9: Animação de indicador scrolldown
Desafio dia 10 - Animação indicando setas de anterior/proximo
- Confira no CodePen: Projeto 10: Setas indiando anterior/proximo
Desafio dia 11 - Animação de loading circular
- Confira no CodePen: Projeto 11: animação de loading circular
Desafio dia 12 - Hambúrguer Menu com sobreposição na tela
- Confira no CodePen: Projeto 12: Hamburguer menu
Desafio dia 13 - Animação usando hover em botões de paginação
- Confira no CodePen: Projeto 13: Botões de paginação
Desafio dia 14 - Animação de card girando
- Confira no CodePen: Projeto 14: Card girando
Desafio dia 15 - Animação em card de informações para contato
- Confira no CodePen: Projeto 15: Cards de informações para contato
Desafio dia 16 - Efeito de apresentação de imagens com botões de navegação
- Confira no CodePen: [Projeto 16: Apresentação de imagens com botões de navegação]
Desafio 17 - Efeito de botões brilhando e alternando a cor
- Confira no CodePen: [Projeto 17: Botões brilhando e alternando a cor]
Desafio 18 - Animação usando barra de progresso
- Confira no CodePen: [Projeto 18: Barra de progresso animada]
Desafio 19 - Animação de uma barra de navegação
- Confira no CodePen: [Projeto 19: Animação em barra de navegação]
Desafio 20 - Formulário de tela de login
- Confira no CodePen: [Projeto 20: Form de tela de login]
Desafio 21 - Animação usando card de Produto
- Confira no CodePen: [Projeto 21: Animação em card de produto]
Desafio 22 - Animação usando sublinhado em links
- Confira no CodePen: [Projeto 22: Animação com sublinhado em links]
Desafio 23 - Botão de voltar ao topo e scrollbar customizada
- Confira no CodePen: [Projeto 23: Botão de voltar ao topo e scrollbar customizada]
Desafio 24 - Animação em cards de planos/serviços
- Confira no CodePen: [Projeto 24: Efeito bolha em cards de planos]
Desafio 25 - Mudando o cursor usando hover
- Confira no CodePen: [Projeto 25: Mudando o cursor usando hover]
Desafio 26 - Animação de tela de carregamento usando efeito líquido
- Confira no CodePen: [Projeto 26: Tela de carregamento com efeito liquido]
Desafio 27 - Página de erro personalizada
- Confira no CodePen: [Projeto 27: Página 404 personalizada]
Desafio 28 - Animação na tela de fundo da página
- Confira no CodePen: [Projeto 28: Animação no background da página]
Desafio 29 - Checkbox brilhando e mudando a cor quando selecionados
- Confira no CodePen: [Projeto 29: Checkbox brilhando e mudando de cor]
Desafio 30 - Animação "That's all Folks" usando camadas com divs e texto
- Confira no CodePen: Projeto 30: Isso é tudo, pessoal
Como contribuir :thinking:
- 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.
Licença :scroll:
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
< Desenvolvido por @leandrorangel94 /> :wave: