{"id":15033068,"url":"https://github.com/milenacarecho/30diasdecss","last_synced_at":"2025-05-15T12:03:46.316Z","repository":{"id":37676998,"uuid":"279362298","full_name":"MilenaCarecho/30diasDeCSS","owner":"MilenaCarecho","description":"Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias","archived":false,"fork":false,"pushed_at":"2021-07-07T23:05:50.000Z","size":17763,"stargazers_count":2932,"open_issues_count":12,"forks_count":306,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-05-15T12:03:31.217Z","etag":null,"topics":["css","css3","css3-animations","css3-flexbox","css3-transitions","html5"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MilenaCarecho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-13T16:57:37.000Z","updated_at":"2025-05-14T11:15:09.000Z","dependencies_parsed_at":"2022-07-12T16:42:56.046Z","dependency_job_id":null,"html_url":"https://github.com/MilenaCarecho/30diasDeCSS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2F30diasDeCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2F30diasDeCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2F30diasDeCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2F30diasDeCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MilenaCarecho","download_url":"https://codeload.github.com/MilenaCarecho/30diasDeCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","css3-animations","css3-flexbox","css3-transitions","html5"],"created_at":"2024-09-24T20:20:00.849Z","updated_at":"2025-05-15T12:03:41.291Z","avatar_url":"https://github.com/MilenaCarecho.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🚀 30diasDeCSS 🚀\n \n Fala Devs, beleza? 🖖\n\n 30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3 \n\n ## Objetivo\n\n30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 20 de Julho de 2020, que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos \n\n***Se você chegou agora e quer começar o desafio, fique a vontade, o desafio não tem data de inicio fixa, cada um faz os seus 30 dias, eu ficarei honrada com sua participação 😉***\n\n## Regras gerais\n\n* Realizar um projeto por dia\n* Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS\n* O projeto deve ser concluído até 23:59\n\n## Regras pra mim \nEu criei algumas regras para mim que não quero impor a ninguém, mas fique à vontade para fazer o mesmo, se quiser!\n\n* Se eu não concluir o projeto do dia, as 5 primeiras pessoas a apontar no Twitter [@MilenaCarecho](https://twitter.com/MilenaCarecho) receberão R$5 via PicPay (total de R$25). Adicionando um pouco de motivação para mim! 😉 (Antes de solicitar qualquer coisa, verifique primeiro a hora no meu fuso horário - para mim, o fuso horário é Brasília - DF (GMT-3)) 💸\n* Vou criar um artigo tutorial no [medium](https://medium.com/@MilenaCarecho) para todos os projetos \n\n\nGostou da ideia? \n[Clique aqui](https://github.com/MilenaCarecho/30diasDeCSS/issues/1) para participar \n\n#### Youtube Referencias dos desafios\n[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog) - \n[Creative Creations](https://www.youtube.com/channel/UCOKmVksbzoKJKmtu7rlEM1A) - \n[DarkCode](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw)\n\n\n\n\n* [Dia 01 - Ícone de mídia social em camadas](#id01)\n* [Dia 02 - Loader animado](#id02)\n* [Dia 03 - Mudança de cor de texto quando entra em outra div](#id03)\n* [Dia 04 - Botão com efeito](#id04)\n* [Dia 05 - Efeito pulsar](#id05)\n* [Dia 06 - Efeito lightning text](#id06)\n* [Dia 07 - Preloader animado](#id07)  \n* [Dia 08 - Coração batendo](#id08)\n* [Dia 09 - Pendulo de Newton](#id09)\n* [Dia 10 - Animação texto alternando](#id10)\n* [Dia 11 - Botão com efeito hover](#id11)\n* [Dia 12 - Efeito de preenchimento ao passar o mouse](#id12)\n* [Dia 13 - Loading com efeito](#id13)\n* [Dia 14 - Fundo de texto animado](#id14)\n* [Dia 15 - Texto flutuante](#id15)\n* [Dia 16 - Botão com efeito](#id16)\n* [Dia 17 - Loader animado](#id17)\n* [Dia 18 - Texto esfumaçado](#id18)\n* [Dia 19 - Efeitos de animação de fundo de partículas](#id19)\n* [Dia 20 - Botão com efeito](#id20)\n* [Dia 21 - Esferas quicando](#id21)\n* [Dia 22 - Icones com efeito](#id22)\n* [Dia 23 - Botão com efeito hover](#id23)\n* [Dia 24 - Preloader animado](#id24)\n* [Dia 25 - Checkbox animado](#id25)\n* [Dia 26 - Loading com efeito](#id26)\n* [Dia 27 - Efeito pulsar](#id27)\n* [Dia 28 - Cor do background mudando](#id28)\n* [Dia 29 - Menu responsivo com Media Queries](#id29)\n* [Dia 30 - Fogos de artificio](#id30)\n\n\n##  Desafio dia 01 - Ícone de mídia social em camadas \u003ca name=\"id01\"\u003e\u003c/a\u003e\n![Dia 01](https://user-images.githubusercontent.com/37448340/88348819-d38d7000-cd24-11ea-99d1-39b04afb77f2.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2001)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn](https://www.linkedin.com/posts/milenacarecho_30diascss-html5-css3-activity-6690824691449413632-7vau) \n\n\n##### O que eu aprendi\n\n\n* *Criar as camadas utilizando a tag `\u003cspan\u003e`*\n* *tranformação 2D ou 3D de um elemento [aqui](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n* *[Transições CSS](https://www.w3schools.com/css/css3_transitions.asp)*\n* *[Opacidade / transparência do CSS](https://www.w3schools.com/css/css_image_transparency.asp)*\n* *[hover](https://www.w3schools.com/cssref/sel_hover.asp)*\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n\n\n\n##  Desafio dia 02 - Loader animado \u003ca name=\"id02\"\u003e\u003c/a\u003e\n![Dia 02](https://user-images.githubusercontent.com/37448340/88348825-d5573380-cd24-11ea-832c-989e091167b8.gif)\n\n\n[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2002)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6691381608261464064/)\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n\n##  Desafio dia 03 - Mudança de cor de texto quando entra em outra div \u003ca name=\"id03\"\u003e\u003c/a\u003e\n\n\u003cimg src=\"Desafios/dia 03/gif/dia03.gif\"\u003e\n\n\n[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2003)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n\n##### Dicas\n\n* *[CSS Overflow](https://www.w3schools.com/css/css_overflow.asp)* \n* *Use [animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n##  Desafio dia 04 - Botão com efeito \u003ca name=\"id04\"\u003e\u003c/a\u003e\n![dia 04](https://user-images.githubusercontent.com/37448340/88242961-38819100-cc65-11ea-82b3-b541ff8cb3d7.gif)\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2004)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6692115971647303681/)\n\n##### O que eu aprendi\n\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n\n\n##  Desafio dia 05 - Efeito pulsar \u003ca name=\"id05\"\u003e\u003c/a\u003e\n![dia 05](https://user-images.githubusercontent.com/37448340/88354131-4d7a2500-cd36-11ea-800e-eec277f17737.gif)\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2005)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n\n##  Desafio dia 06 - Efeito lightning text \u003ca name=\"id06\"\u003e\u003c/a\u003e\n![dia 06](https://user-images.githubusercontent.com/37448340/88449709-5d216880-ce1f-11ea-924b-18acde214ce9.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2006)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n\n\n\n##  Desafio dia 07 - Preloader animado \u003ca name=\"id07\"\u003e\u003c/a\u003e\n![dia 07](https://user-images.githubusercontent.com/37448340/88490911-412fdb00-cf75-11ea-806c-c41df0d1727e.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/Dia%2007)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n\n\n##  Desafio dia 08 - Coração batendo \u003ca name=\"id08\"\u003e\u003c/a\u003e\n![gif](https://user-images.githubusercontent.com/37448340/88534017-9c95b380-cfdd-11ea-9b54-b883fd9f9e77.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2008)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n##  Desafio dia 09 - Pendulo de Newton \u003ca name=\"id09\"\u003e\u003c/a\u003e\n![gif (1)](https://user-images.githubusercontent.com/37448340/88670759-d76e1900-d0bb-11ea-8158-edf1cdf41b97.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2009)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[first-child](https://www.w3schools.com/cssref/sel_firstchild.asp)*\n* *[last-child](https://www.w3schools.com/cssref/sel_last-child.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n##  Desafio dia 10 - Animação texto alternando \u003ca name=\"id10\"\u003e\u003c/a\u003e\n![gif (2)](https://user-images.githubusercontent.com/37448340/88792562-caabfc80-d171-11ea-8c71-9756331e3ab6.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2010)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n##  Desafio dia 11 - Botão com efeito hover \u003ca name=\"id11\"\u003e\u003c/a\u003e\n![gif (3)](https://user-images.githubusercontent.com/37448340/88915715-29897880-d23b-11ea-9f58-8fe93214d3cc.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2011)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[Overflow](https://www.w3schools.com/css/css_overflow.asp)* \n* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*\n* *[z-index](https://www.w3schools.com/cssref/pr_pos_z-index.asp)*\n\n\n##  Desafio dia 12 - Efeito de preenchimento ao passar o mouse\u003ca name=\"id12\"\u003e\u003c/a\u003e\n![gif (4)](https://user-images.githubusercontent.com/37448340/89034283-05976700-d30f-11ea-983f-5b0171212a2a.gif)\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2012)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*\n\n\n##  Desafio dia 13 - Loading com efeito\u003ca name=\"id13\"\u003e\u003c/a\u003e\n![gif (3)](https://user-images.githubusercontent.com/37448340/89111708-69b14c80-d42f-11ea-904b-1a4e5a1842e0.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2013)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n\n\n##  Desafio dia 14 - Fundo de texto animado\u003ca name=\"id14\"\u003e\u003c/a\u003e\n![gif (4)](https://user-images.githubusercontent.com/37448340/89136987-adc64f00-d50c-11ea-8ce7-97515b31ae0e.gif)\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2014)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n\n* *[background-clip](https://www.w3schools.com/cssref/css3_pr_background-clip.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n\n##  Desafio dia 15 - Texto flutuante\u003ca name=\"id15\"\u003e\u003c/a\u003e\n![gif (5)](https://user-images.githubusercontent.com/37448340/89242255-796b9500-d5d7-11ea-9e4f-4f4d499f5dc6.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2015)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n##  Desafio dia 16 - Botão com efeito \u003ca name=\"id16\"\u003e\u003c/a\u003e\n![gif (6)](https://user-images.githubusercontent.com/37448340/89361050-9a4bed00-d6a0-11ea-85c0-b331c7efcbed.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2016)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*\n\n\n##  Desafio dia 17 - Loader animado\u003ca name=\"id17\"\u003e\u003c/a\u003e\n![gif (7)](https://user-images.githubusercontent.com/37448340/89480128-f2e7bc80-d76a-11ea-8aaa-6987ee30a1c7.gif)\n\n\n[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2017)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n##  Desafio dia 18 - Texto esfumaçado\u003ca name=\"id18\"\u003e\u003c/a\u003e\n![gif (9)](https://user-images.githubusercontent.com/37448340/89602896-2a736900-d83e-11ea-83d1-ddf210064771.gif)\n\n\n\n[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2018)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n\n##  Desafio dia 19 - Efeitos de animação fundo de partículas \u003ca name=\"id19\"\u003e\u003c/a\u003e\n![gif (10)](https://user-images.githubusercontent.com/37448340/89700784-6b838000-d907-11ea-852b-d9b06fadd590.gif)\n\n\n\n[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2019)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n* *[variáveis CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties)*\n\n\n##  Desafio dia 20 - Botão com efeito \u003ca name=\"id20\"\u003e\u003c/a\u003e\n![gif (13)](https://user-images.githubusercontent.com/37448340/89723734-8837ba80-d9d0-11ea-92ee-3cecf1da1647.gif)\n\n\n\n[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2020)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*\n\n##  Desafio dia 21 - Esferas quicando \u003ca name=\"id21\"\u003e\u003c/a\u003e\n![gif (14)](https://user-images.githubusercontent.com/37448340/89748326-fd6ec280-da98-11ea-846f-cb7b68a1d777.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2021)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n##  Desafio dia 22 - Icones com efeito \u003ca name=\"id22\"\u003e\u003c/a\u003e\n![gif (15)](https://user-images.githubusercontent.com/37448340/89851135-2a3adc80-db62-11ea-8b59-c76672f08e0b.gif)\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2022)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n\n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*\n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n##  Desafio dia 23 - Botão com efeito \u003ca name=\"id23\"\u003e\u003c/a\u003e\n\n![gif (17)](https://user-images.githubusercontent.com/37448340/89967422-caa70480-dc27-11ea-8a1f-80adfbaea9d4.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2023)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* \n* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*\n\n\n##  Desafio dia 24 - Preloader animado \u003ca name=\"id24\"\u003e\u003c/a\u003e\n![gif (18)](https://user-images.githubusercontent.com/37448340/90086193-3e144900-dcf0-11ea-94eb-39dbb4723e7a.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2024)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi\n\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n\n\n## Desafio dia 25 - checkbox animado \u003ca name=\"id25\"\u003e\u003c/a\u003e\n![gif (20)](https://user-images.githubusercontent.com/37448340/90207269-33bf8100-ddbc-11ea-9d30-e6cd44d2a120.gif)\n\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2025)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* \n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n\n## Desafio dia 26 - Loading com efeito\u003ca name=\"id26\"\u003e\u003c/a\u003e\n![gif (21)](https://user-images.githubusercontent.com/37448340/90303547-1e625980-de85-11ea-82f9-b23d4fed96bc.gif)\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2026)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* \n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n\n## Desafio dia 27 - Efeito pulsar\u003ca name=\"id27\"\u003e\u003c/a\u003e\n![gif (22)](https://user-images.githubusercontent.com/37448340/90583617-fcc7e180-e1a6-11ea-904a-4cf74508b5a0.gif)\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2027)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi \n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* \n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n## Desafio dia 28 - cor do background mudando\u003ca name=\"id28\"\u003e\u003c/a\u003e\n![gif (23)](https://user-images.githubusercontent.com/37448340/90352994-61eecc00-e01b-11ea-90db-d0fabc5036ab.gif)\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2028)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi \n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n\n\n\n## Desafio dia 29 - Menu responsivo com Media Queries\u003ca name=\"id29\"\u003e\u003c/a\u003e\n![gif (24)](https://user-images.githubusercontent.com/37448340/90464853-911d4000-e0e4-11ea-9328-2b481a304913.gif)\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/Dia%2029)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi \n* *[@media](https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media)*\n\n\n## Desafio dia 30 - Fogos de artificio\u003ca name=\"id30\"\u003e\u003c/a\u003e\n![gif (25)](https://user-images.githubusercontent.com/37448340/90583437-85924d80-e1a6-11ea-98ad-db4fbf5f0739.gif)\n\n\n\n\n[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2030)\n\n[Tutorial Medium]() *Ainda não disponivel*\n\n[Post LinkedIn]()\n\n##### O que eu aprendi \n\n* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*\n* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* \n* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*\n* *[animations](https://www.w3schools.com/css/css3_animations.asp)*\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilenacarecho%2F30diasdecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilenacarecho%2F30diasdecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilenacarecho%2F30diasdecss/lists"}