From 9de361d8d774b073ad34d8e5700e76cd7681a3f8 Mon Sep 17 00:00:00 2001 From: yuzu-eva Date: Tue, 21 Mar 2023 12:24:44 +0100 Subject: added more images, restyled home page --- static/about.html | 18 +++-- static/recipes/omurice.html | 12 +++- static/recipes/overview.html | 30 ++++---- static/recipes/oyakodon.html | 140 +++++++++++++++++++------------------ static/recipes/pizza.html | 160 +++++++++++++++++++++++-------------------- static/style.css | 62 ++++++++++++++--- 6 files changed, 248 insertions(+), 174 deletions(-) (limited to 'static') diff --git a/static/about.html b/static/about.html index 6e0fc82..aa8ed48 100644 --- a/static/about.html +++ b/static/about.html @@ -30,12 +30,20 @@

About this Website

-
- - This website will contain all projects related to The - Odin Project online course. - +
+
+ + This website will contain all projects related to The + Odin Project online course. + +
+ +
+
+

Bottom Text

+
+
diff --git a/static/recipes/omurice.html b/static/recipes/omurice.html index 170c00d..2f00c83 100644 --- a/static/recipes/omurice.html +++ b/static/recipes/omurice.html @@ -31,8 +31,8 @@

My Omurice Recipe

-
-
+
+

Description

This is my take on Omurice, a popular japanese chicken fried rice dish with an omelette on top. @@ -103,11 +103,17 @@

-
+
An image of oyakodon.
+ +
+
+

Bottom Text

+
+
diff --git a/static/recipes/overview.html b/static/recipes/overview.html index 33b0fb2..6ccf1c7 100644 --- a/static/recipes/overview.html +++ b/static/recipes/overview.html @@ -32,20 +32,24 @@
-
- -
+
+ +
+
+

Bottom Text

+
+
diff --git a/static/recipes/oyakodon.html b/static/recipes/oyakodon.html index b8a24c0..a3e3ba4 100644 --- a/static/recipes/oyakodon.html +++ b/static/recipes/oyakodon.html @@ -31,75 +31,83 @@

My Oyakodon Recipe

-
-
-

Description

-

- This is my take on Oyakodon, a japanese chicken and egg rice bowl. -

- -

Ingredients

-
    -
  • 100g Chicken Thigh
    • -
  • 30g Soy Sauce
    • -
  • 30g Mirin
    • -
  • 30g Sake
    • -
  • 100g Dashi Stock
    • -
  • Half an Onion
    • -
  • 1 Spring Onion
    • -
  • Half a Bowl of Rice
    • -
  • 1 Whole Egg
    • -
  • Optional: 1 Egg Yolk
    • -
- -

Instructions

-
    -
  1. -

    - Cut half an onion from tip to root into strips. - Cut the chicken thigh into bite-sized pieces. - Thinly cut the spring onion as garnish for later. -

    -
    2. -
  2. -

    - Fry the chicken over medium heat until the outside is beginning to brown. -

    -
    3. -
  3. -

    - Add the soy sauce, mirin, sake and dashi stock into the pan. - At this point, also add the cut onion. - Cover with a lid and let it simmer for 5 minutes. -

    -
    4. -
  4. -

    - Lightly mix the egg in a bowl. - Add half of the egg into the pan, cover and let it simmer for half a minute. -

    -
    5. -
  5. -

    - After half a minute, add the rest of the egg and some of the spring onion.
    - Let it simmer for an additional minute. -

    -
    6. -
  6. -

    - Pour everything in the pan over the bowl of rice. - Add the rest of the spring onion on top. - If raw eggs are safe to eat where you live, you can add an egg yolk on top. -

    -
    7. -
-
- -
- An image of oyakodon. +
+
+
+

Description

+

+ This is my take on Oyakodon, a japanese chicken and egg rice bowl. +

+ +

Ingredients

+
    +
  • 100g Chicken Thigh
    • +
  • 30g Soy Sauce
    • +
  • 30g Mirin
    • +
  • 30g Sake
    • +
  • 100g Dashi Stock
    • +
  • Half an Onion
    • +
  • 1 Spring Onion
    • +
  • Half a Bowl of Rice
    • +
  • 1 Whole Egg
    • +
  • Optional: 1 Egg Yolk
    • +
+ +

Instructions

+
    +
  1. +

    + Cut half an onion from tip to root into strips. + Cut the chicken thigh into bite-sized pieces. + Thinly cut the spring onion as garnish for later. +

    +
    2. +
  2. +

    + Fry the chicken over medium heat until the outside is beginning to brown. +

    +
    3. +
  3. +

    + Add the soy sauce, mirin, sake and dashi stock into the pan. + At this point, also add the cut onion. + Cover with a lid and let it simmer for 5 minutes. +

    +
    4. +
  4. +

    + Lightly mix the egg in a bowl. + Add half of the egg into the pan, cover and let it simmer for half a minute. +

    +
    5. +
  5. +

    + After half a minute, add the rest of the egg and some of the spring onion.
    + Let it simmer for an additional minute. +

    +
    6. +
  6. +

    + Pour everything in the pan over the bowl of rice. + Add the rest of the spring onion on top. + If raw eggs are safe to eat where you live, you can add an egg yolk on top. +

    +
    7. +
+
+ +
+ An image of oyakodon. +
+ +
+
+

Bottom Text

+
+
diff --git a/static/recipes/pizza.html b/static/recipes/pizza.html index 663ecd2..b503959 100644 --- a/static/recipes/pizza.html +++ b/static/recipes/pizza.html @@ -31,85 +31,93 @@

