{"id":20787650,"url":"https://github.com/raquellima7/30daysofcss","last_synced_at":"2025-07-02T15:32:29.410Z","repository":{"id":193381025,"uuid":"360349684","full_name":"RaquelLima7/30DaysOfCSS","owner":"RaquelLima7","description":"Challenge to create 30 mini projects using HTML and CSS in 30 days. 🖌","archived":false,"fork":false,"pushed_at":"2021-06-01T12:48:45.000Z","size":50616,"stargazers_count":46,"open_issues_count":0,"forks_count":160,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-05T16:19:39.603Z","etag":null,"topics":["css","html"],"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/RaquelLima7.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}},"created_at":"2021-04-22T00:51:01.000Z","updated_at":"2025-04-11T21:09:19.000Z","dependencies_parsed_at":"2023-09-08T00:54:19.086Z","dependency_job_id":null,"html_url":"https://github.com/RaquelLima7/30DaysOfCSS","commit_stats":null,"previous_names":["raquellima7/30daysofcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RaquelLima7/30DaysOfCSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaquelLima7%2F30DaysOfCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaquelLima7%2F30DaysOfCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaquelLima7%2F30DaysOfCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaquelLima7%2F30DaysOfCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaquelLima7","download_url":"https://codeload.github.com/RaquelLima7/30DaysOfCSS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaquelLima7%2F30DaysOfCSS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263165965,"owners_count":23424057,"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","html"],"created_at":"2024-11-17T14:58:58.648Z","updated_at":"2025-07-02T15:32:29.383Z","avatar_url":"https://github.com/RaquelLima7.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003e 30DaysOfCSS 🖌🚀 \u003ch2\u003e\n\n\n## 📝 About \n30 days of CSS is a project that aims to improve coding skills by making mini daily projects using HTML5 and CSS.\n\n\u003cbr\u003e\n\n## 🎯 Goal \nThe 30 days of CSS challenge aims to improve learning about html and css (without frameworks), using animations and effects. A challenge created by [Milena Carecho](https://github.com/MilenaCarecho), [see here](https://github.com/MilenaCarecho/30diasDeCSS).\n\n\u003cbr\u003e\n\n## 📣 Rules \n* Make one project a day;\n* Share your progress on social media using the hashtags #30DaysOfCSS and #30diasDeCSS;\n* The project must be completed by 11:59 pm.\n\n\u003cbr\u003e\n\n## 🗒 Challenges \n* [Day 01 - Animation using search box](#id01)\n* [Day 02 - Animated loader](#id02)\n* [Day 03 - Layered social media icon](#id03)\n* [Day 04 - Color changing checkbox](#id04)\n* [Day 05 - Floating text](#id05)\n* [Day 06 - Heart beating](#id06)\n* [Day 07 - Shiny button](#id07)\n* [Day 08 - Animated screen](#id08)\n* [Day 09 - Animation with hover images](#id09)\n* [Day 10 - Animated Checkbox Neon effect](#id10)\n* [Day 11 - Pulsing effect](#id11)\n* [Day 12 - Typewriter](#id12)\n* [Day 13 - Text color change when entering another div](#id13)\n* [Day 14 - Rotating card animation](#id14)\n* [Day 15 - Shiny text](#id15)\n* [Day 16 - Lightsaber](#id16)\n* [Day 17 - Animated menu](#id17)\n* [Day 18 - Smoky Text](#id18)\n* [Day 19 - Background that changes color](#id19)\n* [Day 20 - Fill effect when hovering](#id20)\n* [Day 21 - Animated text background with stars](#id21)\n* [Day 22 - Colorful animation](#id22)\n* [Day 23 - Animation with text](#id23)\n* [Day 24 - Image Slideshow](#id24)\n* [Day 25 - Button with effect](#id25)\n* [Day 26 - Animated circles](#id26)\n* [Day 27 - Circles with effects](#id27)\n* [Day 28 - Page Background Animation](#id28)\n* [Day 29 - Effect with heart](#id29)\n* [Day 30 - Fireworks](#id30)\n\n\n\u003cbr\u003e\n\n## Day 01 - Animation using search box \u003ca name=\"id01\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_01/day01.gif\" alt=\"day01\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_01)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6794956990545235968-31Ht) \n\n\u003cbr\u003e\n\n## Day 02 - Animated loader \u003ca name=\"id02\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_02/day02.gif\" alt=\"day02\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_02)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6795319631654531072-_PiO) \n\n\u003cbr\u003e\n\n## Day 03 - Layered social media icon \u003ca name=\"id03\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_03/day03.gif\" alt=\"day03\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_03)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6795670904497082368-x8Ye) \n\n\u003cbr\u003e\n\n## Day 04 - Color changing checkbox \u003ca name=\"id04\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_04/day04.gif\" alt=\"day04\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_04)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6796052162389573633-2p3x) \n\n\u003cbr\u003e\n\n## Day 05 - Floating text \u003ca name=\"id05\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_05/day05.gif\" alt=\"day05\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_05)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6796385653291569152-qRSx) \n\n\u003cbr\u003e\n\n## Day 06 - Heart beating \u003ca name=\"id06\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_06/day06.gif\" alt=\"day06\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_06)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6796781476336738304-JCCc) \n\n\u003cbr\u003e\n\n## Day 07 - Shiny button \u003ca name=\"id07\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_07/day07.gif\" alt=\"day07\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_07)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6797171324776185856-fF9c) \n\n\u003cbr\u003e\n\n## Day 08 - Animated screen \u003ca name=\"id08\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_08/day08.gif\" alt=\"day08\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_08)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6797502442012512256-rpiM) \n\n\u003cbr\u003e\n\n## Day 09 - Animation with hover images \u003ca name=\"id09\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_09/day09.gif\" alt=\"day09\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_09)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6797858467349622784-NtLV) \n\n\u003cbr\u003e\n\n## Day 10 - Animated Checkbox Neon effect \u003ca name=\"id10\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_10/day10.gif\" alt=\"day10\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_10)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6798220475148382208-vQlE) \n\n\u003cbr\u003e\n\n## Day 11 - Pulsing effect \u003ca name=\"id11\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_11/day11.gif\" alt=\"day11\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_11)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6798654996767420416-oF4-) \n\n\u003cbr\u003e\n\n## Day 12 - Typewriter \u003ca name=\"id12\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_12/day12.gif\" alt=\"day12\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_12)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6798967575511388160-l6ys) \n\n\u003cbr\u003e\n\n## Day 13 - Text color change when entering another div \u003ca name=\"id13\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_13/day13.gif\" alt=\"day13\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_13)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6799319539822723072-XLkX) \n\n\u003cbr\u003e\n\n## Day 14 - Rotating card animation \u003ca name=\"id14\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_14/day14.gif\" alt=\"day14\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_14)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6799710257833672704-4EKR) \n\n\u003cbr\u003e\n\n## Day 15 - Shiny text \u003ca name=\"id15\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_15/day15.gif\" alt=\"day15\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_15)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6800014639368323072-zJiY) \n\n\u003cbr\u003e\n\n## Day 16 - Lightsaber \u003ca name=\"id16\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_16/day16.gif\" alt=\"day16\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_16)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6800446779121840128-2Dnm) \n\n\u003cbr\u003e\n\n## Day 17 - Animated menu \u003ca name=\"id17\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_17/day17.gif\" alt=\"day17\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_17)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6800766044014198784-pyRI) \n\n\u003cbr\u003e\n\n## Day 18 - Smoky Text \u003ca name=\"id18\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_18/day18.gif\" alt=\"day18\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_18)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6801122745724805120-xpg5) \n\n\u003cbr\u003e\n\n## Day 19 - Background that changes color \u003ca name=\"id19\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_19/day19.gif\" alt=\"day19\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_19)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6801491770749321216-RZOR) \n\n\u003cbr\u003e\n\n## Day 20 - Fill effect when hovering \u003ca name=\"id20\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_20/day20.gif\" alt=\"day20\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_20)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6801848473181327360-9M2d) \n\n\u003cbr\u003e\n\n## Day 21 - Animated text background with stars \u003ca name=\"id21\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_21/day21.gif\" alt=\"day21\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_21)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6802247092950614016-3Xta) \n\n\u003cbr\u003e\n\n## Day 22 - Colorful animation \u003ca name=\"id22\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_22/day22.gif\" alt=\"day22\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_22)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6802569834723889152-ttYb) \n\n\u003cbr\u003e\n\n## Day 23 - Animation with text \u003ca name=\"id23\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_23/day23.gif\" alt=\"day23\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_23)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6802907126567108608-dUHR) \n\n\u003cbr\u003e\n  \n ## Day 24 - Image Slideshow \u003ca name=\"id24\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_24/day24.gif\" alt=\"day24\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_24)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6803299721961103360-hIyp) \n\n\u003cbr\u003e\n  \n## Day 25 - Button with effect \u003ca name=\"id25\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_25/day25.gif\" alt=\"day25\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_25)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6803645822761259008-Z1Mh) \n\n\u003cbr\u003e\n  \n ## Day 26 - Animated circles \u003ca name=\"id26\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_26/day26.gif\" alt=\"day26\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_26)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6804026950273830912-mlP4) \n\n\u003cbr\u003e\n  \n## Day 27 - Circles with effects \u003ca name=\"id27\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_27/day27.gif\" alt=\"day27\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_27)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6804386175462240256-ModF) \n\n\u003cbr\u003e\n  \n\n## Day 28 - Page Background Animation \u003ca name=\"id28\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_28/day28.gif\" alt=\"day28\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_28)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6804862390841212928-dzgu) \n\n\u003cbr\u003e\n  \n## Day 29 - Effect with heart \u003ca name=\"id29\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_29/day29.gif\" alt=\"day29\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_29)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6805099757627871232-mk8h) \n\n\u003cbr\u003e\n\n## Day 30 - Fireworks \u003ca name=\"id30\"\u003e\u003c/a\u003e\n\u003cimg src=\"./Challenges/Day_30/day30.gif\" alt=\"day30\"\u003e\n\n- [My Code](https://github.com/RaquelLima7/30DaysOfCSS/tree/main/Challenges/Day_30)\n- [Post LinkedIn](https://www.linkedin.com/posts/raquellima7_30daysofcss-30diasdecss-frontend-activity-6805475043443838976-c5MX) \n\n\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraquellima7%2F30daysofcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraquellima7%2F30daysofcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraquellima7%2F30daysofcss/lists"}