{"id":25764463,"url":"https://github.com/mewmewdevart/30days_csschallenge","last_synced_at":"2025-02-26T21:18:08.808Z","repository":{"id":134994261,"uuid":"343019316","full_name":"mewmewdevart/30Days_CSSChallenge","owner":"mewmewdevart","description":"⚙️ | The challenge aims to help improve my coding skills by making mini-projects using HTML and CSS3.","archived":false,"fork":false,"pushed_at":"2023-01-28T13:59:32.000Z","size":27126,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T21:18:04.799Z","etag":null,"topics":["30days","css","html","projects"],"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/mewmewdevart.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-28T04:23:42.000Z","updated_at":"2025-02-20T03:00:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"17b6f1b8-0723-43d7-b5af-e7b97d577817","html_url":"https://github.com/mewmewdevart/30Days_CSSChallenge","commit_stats":null,"previous_names":["mewmewdevart/30days_csschallenge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2F30Days_CSSChallenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2F30Days_CSSChallenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2F30Days_CSSChallenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2F30Days_CSSChallenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mewmewdevart","download_url":"https://codeload.github.com/mewmewdevart/30Days_CSSChallenge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240934400,"owners_count":19880992,"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":["30days","css","html","projects"],"created_at":"2025-02-26T21:18:06.281Z","updated_at":"2025-02-26T21:18:08.801Z","avatar_url":"https://github.com/mewmewdevart.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n 30 Days of CSS\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cb\u003e\u003ci\u003e30Days of CSS is a challenge aims to help improve your coding skills by making mini-projects using HTML and CSS3.\u003c/i\u003e\u003c/b\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg alt=\"GitHub code size in bytes\" src=\"https://img.shields.io/github/languages/code-size/mewmewdevart/30Days-CSSChallenge?color=6272a4\" /\u003e\n\t\u003cimg alt=\"Main language\" src=\"https://img.shields.io/github/languages/top/mewmewdevart/30Days-CSSChallenge?color=6272a4\"/\u003e\n\t\u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/mewmewdevart/30Days-CSSChallenge?color=6272a4\"/\u003e\n\u003c/p\u003e\n\n\n#### 💡 About the project\n\u003e _ Exercising my knowledge (and learning more) of HTML5 and CSS3, creating daily mini-projects for 30 days.\n\n#### Rules:\n- Perform one project per day;\n- Share your progress on social media (Twitter, Facebook, Linkedin etc.) using a hashtag # 30diasDeCSS and others;\n- The project must be completed by 11:59 pm;\n- Personal rule for good conduct: If the project is not carried out sometime, the next day should be added one more;\n\n\n#### 👥Tutorial/References\n\n- [Online Tutoriais](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog) - \n- [Free Front End](https://freefrontend.com/css-animation-examples) - \n- [Dark Code](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw) - \n- [Creative Creations](https://www.youtube.com/channel/UCOKmVksbzoKJKmtu7rlEM1A) - \n- [Amazing Techno Tutorials](https://www.youtube.com/channel/UCX6g7OirMyfEBn5Oxqu-wGA)\n\n#### 🏆Projects:\n\n- Day 01 - Hover Effect Social Media Buttons\n---\n\u003cimg src=\"https://media.giphy.com/media/vDMBWCYCcMcQngkDmu/giphy.gif\" width=\"60%\"/\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2001)\n\n- Day 02 - Loading Page\n---\n\u003cimg src=\"https://media.giphy.com/media/fhvV0tKLdBqj6uTIa4/giphy.gif\" width=\"60%\" /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2002)\n\n\n- Day 03 - Image Manipulation\n---\n\u003cimg src=\"https://media.giphy.com/media/JAFEPaKwZUdwt8BWw4/giphy-downsized-large.gif\"  width=\"60%\"/\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2003)\n\n\n- Day 04 - Text Glitch Effect\n---\n\u003cimg src=\"https://media.giphy.com/media/IvCiMBJkduD2DoQ5jF/giphy.gif\"  width=\"60%\" /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2004)\n\n\n\n- Day 05 - Animated Progress Bar\n---\n\u003cimg src=\"https://media.giphy.com/media/Yme06sBNrQT7cFITuq/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2005)\n\n\n\n- Day 06 - Toggle Day/Night Mode\n---\n\u003cimg src=\"https://media.giphy.com/media/ulMPTGcUx0rD4Ap6NX/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2006)\n\n\n\n- Day 07 - Contact Info Effect\n---\n\u003cimg src=\"https://media.giphy.com/media/UEB2qDszMJVT4wSGWY/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2007)\n\n\n\n- Day 08 -  Color change when entering another .div \n---\n\u003cimg src=\"https://media.giphy.com/media/5iyFWwXuVsh1ba5UUK/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2008)\n\n\n\n\n- Day 09 - Changing background-color\n---\n\u003cimg src=\"https://media.giphy.com/media/RiC7TZejSVqYw79qSc/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2009)\n\n\n\n\n- Day 10 - Password Effect \n---\n\u003cimg src=\"https://media.giphy.com/media/qbuoneamRhw5rlXOsI/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2010)\n\n\n\n- Day 11 - Button Hover\n---\n\u003cimg src=\"https://media.giphy.com/media/RTfuhvOFA3z6ByEujI/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2011)\n\n\n- Day 12 - Video Overlay \n---\n\u003cimg src=\"https://media.giphy.com/media/k0hwDdzC86DPDw2iY1/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2012)\n\n\n\n- Day 13 - Image Hover \n---\n\n![imageday13](https://user-images.githubusercontent.com/50052600/110960314-5fdcb980-832d-11eb-888e-7dbf1df860f3.gif)\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2013)\n\n\n- Day 14 - I Love \n---\n\n\u003cimg src=\"https://media.giphy.com/media/uG5ecw52ft3SArtkyz/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2014)\n\n\n\n- Day 15 - Text Animation\n---\n\n\u003cimg src=\"https://media.giphy.com/media/6WC61Z4k5C38HWB1F1/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2015)\n\n\n- Day 16 - Animated Cards\n---\n\n\u003cimg src=\"https://media.giphy.com/media/CQVbpzAcIBz59jKSnf/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2016)\n\n\n- Day 17 - Flip 3D Card\n---\n\n\u003cimg src=\"https://media.giphy.com/media/KhJJvOetywtiA8SBv2/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2017)\n\n\n- Day 18 - Creative Div Box\n---\n\n\u003cimg src=\"https://media.giphy.com/media/0pn0YSrQ5JeFyZqT8f/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2018)\n\n\n\n\n\n- Day 19 - Solar Eclipse\n---\n\n\u003cimg src=\"https://media.giphy.com/media/o2LSBrIrVokJuURaC9/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2019)\n\n\n\n\n\n- Day 20 - Circular Progress Bar \n---\n\n\u003cimg src=\"https://media.giphy.com/media/gUrxsWYL7Git0Z3pPH/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2020)\n\n\n\n- Day 21 - Ghost Floating\n---\n\n\u003cimg src=\"https://media.giphy.com/media/IW6EL96QDhmNdybm6R/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2021)\n\n\n\n\n\n- Day 22 - 3D Rotation Animation\n---\n\n\u003cimg src=\"https://media.giphy.com/media/8rN1wIMvtfcSEjdmrQ/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2022)\n\n\n\n- Day 23 - Animated Hot Cup of Tea\n---\n\n\u003cimg src=\"https://media.giphy.com/media/YSaNDRdOYr9UuRSiWn/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2023)\n\n\n\n\n- Day 24 - Animated Hamburger Menu\n---\n\n\u003cimg src=\"https://media.giphy.com/media/exCyondpTrigY7wlhL/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2024)\n\n\n\n\n- Day 25 - Square Loading Animation\n---\n\n\u003cimg src=\"https://media.giphy.com/media/mDeK2Xvnl6lg6C7bIp/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2025)\n\n\n\n\n\n- Day 26 - 3D Cubes \n---\n\n\u003cimg src=\"https://media.giphy.com/media/W4CTThacuqLM2MxPSi/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2026)\n\n\n\n\n\n\n- Day 27 - Product Card\n---\n\n\u003cimg src=\"https://media.giphy.com/media/sU8RYHENlh3nZxOif3/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2027)\n\n\n\n\n\n- Day 28 - Water Text Effect\n---\n\n\u003cimg src=\"https://media.giphy.com/media/Ca6z3ExAkxLutcN8Hv/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2028)\n\n\n\n\n\n- Day Day 29 - Loading\n---\n\n\u003cimg src=\"https://media.giphy.com/media/mWS4JRi1rFur7Wtla4/giphy.gif\" width=\"60%\"  /\u003e\n\n[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2029)\n\n\n\n\u003cp align=\"center\"\u003e Developed with love 💜 by Larissa Cristina Benedito (Mewmew). \u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmewmewdevart%2F30days_csschallenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmewmewdevart%2F30days_csschallenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmewmewdevart%2F30days_csschallenge/lists"}