├── design ├── mobile-design.jpg ├── desktop-design.jpg └── desktop-preview.jpg ├── assets ├── images │ ├── screenshot.png │ ├── favicon-32x32.png │ └── image-omelette.jpeg └── fonts │ ├── outfit │ ├── static │ │ ├── Outfit-Bold.ttf │ │ ├── Outfit-Thin.ttf │ │ ├── Outfit-Black.ttf │ │ ├── Outfit-Light.ttf │ │ ├── Outfit-Medium.ttf │ │ ├── Outfit-ExtraBold.ttf │ │ ├── Outfit-Regular.ttf │ │ ├── Outfit-SemiBold.ttf │ │ └── Outfit-ExtraLight.ttf │ ├── Outfit-VariableFont_wght.ttf │ ├── README.txt │ └── OFL.txt │ └── young-serif │ ├── YoungSerif-Regular.ttf │ └── OFL.txt ├── .gitignore ├── style-guide.md ├── README.md ├── style.css └── index.html /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/design/mobile-design.jpg -------------------------------------------------------------------------------- /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/design/desktop-preview.jpg -------------------------------------------------------------------------------- /assets/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/images/screenshot.png -------------------------------------------------------------------------------- /assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /assets/images/image-omelette.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/images/image-omelette.jpeg -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-Thin.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-Black.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-Light.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-Medium.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-ExtraBold.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-SemiBold.ttf -------------------------------------------------------------------------------- /assets/fonts/young-serif/YoungSerif-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/young-serif/YoungSerif-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/Outfit-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/Outfit-VariableFont_wght.ttf -------------------------------------------------------------------------------- /assets/fonts/outfit/static/Outfit-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JohnMwendwa/recipe-page/HEAD/assets/fonts/outfit/static/Outfit-ExtraLight.ttf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Nutmeg: hsl(14, 45%, 36%) 15 | - Dark Raspberry: hsl(332, 51%, 32%) 16 | 17 | ### Neutral 18 | 19 | - White: hsl(0, 0%, 100%) 20 | - Rose White: hsl(330, 100%, 98%) 21 | - Eggshell: hsl(30, 54%, 90%) 22 | - Light Grey: hsl(30, 18%, 87%) 23 | - Wenge Brown: hsl(30, 10%, 34%) 24 | - Dark Charcoal: hsl(24, 5%, 18%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size (paragraph): 16px 31 | 32 | ### Fonts 33 | 34 | - Family: [Young Serif](https://fonts.google.com/specimen/Young+Serif) 35 | - Weights: 400 36 | 37 | - Family: [Outfit](https://fonts.google.com/specimen/Outfit) 38 | - Weights: 400, 600, 700 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Recipe page solution 2 | 3 | This 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. 4 | 5 | ## Table of contents 6 | 7 | - [Overview](#overview) 8 | - [The challenge](#the-challenge) 9 | - [Screenshot](#screenshot) 10 | - [Links](#links) 11 | - [My process](#my-process) 12 | - [Built with](#built-with) 13 | - [What I learned](#what-i-learned) 14 | - [Author](#author) 15 | 16 | ## Overview 17 | 18 | ### Screenshot 19 | 20 | ![Project screenshot](assets/images/screenshot.png) 21 | 22 | ### Links 23 | 24 | - Solution URL: [https://github.com/JohnMwendwa/recipe-page](https://github.com/JohnMwendwa/recipe-page) 25 | - Live Site URL: [https://johnmwendwa.github.io/recipe-page/](https://johnmwendwa.github.io/recipe-page/) 26 | 27 | ## My process 28 | 29 | ### Built with 30 | 31 | - Semantic HTML5 markup 32 | - CSS custom properties 33 | - CSS Grid 34 | - Mobile-first workflow 35 | 36 | ### What I learned 37 | 38 | - Styling a table 39 | 40 | ## Author 41 | 42 | - Website - [John Mwendwa](https://johnmwendwa.vercel.app/) 43 | - Frontend Mentor - [@JohnMwendwa](https://www.frontendmentor.io/profile/JohnMwendwa) 44 | -------------------------------------------------------------------------------- /assets/fonts/outfit/README.txt: -------------------------------------------------------------------------------- 1 | Outfit Variable Font 2 | ==================== 3 | 4 | This download contains Outfit as both a variable font and static fonts. 5 | 6 | Outfit is a variable font with this axis: 7 | wght 8 | 9 | This means all the styles are contained in a single file: 10 | Outfit-VariableFont_wght.ttf 11 | 12 | If your app fully supports variable fonts, you can now pick intermediate styles 13 | that aren’t available as static fonts. Not all apps support variable fonts, and 14 | in those cases you can use the static font files for Outfit: 15 | static/Outfit-Thin.ttf 16 | static/Outfit-ExtraLight.ttf 17 | static/Outfit-Light.ttf 18 | static/Outfit-Regular.ttf 19 | static/Outfit-Medium.ttf 20 | static/Outfit-SemiBold.ttf 21 | static/Outfit-Bold.ttf 22 | static/Outfit-ExtraBold.ttf 23 | static/Outfit-Black.ttf 24 | 25 | Get started 26 | ----------- 27 | 28 | 1. Install the font files you want to use 29 | 30 | 2. Use your app's font picker to view the font family and all the 31 | available styles 32 | 33 | Learn more about variable fonts 34 | ------------------------------- 35 | 36 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 37 | https://variablefonts.typenetwork.com 38 | https://medium.com/variable-fonts 39 | 40 | In desktop apps 41 | 42 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 43 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 44 | 45 | Online 46 | 47 | https://developers.google.com/fonts/docs/getting_started 48 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 49 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 50 | 51 | Installing fonts 52 | 53 | MacOS: https://support.apple.com/en-us/HT201749 54 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 55 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 56 | 57 | Android Apps 58 | 59 | https://developers.google.com/fonts/docs/android 60 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 61 | 62 | License 63 | ------- 64 | Please read the full license text (OFL.txt) to understand the permissions, 65 | restrictions and requirements for usage, redistribution, and modification. 66 | 67 | You can use them in your products & projects – print or digital, 68 | commercial or otherwise. 69 | 70 | This isn't legal advice, please consider consulting a lawyer and see the full 71 | license for all details. 72 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --nutmeg: hsl(14, 45%, 36%); 9 | --dark-rasberry: hsl(332, 51%, 32%); 10 | --white: hsl(0, 0%, 100%); 11 | --rose-white: hsl(330, 100%, 98%); 12 | --eggshell: hsl(30, 54%, 90%); 13 | --light-gray: hsl(30, 18%, 87%); 14 | --wenge-brown: hsl(30, 10%, 34%); 15 | --dark-charcoal: hsl(24, 5%, 18%); 16 | } 17 | 18 | body { 19 | font-family: "Outfit", sans-serif; 20 | display: grid; 21 | place-content: center; 22 | background-color: var(--eggshell); 23 | min-height: 100vh; 24 | } 25 | 26 | h1, 27 | h2 { 28 | font-family: "Young Serif", serif; 29 | margin: 1.5rem 0 1rem; 30 | } 31 | 32 | h1 { 33 | font-size: 2em; 34 | font-weight: 700; 35 | } 36 | 37 | img { 38 | display: block; 39 | max-width: 100%; 40 | } 41 | 42 | main { 43 | background-color: var(--white); 44 | border-radius: 1.25rem; 45 | max-width: 70ch; 46 | } 47 | 48 | .container { 49 | padding-inline: 2rem; 50 | } 51 | 52 | .section { 53 | padding-bottom: 1.5rem; 54 | } 55 | 56 | .section h2 { 57 | color: var(--nutmeg); 58 | font-weight: 500; 59 | } 60 | 61 | section .prep__heading { 62 | color: var(--dark-rasberry); 63 | margin: 0; 64 | margin-bottom: 1rem; 65 | font-size: 1.2em; 66 | font-weight: 900; 67 | 68 | font-family: "Outfit", sans-serif; 69 | } 70 | 71 | ::marker { 72 | color: var(--nutmeg); 73 | font-weight: 900; 74 | } 75 | 76 | .section ul, 77 | ol { 78 | padding: 0 1rem; 79 | } 80 | 81 | .section li { 82 | padding: 0.5rem; 83 | } 84 | 85 | .section__preparation { 86 | background-color: var(--rose-white); 87 | padding: 1.5rem; 88 | border-radius: 1rem; 89 | } 90 | 91 | .section__preparation ul { 92 | padding-left: 1.75rem; 93 | } 94 | .section__instructions, 95 | .section__ingredients { 96 | border-bottom: 1px solid var(--light-gray); 97 | } 98 | 99 | .section__ingredients ul { 100 | list-style-type: square; 101 | } 102 | 103 | .section__instructions ol { 104 | padding-left: 1.5rem; 105 | } 106 | 107 | table { 108 | width: 100%; 109 | margin-top: 1rem; 110 | } 111 | 112 | td { 113 | padding: 0.75rem 1.5rem; 114 | border-bottom: 1px solid var(--light-gray); 115 | } 116 | td:nth-child(even) { 117 | color: var(--nutmeg); 118 | font-weight: 900; 119 | } 120 | 121 | tr:last-child td { 122 | border: none; 123 | } 124 | .attribution { 125 | font-size: 0.75rem; 126 | text-align: center; 127 | margin: 1rem 0; 128 | } 129 | .attribution a { 130 | color: hsl(228, 45%, 44%); 131 | } 132 | 133 | @media screen and (min-width: 640px) { 134 | body { 135 | padding: 8rem; 136 | } 137 | 138 | .container { 139 | padding-inline: 2.25rem; 140 | } 141 | 142 | .image__container { 143 | padding: 2.25rem 2.25rem 0; 144 | } 145 | 146 | img { 147 | border-radius: 0.75rem; 148 | } 149 | h1 { 150 | font-size: 2.5em; 151 | } 152 | h2 { 153 | font-size: 2em; 154 | } 155 | 156 | .section__preparation { 157 | padding: 1.5rem 2rem; 158 | } 159 | .attribution { 160 | font-size: 1rem; 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /assets/fonts/outfit/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /assets/fonts/young-serif/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2023 The Young Serif Project Authors (https://github.com/noirblancrouge/YoungSerif) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 17 | 18 | Frontend Mentor | Recipe page 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | An image of omelette 35 |
36 |
37 |
38 |

