🚀 CSS 30 Days 🚀

Desafio CSS 30 - 1 projeto por dia

---

1. Dia 01 - Ícone de Social Media com hover em camadas
2. Dia 02 - Loader Animado em CSS puro
3. Dia 03 - Texto que muda de cor ao cruzar uma Div
4. Dia 04 - Profile Card
5. Dia 05 - Hamburher Menu
6. Dia 06 - Video inside Text
7. Dia 07 - Card Skew Border
8. Dia 08 - Neon Text
9. Dia 09 - List Hover Style
10. Dia 10 - Rainy Background
11. Dia 11 - Cloud Animation
12. Dia 12 - Text Jumping
13. Dia 13 - Circular Progress Bar
14. Dia 14 - Solar Eclipse
15. Dia 15 - 3D Nav Bar
16. Dia 16 - Glowing Icon Hover
17. Dia 17 - Diamond Grid
18. Dia 18 - Creative Div Box
19. Dia 19 - Glowing Dots
20. Dia 20 - Wavy Background

---

Dia 01 - Ícone de Social Media com hover em camadas

• Uso da Tag para criação de camadas
• Hover effect
• Transition e Transform com CSS
• nth-child( )

---

Dia 02 - Loader Animado em CSS puro

• Uso das propriedades Transform, Animate e Translate em CSS puro

---

Dia 03 - Texto que muda de cor ao cruzar uma Div

• Uso da propriedade Animation
• aprofundamento do conceito de overflow no CSS

---

Dia 04 - Profile Card

• [] Uso da propriedade anime e transform
• [] manipulação de @keyframes

---

Dia 05 - Hamburher Menu

• [] uso de transform e transition
• [] overflow hidden

---

Dia 06 - Vídeo dentro de Texto

• [] importação de font do Google Fonts para escrita em alfabeto grego
• [] video input
• [] uso do object-fit em css para o ajuste do vídeo com o texto

---

Dia 07 - Card Skew Border

• [] imersão nas propriedades transform, skew e translateY do CSS
• [] background linear gradient
• [] hue-rotate

---

Dia 08 - Texto em Neon

• [] criação de checkbox's em HTML
• [] estilização dos checkbox's em Css
• [] animation glow linear infinite
• [] manipulação de keyframes

---

Dia 09 - List Hover Style

• [] manipulação de elementos com nth-chil()
• [] transform scale
• [] hover style

---

Dia 10 - Rainy Background

• [] Em Css puro
• [] Uso de animation linear e infinite
• [] manipulação de @keyframes
• [] hue-rotate

---

Dia 11 - Cloud Animation

• [] Manipulação de Animations e Keyframes

---

Dia 12 - Text Jumping

• [] animation bounce eade infinite alternate entre os elementos span do html
• [] text shadow
• [] animation -delay para cada span
• [] manipulação de @keyframes

---

Dia 13 - Circular Progress Bar

• [] transform translateY
• [] manipulação de transitions
• [] propriedade stroke

---

Dia 14 - Solar Eclipse

• [] explorando os conceitos de transform translate, animation e z-index
• [] manipulação de keyframes

---

Dia 15 - 3D Nav Bar

• [] Manipulação das propriedades transform rotateX e rotateY, Skew
• [] webkit e transitions

---

Dia 16 - Glowing Icon Hover

• [] animations, transitions
• [] font awesome icons

---

Dia 17 - Diamond Grid

• [] transform rotate(45deg)
• [] opacity
• [] glow in hover

---

Dia 18 - Animated Div Box

• [] manipulação de keyframes para trabalhar com camadas de span
• [] transform e transition

---

Dia 19 - Glowing Dots

• [] nth-child para manipulação de elementos
• [] animation e keyframes

---

Dia 20 - Wavy Background

• [] manipulação de keyframes e animation-delay
• [] opacity
• [] animation