{"id":20771580,"url":"https://github.com/jomagene/recipice-page","last_synced_at":"2026-04-02T01:51:41.072Z","repository":{"id":252456022,"uuid":"840455866","full_name":"Jomagene/Recipice-page","owner":"Jomagene","description":"Stylish and Responsive Recipe Page","archived":false,"fork":false,"pushed_at":"2024-08-21T18:40:20.000Z","size":2318,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T07:13:09.778Z","etag":null,"topics":["flexbox","font-face","marker","media-queries"],"latest_commit_sha":null,"homepage":"https://jomagene.github.io/Recipice-page/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jomagene.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-09T18:42:26.000Z","updated_at":"2024-08-21T18:40:23.000Z","dependencies_parsed_at":"2024-08-09T22:26:26.220Z","dependency_job_id":"67f7b8bd-4600-4796-91e7-d41c9e59d9a3","html_url":"https://github.com/Jomagene/Recipice-page","commit_stats":null,"previous_names":["jomagene/recipice-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jomagene%2FRecipice-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jomagene%2FRecipice-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jomagene%2FRecipice-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jomagene%2FRecipice-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jomagene","download_url":"https://codeload.github.com/Jomagene/Recipice-page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243104135,"owners_count":20236954,"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":["flexbox","font-face","marker","media-queries"],"created_at":"2024-11-17T12:15:40.091Z","updated_at":"2025-12-26T04:17:10.399Z","avatar_url":"https://github.com/Jomagene.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Recipe Page Solution\n\nThis is a solution to the [Recipe page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My Process](#my-process)\n  - [Built With](#built-with)\n  - [What I Learned](#what-i-learned)\n  - [Continued Development](#continued-development)\n  - [Useful Resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\n## Overview\n\n### Screenshot\n\n![Screenshot of the recipe page](./screenshot.png)\n\n### Links\n\n- Solution URL: [My solution](https://www.frontendmentor.io/solutions/stylish-and-responsive-recipe-page-cXGtx2bWEY)\n- Live Site URL: [Live link](https://jomagene.github.io/Recipe-page/)\n\n## My Process\n\n### Built With\n\n- Semantic HTML5 markup\n- CSS custom properties (e.g., `@font-face`, CSS variables, utility classes)\n- Flexbox\n- Mobile-first workflow with media queries\n\n### What I Learned\n\nIn this project, I gained a deeper understanding of the following concepts:\n\n- **Font Integration:** Learned how to use `@font-face` with `font-display: swap` for better web performance.\n- **Custom List Markers:** Implemented personalized list markers using the `::before` pseudo-element in CSS.\n\nHere's a sample of code I'm proud of:\n\n```html\n\u003cfigure class=\"image-container\"\u003e\n  \u003cimg\n    src=\"./assets/images/image-omelette.jpeg\"\n    alt=\"Simple Omelette\"\n    class=\"h-full\" /\u003e\n\u003c/figure\u003e\n```\n\n```css\n@font-face {\n  font-family: \"Outfit\";\n  src: url(\"./assets/fonts/outfit/Outfit-VariableFont_wght.ttf\") format(\"truetype\");\n  font-weight: 400 600;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"Young Serif\";\n  src: url(\"./assets/fonts/young-serif/YoungSerif-Regular.ttf\") format(\"truetype\");\n  font-weight: 400 600;\n  font-display: swap;\n}\n\nul {\n  padding-bottom: 25px;\n  list-style-type: none;\n}\n\nul li::before {\n  content: \". \";\n  color: var(--rose-800);\n  margin-right: 20px;\n  font-weight: 600;\n}\n```\n\n### Continued Development\n\nIn future projects, I plan to:\n\n- Improve accessibility features, such as ARIA roles and more semantic HTML.\n\n### Useful Resources\n\n- [MDN Web Docs](https://developer.mozilla.org/) - A comprehensive resource that helped me better understand `@font-face` and CSS custom properties.\n- [CSS-Tricks](https://css-tricks.com/) - This site provided useful tips on how to improve the layout using Flexbox and media queries.\n\n## Author\n\n- Frontend Mentor - [@Jomahene](https://www.frontendmentor.io/profile/Jomagene)\n- Twitter - [@Jomagene](https://www.twitter.com/Jomagene)\n\n## Acknowledgments\n\nI would like to thank the Frontend Mentor community for providing feedback and suggestions that helped me refine our skills.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjomagene%2Frecipice-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjomagene%2Frecipice-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjomagene%2Frecipice-page/lists"}