Simple Omelette Recipe

39 |

40 | An easy and quick dish, perfect for any meal. This classic omelette 41 | combines beaten eggs cooked to perfection, optionally filled with 42 | your choice of cheese, vegetables, or meats. 43 |

44 |
45 |
46 |

Preparation time

47 |
    48 |
  • Total: Approximately 10 minutes
  • 49 |
  • Preparation: 5 minutes
  • 50 |
  • Cooking: 5 minutes
  • 51 |
52 |
53 | 54 |
55 |

Ingredients

56 |
    57 |
  • 2-3 large eggs
  • 58 |
  • Salt, to taste
  • 59 |
  • Pepper, to taste
  • 60 |
  • 1 tablespoon of butter or oil
  • 61 |
  • 62 | Optional fillings: cheese, diced vegetables, cooked meats, herbs 63 |
  • 64 |
65 |
66 |
67 |

Instructions

68 |
    69 |
  1. 70 | Beat the eggs:In a bowl, beat the eggs with a pinch of salt 71 | and pepper until they are well mixed. You can add a tablespoon of 72 | water or milk for a fluffier texture. 73 |
  2. 74 |
  3. 75 | Heat the pan:Place a non-stick frying pan over medium heat 76 | and add butter or oil. 77 |
  4. 78 |
  5. 79 | Cook the omelette:Once the butter is melted and bubbling, 80 | pour in the eggs. Tilt the pan to ensure the eggs evenly coat the 81 | surface. 82 |
  6. 83 |
  7. 84 | Add fillings (optional):When the eggs begin to set at the 85 | edges but are still slightly runny in the middle, sprinkle your 86 | chosen fillings over one half of the omelette. 87 |
  8. 88 |
  9. 89 | Fold and serve: As the omelette continues to cook, 90 | carefully lift one edge and fold it over the fillings. Let it cook 91 | for another minute, then slide it onto a plate. 92 |
  10. 93 |
  11. 94 | Enjoy:Serve hot, with additional salt and pepper if needed. 95 |
  12. 96 |
97 |
98 |
99 |

Nutrition

100 |

101 | The table below shows nutritional values per serving without the 102 | additional fillings. 103 |

104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 |
Calories277kcal
Carbs0g
Protein20g
Fat22g
124 |
125 |
126 |
127 | 128 | 136 | 137 | 138 | --------------------------------------------------------------------------------