All solutions

Hello Frontend Mentor community!

I'm excited to share my solution to the Pricing component with toggle challenge. This project challenged me to create a responsive pricing component that adapts to different screen sizes and allows users to control the toggle using both mouse/trackpad and keyboard inputs. Leveraging the power of Angular as my JS framework, I utilized semantic HTML5 markup and flexbox to achieve a clean and functional design. I invite you to explore my solution on the live site and check out the code in the repository. Your feedback and insights are always appreciated as I continue to refine and enhance my coding skills. Thank you, Frontend Mentor, for providing such engaging challenges to help us grow as developers!

In this responsive landing page challenge, I used Tailwind CSS framework for responsive design alongside with Angular 16 in a standalone application standalone application. I used also Angular Font Awesome.

The project was pretty simple. I tried to not hard code everything in the template; I convert the array of summary items provided in the data.json file into an observable and I subscribed to it at the level of the template using async pipe and loop over the items using ngFor. For responsive design, Tailwind follows already a mobile first approach which make it easy to build complex responsive layouts according to different breakpoints.