diff --git a/public/index.html b/public/index.html index cfcfb9c..579c10f 100644 --- a/public/index.html +++ b/public/index.html @@ -5,73 +5,124 @@ + Frontend Mentor | Recipe page - Simple Omelette Recipe +
+ an omeletter on curved edge plate +
- An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked - to perfection, optionally filled with your choice of cheese, vegetables, or meats. +
+
+

Simple Omelette Recipe

+

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

+
- Preparation time +
+

Preparation time

- Total: Approximately 10 minutes - Preparation: 5 minutes - Cooking: 5 minutes + +
+
+

Ingredients

- Ingredients + +
- 2-3 large eggs - Salt, to taste - Pepper, to taste - 1 tablespoon of butter or oil - Optional fillings: cheese, diced vegetables, cooked meats, herbs +
+

Instructions

- Instructions +
    +
  1. +

    Beat the eggs

    : In a bowl, beat the eggs with a pinch of salt and pepper + until they are well mixed. You can add a tablespoon of water or milk for + a fluffier texture. +
    2. - Beat the eggs: In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. - You can add a tablespoon of water or milk for a fluffier texture. +
  2. +

    Heat the pan

    : Place a non-stick frying pan over medium heat and add + butter or oil. +
    3. - Heat the pan: Place a non-stick frying pan over medium heat and add butter or oil. +
  3. +

    Cook the omelette

    : Once the butter is melted and bubbling, pour in the + eggs. Tilt the pan to ensure the eggs evenly coat the surface. +
    4. - Cook the omelette: Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to ensure - the eggs evenly coat the surface. +
  4. +

    Add fillings (optional)

    : When the eggs begin to set at the edges but are + still slightly runny in the middle, sprinkle your chosen fillings over one + half of the omelette. +
    5. - Add fillings (optional): When the eggs begin to set at the edges but are still slightly runny in the - middle, sprinkle your chosen fillings over one half of the omelette. +
  5. +

    Fold and serve

    : As the omelette continues to cook, carefully lift one edge + and fold it over the fillings. Let it cook for another minute, then slide + it onto a plate. +
    6. - Fold and serve: As the omelette continues to cook, carefully lift one edge and fold it over the - fillings. Let it cook for another minute, then slide it onto a plate. +
  6. +

    Enjoy

    : Serve hot, with additional salt and pepper if needed. +
    7. +
+
- Enjoy: Serve hot, with additional salt and pepper if needed. +
+

Nutrition

- Nutrition +

+ The table below shows nutritional values per serving without the + additional fillings. +

- The table below shows nutritional values per serving without the additional fillings. + + + + + + + + + + + + + + + + + + + +
Calories277kcal
Carbs0g
Protein20g
Fat22g
+
+
- Calories - 277kcal - - Carbs - 0g - - Protein - 20g - - Fat - 22g - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
+ - \ No newline at end of file + diff --git a/public/styles/main.css b/public/styles/main.css new file mode 100644 index 0000000..614d3c9 --- /dev/null +++ b/public/styles/main.css @@ -0,0 +1,234 @@ +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap'); + +/* Style Guide */ + +/* ## Layout */ + +/* The designs were created to the following widths: */ + +/* - Mobile: 375px */ +/* - Desktop: 1440px */ + +/* ## Colors */ + +/* ### Primary */ + +/* - Nutmeg: hsl(14, 45%, 36%) */ +/* - Dark Raspberry: hsl(332, 51%, 32%) */ + +/* ### Neutral */ + +/* - White: hsl(0, 0%, 100%) */ +/* - Rose White: hsl(330, 100%, 98%) */ +/* - Eggshell: hsl(30, 54%, 90%) */ +/* - Light Grey: hsl(30, 18%, 87%) */ +/* - Wenge Brown: hsl(30, 10%, 34%) */ +/* - Dark Charcoal: hsl(24, 5%, 18%) */ + +/* ## Typography */ + +/* ### Body Copy */ + +/* - Font size (paragraph): 16px */ + +/* ### Fonts */ + +/* - Family: [Young Serif](https://fonts.google.com/specimen/Young+Serif) */ +/* - Weights: 400 */ + +/* - Family: [Outfit](https://fonts.google.com/specimen/Outfit) */ +/* - Weights: 400, 600, 700 */ + +:root { + --nutmeg: hsl(14, 45%, 36%); + --dark_raspberry: hsl(332, 51%, 32%); + + --white: hsl(0, 0%, 100%); + --rose_white: hsl(330, 100%, 98%); + --eggshell: hsl(30, 54%, 90%); + --light_grey: hsl(30, 18%, 87%); + --wenge_brown: hsl(30, 10%, 34%); + --dark_charcoal: hsl(24, 5%, 18%); +} + +/* @font-face { */ +/* src: url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap'); */ +/* font-family: YoungSerif; */ +/* } */ + +/* @font-face { */ +/* src: url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap'); */ +/* font-family: Outfit; */ +/* } */ + + +/* makes sizing simpler */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* remove default spacing */ +/* force styling of type through styling, rather than elements */ +* { + margin: 0; + padding: 0; + font: inherit; + border: 0; + list-style: none; + text-decoration: none; + border: none; +} + +/* min body height */ +body { + min-height: 100vh; + font-size: 16px; + margin: auto; +} + +/* responsive images/videos */ +img, +picture, +svg, +video { + display: block; + max-width: 100%; +} + +.header { + width: 100%; +} + +.main { + margin: 1.5rem; + font-family: Outfit; + color: var(--wenge_brown); +} + +.main-hdg-1 { + font-size: 2rem; + font-family: "Young Serif"; + line-height: 2rem; +} + +.main-hdg-2 { + color: var(--dark_raspberry); + font-size: 1.8rem; + font-family: "Young Serif"; +} + +.main-hdg-3 { + color: var(--dark_raspberry); + font-size: 1.2rem; + font-weight: 700; +} + +.main-intro p { + margin: 2rem auto; +} + +.main-prep { + background-color: var(--rose_white); + padding: 2rem; + border-radius: 12px; + line-height: 2rem; + margin: 0.6rem; +} + +h4 { + display: inline; + font-weight: 700; +} + +.main-prep li { + list-style: disc inside; +} + +.main-ingredients { + margin-top: 1.8rem; +} + +.main-ingredients ul { + padding-left: 1.6rem; + border-bottom: 1px solid var(--light_grey); +} +.main-ingredients li { + list-style: disc outside; + margin: 1rem auto; +} + +.main-instructions { + margin-top: 2rem; + border-bottom: 1px solid var(--light_grey); +} + +.main-instructions ol { + padding-left: 1.6rem; +} + +.main-instructions li { + list-style: decimal outside; + margin: 1.2rem auto; +} + +.main-nutrition { + margin-top: 1.8rem; +} + +.main-nutrition p { + margin: 1.2rem auto; +} + +.main-nutrition-table { + margin: 1.4rem 2rem; +} + +.main-nutrition-trow { + width: 80vw; + line-height: 2rem; + border-bottom: 8px solid var(--light_grey); +} + +.item, +.value { + width: 30vw; +} + +.value { + font-weight: 700; + color: var(--dark_raspberry); +} + + +.attribution { + margin-top: 1.2rem; + font-size: 11px; + text-align: center; + padding-bottom: 1rem; +} + +.attribution a { + color: hsl(228, 45%, 44%); +} + +@media only screen and (min-width: 980px) { + html { + /* max-width: 1440px; */ + background-color: var(--eggshell); + } + body { + width: 50vw; + margin: 1rem auto; + background-color: var(--white); + padding: 1.4rem; + border-radius: 12px; + } + .header { + width: 100%; + } + .header-img { + border-radius: 12px; + } +}