{"id":18553515,"url":"https://github.com/quantumudit/recipe-page","last_synced_at":"2025-07-05T12:34:02.590Z","repository":{"id":254559145,"uuid":"846905529","full_name":"quantumudit/Recipe-Page","owner":"quantumudit","description":"This repository features a responsive web page for an Egg Omelette recipe. It includes details on preparation time, ingredients, cooking instructions, and nutritional values. Built with HTML5 and CSS3, leveraging Flexbox, Grid, and media queries, the design is visually appealing, easy to navigate, and optimized for all screen sizes.","archived":false,"fork":false,"pushed_at":"2024-08-24T11:27:20.000Z","size":1168,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T10:49:42.741Z","etag":null,"topics":["css","css-flexbox","css-grid","html","html-css-javascript"],"latest_commit_sha":null,"homepage":"https://quantumudit.github.io/Recipe-Page/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quantumudit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-24T09:31:53.000Z","updated_at":"2024-08-24T11:27:23.000Z","dependencies_parsed_at":"2024-08-24T10:44:34.948Z","dependency_job_id":"6bfabd64-91ce-4b9d-9942-78e6c67004e1","html_url":"https://github.com/quantumudit/Recipe-Page","commit_stats":null,"previous_names":["quantumudit/recipe-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantumudit%2FRecipe-Page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantumudit%2FRecipe-Page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantumudit%2FRecipe-Page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantumudit%2FRecipe-Page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quantumudit","download_url":"https://codeload.github.com/quantumudit/Recipe-Page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254330728,"owners_count":22053036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-flexbox","css-grid","html","html-css-javascript"],"created_at":"2024-11-06T21:17:21.516Z","updated_at":"2025-05-15T11:33:56.411Z","avatar_url":"https://github.com/quantumudit.png","language":"HTML","funding_links":["https://www.buymeacoffee.com/quantumudit","https://paypal.me/quantumudit"],"categories":[],"sub_categories":[],"readme":"# ![Project Logo][project_logo]\n\n---\n\n\u003ch4 align=\"center\"\u003eDeveloping Responsive Food Recipe Page with \u003ca href=\"https://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003eHTML\u003c/a\u003e and \u003ca href=\"https://en.wikipedia.org/wiki/Css_3\" target=\"_blank\"\u003eCSS\u003c/a\u003e and hosting it on \u003ca href=\"https://pages.github.com/\" target=\"_blank\"\u003eGitHub Pages\u003c/a\u003e\u003c/h4\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src=\"https://forthebadge.com/images/badges/built-with-love.svg\" alt=\"built-with-love\" border=\"0\"\u003e\n\u003cimg src=\"https://forthebadge.com/images/badges/powered-by-coffee.svg\" alt=\"powered-by-coffee\" border=\"0\"\u003e\n\u003cimg src=\"https://forthebadge.com/images/badges/cc-nc-sa.svg\" alt=\"cc-nc-sa\" border=\"0\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#overview\"\u003eOverview\u003c/a\u003e •\n  \u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e •\n  \u003ca href=\"#hosting\"\u003eHosting\u003c/a\u003e •\n  \u003ca href=\"#support\"\u003eSupport\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n## Overview\n\nThis project focuses on designing and developing a responsive web page dedicated to an Egg Omelette recipe. The page is visually engaging, user-friendly, and adapts seamlessly to various screen sizes.\n\nThe web page provides comprehensive details on preparation time, required ingredients, step-by-step cooking instructions, and nutritional information for the Egg Omelette recipe, making it easy for users to follow.\n\nBuilt with responsive design principles, the page ensures a smooth and optimized experience across all devices, including desktops, tablets, and smartphones. Regardless of the device, users can easily access and enjoy the content.\n\n\u003e This is a solution to the [Recipe Page Challenge](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm). Frontend Mentor challenges helps improving coding skills by building realistic projects.\n\n### Snapshots\n\nBelow is a preview of the Egg Omelette recipe web page, showcasing its layout and design:\n\n\u003cp align='center'\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"./resources/website_preview.jpg\" alt=\"website-snippet\" style=\"0\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Links\n\n-   Live Site URL: [Recipe Page][website_link]\n-   Frontend Mentor Solution URL: [Challenge Solution Page][frontend_mentor_link]\n\n### Repository Structure\n\nThe project repository exhibits the following structure:\n\n```\nRecipe-Page/\n├── 📁css/\n│   ├── 🎨style.css\n├── 📁images\n├── 📁resources\n├── 🌐index.html\n├── 📜.gitignore\n├── 🔑LICENSE\n└── 📝README.md\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\n   \u003cstrong\u003e💡 Repository Structure Details\u003c/strong\u003e\n\u003c/summary\u003e\n\u003cbr\u003e\n\nTo help you navigate through the project, here’s a concise guide to the repository’s structure, detailing what each directory contains and its purpose within the project:\n\n-   **`📁css/`**\n    -   **`🎨style.css`** - The main stylesheet that controls the look and feel of the entire website\n-   **`📁images`** - Stores images, graphics, and favicons used directly on the website\n-   **`📁resources`** - Holds additional resources like images or documents utilized in the project\n-   **`🌐index.html`** - The main HTML file that structures the web page and presents the content\n-   **`📜.gitignore`** - Specifies intentionally untracked files to ignore.\n-   **`🔑LICENSE`** - The license outlining the usage rights and permissions for this project\n-   **`📝README.md`** - The introductory documentation for the project\n\n\u003c/details\u003e\n\n## Prerequisites\n\n### Tech Stack Prerequisites\n\n![html] ![css]\n\nTo effectively engage with this project, possessing a robust understanding of the skills listed below is advisable:\n\n-   Proficiency in HTML5\n-   Expertise in CSS3, including concepts like Flexbox, Grid layout, and Media Queries\n-   Familiarity with responsive design principles and color theory\n\nThese competencies will facilitate a seamless and productive journey throughout the project.\n\n### Development Environment Prerequisites\n\n![VS_code] ![Notepad_plus_plus] ![Obsidian] ![Figma] ![Clickup]\n\nApplication selection and setup may vary based on individual preferences and system setups.\n\nThe development tools I've employed for this project are:\n\n-   **VS Code**: Employed for writing and editing code\n-   **Notepad++**: Served as an auxiliary code editor\n-   **Obsidian**: Utilized for documenting project notes\n-   **Figma**: Used for UI/UX designing and design reference\n-   **Click Up**: Employed for overseeing project tasks\n\n## Hosting\n\n![GitHub_Pages] ![Frontend_Mentor]\n\nThe Egg Omelette recipe page is currently live and hosted on **GitHub Pages**, making it easily accessible for anyone interested. You can explore the fully responsive web page at the following URL: **[Recipe Page][website_link]**.\n\nAdditionally, my submission for this project is also available on **[Frontend Mentor][frontend_mentor_link]**, where you can view feedback and community interaction regarding the design and development process.\n\n## Support\n\nShould you wish to inquire, offer feedback, or propose ideas, don’t hesitate to contact me via the channels listed below:\n\n[![Linkedin Badge][linkedinbadge]][linkedin] [![Twitter Badge][twitterbadge]][twitter] [![Gmail Badge][gmailbadge]][gmail]\n\nDiscover and engage with my content on these platforms:\n\n[![Linktree Badge][linktreebadge]][linktree] [![Youtube Badge][youtubebadge]][youtube] [![GitHub Badge][githubbadge]][github] [![Medium Badge][mediumbadge]][medium] [![Substack Badge][substackbadge]][substack]\n\nTo express your support for my work, consider [buying me a coffee][buymeacoffee] or, [donate through Paypal][paypal]\n\n[![Buy Me a Coffee][buymeacoffeebadge]][buymeacoffee] [![Paypal][paypalbadge]][paypal]\n\n## License\n\n\u003ca href = 'https://creativecommons.org/licenses/by-nc-sa/4.0/' target=\"_blank\"\u003e\n    \u003cimg src=\"https://i.ibb.co/mvmWGkm/by-nc-sa.png\" alt=\"by-nc-sa\" border=\"0\" width=\"88\" height=\"31\"\u003e\n\u003c/a\u003e\n\nThis license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.\n\n---\n\n\u003cp align='center'\u003e\n  \u003ca href=\"https://topmate.io/quantumudit\"\u003e\n    \u003cimg src=\"https://github.com/quantumudit/Spend-Estimator/assets/54057814/8e5485b9-4777-487b-9677-9d531cef0169\" alt=\"topmate-udit\" style=\"0\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003c!-- Image Links --\u003e\n\n[project_logo]: ./resources/project_cover_image.png\n\n\u003c!-- Project Specific Links --\u003e\n\n[frontend_mentor_link]: https://www.frontendmentor.io/solutions/responsive-recipe-page-NLjn68ARvA\n[website_link]: https://quantumudit.github.io/Recipe-Page/\n\n\u003c!-- Profile Links --\u003e\n\n[linkedin]: https://www.linkedin.com/in/quantumudit/\n[twitter]: https://twitter.com/quantumudit\n[medium]: https://medium.com/@quantumudit\n[linktree]: https://linktr.ee/quantumudit\n[youtube]: https://www.youtube.com/@quantumudit\n[github]: https://github.com/quantumudit/\n[substack]: https://substack.com/\n[gmail]: quantumudit@gmail.com\n\n\u003c!-- Payment Profile Links --\u003e\n\n[buymeacoffee]: https://www.buymeacoffee.com/quantumudit\n[paypal]: https://paypal.me/quantumudit\n\n\u003c!-- Shields Profile Links --\u003e\n\n[linkedinbadge]: https://img.shields.io/badge/-uditkumarchatterjee-0e76a8?style=flat\u0026labelColor=0e76a8\u0026logo=linkedin\u0026logoColor=white\n[twitterbadge]: https://img.shields.io/badge/-quantumudit-000000?style=flat\u0026labelColor=000000\u0026logo=x\u0026logoColor=white\n[gmailbadge]: https://img.shields.io/badge/quantumudit@gmail.com-D14836?style=flat\u0026logo=gmail\u0026logoColor=white\n[mediumbadge]: https://img.shields.io/badge/Medium-02b875?style=for-the-badge\u0026logo=medium\u0026logoColor=white\n[linktreebadge]: https://img.shields.io/badge/Linktree-1de9b6?style=for-the-badge\u0026logo=linktree\u0026logoColor=white\n[youtubebadge]: https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge\u0026logo=YouTube\u0026logoColor=white\n[substackbadge]: https://img.shields.io/badge/Substack-%23006f5c.svg?style=for-the-badge\u0026logo=substack\u0026logoColor=FF6719\n[githubbadge]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\n\n\u003c!-- Shields Payment Links --\u003e\n\n[buymeacoffeebadge]: https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black\n[paypalbadge]: https://img.shields.io/badge/PayPal-00457C?style=for-the-badge\u0026logo=paypal\u0026logoColor=white\n\n\u003c!-- Shields Tech stack Links --\u003e\n\n[HTML]: https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white\n[CSS]: https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white\n[Github_Pages]: https://img.shields.io/badge/GitHub%20Pages-222222.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\n[Frontend_Mentor]: https://img.shields.io/badge/Frontend%20Mentor-3F54A3.svg?style=for-the-badge\u0026logo=frontendmentor\u0026logoColor=white\n[VS_code]: https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white\n[Notepad_plus_plus]: https://img.shields.io/badge/Notepad++-90E59A.svg?style=for-the-badge\u0026logo=notepad%2b%2b\u0026logoColor=black\n[Figma]: https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge\u0026logo=figma\u0026logoColor=white\n[Obsidian]: https://img.shields.io/badge/Obsidian-%23483699.svg?style=for-the-badge\u0026logo=obsidian\u0026logoColor=white\n[Clickup]: https://img.shields.io/badge/-Click%20Up-7B68EE?style=for-the-badge\u0026labelColor=7B68EE\u0026logo=clickup\u0026logoColor=white\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantumudit%2Frecipe-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquantumudit%2Frecipe-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantumudit%2Frecipe-page/lists"}