My Pizza Recipe

-
-
-

Description

-

- This is my take on a classic margherita pizza.
- We will make our own pizza dough and sauce! -

- -

Ingredients

-
    -
  • 500g Flour
    • -
  • 325g Water
    • -
  • 10g Salt
    • -
  • 7g Active Dry Yeast
    • -
  • 400g Canned Tomatoes (~1 Can)
    • -
  • 100g Mozzarella
    • -
- -

Instructions

-
    -
  1. -

    - Mix all dry ingredients in a bowl. -

    -
    2. -
  2. -

    - Add the water and knead the dough until no dry flour is left. -

    -
    3. -
  3. -

    - Cover the bowl and let it rest a couple hours, until doubled in size. - You can also let it rest overnight. -

    -
    4. -
  4. -

    - Once the dough has finished resting, take it out of the bowl onto your working surface - and knead it a bit more, about 2-3 minutes. -

    -
    5. -
  5. -

    - Divide the dough into four equally sized portions. Take one portion and lightly cover it - with a damp towel to let it rest for an additional hour. - You can put the other portions into the fridge or freezer. - While the dough is resting one final time, preheat your oven as high as it can go.
    -

    -
    6. -
  6. -

    - Meanwhile, it's time to make the pizza sauce. - For this, I usually just use canned tomatoes. You can use - your hands to crush them or puree it with a stick blender. - Add some salt and pepper to your liking. - If you're feeling fancy, you can add oregano and thyme, - or any other additional seasonings you like.
    - This makes enough sauce for multiple pizzas. You can also use it for pasta. -

    -
    7. -
  7. -

    - Stretch out the dough as big as you can. - Put the sauce and mozzarella on top. I like to rip the mozzarella by hand. - Then the pizza goes into the oven for about 7-10 minutes, - depending how hot you oven can go. - Once the mozzarella starts bubbling and is a nice golden - brown it's done! -

    -
    8. -
-
- -
- An image of a classic margherita pizza. +
+
+
+

Description

+

+ This is my take on a classic margherita pizza.
+ We will make our own pizza dough and sauce! +

+ +

Ingredients

+
    +
  • 500g Flour
    • +
  • 325g Water
    • +
  • 10g Salt
    • +
  • 7g Active Dry Yeast
    • +
  • 400g Canned Tomatoes (~1 Can)
    • +
  • 100g Mozzarella
    • +
+ +

Instructions

+
    +
  1. +

    + Mix all dry ingredients in a bowl. +

    +
    2. +
  2. +

    + Add the water and knead the dough until no dry flour is left. +

    +
    3. +
  3. +

    + Cover the bowl and let it rest a couple hours, until doubled in size. + You can also let it rest overnight. +

    +
    4. +
  4. +

    + Once the dough has finished resting, take it out of the bowl onto your working surface + and knead it a bit more, about 2-3 minutes. +

    +
    5. +
  5. +

    + Divide the dough into four equally sized portions. Take one portion and lightly cover it + with a damp towel to let it rest for an additional hour. + You can put the other portions into the fridge or freezer. + While the dough is resting one final time, preheat your oven as high as it can go.
    +

    +
    6. +
  6. +

    + Meanwhile, it's time to make the pizza sauce. + For this, I usually just use canned tomatoes. You can use + your hands to crush them or puree it with a stick blender. + Add some salt and pepper to your liking. + If you're feeling fancy, you can add oregano and thyme, + or any other additional seasonings you like.
    + This makes enough sauce for multiple pizzas. You can also use it for pasta. +

    +
    7. +
  7. +

    + Stretch out the dough as big as you can. + Put the sauce and mozzarella on top. I like to rip the mozzarella by hand. + Then the pizza goes into the oven for about 7-10 minutes, + depending how hot you oven can go. + Once the mozzarella starts bubbling and is a nice golden + brown it's done! +

    +
    8. +
+
+ +
+ An image of a classic margherita pizza. +
+ +
+
+

Bottom Text

+
+
diff --git a/static/style.css b/static/style.css index 9824d4c..2b3aef9 100644 --- a/static/style.css +++ b/static/style.css @@ -13,18 +13,42 @@ body { header { text-align: center; - color: white; } main { min-height: 100%; } -#wrapper-center { +.top-gap { + padding-top: 3%; +} + +.bottom-gap { + padding-bottom: 3%; +} + +.wrapper-space, +.wrapper-centered, +.flex-stack { display: flex; +} + +.wrapper-space { + justify-content: space-between; +} + +.wrapper-centered { justify-content: center; } +.align-center { + align-items: center; +} + +.flex-stack { + flex-direction: column; +} + main, #headerwrapper { background-color: #fafafa; color: black; @@ -36,6 +60,10 @@ main, #headerwrapper { padding-bottom: 2%; } +.text-centered { + text-align: center; +} + nav ul { margin: 0; padding: 0; @@ -53,31 +81,43 @@ nav a { color: white; } -#lists { +footer p { + display: block; + color: white; + margin: 7px; +} + +.lists { margin-left: 2%; flex: 1; } -#img-wrapper { - text-align: right; +img { + max-width: 100%; +} + +.img-wrapper { margin-right: 2%; margin-left: 2%; - flex: 1; + flex: 0.5; } -img { - max-height: 400px; - max-width: 400px; +.img-right { + text-align: right; } -#recipe-list { +.recipe-list { float: left; padding-left: 38%; list-style-type: none; } -#recipe-item { +.recipe-item { padding: 5px; font-size: 26px; } + +div.flex-stack.top-gap { + background-color: #a0a0a0; +} -- cgit v1.2.3