30diasDeCSS

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #llm #go #golang #docker #windows #kubernetes #pytorch #ios #openai

(★ 69)

Desafio 30 dias de CSS, realizado com intuito de praticar com projetos pequenos.

30diasDeCSS Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center"> 30diasDeCSS :calendar: </h1>

## 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](https://github.com/MilenaCarecho/30diasDeCSS)

## 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](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog) - 
[Creative Creations](https://www.youtube.com/channel/UCOKmVksbzoKJKmtu7rlEM1A) - 
[DarkCode](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw) -
[Codegrid](https://www.youtube.com/channel/UC7pVho4O31FyfQsZdXWejEw)

---

* [Dia 01 | Ícones de mídias sociais em camadas](#id01)
* [Dia 02 | Tela de loading animado](#id02)
* [Dia 03 | Checkbox de modo noturno](#id03)
* [Dia 04 | Animação com efeito maquina de escrever](#id04)
* [Dia 05 | Animação usando caixa de pesquisa](#id05)
* [Dia 06 | Ferramenta de avaliação de 5 estrelas](#id06)
* [Dia 07 | Card com barra de progresso circular](#id07)
* [Dia 08 | Animação usando texto](#id08)
* [Dia 09 | Animação indicando rolagem para baixo](#id09)
* [Dia 10 | Animação indicando setas de anterior/proximo](#id10)
* [Dia 11 | Animação de loading circular](#id11)
* [Dia 12 | Hambúrguer Menu com sobreposição na tela](#id12)
* [Dia 13 | Animação em botões de paginação](#id13)
* [Dia 14 | Animação de card girando](#id14)
* [Dia 15 | Animação em card de informações para contato](#id15)
* [Dia 16 | Efeito de apresentação de imagens com botões de navegação](#id16)
* [Dia 17 | Efeito de botões brilhando e alternando a cor](#id17)
* [Dia 18 | Animação usando barra de progresso](#id18)
* [Dia 19 | Animação de uma barra de navegação](#id19)
* [Dia 20 | Formulário de tela de login](#id20)
* [Dia 21 | Animação usando card de produto](#id21)
* [Dia 22 | Animação usando sublinhado em links](#id22)
* [Dia 23 | Botão de voltar ao topo e scrollbar customizada](#id23)
* [Dia 24 | Animação em cards de planos/serviços](#id24)
* [Dia 25 | Mudando o cursor usando hover](#id25)
* [Dia 26 | Animação de tela de carregamento usando efeito líquido](#id26)
* [Dia 27 | Página de erro personalizada](#id27)
* [Dia 28 | Animação na tela de fundo da página](#id28)
* [Dia 29 | Checkbox brilhando e mudando a cor quando selecionados](#id29)
* [Dia 30 | Animação "That's all Folks" usando camadas com divs e texto](#id30)

---

##  Desafio dia 01 - Ícone de mídia social em camadas <a name="id01"></a>

![Desafio 01 _ Efeito camadas em 3D utilizando hover outra resolução](https://user-images.githubusercontent.com/39461509/89110778-77150980-d424-11ea-925f-11a97c40ab74.gif)

* Confira no CodePen: [Projeto 1: Camadas 3D](https://codepen.io/leandrorangel94/pen/PoNbYPq)

##  Desafio dia 02 - Tela de loading animado <a name="id02"></a>

![Desafio 02 _ Animação com tela de loading gradiente com brilho](https://user-images.githubusercontent.com/39461509/89125106-732fc880-d4b2-11ea-9a13-5c57cf389438.gif)

* Confira no CodePen: [Projeto 2: Tela de loading animada](https://codepen.io/leandrorangel94/pen/bGprOKr)

##  Desafio dia 03 - Checkbox de modo noturno <a name="id03"></a>

![Dia 03 _ Checkbox - Modo Noturno](https://user-images.githubusercontent.com/39461509/89191444-501c1c00-d579-11ea-8a7d-5886d57044b5.gif)

* Confira no CodePen: [Projeto 3: Checkbox de modo noturno](https://codepen.io/leandrorangel94/pen/ZEWJVMq)

##  Desafio dia 04 - Animação com efeito typewriter (maquina de escrever) <a name="id04"></a>

![Dia 4 _ Animação com efeito Typewriter](https://user-images.githubusercontent.com/39461509/89307309-511b7f00-d647-11ea-9f61-f19d044c64f1.gif)

* Confira no CodePen: [Projeto 4: Animação com efeito maquina de escrever](https://codepen.io/leandrorangel94/pen/GRZMYmE)

##  Desafio dia 05 - Animação usando caixa de pesquisar <a name="id05"></a>

![Desafio dia 05 _ Animação com caixa de pesquisa](https://user-images.githubusercontent.com/39461509/89467377-d425fd80-d74b-11ea-9ba8-ba585a99da29.gif)

* Confira no CodePen: [Projeto 5: Animação usando caixa de pesquisar](https://codepen.io/leandrorangel94/pen/xxVXyrb)

##  Desafio dia 06 - Ferramenta de avaliação de 5 estrelas <a name="id06"></a>

![Desafio dia 06 _ Ferramenta de avaliação de 5 estrelas](https://user-images.githubusercontent.com/39461509/89540460-6fae8100-d7d3-11ea-810f-ee9dc419a38a.gif)

* Confira no CodePen: [Projeto 6: Ferramenta de avaliação de 5 estrelas](https://codepen.io/leandrorangel94/pen/wvGrYey)

##  Desafio dia 07 - Card com barra de progresso circular <a name="id07"></a>

![Desafio dia 07 _ Barra de progresso circular](https://user-images.githubusercontent.com/39461509/89659113-cb493f00-d8a5-11ea-90c2-f9281b7713bf.gif)

* Confira no CodePen: [Projeto 7: Card de barra de progresso circular](https://codepen.io/leandrorangel94/pen/jOqaRrq)

##  Desafio dia 08 - Animação utilizando texto <a name="id08"></a>

![Dia 8 _ Animação usando textos simples](https://user-images.githubusercontent.com/39461509/89712637-863a1100-d968-11ea-80ed-404b99d2a91f.gif)

* Confira no CodePen: [Projeto 8: Animação utilizando texto](https://codepen.io/leandrorangel94/pen/rNeYbLw)

##  Desafio dia 09 - Animação indicando rolagem para baixo <a name="id09"></a>

![Dia 9 _ Animação de indicador Scroll Down](https://user-images.githubusercontent.com/39461509/89744681-bb885100-da85-11ea-942b-1c85ccba2cca.gif)

* Confira no CodePen: [Projeto 9: Animação de indicador scrolldown](https://codepen.io/leandrorangel94/pen/dyMZLXq)

##  Desafio dia 10 - Animação indicando setas de anterior/proximo<a name="id10"></a>

![Dia 10 _ Animação em setas indicando anterior_proxima](https://user-images.githubusercontent.com/39461509/89843692-d9ba8380-db4f-11ea-9908-cd771900dc43.gif)

* Confira no CodePen: [Projeto 10: Setas indiando anterior/proximo](https://codepen.io/leandrorangel94/pen/gOrXyMJ)

##  Desafio dia 11 - Animação de loading circular<a name="id11"></a>

![Dia 11 _ Animação de loading circular](https://user-images.githubusercontent.com/39461509/89961941-ab08df80-dc19-11ea-9ed3-7ab2ce61a7ef.gif)

* Confira no CodePen: [Projeto 11: animação de loading circular](https://codepen.io/leandrorangel94/pen/eYZVNOe)

##  Desafio dia 12 - Hambúrguer Menu com sobreposição na tela <a name="id12"></a>

![Dia 12 _ Hamburguer Menu com sobreposição na tela](https://user-images.githubusercontent.com/39461509/90075818-aead6c80-dcd4-11ea-9567-f35f069b5178.gif)

* Confira no CodePen: [Projeto 12: Hamburguer menu](https://codepen.io/leandrorangel94/pen/LYNQVPX)

##  Desafio dia 13 - Animação usando hover em botões de paginação <a name="id13"></a>

![Dia 13 _ Animação em botões de paginação](https://user-images.githubusercontent.com/39461509/90193008-753f3480-dd9a-11ea-8b2e-2facf85aeae9.gif)

* Confira no CodePen: [Projeto 13: Botões de paginação](https://codepen.io/leandrorangel94/pen/gOrvpOO)

##  Desafio dia 14 - Animação de card girando <a name="id14"></a>

![Dia 14 _ Animação de card girando ao passar o mouse](https://user-images.githubusercontent.com/39461509/90274755-7d997d00-de37-11ea-95d0-800f0824162f.gif)

* Confira no CodePen: [Projeto 14: Card girando](https://codepen.io/leandrorangel94/pen/MWyQwWE)

##  Desafio dia 15 - Animação em card de informações para contato <a name="id15"></a>

![Dia 15 _ Animação em card de informações para contato](https://user-images.githubusercontent.com/39461509/90325011-7b751280-df4c-11ea-80e5-c3eb1b4379f3.gif)

* Confira no CodePen: [Projeto 15: Cards de informações para contato](https://codepen.io/leandrorangel94/pen/vYGdOYq)

##  Desafio dia 16 - Efeito de apresentação de imagens com botões de navegação <a name="id16"></a>

![Dia 16 _ Efeito de apresentação de slides com botões de navegação](https://user-images.githubusercontent.com/39461509/90345379-6eacf900-dff6-11ea-937c-c9bfc8c731d5.gif)

* 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 <a name="id17"></a>

![Dia 17 _ Efeito de botões brilhando](https://user-images.githubusercontent.com/39461509/90460611-9a091400-e0da-11ea-8e75-b7fa0e5acebf.gif)

* Confira no CodePen: [Projeto 17: Botões brilhando e alternando a cor]

## Desafio 18 - Animação usando barra de progresso <a name="id18"></a>

![Dia 18 _ Barra de habilidades](https://user-images.githubusercontent.com/39461509/90516363-429a9080-e13a-11ea-9385-268b2257a3d6.gif)

* Confira no CodePen: [Projeto 18: Barra de progresso animada]

## Desafio 19 - Animação de uma barra de navegação <a name="id19"></a>

![Dia 19 _ Barra de navegação animada](https://user-images.githubusercontent.com/39461509/90713853-a7f69a80-e27c-11ea-9806-66961c23b4d2.gif)

* Confira no CodePen: [Projeto 19: Animação em barra de navegação]

## Desafio 20 - Formulário de tela de login <a name="id20"></a>

![Dia 20 _ Formulário de tela de login](https://user-images.githubusercontent.com/39461509/90770582-5ffd6500-e2c8-11ea-8fca-d5c63452218d.gif)

* Confira no CodePen: [Projeto 20: Form de tela de login]

## Desafio 21 - Animação usando card de Produto <a name="id21"></a>

![Dia 21 _ Animação usando card de produto](https://user-images.githubusercontent.com/39461509/90889644-e8463d80-e38e-11ea-9d0a-6a722705bd5a.gif)

* Confira no CodePen: [Projeto 21: Animação em card de produto]

## Desafio 22 - Animação usando sublinhado em links <a name="id22"></a>

![Dia 22 _ Animação usando sublinhado em links](https://user-images.githubusercontent.com/39461509/90957319-30369480-e463-11ea-85a3-af10f43a7d3e.gif)

* Confira no CodePen: [Projeto 22: Animação com sublinhado em links]

## Desafio 23 - Botão de voltar ao topo e scrollbar customizada <a name="id23"></a>

![Dia 23 _ Botão de voltar ao topo da página](https://user-images.githubusercontent.com/39461509/90986687-137d8800-e55b-11ea-911f-86338eb1bfd3.gif)

* Confira no CodePen: [Projeto 23: Botão de voltar ao topo e scrollbar customizada]

## Desafio 24 - Animação em cards de planos/serviços <a name="id24"></a>

![Dia 24 _ Animação em campos de caixas de serviços](https://user-images.githubusercontent.com/39461509/91111120-0abdac80-e656-11ea-8ba9-cc4020105299.gif)

* Confira no CodePen: [Projeto 24: Efeito bolha em cards de planos]

## Desafio 25 - Mudando o cursor usando hover <a name="id25"></a>

![Dia 25 _ Mudança do ponteiro ao passar o mouse](https://user-images.githubusercontent.com/39461509/91247221-298c7380-e728-11ea-9857-7ae7d9a879fe.gif)

* Confira no CodePen: [Projeto 25: Mudando o cursor usando hover]

## Desafio 26 - Animação de tela de carregamento usando efeito líquido <a name="id26"></a>

![Dia 26 _ Animação de loading liquido](https://user-images.githubusercontent.com/39461509/91369212-9a439680-e7e1-11ea-9077-f0066866ca23.gif)

* Confira no CodePen: [Projeto 26: Tela de carregamento com efeito liquido]

## Desafio 27 - Página de erro personalizada <a name="id27"></a>

![Dia 27 _ Página de erro 404 customizada](https://user-images.githubusercontent.com/39461509/91516002-d4379a00-e8c0-11ea-9726-5f9bcd679715.gif)

* Confira no CodePen: [Projeto 27: Página 404 personalizada]

## Desafio 28 - Animação na tela de fundo da página <a name="id28"></a>

![Dia 28 _ Animação no background da página](https://user-images.githubusercontent.com/39461509/91625623-2b9c3f80-e97f-11ea-82e9-1f6b9e09bdb7.gif)

* Confira no CodePen: [Projeto 28: Animação no background da página]

## Desafio 29 - Checkbox brilhando e mudando a cor quando selecionados <a name="id29"></a>

![Dia 29 _ Checkbox brilhando quando selecionados](https://user-images.githubusercontent.com/39461509/91646410-3c9f8c00-ea25-11ea-980c-1918ed32c519.gif)

* 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 <a name="id30"></a>

![desafio-30-1](https://user-images.githubusercontent.com/39461509/91668485-76cf6300-eae3-11ea-9f73-332c2a1a7c24.gif)

* Confira no CodePen: [Projeto 30: Isso é tudo, pessoal](https://codepen.io/leandrorangel94/pen/XWdzRgQ)

---

## 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](LICENSE) para mais detalhes.

---

##### <p align="center"> <strong> < Desenvolvido por <a href="http://github.com/leandrorangel94/"> @leandrorangel94  </a> /> </strong>  :wave:

30diasDeCSS

30diasDeCSS Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

30diasDeCSS

30diasDeCSS Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README