30diasDeCSS

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: