{"id":19889483,"url":"https://github.com/itsjordanmuller/css-100-days-challenge","last_synced_at":"2026-05-14T19:33:52.685Z","repository":{"id":206558635,"uuid":"717188069","full_name":"itsjordanmuller/css-100-days-challenge","owner":"itsjordanmuller","description":"CSS Self-Paced Practice Exercises based on CSS Challenges from the website: 100dayscss.com","archived":false,"fork":false,"pushed_at":"2024-04-13T03:51:06.000Z","size":3315,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T02:54:31.725Z","etag":null,"topics":["100dayscss","100dayscsschallenge","100daysofcode","100daysofcss","challenge","css","css3"],"latest_commit_sha":null,"homepage":"https://100dayscss.com/progress/itsjordanmuller/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsjordanmuller.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2023-11-10T19:03:28.000Z","updated_at":"2024-04-15T06:44:25.097Z","dependencies_parsed_at":"2023-11-27T10:32:09.572Z","dependency_job_id":"a90e73ac-9281-4770-b340-929dcf69aa03","html_url":"https://github.com/itsjordanmuller/css-100-days-challenge","commit_stats":null,"previous_names":["itsjordanmuller/css-100-days-challenge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjordanmuller%2Fcss-100-days-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjordanmuller%2Fcss-100-days-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjordanmuller%2Fcss-100-days-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjordanmuller%2Fcss-100-days-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsjordanmuller","download_url":"https://codeload.github.com/itsjordanmuller/css-100-days-challenge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241317601,"owners_count":19943202,"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":["100dayscss","100dayscsschallenge","100daysofcode","100daysofcss","challenge","css","css3"],"created_at":"2024-11-12T18:10:20.913Z","updated_at":"2026-05-14T19:33:52.649Z","avatar_url":"https://github.com/itsjordanmuller.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca id=\"top\"\u003e\u003c/a\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003ch1\u003e100 Days CSS Challenge\u003c/h1\u003e\n\n\u003ca href=\"https://jordanmuller.com/portfolio/100-days-css-challenge/\"\u003e\u003cimg src=\"https://custom-icon-badges.demolab.com/badge/100%20Days%20CSS%20Challenge-282A36.svg?style=for-the-badge\u0026logo=CSS3\u0026logoColor=1572B6\" width=\"100%\"/\u003e\u003c/a\u003e\n\n\u003cp\u003eCSS Self-Paced Practice Exercises based on CSS Challenges from the website: \u003ca href=\"https://100dayscss.com/\"\u003e100dayscss.com\u003c/a\u003e using CSS, HTML \u0026 JavaScript. Challenge Started 2023-11-10 and finished 2024-06-16 after creating 100 new variations of my own! I have now finished working on saving the original challenges and creating updated/hybrid versions with my own preferred styles \u0026 colors applied. My next step will be to go back through and capture them all via screenshot to be able to include images here \u0026 on my \u003ca href=\"https://www.jordanmuller.com\"\u003ePortfolio Website\u003c/a\u003e.\u003c/p\u003e\n\n[![CSS](https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge\u0026logo=CSS3\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/css/)\n[![HTML](https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge\u0026logo=HTML5\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/html/)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/javascript/)\n[![GitHub](https://img.shields.io/badge/GitHub-181717.svg?style=for-the-badge\u0026logo=GitHub\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/github/)\n[![Git](https://img.shields.io/badge/Git-F05032.svg?style=for-the-badge\u0026logo=Git\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/git/)\n[![CodePen](https://img.shields.io/badge/CodePen-000000.svg?style=for-the-badge\u0026logo=CodePen\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/codepen/)\n\n\u003cdetails\u003e\n\u003csummary\u003eMore Technologies 📀\u003c/summary\u003e\u003cbr\u003e\n\n[![Bash](https://img.shields.io/badge/Bash-8edf6a.svg?style=for-the-badge\u0026logo=GNU-Bash\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/bash/)\n[![ESLint](https://img.shields.io/badge/ESLint-4B32C3.svg?style=for-the-badge\u0026logo=ESLint\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/es-lint/)\n[![Prettier](https://img.shields.io/badge/Prettier-F7B93E.svg?style=for-the-badge\u0026logo=Prettier\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/prettier/)\n[![VS Code](https://img.shields.io/badge/VS%20Code-007ACC.svg?style=for-the-badge\u0026logo=Visual-Studio-Code\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/vs-code/)\n[![Kubuntu](https://img.shields.io/badge/Kubuntu-0079C1.svg?style=for-the-badge\u0026logo=Kubuntu\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/kubuntu/)\n[![KDE](https://img.shields.io/badge/KDE-1D99F3.svg?style=for-the-badge\u0026logo=KDE\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/kde/)\n[![Ubuntu](https://img.shields.io/badge/Ubuntu-E95420.svg?style=for-the-badge\u0026logo=Ubuntu\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/ubuntu/)\n[![Debian](https://img.shields.io/badge/Debian-A81D33.svg?style=for-the-badge\u0026logo=Debian\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/debian/)\n[![Linux](https://img.shields.io/badge/Linux-FCC624.svg?style=for-the-badge\u0026logo=Linux\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/linux/)\n[![Font Awesome](https://img.shields.io/badge/Font%20Awesome-528DD7.svg?style=for-the-badge\u0026logo=Font-Awesome\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/font-awesome/)\n[![Markdown](https://img.shields.io/badge/Markdown-000000.svg?style=for-the-badge\u0026logo=Markdown\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/markdown/)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGlossary - Overview of Tools \u0026 Tech 💻\u003c/summary\u003e\n\n\u003cdiv align=\"left\"\u003e\n\n\u003ch2\u003eOverview of Technologies\u003c/h2\u003e\n\n| **Technology** | **Overview** | **Release Year** |\n|:---:|:---:|:---:|\n| [![Bash](https://img.shields.io/badge/Bash-8edf6a.svg?style=for-the-badge\u0026logo=GNU-Bash\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/bash/)\u003cbr\u003e[Bash](https://www.gnu.org/software/bash/) | Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. First released in 1989, it has been used as the default login shell for most Linux distributions and it was one of the first programs Linus Torvalds ported to Linux, alongside GCC. | [1989](https://en.wikipedia.org/wiki/Bash_(Unix_shell)) |\n| [![CodePen](https://img.shields.io/badge/CodePen-000000.svg?style=for-the-badge\u0026logo=CodePen\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/codepen/)\u003cbr\u003e[CodePen](https://codepen.io/your-work) | CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called \"pens,\" and test them. | [2012](https://en.wikipedia.org/wiki/CodePen) |\n| [![CSS](https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge\u0026logo=CSS3\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/css/)\u003cbr\u003e[CSS](https://www.w3.org/TR/CSS/#css) | Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. | [1996](https://en.wikipedia.org/wiki/CSS) |\n| [![Debian](https://img.shields.io/badge/Debian-A81D33.svg?style=for-the-badge\u0026logo=Debian\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/debian/)\u003cbr\u003e[Debian](https://www.debian.org/) | Debian, also known as Debian GNU/Linux, is a Linux distribution composed of free and open-source software and proprietary software developed by the community-supported Debian Project, which was established by Ian Murdock on August 16, 1993. | [1993](https://en.wikipedia.org/wiki/Debian) |\n| [![ESLint](https://img.shields.io/badge/ESLint-4B32C3.svg?style=for-the-badge\u0026logo=ESLint\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/es-lint/)\u003cbr\u003e[ESLint](https://eslint.org/) | ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. | [2013](https://en.wikipedia.org/wiki/ESLint) |\n| [![Font Awesome](https://img.shields.io/badge/Font%20Awesome-528DD7.svg?style=for-the-badge\u0026logo=Font-Awesome\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/font-awesome/)\u003cbr\u003e[Font Awesome](https://fontawesome.com/) | Font Awesome is a font and icon toolkit based on CSS and Less. As of 2023, Font Awesome was used by 30% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts. | [2012](https://en.wikipedia.org/wiki/Font_Awesome) |\n| [![Git](https://img.shields.io/badge/Git-F05032.svg?style=for-the-badge\u0026logo=Git\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/git/)\u003cbr\u003e[Git](https://git-scm.com/) | Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers who are collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows. | [2005](https://en.wikipedia.org/wiki/Git) |\n| [![GitHub](https://img.shields.io/badge/GitHub-181717.svg?style=for-the-badge\u0026logo=GitHub\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/github/)\u003cbr\u003e[GitHub](https://github.com/) | GitHub is a developer platform that allows developers to create, store, and manage their code. It uses Git software, providing the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project. | [2008](https://en.wikipedia.org/wiki/GitHub) |\n| [![HTML](https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge\u0026logo=HTML5\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/html/)\u003cbr\u003e[HTML](https://html.spec.whatwg.org/) | HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. | [1993](https://en.wikipedia.org/wiki/HTML) |\n| [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/javascript/)\u003cbr\u003e[JavaScript](https://ecma-international.org/publications-and-standards/standards/ecma-262/) | JavaScript frameworks, such as React Native, Ionic, NativeScript, and Apache Cordova, enable developers to build native and hybrid mobile apps for Android and iOS. Facebook, Google, Uber, and Instagram all use JavaScript to build their mobile apps. JS is fast, efficient, and straightforward. | [1995](https://en.wikipedia.org/wiki/JavaScript) |\n| [![KDE](https://img.shields.io/badge/KDE-1D99F3.svg?style=for-the-badge\u0026logo=KDE\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/kde/)\u003cbr\u003e[KDE](https://kde.org/) | KDE is an international free software community that develops free and open-source software. As a central development hub, it provides tools and resources that allow collaborative work on this kind of software. | [1996](https://en.wikipedia.org/wiki/KDE) |\n| [![Kubuntu](https://img.shields.io/badge/Kubuntu-0079C1.svg?style=for-the-badge\u0026logo=Kubuntu\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/kubuntu/)\u003cbr\u003e[Kubuntu](https://kubuntu.org/) | Kubuntu is an official flavor of the Ubuntu operating system that uses the KDE Plasma Desktop instead of the GNOME desktop environment. As part of the Ubuntu project, Kubuntu uses the same underlying systems. Kubuntu shares the same repositories as Ubuntu and is released regularly on the same schedule as Ubuntu. | [2006](https://en.wikipedia.org/wiki/Kubuntu) |\n| [![Linux](https://img.shields.io/badge/Linux-FCC624.svg?style=for-the-badge\u0026logo=Linux\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/linux/)\u003cbr\u003e[Linux](https://kernel.org/) | Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. | [1991](https://en.wikipedia.org/wiki/Linux) |\n| [![Markdown](https://img.shields.io/badge/Markdown-000000.svg?style=for-the-badge\u0026logo=Markdown\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/markdown/)\u003cbr\u003e[Markdown](https://daringfireball.net/projects/markdown/) | Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easy to read in its source code form. | [2004](https://en.wikipedia.org/wiki/Markdown) |\n| [![Prettier](https://img.shields.io/badge/Prettier-F7B93E.svg?style=for-the-badge\u0026logo=Prettier\u0026logoColor=black)](https://jordanmuller.com/portfolio/tags/prettier/)\u003cbr\u003e[Prettier](https://prettier.io/) | Prettier, known for its strong formatting opinions, supports a broad range of programming languages. It seamlessly integrates with the majority of code editors and offers a streamlined set of configuration options. | [2017](https://github.com/prettier/prettier/releases) |\n| [![Ubuntu](https://img.shields.io/badge/Ubuntu-E95420.svg?style=for-the-badge\u0026logo=Ubuntu\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/ubuntu/)\u003cbr\u003e[Ubuntu](https://ubuntu.com/) | Ubuntu is a Linux distribution based on Debian and composed mostly of free and open-source software. Ubuntu is officially released in multiple editions: Desktop, Server, and Core for Internet of things devices and robots. | [2004](https://en.wikipedia.org/wiki/Ubuntu) |\n| [![VS Code](https://img.shields.io/badge/VS%20Code-007ACC.svg?style=for-the-badge\u0026logo=Visual-Studio-Code\u0026logoColor=white)](https://jordanmuller.com/portfolio/tags/vs-code/)\u003cbr\u003e[VS Code](https://code.visualstudio.com/) | Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE. | [2015](https://en.wikipedia.org/wiki/Visual_Studio_Code) |\n\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003chr\u003e\n\n\u003c!-- \u003ch2\u003eLinks - Sections \u0026 Projects\u003c/h2\u003e\n\n ADD BADGES FOR 001-100 CSS PROJECTS --\u003e\n\n\u003c/div\u003e\n\n\u003cdetails open\u003e\u003csummary\u003e\u003ch2\u003eTable of Contents 🗃️\u003c/h2\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n📖 \u003ca href=\"#about-section\"\u003e\u003cstrong\u003eAbout The Project\u003c/strong\u003e\u003c/h3\u003e\u003c/a\u003e\n\n💡 \u003ca href=\"#usage-section\"\u003e\u003cstrong\u003eUsage Guide\u003c/strong\u003e\u003c/a\u003e\n\n🛠️ \u003ca href=\"#setup-section\"\u003e\u003cstrong\u003eSetup Instructions\u003c/strong\u003e\u003c/a\u003e\n\n🔍 \u003ca href=\"#overview-section\"\u003e\u003cstrong\u003eSections \u0026 Projects\u003c/strong\u003e\u003c/a\u003e\n\n📬 \u003ca href=\"#contact-section\"\u003e\u003cstrong\u003eContact Information\u003c/strong\u003e\u003c/a\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e🌟 \u003ca href=\"#acknowledgements-section\"\u003e\u003cstrong\u003eAcknowledgements\u003c/strong\u003e\u003c/a\u003e\u003c/summary\u003e\n\u003cblockquote\u003e\n\n- 💌 \u003ca href=\"#special-thanks\"\u003eSpecial Thanks\u003c/a\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n🔗 \u003ca href=\"#resources-section\"\u003e\u003cstrong\u003eLinks \u0026 Citations\u003c/strong\u003e\u003c/a\u003e\n\n📜 \u003ca href=\"#license-section\"\u003e\u003cstrong\u003eLicense Details\u003c/strong\u003e\u003c/a\u003e\n\n\u003c/blockquote\u003e\u003c/details\u003e\n\n\u003chr\u003e\n\n\u003ca id=\"about-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e📖 About The Project\u003c/h2\u003e\u003c/summary\u003e\n\n\u003ch3\u003e📂 Project Introduction\u003c/h3\u003e\n\u003cblockquote\u003e\n\u003cp\u003eI've been participating in the \u003cstrong\u003e100 DAYS CSS CHALLENGE\u003c/strong\u003e, a creative and skill-enhancing endeavor initiated by Matthias Martin. This challenge involves crafting HTML and CSS snippets daily for 100 consecutive days. It's a self-paced, practical learning process, utilizing CodePen for code development and sharing. The unique aspect of this challenge is its blend of creativity and technical skill, pushing me to explore and expand my CSS capabilities in various ways.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3\u003e⛳ Learning Objectives \u0026 Goals\u003c/h3\u003e\n\u003cblockquote\u003e\n\u003cp\u003eMy primary objective with this challenge is to refine and deepen my HTML and CSS skills. Each day presents a new opportunity to experiment with different styles and layouts, enhancing my understanding of CSS intricacies. The goal is not just to replicate the given examples but to add my own creative twist, thereby fostering a more intuitive grasp of web design principles. Completing this challenge will mark a significant milestone in my journey towards becoming a more skilled and versatile web developer.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3\u003e🗓️ Project Timeline\u003c/h3\u003e\n\u003cblockquote\u003e\n\u003cp\u003eEngaging in this challenge means dedicating time each day to develop a new CSS snippet. It's a commitment to daily practice and learning, allowing me to steadily build a portfolio of diverse and creative CSS works. While the challenge is structured for 100 days, it offers flexibility. If I miss a day, I can easily catch up. This structure keeps me motivated and ensures a consistent learning curve, with the end goal of not only completing the 100 challenges but also showcasing significant improvement in my CSS skills.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003c/details\u003e\n\n\u003ca id=\"usage-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e💡 Usage Guide\u003c/h2\u003e\u003c/summary\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e🚀 Getting Started\u003c/h3\u003e\u003c/summary\u003e\n\n\u003ch4\u003eLooking for Live Demos? 🌐\u003c/h4\u003e\n\n\u003cblockquote\u003e\n  \u003cp\u003eIf you're eager to simply see the results of this project, most, if not all of the projects have a Live Demo associated with them. I have linked them all in the overview for each specific project/section. To view these live demos, simply follow the links provided with each project. You'll see them alongside buttons that look like this:\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable \u003e\n    \u003cthead align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n        \u003ca href=\"https://github.com/itsjordanmuller/50-in-50-html-css-javascript/tree/main/001-Expanding-Cards\"\u003e\u003cimg src=\"https://custom-icon-badges.demolab.com/badge/Directory-F6E481.svg?style=for-the-badge\u0026logo=file-submodule\u0026logoColor=black\"/\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n        \u003ca href=\"https://github.com/itsjordanmuller/50-in-50-html-css-javascript/tree/main\"\u003e\u003cimg src=\"https://custom-icon-badges.demolab.com/badge/Live%20Demo-FF3333.svg?style=for-the-badge\u0026logoSource=feather\u0026logo=browser\u0026logoColor=white\"/\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n        \u003ca href=\"https://jordanmuller.com/portfolio/50-projects-50-days-html-css-js/\"\u003e\u003cimg src=\"https://custom-icon-badges.demolab.com/badge/Portfolio-a61168.svg?style=for-the-badge\u0026logo=briefcase\u0026logoColor=white\"/\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"https://github.com/itsjordanmuller/50-in-50-html-css-javascript/tree/main/001-Expanding-Cards\"\u003eGo to Directory\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"https://github.com/itsjordanmuller/50-in-50-html-css-javascript/tree/main\"\u003eLive Demo\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"https://jordanmuller.com/portfolio/50-projects-50-days-html-css-js/\"\u003eOpen on Portfolio\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n  \u003cp\u003eClick the button/link and you should be taken to the Live Demo for that specific project. Please note that some projects don't have a Live Demo, and if that's the case there will not be a button/link. I'm hoping to get all of the projects on the internet at some point in the near future, so check back soon and you might find a link!\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch4\u003eWant to View the Projects on Your Local Machine? 💻\u003c/h4\u003e\n\n\u003cblockquote\u003e\n  \u003cp\u003eI have provided detailed instructions for how to clone/download this repository to your local machine in the Setup Instructions section. In that section, you should find everything you need to be able to get these projects running and working on your own machine. Please note that a few of the projects use external APIs that include verification, so you will need to setup your own accounts/API keys for those services.\u003c/p\u003e\n  \u003cp\u003eIf you plan on running the code on your local machine, be sure to check the specific project you're trying to run to see if it needs any additional information or setup for the connections to the API to work. In most cases, I will try to include a `.env.example` file. You will need to open this file, and read the instructions inside to obtain your own API key. Once that's done, you'll need to make sure you've renamed the file from `.env.example` to `.env` only.\u003c/p\u003e\n  \u003cp\u003eIf you want to avoid setting up environment variables, check to see if the project has a Live Demo associated with it. For all of the projects that I have hosted on the internet, you'll be able to use them without any API configuration required. This is often a simpler way of viewing more complicated projects, since everything will already be running for you to view, use \u0026 explore.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003chr\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e\n        \u003ch4\u003eJust Hoping to Learn More About Programming? 📚\u003c/h4\u003e\n      \u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cblockquote\u003e\n          \u003cp\u003eI have provided a variety of resources and guides throughout this README for new developers. From the absolute basics, to specific videos and guides that helped me get unstuck in certain situations, I tried to include every single resource I ended up utilizing over the course of my journey.\u003c/p\u003e\n          \u003cp\u003eWe are so lucky to live in a time where almost all of this information is available for free on the internet. The only thing I paid for was the course itself, which can be purchased for about $20 on sale at \u003ca href=\"https://www.udemy.com/\"\u003eUdemy\u003c/a\u003e. Besides that, I was able to complete the project with a low-spec \u003ca href=\"https://www.amazon.com/dp/B0842X4BNF\"\u003eLenovo ThinkPad T480\u003c/a\u003e I purchased for just under $300. It's proven to be a perfect machine for development \u0026 running \u003ca href=\"https://kubuntu.org/\"\u003eKubuntu Linux\u003c/a\u003e.\u003c/p\u003e\n        \u003c/blockquote\u003e\n        \u003cbr\u003e\n        \u003cstrong\u003e\u003cem\u003eA full list of tech, tools, and other links \u0026 resources can be found towards the bottom of this README in the \u003ca href=\"#resources-section\"\u003eLinks \u0026 Citations\u003c/a\u003e section.\u003c/em\u003e\u003c/strong\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c/details\u003e\n\n\u003c!-- \u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e✴️ Features\u003c/h3\u003e\u003c/summary\u003e\u003cblockquote\u003e\na\nb\nc\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eBuilding Features ✳️\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\na\nb\nc\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e --\u003e\n\n\u003c!-- \u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e🎛️ Configuration Options\u003c/h3\u003e\u003c/summary\u003e\u003cblockquote\u003e\na\nb\nc\n\u003c/blockquote\u003e\n\u003c/details\u003e --\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e💾 Installation\u003c/h3\u003e\u003c/summary\u003e\u003cblockquote\u003e\nFor detailed installation instructions, please refer to the \u003ca href=\"#setup-section\"\u003eSetup Instructions\u003c/a\u003e section below.\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003c/details\u003e\n\n\u003ca id=\"setup-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e🛠️ Setup Instructions\u003c/h2\u003e\u003c/summary\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e📋 Prerequisites\u003c/h3\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eRequired Software 💽\u003c/h4\u003e\u003c/summary\u003e\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\nTo be able to clone/download \u0026 view these projects, or to start learning \u003cstrong\u003eHTML\u003c/strong\u003e, \u003cstrong\u003eCSS\u003c/strong\u003e, and \u003cstrong\u003eJavaScript\u003c/strong\u003e as well as web development in general, you'll need a few essential tools. At a minimum, you should have a basic text editor/integrated development environment, a web browser, and an internet connection.\n\nI used the following:\n\n- **Text Editor/IDE:** I use [Visual Studio Code](https://code.visualstudio.com/) as my main integrated development environment. VS Code can be customized to work with just about any technology, making it a great choice for a general all-purpose IDE, it also has a large and helpful community for support.\n- **Web Browser:** I prefer to use [Google Chrome](https://www.google.com/chrome/) for their comprehensive set of [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/). While most if not all of the tools are available in other browsers/Developer Tools such as [Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), [Safari Web Inspector](https://webkit.org/web-inspector/), and [Edge DevTools](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/landing/), I am most familiar \u0026 comfortable with the layout of Chrome.\n- **Internet Connection:** Aim to have at least 2-3 Mbps or more to speed up development, especially if you'll be downloading large files or loading video/image based resources. Most libraries and a variety of public places can have high-speed Wi-Fi available for visitors free-of-charge.\n\nBased on the fact that you're reading this right now, you probably already have a browser \u0026 internet connection!\n\n[Windows](https://www.microsoft.com/en-us/windows), [macOS](https://www.apple.com/macos/), and most [Linux distributions](https://en.wikipedia.org/wiki/Linux_distribution) should include a text editor by default, which in this case should be more than enough to view and edit HTML, CSS \u0026 JavaScript files.\n\nFor those using mobile devices, I advise switching to a laptop or desktop for a more streamlined experience. While mobile development is feasible on Android or iOS, the ease of a full-sized computer, keyboard, and mouse is unmatched. Visual Studio Code is accessible via most browsers on any device, however, you would still need to serve/host it from another machine. For optimal functionality, a personal computer remains the best choice.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eSystem Requirements 🖥️\u003c/h4\u003e\u003c/summary\u003e\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\nSystem requirements for these projects can vary due to the fact that they use different amounts of client-side processing power and resources. In general, a recent operating system like [Windows](https://www.microsoft.com/en-us/windows), [macOS](https://www.apple.com/macos/), or a popular [Linux distribution](https://en.wikipedia.org/wiki/Linux_distribution) usually suffices. Modern computers, especially those purchased in the last few years, should meet these needs adequately.\n\nPerformance will heavily rely on your specific hardware setup, including processor speed, RAM capacity, storage type, and graphics card quality. The operating system choice and its configuration also play a significant role in speed.\n\nTo give you a practical example, I personally used a [Lenovo ThinkPad T480](https://www.amazon.com/dp/B0842X4BNF) for the entirety of my recent projects. This laptop, has been great for a variety of daily tasks, including programming.\n\nThe computer I used for the entire project features the following specifications:\n\n- **Operating System:** [Kubuntu Linux 22.04](https://cdimage.ubuntu.com/kubuntu/releases/22.04/release/)\n- **Processor:** 8th Gen Intel Core Duo i5-8350U\n- **RAM:** 16GB DDR4 RAM\n- **Storage:** 512GB SSD of data\n- **Graphics:** Intel UHD Graphics 620\n- **Display:** 14.0\" Screen with FHD 1920x1080 resolution.\n\nThis configuration was more than sufficient for both my project and other tasks. Interestingly, working on a less powerful laptop has its advantages, such as highlighting inefficient code that consumes excessive resources.\n\nIf you're unsure, I recommend testing your setup with the intended software. Should you encounter any errors, feel free to reach out for assistance. Your feedback can also help in making projects more adaptable to diverse hardware, operating systems, and browsers.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/details\u003e\n\n\u003c/blockquote\u003e\n\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e📦 Installation Guide\u003c/h3\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eDownload/Clone This Repo ⬇️\u003c/h4\u003e\u003c/summary\u003e\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\nBelow you will find various methods that are available to download/clone this repository. \n\nFeel free to use whichever option you are most comfortable \u0026 familiar with. You can also read GitHub's guide on [downloading source code archives](https://docs.github.com/en/repositories/working-with-files/using-files/downloading-source-code-archives) \u0026 [cloning repositories](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).\n\n| 💡 Download Method Details | \n|:--|\n\n\u003cblockquote\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cem\u003eClone with SSH ★\u003c/em\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n1. **Ensure SSH Key Setup**: Before you can clone with SSH, make sure you have an SSH key set up and added to your GitHub account. If you haven't done this, refer to GitHub's documentation on setting up a new SSH key.\n2. **Copy SSH URL**: Navigate to the repository on GitHub. Click the 'Code' button and switch to the 'SSH' tab in the dropdown menu. Click the clipboard icon to copy the SSH URL.\n3. **Open Terminal or Command Prompt**: Open your terminal or command prompt. Navigate to the directory where you want the cloned repository to be placed.\n4. **Run Clone Command**: Type `git clone` followed by the copied SSH URL. For this project, that's:\n   ```\n   git clone git@github.com:itsjordanmuller/50-in-50-html-css-javascript.git\n   ```\n5. **Access Cloned Repository**: Once the cloning process is complete, you will have a local copy of the repository. Navigate into the newly created directory to access the repository files.\n\nNote: Cloning with SSH is secure and allows for easy repository updates without repeatedly entering credentials.\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cem\u003eDownload ZIP File\u003c/em\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n1. **Navigate to the Repository**: Open your web browser and go to the main page of the repository.\n2. **Find the 'Code' Button**: On the repository's main page, locate the 'Code' button. This is usually found near the top right, just above the file list.\n3. **Download ZIP Option**: Click on the 'Code' button. A dropdown menu will appear. Select the 'Download ZIP' option from this menu.\n4. **Save the ZIP File**: Choose a location on your computer where you want to save the ZIP file and confirm the download.\n5. **Extract Files**: Once the download is complete, navigate to the downloaded file. Right-click on the ZIP file and select 'Extract All...' or use your preferred extraction tool. Choose where you want the extracted folder to be placed.\n6. **Access Repository Contents**: Open the extracted folder to access the contents of the repository.\nNote: Downloading a ZIP file is a great way to get a copy of the repository without using Git commands.\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cem\u003eClone with HTTPS\u003c/em\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n1. **Copy HTTPS URL**: Go to the GitHub page of the repository. Click on the 'Code' button. Under the dropdown menu, select the 'HTTPS' tab and click the clipboard icon to copy the HTTPS URL.\n2. **Open Terminal or Command Prompt**: Access your terminal (Linux/Mac) or command prompt (Windows). Navigate to the directory where you want the repository to be cloned.\n3. **Execute Clone Command**: Type `git clone` followed by the copied HTTPS URL. In this case:\n   ```\n   git clone https://github.com/itsjordanmuller/50-in-50-html-css-javascript.git\n   ```\n4. **Enter GitHub Credentials**: If prompted, enter your GitHub username and password. This step is usually required the first time you use HTTPS to clone a repository.\n5. **Access Cloned Repository**: After the cloning process completes, a local copy of the repository will be created. Navigate into the directory that was just created to start working with the files.\nNote: HTTPS cloning is straightforward but may require you to enter your GitHub credentials more frequently compared to SSH.\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cem\u003eClone with GitHub CLI\u003c/em\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\nThe GitHub CLI (`gh`) provides a convenient way to interact with GitHub from your command line. Here’s how to use `gh` to clone the repository `itsjordanmuller/50-in-50-html-css-javascript`:\n\n1. **Install GitHub CLI**: If you haven't already, you need to install the GitHub CLI. You can find installation instructions on the [official GitHub CLI page](https://cli.github.com/).\n\n2. **Authenticate GitHub CLI**: Open your terminal and authenticate the GitHub CLI using the command `gh auth login`. Follow the prompts to complete the authentication process.\n\n3. **Clone the Repository**: To clone this repository, use the following command:\n   ```\n   gh repo clone itsjordanmuller/50-in-50-html-css-javascript\n   ```\n   This command will clone the repository into a new directory named `50-in-50-html-css-javascript` in your current working directory.\n\n4. **Navigate to the Repository**: Once the cloning process is complete, navigate into the repository directory with:\n   ```\n   cd 50-in-50-html-css-javascript\n   ```\n\n5. **Start Working**: You now have a local copy of the repository and can begin working on it.\n\nNote: The GitHub CLI streamlines various GitHub operations and is particularly useful for those who prefer command-line tools.\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003c/blockquote\u003e\n\n\u003chr\u003e\n\n★ When I have the option, I personally prefer to use the `Clone with SSH` method. Alternatively, `Download ZIP File` can be a quick and easy way to simply download the files without a terminal or Git. \n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/details\u003e\n\n\u003c!-- \u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eHow to Pull New Changes 🔄\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e --\u003e\n\n\u003c!-- \u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eDependencies ⛓️\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e --\u003e\n\n\u003c!-- \u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eVirtual Environments Setup 🏝️\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eInstalling Required Packages 📦\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e --\u003e\n\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch3\u003e⚙️ Configuration\u003c/h3\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eAPI Keys/Environment Variables 🔐\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003c!-- \u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eExternal Services 📡\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch4\u003eDatabase Setups \u0026 Connections 💽\u003c/h4\u003e\u003c/summary\u003e\u003cblockquote\u003e\n\n\u003c/blockquote\u003e\n\u003c/details\u003e --\u003e\n\n\u003c/blockquote\u003e\n\n\u003c/details\u003e\n\n\u003c/blockquote\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003c/details\u003e\n\n\u003ca id=\"overview-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e🔍 Sections \u0026 Projects\u003c/h2\u003e\u003c/summary\u003e\n\n## Day 1\n\n### [Challenge #1 - 100 Days CSS Logo](https://100dayscss.com/days/1/)\n\n#### [My Submission - #1 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/tree/main/initial-solutions/001-100-Days-CSS)\n\n![Challenge 1 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/001-100-Days-CSS/001-Submission.png)\n\n![Challenge 1 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/improved-solutions/001-100-Days-CSS/001-Improved.png)\n\n\u003e An easy start into the challenge with a custom build number with gradient.\n\n#### [My Submission - #1 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/jOdmXzY)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Image\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/001-100-Days-CSS/001-Goal.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/JGmvaE\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 2\n\n### [Challenge #2 - Menu Icon](https://100dayscss.com/days/2/)\n\n#### [My Submission - #2 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/tree/main/002-Menu-Icon)\n\n![Challenge 2 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/002-Menu-Icon/002-Submission-1.png)\n\n![Challenge 2 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/002-Menu-Icon/002-Submission-2.png)\n\n![Challenge 2 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/improved-solutions/002-Menu-Icon/002-Improved-1.png)\n\n![Challenge 2 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/improved-solutions/002-Menu-Icon/002-Improved-2.png)\n\n\u003e Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher.\n\n#### [My Submission - #2 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/QWYgNNx)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/002-Menu-Icon/002-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/002-Menu-Icon/002-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/ZQmbNm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 3\n\n### [Challenge #3 - Pyramide](https://100dayscss.com/days/3/)\n\n#### [My Submission - #3 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/003-Pyramide)\n\n![Challenge 3 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/003-The-Pyramide/003-Submission.png)\n\n![Challenge 3 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/improved-solutions/003-The-Pyramide/003-Improved.png)\n\n\u003e Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.\n\n#### [My Submission - #3 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/MWLoOMm)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Image\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/003-The-Pyramide/003-Goal.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/PZxpKO\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 4\n\n### [Challenge #4 - Loading](https://100dayscss.com/days/4/)\n\n#### [My Submission - #4 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/004-Loading)\n\n![Challenge 4 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/004-Loading/004-Submission.png)\n\n\u003e The best are always websites that do not need a loading status. If they do, here would be a calming one.\n\n#### [My Submission - #4 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/jOdLMvw)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Image\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/004-Loading/004-Goal.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/yeQZLm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 5\n\n### [Challenge #5 - Statistic](https://100dayscss.com/days/5/)\n\n#### [My Submission - #5 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/tree/main/005-Statistic)\n\n![Challenge 5 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/005-Statistic/005-Submission-1.png)\n\n![Challenge 5 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/005-Statistic/005-Submission-2.png)\n\n\u003e In a world of numbers, it is important to be able to interpret them correctly. Beautiful statistics help to capture these data.\n\n#### [My Submission - #5 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/GRzMWJP)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/005-Statistic/005-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/005-Statistic/005-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GoPvNN\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 6\n\n### [Challenge #6 - Profile](https://100dayscss.com/days/6/)\n\n#### [My Submission - #6 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/tree/main/006-Profile)\n\n![Challenge 6 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/006-Profile/006-Submission-1.png)\n\n![Challenge 6 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/006-Profile/006-Submission-2.png)\n\n\u003e Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.\n\n#### [My Submission - #6 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/jOdabOK)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/006-Profile/006-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/006-Profile/006-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/OMreoV\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 7\n\n### [Challenge #7 - Profile](https://100dayscss.com/days/7/)\n\n#### [My Submission - #7 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/tree/main/007-Notifications-Search-Menu)\n\n![Challenge 7 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Submission-1.png)\n\n![Challenge 7 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Submission-2.png)\n\n![Challenge 7 Submission Image 3](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Submission-3.png)\n\n![Challenge 7 Submission Image 4](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Submission-4.png)\n\n\u003e The three cornerstones of any application? Brought together in the smallest possible space.\n\n#### [My Submission - #7 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/PoVOgpx)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Goal-3.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/007-Notifications-Search-Menu/007-Goal-4.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/ZQwJyj\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 8\n\n### [Challenge #8 - Metaballs](https://100dayscss.com/days/8/)\n\n#### [My Submission - #8 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/008-Metaballs)\n\n![Challenge 8 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/008-Metaballs/008-Submission.png)\n\n\u003e At first glance impossible to implement with CSS, but filters make this possible too.\n\n#### [My Submission - #8 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/ExroQNQ)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Image\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/008-Metaballs/008-Goal.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/XXOqoG\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 9\n\n### [Challenge #9 - Rainy Night](https://100dayscss.com/days/9/)\n\n#### [My Submission - #9 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/009-Rainy-Night)\n\n![Challenge 9 Submission Image](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/009-Rainy-Night/009-Submission.png)\n\n\u003e The perfect time of day and the perfect weather to program in peace. The raindrops even shatter on the ground.\n\n#### [My Submission - #9 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/eYxVppK)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Image\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/009-Rainy-Night/009-Goal.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/MKxgWz\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 10\n\n### [Challenge #10 - Watch](https://100dayscss.com/days/10/)\n\n#### [My Submission - #10 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/010-Watch)\n\n![Challenge 10 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/010-Watch/010-Submission-1.png)\n\n![Challenge 10 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/010-Watch/010-Submission-2.png)\n\n\u003e Classic, noble, modern or playful? What do you want your favorite watch to look like?\n\n#### [My Submission - #10 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/BaMYwoe)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/010-Watch/010-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/010-Watch/010-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/PZLjav\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 11\n\n### [Challenge #11 - Walking Boots](https://100dayscss.com/days/11/)\n\n#### [My Submission - #11 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/011-Walking-Boots)\n\n![Challenge 11 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/011-Walking-Boots/011-Submission-1.png)\n\n![Challenge 11 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/011-Walking-Boots/011-Submission-2.png)\n\n\u003e These boots are made for walking. Where are they going and for how long?\n\n#### [My Submission - #11 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/wvNmvqg)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/011-Walking-Boots/011-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/011-Walking-Boots/011-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/VeNvby\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 12\n\n### [Challenge #12 - Tooltip](https://100dayscss.com/days/12/)\n\n#### [My Submission - #12 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/012-Tooltip)\n\n![Challenge 12 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/012-Tooltip/012-Submission-1.png)\n\n![Challenge 12 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/012-Tooltip/012-Submission-2.png)\n\n\u003e I'm quite sure, you already know what obsession means. But you can look it up anyways.\n\n#### [My Submission - #12 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/NWoYpQJ)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/012-Tooltip/012-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/012-Tooltip/012-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/gPyzEa\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 13\n\n### [Challenge #13 - User Gallery](https://100dayscss.com/days/13/)\n\n#### [My Submission - #13 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery)\n\n![Challenge 13 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Submission-1.png)\n\n![Challenge 13 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Submission-2.png)\n\n![Challenge 13 Submission Image 3](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Submission-3.png)\n\n![Challenge 13 Submission Image 4](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Submission-4.png)\n\n\u003e An idea for a transition between user overview and profile page.\n\n#### [My Submission - #13 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/abXGbBK)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Goal-3.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/013-User-Gallery/013-Goal-4.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/zrQorm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 14\n\n### [Challenge #14 - Byciclopter](https://100dayscss.com/days/14/)\n\n#### [My Submission - #14 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/014-Byciclopter)\n\n![Challenge 14 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/014-Byciclopter/014-Submission-1.png)\n\n![Challenge 14 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/014-Byciclopter/014-Submission-2.png)\n\n\u003e Which side of the card do you want to use? Either drive or fly to work in the morning?\n\n#### [My Submission - #14 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/abXGbBK)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/014-Byciclopter/014-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/014-Byciclopter/014-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/BjegrP\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 15\n\n### [Challenge #15 - Upload](https://100dayscss.com/days/15/)\n\n#### [My Submission - #15 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload)\n\n![Challenge 15 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Submission-1.png)\n\n![Challenge 15 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Submission-2.png)\n\n![Challenge 15 Submission Image 3](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Submission-3.png)\n\n![Challenge 15 Submission Image 4](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Submission-4.png)\n\n![Challenge 15 Submission Image 5](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Submission-5.png)\n\n\u003e Yes, you can actually drag and drop a file in there. But don't worry, the upload process is faked.\n\n#### [My Submission - #15 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/VwgxxJp)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Goal-3.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Goal-4.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/015-Upload/015-Goal-5.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/ZQdbeN\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 16\n\n### [Challenge #16 - Blobby](https://100dayscss.com/days/16/)\n\n#### [My Submission - #16 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby)\n\n![Challenge 16 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-1.png)\n\n![Challenge 16 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-2.png)\n\n![Challenge 16 Submission Image 3](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-3.png)\n\n![Challenge 16 Submission Image 4](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-4.png)\n\n![Challenge 16 Submission Image 5](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-5.png)\n\n![Challenge 16 Submission Image 6](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-6.png)\n\n![Challenge 16 Submission Image 7](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Submission-7.png)\n\n\u003e It appears, wobbles, changes its shape and disappears again. Just like that.\n\n#### [My Submission - #16 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/abXGKyB)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-3.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-4.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-5.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-6.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/016-Blobby/016-Goal-7.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/eJwbed\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 17\n\n### [Challenge #17 - Penrose Triangle](https://100dayscss.com/days/17/)\n\n#### [My Submission - #17 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/017-Penrose-Triangle)\n\n![Challenge 17 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/017-Penrose-Triangle/017-Submission-1.png)\n\n![Challenge 17 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/017-Penrose-Triangle/017-Submission-2.png)\n\n\u003e CSS makes even the impossible possible. Can you find out how it was done?\n\n#### [My Submission - #17 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/PoVerEo)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/017-Penrose-Triangle/017-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/017-Penrose-Triangle/017-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/EPBvmm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 18\n\n### [Challenge #18 - Elastic](https://100dayscss.com/days/18/)\n\n#### [My Submission - #18 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic)\n\n![Challenge 18 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic/018-Submission-1.png)\n\n![Challenge 18 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic/018-Submission-2.png)\n\n![Challenge 18 Submission Image 3](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic/018-Submission-3.png)\n\n\u003e I thought for a long time about the best way to achieve this effect. In the end, the solution was easier than expected.\n\n#### [My Submission - #18 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/rNPvXOZ)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic/018-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic/018-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/018-Elastic/018-Goal-3.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/yemzzX\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 19\n\n### [Challenge #19 - Slider with Radio Buttons](https://100dayscss.com/days/19/)\n\n#### [My Submission - #19 (Result Image)](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider)\n\n![Challenge 19 Submission Image 1](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider/019-Submission-1.png)\n\n![Challenge 19 Submission Image 2](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider/019-Submission-2.png)\n\n![Challenge 19 Submission Image 3](https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider/019-Submission-3.png)\n\n\u003e Why use CSS when you can use JavaScript? Selectors can be wildly combined with each other.\n\n#### [My Submission - #19 (CodePen Demo)](https://codepen.io/itsjordanmuller/pen/ExrLqbz)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider/019-Goal-1.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider/019-Goal-2.png\"/\u003e\u003cbr/\u003e\n  \u003cimg src=\"https://github.com/itsjordanmuller/css-100-days-challenge/blob/main/initial-solutions/019-Radio-Buttons-Slider/019-Goal-3.png\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/xVKweb\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 20\n\n### [Challenge #20 - ](https://100dayscss.com/days/20/)\n\n#### [My Submission - #20 (Result Image)]()\n\n\u003e Surprise your visitors with a nice animation instead of a simple \"request sent\".\n\n#### [My Submission - #20 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/NNKzgP\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 21\n\n### [Challenge #21 - Pac-Man](https://100dayscss.com/days/21/)\n\n#### [My Submission - #21 (Result Image)]()\n\n\u003e Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka…\n\n#### [My Submission - #21 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/pyozgJ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 22\n\n### [Challenge #22 - Fitness Tracker](https://100dayscss.com/days/22/)\n\n#### [My Submission - #22 (Result Image)]()\n\n\u003e Don't sit on your chair all day long. Get up, jump, run, exercice and burn some calories.\n\n#### [My Submission - #22 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/BKadMO\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 23\n\n### [Challenge #23 - Animated Typography](https://100dayscss.com/days/23/)\n\n#### [My Submission - #23 (Result Image)]()\n\n\u003e Some big, bold and beautiful animated typography will enhance every boring header section.\n\n#### [My Submission - #23 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/wGvEVY\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 24\n\n### [Challenge #24 - Button](https://100dayscss.com/days/24/)\n\n#### [My Submission - #24 (Result Image)]()\n\n\u003e Do you really wanna let your users guess if their actions were successful? No! So give them some feedback if they click a button.\n\n#### [My Submission - #24 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/zqxoEo\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 25\n\n### [Challenge #25 - Map Marker](https://100dayscss.com/days/25/)\n\n#### [My Submission - #25 (Result Image)]()\n\n\u003e Did I just place a marker in the middle of some water to get a nice color contrast? Maybe. Click on it for a nice transition.\n\n#### [My Submission - #25 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/WwbmXx\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 26\n\n### [Challenge #26 - Motivational Modal](https://100dayscss.com/days/26/)\n\n#### [My Submission - #26 (Result Image)]()\n\n\u003e What's worse than a motivational quote? Three motivational quotes... so don't focus on the text and click through them quickly.\n\n#### [My Submission - #26 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/reVGbL\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 27\n\n### [Challenge #27 - Checklist](https://100dayscss.com/days/27/)\n\n#### [My Submission - #27 (Result Image)]()\n\n\u003e What's the great thing about working through your to-do list? That's right, the relieving feeling when you can check off the tasks.\n\n#### [My Submission - #27 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/pyjdRJ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 28\n\n### [Challenge #28 - Ring Ring](https://100dayscss.com/days/28/)\n\n#### [My Submission - #28 (Result Image)]()\n\n\u003e Fortunately for you, I left out the alarm sound. But hopefully the signal color and the movement have served their purpose.\n\n#### [My Submission - #28 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GZpzEE\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 29\n\n### [Challenge #29 - Search Field](https://100dayscss.com/days/29/)\n\n#### [My Submission - #29 (Result Image)]()\n\n\u003e You won't find anything unless you start looking. So go ahead, write something in the search box.\n\n#### [My Submission - #29 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/WwrNqQ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 30\n\n### [Challenge #30 - Random Line](https://100dayscss.com/days/30/)\n\n#### [My Submission - #30 (Result Image)]()\n\n\u003e What can I say, it is a line. A line that moves and circles something. What should it be? That's for you to decide.\n\n#### [My Submission - #30 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/BKNEoK\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 31\n\n### [Challenge #31 - Pendulum Wave](https://100dayscss.com/days/31/)\n\n#### [My Submission - #31 (Result Image)]()\n\n\u003e If you are not yet fascinated by mathematics, you should be now at the latest. Wonderful what a small calculations brings forth.\n\n#### [My Submission - #31 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GZoxRy\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 32\n\n### [Challenge #32 - Counter](https://100dayscss.com/days/32/)\n\n#### [My Submission - #32 (Result Image)]()\n\n\u003e I wonder how high or low is the maximum you can count here? The transitions are pure CSS, but I used some JS for the counting.\n\n#### [My Submission - #32 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/KzzgEm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 33\n\n### [Challenge #33 - Sunny Day](https://100dayscss.com/days/33/)\n\n#### [My Submission - #33 (Result Image)]()\n\n\u003e What else could be visible on this sunny day? Some birds, plains or even superman?\n\n#### [My Submission - #33 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/grrqap\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 34\n\n### [Challenge #34 - Hello](https://100dayscss.com/days/34/)\n\n#### [My Submission - #34 (Result Image)]()\n\n\u003e Yes, another animation of some text. But this time I used SVGs as a base. What kind of animation will you make?\n\n#### [My Submission - #34 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/vGKZKy\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 35\n\n### [Challenge #35 - Loading Circle](https://100dayscss.com/days/35/)\n\n#### [My Submission - #35 (Result Image)]()\n\n\u003e Is that a dark circle with a white stripe or the other way around?\n\n#### [My Submission - #35 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/bpeJLP\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 36\n\n### [Challenge #36 - Tabs](https://100dayscss.com/days/36/)\n\n#### [My Submission - #36 (Result Image)]()\n\n\u003e The solution for layouts with little space or many navigation levels.\n\n#### [My Submission - #36 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/bpwwWZ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 37\n\n### [Challenge #37 - Carousel](https://100dayscss.com/days/37/)\n\n#### [My Submission - #37 (Result Image)]()\n\n\u003e Images, quotes, prices or logos. A carousel can be used in many ways and is an eye-catcher.\n\n#### [My Submission - #37 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/mPrqQw\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 38\n\n### [Challenge #38 - Logo Transition](https://100dayscss.com/days/38/)\n\n#### [My Submission - #38 (Result Image)]()\n\n\u003e Logos don't always have to be static, as a transition or stylistic element they can have animations.\n\n#### [My Submission - #38 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/JXbXGM\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 39\n\n### [Challenge #39 - Menu Toggle](https://100dayscss.com/days/39/)\n\n#### [My Submission - #39 (Result Image)]()\n\n\u003e What looks like another simple menu icon turns out to be a full-fledged navigation.\n\n#### [My Submission - #39 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/BKQGVR\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 40\n\n### [Challenge #40 - Gallery](https://100dayscss.com/days/40/)\n\n#### [My Submission - #40 (Result Image)]()\n\n\u003e Take a closer look by clicking on the images. The animations are CSS only and precalculated.\n\n#### [My Submission - #40 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/VaPKvj\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 41\n\n### [Challenge #41 - Error Modal](https://100dayscss.com/days/41/)\n\n#### [My Submission - #41 (Result Image)]()\n\n\u003e Don't worry, it's not a real error, this is part of the challenge.\n\n#### [My Submission - #41 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/grgKbj\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 42\n\n### [Challenge #42 - Stars](https://100dayscss.com/days/42/)\n\n#### [My Submission - #42 (Result Image)]()\n\n\u003e If you look closely, you can see the stars sparkling. And with a bit of luck, you might even spot a shooting star. Make a wish!\n\n#### [My Submission - #42 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/dMNrxP\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 43\n\n### [Challenge #43 - Lightbulb](https://100dayscss.com/days/43/)\n\n#### [My Submission - #43 (Result Image)]()\n\n\u003e Light on, light off, light on, light off, light on.\n\n#### [My Submission - #43 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GZWqKL\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 44\n\n### [Challenge #44 - Twisted Pyramid](https://100dayscss.com/days/44/)\n\n#### [My Submission - #44 (Result Image)]()\n\n\u003e Impressive how quickly squares can become a spiral.\n\n#### [My Submission - #44 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/bpqRLe\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 45\n\n### [Challenge #45 - Button](https://100dayscss.com/days/45/)\n\n#### [My Submission - #45 (Result Image)]()\n\n\u003e If normal hover effects aren't enough for you anymore, try this.\n\n#### [My Submission - #45 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GZWzWd\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 46\n\n### [Challenge #46 - Iris Circles](https://100dayscss.com/days/46/)\n\n#### [My Submission - #46 (Result Image)]()\n\n\u003e What do you see? Camera shutter, tornado, flower or dancing people from above?\n\n#### [My Submission - #46 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/XdRdRm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 47\n\n### [Challenge #47 - Pixel Art](https://100dayscss.com/days/47/)\n\n#### [My Submission - #47 (Result Image)]()\n\n\u003e You don't like Space Invaders? No problem, click on the pixels to create your own piece of art.\n\n#### [My Submission - #47 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/xVdXXE\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 48\n\n### [Challenge #48 - 3D Cube](https://100dayscss.com/days/48/)\n\n#### [My Submission - #48 (Result Image)]()\n\n\u003e With CSS you can work not only two-dimensional but also three-dimensional. Simple objects and animation are no problem.\n\n#### [My Submission - #48 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/QNveWd\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 49\n\n### [Challenge #49 - CSS Follow](https://100dayscss.com/days/49/)\n\n#### [My Submission - #49 (Result Image)]()\n\n\u003e It wouldn't be a big challenge to implement that with JS only, but with CSS you have to come up with a good solution.\n\n#### [My Submission - #49 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/bpRpJz\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 50\n\n### [Challenge #50 - Easter Egg](https://100dayscss.com/days/50/)\n\n#### [My Submission - #50 (Result Image)]()\n\n\u003e Are you familiar with the 12 Basic Principles of Animation? This is an example for squash and stretch.\n\n#### [My Submission - #50 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/VaWMYa\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 51\n\n### [Challenge #51 - CSS Counter](https://100dayscss.com/days/51/)\n\n#### [My Submission - #51 (Result Image)]()\n\n\u003e You think with CSS you can't count to a thousand and even pause the whole thing at the push of a button? Then take a look at the code.\n\n#### [My Submission - #51 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/YqQaJR\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 52\n\n### [Challenge #52 - Dot Wave](https://100dayscss.com/days/52/)\n\n#### [My Submission - #52 (Result Image)]()\n\n\u003e I feel like I go into hypnosis if I stare at it too long.\n\n#### [My Submission - #52 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/EKXBmZ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 53\n\n### [Challenge #53 - Range Slider](https://100dayscss.com/days/53/)\n\n#### [My Submission - #53 (Result Image)]()\n\n\u003e Let's face it, the plane HTML inputs are often boring. But you can easily spice them up with some CSS.\n\n#### [My Submission - #53 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/MyvpZV\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 54\n\n### [Challenge #54 - Waves](https://100dayscss.com/days/54/)\n\n#### [My Submission - #54 (Result Image)]()\n\n\u003e Even the smallest animations and tweeks, can have a large impact. For example a mesmerizing background animation.\n\n#### [My Submission - #54 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/oxeaOz\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 55\n\n### [Challenge #55 - Thermostat](https://100dayscss.com/days/55/)\n\n#### [My Submission - #55 (Result Image)]()\n\n\u003e It's getting hot in here! Direct visual feedback will help your users understand their actions.\n\n#### [My Submission - #55 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/XdeXbR\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 56\n\n### [Challenge #56 - Flower](https://100dayscss.com/days/56/)\n\n#### [My Submission - #56 (Result Image)]()\n\n\u003e When was the last time you picked a daisy?\n\n#### [My Submission - #56 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/xVXXMx\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 57\n\n### [Challenge #57 - Icosahedron](https://100dayscss.com/days/57/)\n\n#### [My Submission - #57 (Result Image)]()\n\n\u003e This time a slightly more complicated basic body as a 3D object. Can you figure out how the triangles are made?\n\n#### [My Submission - #57 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/QNqZWp\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 58\n\n### [Challenge #58 - 3D Sphere](https://100dayscss.com/days/58/)\n\n#### [My Submission - #58 (Result Image)]()\n\n\u003e With a little creativity, you can create these crazy 3D bodies with CSS.\n\n#### [My Submission - #58 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GZMLbK\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 59\n\n### [Challenge #59 - Slice Transition](https://100dayscss.com/days/59/)\n\n#### [My Submission - #59 (Result Image)]()\n\n\u003e Not the everyday transition between two images.\n\n#### [My Submission - #59 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/aNVZvo\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 60\n\n### [Challenge #60 - Blurry Overlay](https://100dayscss.com/days/60/)\n\n#### [My Submission - #60 (Result Image)]()\n\n\u003e Backdrop blur effects are very trendy, but they are difficult to implement with CSS without any tricks.\n\n#### [My Submission - #60 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/pydZJZ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 61\n\n### [Challenge #61 - CSS Gradient Transition](https://100dayscss.com/days/61/)\n\n#### [My Submission - #61 (Result Image)]()\n\n\u003e A recurring trend, gradients have often been pronounced dead and yet appear anew.\n\n#### [My Submission - #61 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/pypvVj\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 62\n\n### [Challenge #62 - Price Table](https://100dayscss.com/days/62/)\n\n#### [My Submission - #62 (Result Image)]()\n\n\u003e Don't worry, 100 Days CSS is free. For everything else, you have these sample pricing tables.\n\n#### [My Submission - #62 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/VayMGJ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 63\n\n### [Challenge #63 - Hypnotic Ring](https://100dayscss.com/days/63/)\n\n#### [My Submission - #63 (Result Image)]()\n\n\u003e A few animated dots on circles and you find yourself in the longest tunnel in the world.\n\n#### [My Submission - #63 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/ZWvPbj\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 64\n\n### [Challenge #64 - Button](https://100dayscss.com/days/64/)\n\n#### [My Submission - #64 (Result Image)]()\n\n\u003e A nice effect for very important buttons with that certain wow factor.\n\n#### [My Submission - #64 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/WwMNNO\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 65\n\n### [Challenge #65 - Ellipses Animation](https://100dayscss.com/days/65/)\n\n#### [My Submission - #65 (Result Image)]()\n\n\u003e Did you also draw geometric shapes back in school. This one reminds me a bit of that.\n\n#### [My Submission - #65 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/vGdGaw\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 66\n\n### [Challenge #66 - Sparkle Checkbox](https://100dayscss.com/days/66/)\n\n#### [My Submission - #66 (Result Image)]()\n\n\u003e Looks quite ordinary at first, but click on it for a little surprise.\n\n#### [My Submission - #66 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/oxEoNO\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 67\n\n### [Challenge #67 - 3D Parasol](https://100dayscss.com/days/67/)\n\n#### [My Submission - #67 (Result Image)]()\n\n\u003e Is it possible to display more than just basic bodies in 3D with CSS? Apparently yes!\n\n#### [My Submission - #67 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/redByy\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 68\n\n### [Challenge #68 - Recording](https://100dayscss.com/days/68/)\n\n#### [My Submission - #68 (Result Image)]()\n\n\u003e Click on it for a faked audio recording process animation.\n\n#### [My Submission - #68 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/XdENQV\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 69\n\n### [Challenge #69 - Eye](https://100dayscss.com/days/69/)\n\n#### [My Submission - #69 (Result Image)]()\n\n\u003e Do you also feel a little observed? Why not give that eye a few chic eyelashes?\n\n#### [My Submission - #69 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/VaXgwM\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 70\n\n### [Challenge #70 - Calendar Days](https://100dayscss.com/days/70/)\n\n#### [My Submission - #70 (Result Image)]()\n\n\u003e A test to create depth in user actions. A haptic feedback would be great.\n\n#### [My Submission - #70 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/MyGyQy\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 71\n\n### [Challenge #71 - Morse Code Keyboard](https://100dayscss.com/days/71/)\n\n#### [My Submission - #71 (Result Image)]()\n\n\u003e Did it take some time? Absolutely! Is it really only possible with CSS? Yep. Are you crazy? Maybe!\n\n#### [My Submission - #71 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/qZYryb\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 72\n\n### [Challenge #72 - The Rings](https://100dayscss.com/days/72/)\n\n#### [My Submission - #72 (Result Image)]()\n\n\u003e A simple and meditative animation made of circles. What geometric patterns of circles come to your mind?\n\n#### [My Submission - #72 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/YqLaJm\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 73\n\n### [Challenge #73 - Word Carousel](https://100dayscss.com/days/73/)\n\n#### [My Submission - #73 (Result Image)]()\n\n\u003e If you are not one of these animals, the Word Carousel is also good for showing off your skills.\n\n#### [My Submission - #73 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/xVjvyb\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 74\n\n### [Challenge #74 - Pagination](https://100dayscss.com/days/74/)\n\n#### [My Submission - #74 (Result Image)]()\n\n\u003e Does anyone still use pagination at all or is everything now equipped with endless scroll?\n\n#### [My Submission - #74 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/RaJgvX\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 75\n\n### [Challenge #75 - Spinning Discs](https://100dayscss.com/days/75/)\n\n#### [My Submission - #75 (Result Image)]()\n\n\u003e A real 3D sphere is not possible with CSS only as far as I know. But the illusion of a sphere can be achieved in several ways.\n\n#### [My Submission - #75 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/WwyYgw\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 76\n\n### [Challenge #76 - Reveal Key](https://100dayscss.com/days/76/)\n\n#### [My Submission - #76 (Result Image)]()\n\n\u003e Can you solve the puzzle and uncover the secret? Just follow the instruction.\n\n#### [My Submission - #76 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/xVJGEG\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 77\n\n### [Challenge #77 - Motion Blur](https://100dayscss.com/days/77/)\n\n#### [My Submission - #77 (Result Image)]()\n\n\u003e In the future we may have native support for Motion Blur, until then we'll have to help ourselves with a few tricks.\n\n#### [My Submission - #77 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/LNBdEj\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 78\n\n### [Challenge #78 - Hover Shadow](https://100dayscss.com/days/78/)\n\n#### [My Submission - #78 (Result Image)]()\n\n\u003e Three similar hover effects for buttons, which nevertheless create quite different results.\n\n#### [My Submission - #78 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/NNBoWw\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 79\n\n### [Challenge #79 - Lines Animation](https://100dayscss.com/days/79/)\n\n#### [My Submission - #79 (Result Image)]()\n\n\u003e Now and then, animation can also be loud and exciting. What will you make out of the initial square?\n\n#### [My Submission - #79 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/aNjror\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 80\n\n### [Challenge #80 - Flexbox Accordion](https://100dayscss.com/days/80/)\n\n#### [My Submission - #80 (Result Image)]()\n\n\u003e I implemented the whole thing with Flexbox, but I'm sure you can think of many other variations to create this effect.\n\n#### [My Submission - #80 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/LNJWjM\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 81\n\n### [Challenge #81 - Jumping Ball](https://100dayscss.com/days/81/)\n\n#### [My Submission - #81 (Result Image)]()\n\n\u003e Oh nice, CSS supports physics! Not really, but you can fake it with the right animations. Don't forget the principles of animation.\n\n#### [My Submission - #81 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/vGzaeR\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 82\n\n### [Challenge #82 - Action Button](https://100dayscss.com/days/82/)\n\n#### [My Submission - #82 (Result Image)]()\n\n\u003e A good interface will tell the user about the result and state of an action.\n\n#### [My Submission - #82 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/bpxXOw\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 83\n\n### [Challenge #83 - Warp Drive](https://100dayscss.com/days/83/)\n\n#### [My Submission - #83 (Result Image)]()\n\n\u003e Is this what traveling at near light speed looks like? Physicists would probably disagree, but for the sake of learning some CSS, let's ignore that.\n\n#### [My Submission - #83 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/bpmLBW\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 84\n\n### [Challenge #84 - Book Cover](https://100dayscss.com/days/84/)\n\n#### [My Submission - #84 (Result Image)]()\n\n\u003e Nope, not an image or svg file, just some styling rules to create the illusion of a book.\n\n#### [My Submission - #84 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/BKqENE\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 85\n\n### [Challenge #85 - It's Something](https://100dayscss.com/days/85/)\n\n#### [My Submission - #85 (Result Image)]()\n\n\u003e I really don't know what this should be. But is it rotating or just going up and down for you?\n\n#### [My Submission - #85 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/QNJjMJ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 86\n\n### [Challenge #86 - Newton's Cradle](https://100dayscss.com/days/86/)\n\n#### [My Submission - #86 (Result Image)]()\n\n\u003e Do you have one of these click-clack-things on your desk? If not, just look at this one.\n\n#### [My Submission - #86 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/ZWmLeN\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 87\n\n### [Challenge #87 - Ruby](https://100dayscss.com/days/87/)\n\n#### [My Submission - #87 (Result Image)]()\n\n\u003e Shine bright like a diamond...uh...ruby. Look carefully and don't forget the polish.\n\n#### [My Submission - #87 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/grQKdM\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 88\n\n### [Challenge #88 - Candle](https://100dayscss.com/days/88/)\n\n#### [My Submission - #88 (Result Image)]()\n\n\u003e Thanks to the magic of border-radius, this flame is animated by CSS only. It looks way better than I would have imagined.\n\n#### [My Submission - #88 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/qZLBBW\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 89\n\n### [Challenge #89 - Animated Pattern](https://100dayscss.com/days/89/)\n\n#### [My Submission - #89 (Result Image)]()\n\n\u003e Looking closely will you make feel dizzy, but you have to if you want to figure out the movements.\n\n#### [My Submission - #89 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/EKGXpx\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 90\n\n### [Challenge #90 - Mouse Trap](https://100dayscss.com/days/90/)\n\n#### [My Submission - #90 (Result Image)]()\n\n\u003e Not the trap for real mice, but your cursor will get trapped on hover.\n\n#### [My Submission - #90 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/WwLYPg\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 91\n\n### [Challenge #91 - Cube Loader](https://100dayscss.com/days/91/)\n\n#### [My Submission - #91 (Result Image)]()\n\n\u003e This will be the result if you have too much time coding a loading animation.\n\n#### [My Submission - #91 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/oxmgWw\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 92\n\n### [Challenge #92 - Dancing Points](https://100dayscss.com/days/92/)\n\n#### [My Submission - #92 (Result Image)]()\n\n\u003e Can you recognize the underlying pattern which controls the single points?\n\n#### [My Submission - #92 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/mPvRXO\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 93\n\n### [Challenge #93 - Padlock](https://100dayscss.com/days/93/)\n\n#### [My Submission - #93 (Result Image)]()\n\n\u003e Did you know you can combine multiple box-shadows? This will help you on this one.\n\n#### [My Submission - #93 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/zqePgO\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 94\n\n### [Challenge #94 - Tree](https://100dayscss.com/days/94/)\n\n#### [My Submission - #94 (Result Image)]()\n\n\u003e Ever wanted to be a gardener? Go on and code yourself a tree.\n\n#### [My Submission - #94 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/wGNxzg\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 95\n\n### [Challenge #95 - Pig](https://100dayscss.com/days/95/)\n\n#### [My Submission - #95 (Result Image)]()\n\n\u003e Innocent, cute and consists entirely of simple basic shapes.\n\n#### [My Submission - #95 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/GZerZg\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 96\n\n### [Challenge #96 - Jumping Square](https://100dayscss.com/days/96/)\n\n#### [My Submission - #96 (Result Image)]()\n\n\u003e Squashed and stretched, this is how objects in motion should look like.\n\n#### [My Submission - #96 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/jqJvWK\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 97\n\n### [Challenge #97 - Puppet](https://100dayscss.com/days/97/)\n\n#### [My Submission - #97 (Result Image)]()\n\n\u003e Hello there, do you have a minute to talk about HTML and CSS?\n\n#### [My Submission - #97 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/EKJajz\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 98\n\n### [Challenge #98 - Plopp](https://100dayscss.com/days/98/)\n\n#### [My Submission - #98 (Result Image)]()\n\n\u003e What do you want to fill your box with?\n\n#### [My Submission - #98 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/PNgKEJ\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 99\n\n### [Challenge #99 - Circle-Square](https://100dayscss.com/days/99/)\n\n#### [My Submission - #99 (Result Image)]()\n\n\u003e Click me for a moment of joy and excitement\n\n#### [My Submission - #99 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/LNvBNB\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n## Day 100\n\n### [Challenge #100 - Neon Light](https://100dayscss.com/days/100/)\n\n#### [My Submission - #100 (Result Image)]()\n\n\u003e This is either the end of this challenge or the day before you start again from day one.\n\n#### [My Submission - #100 (CodePen Demo)]()\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick/Open to See Goal Images\u003c/summary\u003e\n  \u003cimg src=\"#\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://codepen.io/roydigerhund/pen/WwWPYe\"\u003eView Goal CodePen Demo\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003c/details\u003e\n\n\u003ca id=\"contact-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e📬 Contact Information\u003c/h2\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cblockquote\u003e\n\u003cimg src=\"https://github.com/itsjordanmuller.png\" width=\"160px\"/\u003e\u003cbr\u003e\n\u003cem\u003eIf you have questions/feedback, I would love to hear from you. Thanks for stopping by! - \u003cstrong\u003eJordan Muller\u003c/strong\u003e\u003c/em\u003e\n\n\u003c/blockquote\u003e\n\n[![LinkedIn](https://img.shields.io/badge/connect%20on%20linkedin-@itsjordanmuller-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/itsjordanmuller)\n[![Email Address](https://custom-icon-badges.demolab.com/badge/e--mail%20me-itsjordanmuller@gmail.com-red?style=for-the-badge\u0026logo=mention\u0026logoColor=white)](mailto:itsjordanmuller@gmail.com)\n[![Portfolio Website](https://custom-icon-badges.demolab.com/badge/Portfolio%20Website-www.jordanmuller.com-a61168?style=for-the-badge\u0026logoColor=white\u0026logo=globe)](https://jordanmuller.com/)\n\n\u003c/div\u003e\n\nPlease feel free to reach out if you have any suggestions or run into any issues with viewing this project.\u003cbr\u003e\n\nI am always looking for feedback from other people! I'd be more than happy to answer any questions you may have as well as assist with getting the project working on your machine.\u003cbr\u003e\n\nBe sure to view the \u003ca href=\"#setup-section\"\u003e\u003cstrong\u003e\u003cem\u003eSetup Instructions\u003c/em\u003e\u003c/strong\u003e\u003c/a\u003e in the README, as well as any specific README files for that specific project as they contain more details and may already have the answer to your question(s)!\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003c/details\u003e\n\n\u003ca id=\"acknowledgements-section\"\u003e\u003c/a\u003e\n\u003cdetails\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e🌟 Acknowledgements\u003c/h2\u003e\u003c/summary\u003e\n\n\u003ca id=\"special-thanks\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"left\"\u003e\n\n\u003ch3\u003e💌 Special Thanks\u003c/h3\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eDear Matthias Martin,\u003c/p\u003e\n\u003cp\u003eThank you for creating such an inspiring and valuable resource for developers like myself. Your work has had a profound impact on my professional growth, and I am deeply appreciative of the effort and thought you have put into this challenge.\u003c/p\u003e\n\u003cp\u003eI learned so much while working through the 100 Challenges. There are so many ways we can utilize CSS and you opened my eyes to that fact. For that, I am eternally grateful.\u003c/p\u003e\n\u003cp\u003eSincerely,\u003cbr\u003e\u003cstrong\u003e\u003cem\u003eJordan Muller\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003c/div\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003c/details\u003e\n\n\u003ca id=\"resources-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e🔗 Links \u0026 Citations\u003c/h2\u003e\u003c/summary\u003e\n\n[100 Days CSS Challenge](https://100dayscss.com/) provided by [Matthias Martin](https://www.stichwort-m.de/) on [100dayscss.com](https://100dayscss.com/)\n\n\u003c/details\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\u003chr\u003e\n\n\u003ca id=\"license-section\"\u003e\u003c/a\u003e\n\u003cdetails open\u003e\n\u003csummary align=\"center\"\u003e\u003ch2\u003e📜 License Details\u003c/h2\u003e\u003c/summary\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e\n        \u003ca href=\"https://github.com/itsjordanmuller/50-in-50-html-css-javascript/blob/main/LICENSE.md\"\u003eLICENSE.md\u003c/a\u003e\n      \u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cblockquote\u003e\n          \u003cp\u003eThe content within this repository was created as part of a personal educational project, following the \u003ca href=\"https://100dayscss.com/\"\u003e100 Days CSS Challenge\u003c/a\u003e provided by \u003ca href=\"https://www.stichwort-m.de/\"\u003eMatthias Martin\u003c/a\u003e on \u003ca href=\"https://100dayscss.com/\"\u003e100dayscss.com\u003c/a\u003e. This repository is intended for personal use only and serves as a record of my learning progress. This repository \u0026 the content within it are not intended for commercial use, distribution, or replication. All rights to the original course content and methodologies belong to the respective copyright holders.\u003c/p\u003e\n          \u003cp\u003eTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\u003c/p\u003e\n          \u003cp\u003eCopyright © 2024 \u003ca href=\"https://jordanmuller.com/\"\u003eJordan Muller\u003c/a\u003e. All Rights Reserved.\u003c/p\u003e\n        \u003c/blockquote\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#top\"\u003e(back to top)\u003c/a\u003e\u003c/div\u003e\n\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjordanmuller%2Fcss-100-days-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjordanmuller%2Fcss-100-days-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjordanmuller%2Fcss-100-days-challenge/lists"}